/* ============================================================
   Webový designer — EDITORIAL "WOW" PREMIUM
   off-white · Clash Display · accent #4070F8 · cinematic scroll
   ============================================================ */

/* View Transitions — cinematic cross-page navigation (Chrome/Edge/Safari 18+) */
@view-transition { navigation: auto; }

/* Stará stránka se „rozptýlí" — rozostří, mírně přiblíží a zmizí */
::view-transition-old(root) {
  animation: vtDisperse .42s var(--ease2) forwards;
}
/* Nová stránka se zaostří z rozostření a jemně dosedne */
::view-transition-new(root) {
  animation: vtFocus .62s var(--ease) .06s both;
}
@keyframes vtDisperse {
  to { opacity: 0; filter: blur(16px) saturate(1.3); transform: scale(1.05); }
}
@keyframes vtFocus {
  0%   { opacity: 0; filter: blur(22px); transform: scale(1.07) translateY(10px); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: none; }
}

/* Navigace a patička zůstávají stabilní — nemizí s obsahem, působí to jako aplikace */
.nav    { view-transition-name: site-nav; }
.footer { view-transition-name: site-footer; }
::view-transition-old(site-nav), ::view-transition-new(site-nav),
::view-transition-old(site-footer), ::view-transition-new(site-footer) {
  animation: vtHold .45s var(--ease) both;
}
@keyframes vtHold { from { opacity: .4; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: vtFadeSimple .25s ease both; }
  @keyframes vtFadeSimple { from { opacity: .4; } to { opacity: 1; } }
}

:root {
  --accent:      #3a6bff;
  --accent-dk:   #244fe0;
  --accent-soft: #e9eeff;
  --accent-line: #d3deff;

  --bg:      #ffffff;
  --bg-2:    #f4f3ef;
  --card:    #ffffff;
  --ink:     #0a0e1a;
  --ink-soft:#333a4d;
  --muted:   #52566a;
  --line:    #e8e6e0;
  --dark:    #080b16;

  --radius:    22px;
  --radius-sm: 14px;
  --shadow-sm: 0 6px 22px -12px rgba(10, 14, 26, .28);
  --shadow:    0 28px 64px -36px rgba(10, 14, 26, .34);
  --shadow-lg: 0 60px 120px -52px rgba(10, 14, 26, .46);

  --container: 1220px;
  --ease:   cubic-bezier(.16, 1, .3, 1);
  --ease2:  cubic-bezier(.65, 0, .35, 1);

  --serif: 'Clash Display', 'Sora', sans-serif;
  --sans:  'Satoshi', 'Inter', system-ui, sans-serif;
  font-family: var(--sans);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); line-height: 1.65; font-size: 17.5px; font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; line-height: 1.05; letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
address { font-style: normal; }
::selection { background: var(--accent); color: #fff; }
.blue { color: var(--accent); }

/* ---------- Intro reveal ---------- */
.intro { position: fixed; inset: 0; z-index: 10000; background: var(--dark); display: grid; place-items: center; transition: transform 1s var(--ease2); }
.intro__word { font: 600 clamp(1.8rem, 6vw, 3.4rem) var(--serif); color: #fff; letter-spacing: -.03em; opacity: 0; transform: translateY(18px); }
.intro__word b { color: var(--accent); font-weight: 600; }
.js .intro__word { animation: introWord .8s var(--ease) .15s forwards; }
.intro.is-done { transform: translateY(-101%); }
@keyframes introWord { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- Grain ---------- */
.grain { position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Layout ---------- */
.container { width: min(100% - 3rem, var(--container)); margin-inline: auto; }
.section { padding: clamp(4.5rem, 10vw, 9rem) 0; position: relative; }
.section--tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--soft { background: var(--bg-2); }
.center { text-align: center; margin-top: 3.4rem; }

.section__head { max-width: 820px; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.section__head h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 600; line-height: 1.04; }
.section__head p { color: var(--ink-soft); font-size: 1.12rem; margin-top: 1.3rem; max-width: 58ch; }
.section__head strong { color: var(--ink); font-weight: 500; }
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; font: 500 .8rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.6rem; }
.eyebrow i { font-style: normal; font-family: var(--serif); font-weight: 600; color: var(--accent); letter-spacing: 0; font-size: .95rem; padding-right: .7rem; border-right: 1px solid var(--line); }
.head-underline { display: block; width: 60px; height: 3px; border-radius: 3px; background: var(--accent); }
.head-underline--sm { margin: 1.1rem 0 1.4rem; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1.05rem 2.1rem; font: 500 1.04rem var(--serif); border-radius: 100px; border: 1.5px solid transparent; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s; white-space: nowrap; will-change: transform; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 18px 36px -16px rgba(58,107,255,.7); }
.btn--primary:hover { background: var(--accent-dk); box-shadow: 0 26px 50px -18px rgba(58,107,255,.85); }
.btn--lg { padding: 1.2rem 2.9rem; font-size: 1.14rem; }
.btn--block { display: flex; width: 100%; }
.btn--link { background: none; color: var(--ink); padding: .6rem .2rem; font-weight: 500; }
.btn--link::after { content: ""; position: absolute; left: .2rem; right: .2rem; bottom: .35rem; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.btn--link:hover { color: var(--accent); }
.btn--link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 1000; transition: width .08s linear; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.72); backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: border-color .35s, box-shadow .35s, background .35s; }
.nav.is-scrolled { border-color: var(--line); box-shadow: 0 12px 44px -30px rgba(0,0,0,.45); background: rgba(255,255,255,.94); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 1rem; transition: min-height .35s var(--ease); }
.nav.is-scrolled .nav__inner { min-height: 66px; }
.brand__logo { height: 38px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a:not(.nav__cta) { position: relative; font-weight: 500; font-size: .96rem; color: var(--ink-soft); transition: color .2s; }
.nav__links a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav__links a:not(.nav__cta):hover { color: var(--ink); }
.nav__links a:not(.nav__cta):hover::after,
.nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-active { color: var(--ink); }
.nav__flag { height: 20px; border-radius: 3px; }
.nav__cta { background: var(--ink); color: #fff !important; padding: .68rem 1.5rem; border-radius: 100px; font: 500 .95rem var(--serif); transition: transform .25s var(--ease), background .2s; }
.nav__cta:hover { transform: translateY(-2px); background: var(--accent); }
.nav__toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; background: none; border: 0; align-items: center; justify-content: center; }
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.blob--1 { width: 540px; height: 540px; top: -160px; right: -120px; background: radial-gradient(circle, rgba(58,107,255,.30), transparent 65%); animation: float1 14s ease-in-out infinite; }
.blob--2 { width: 440px; height: 440px; bottom: -200px; left: -140px; background: radial-gradient(circle, rgba(58,107,255,.14), transparent 65%); animation: float2 18s ease-in-out infinite; }
@keyframes float1 { 50% { transform: translate(-40px, 40px) scale(1.1); } }
@keyframes float2 { 50% { transform: translate(50px, -30px) scale(1.08); } }
.hero__grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__rating { display: inline-flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--ink-soft); font-weight: 500; margin-bottom: 1.8rem; background: var(--card); border: 1px solid var(--line); padding: .5rem 1.05rem; border-radius: 100px; box-shadow: var(--shadow-sm); }
.hero__rating .stars { color: #ffb020; letter-spacing: 1px; }
.gmark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); font: 700 .8rem var(--serif); background-image: linear-gradient(90deg,#4285F4,#EA4335,#FBBC05,#34A853); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero__title { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 600; line-height: 1.06; letter-spacing: -.018em; }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .02em; }
.hero__title .ln > span { display: block; }
.js .hero__title .ln > span { transform: translateY(115%); }
.is-ready .hero__title .ln > span { animation: lineUp 1s var(--ease) forwards; }
.is-ready .hero__title .ln:nth-child(2) > span { animation-delay: .12s; }
.is-ready .hero__title .ln:nth-child(3) > span { animation-delay: .24s; }
@keyframes lineUp { to { transform: none; } }
.hero__title .accent { color: var(--accent); font-style: normal; position: relative; }
.hero__title .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .07em; background: var(--accent); border-radius: 3px; transform: scaleX(0); transform-origin: left; }
.is-ready .hero__title .accent::after { animation: drawLine .7s var(--ease) .9s forwards; }
@keyframes drawLine { to { transform: scaleX(1); } }
.hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 520px; margin: 1.6rem 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin-top: 2.2rem; }
.hero__stats { display: flex; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.hstat strong { display: block; font: 600 clamp(1.7rem, 3vw, 2.3rem) var(--serif); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hstat span { font-size: .85rem; color: var(--muted); }
.hero__visual img { width: 100%; will-change: transform; filter: drop-shadow(0 50px 70px rgba(10,14,26,.22)); }
.hero__scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; font: 500 .68rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.hero__scroll span { width: 1px; height: 38px; background: linear-gradient(var(--accent), transparent); position: relative; overflow: hidden; }
.hero__scroll span::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: scrollDot 1.8s var(--ease) infinite; }
@keyframes scrollDot { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* intro-up: small lift-in tied to ready */
.js .intro-up { opacity: 0; transform: translateY(24px); }
.is-ready .intro-up { animation: introUp .9s var(--ease) forwards; }
.is-ready .hero__lead { animation-delay: .35s; }
.is-ready .hero__actions { animation-delay: .45s; }
.is-ready .hero__stats { animation-delay: .55s; }
.is-ready .hero__visual { animation-delay: .3s; }
@keyframes introUp { to { opacity: 1; transform: none; } }

/* ---------- Values ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; text-align: center; }
.value__chip { display: inline-grid; place-items: center; width: 82px; height: 82px; border-radius: 24px; background: var(--accent-soft); margin-bottom: 1.4rem; box-shadow: inset 0 0 0 1px var(--accent-line); transition: transform .4s var(--ease); }
.value__chip img { width: 42px; height: 42px; object-fit: contain; }
.value:hover .value__chip { transform: translateY(-5px) rotate(-4deg); }
.value h3 { font-size: 1.45rem; margin-bottom: .65rem; }
.value p { color: var(--muted); max-width: 330px; margin: 0 auto; }
.value strong { color: var(--ink); font-weight: 500; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: 1.5rem 0; border-block: 1px solid var(--line); margin-top: clamp(2rem, 5vw, 4rem); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 2.2rem; width: max-content; animation: marquee 38s linear infinite; }
.marquee__track span { font: 500 clamp(1.4rem, 3vw, 2.2rem) var(--serif); color: var(--ink); letter-spacing: -.02em; opacity: .85; }
.marquee__track i { color: var(--accent); font-size: 1rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Portfolio ---------- */
.portfolio { columns: 2; column-gap: 1.8rem; }
.work { display: block; break-inside: avoid; margin-bottom: 1.8rem; border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); position: relative; }
.work:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.work__media { overflow: hidden; background: var(--card); line-height: 0; position: relative; }
.work__media img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); will-change: transform; }
.work:hover .work__media img { transform: scale(1.04); }

/* ---------- Case studies ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.case { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.9rem; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.case:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.case__tag { align-self: flex-start; font: 500 .76rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dk); background: var(--accent-soft); padding: .4rem .85rem; border-radius: 100px; margin-bottom: 1.1rem; }
.case h3 { font-size: 1.5rem; margin-bottom: .55rem; }
.case > p { color: var(--muted); font-size: .98rem; flex-grow: 1; }
.case__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.6rem 0 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.case__stats strong { display: block; font: 600 clamp(1.6rem, 3vw, 2.1rem) var(--serif); color: var(--accent); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.case__stats span { font-size: .82rem; color: var(--muted); display: block; margin-top: .35rem; }
.case__link { font: 500 .98rem var(--serif); color: var(--ink); transition: color .2s; }
.case__link:hover { color: var(--accent); }

/* image mask reveal */
.reveal-img { position: relative; overflow: hidden; }
.js .reveal-img > img { clip-path: inset(0 0 100% 0); transform: scale(1.16); transition: clip-path 1.1s var(--ease2), transform 1.3s var(--ease); }
.reveal-img.in > img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ---------- Approach ---------- */
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.approach__text h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.approach__text p { color: var(--ink-soft); margin-bottom: 1.3rem; }
.approach__text strong { color: var(--ink); font-weight: 500; }
.approach__media { position: relative; }
.approach__media .reveal-img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.approach__media img { width: 100%; will-change: transform; }
.approach__chip { position: absolute; bottom: -24px; left: -24px; background: var(--accent); color: #fff; border-radius: 18px; padding: 1.1rem 1.5rem; box-shadow: var(--shadow-lg); text-align: center; display: grid; z-index: 2; }
.approach__chip span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.approach__chip strong { font: 600 1.7rem var(--serif); margin: .1rem 0; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }
.step { position: relative; }
.step__head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1rem; }
.step__num { font: 600 3.2rem var(--serif); color: var(--accent); line-height: 1; letter-spacing: -.04em; }
.step h3 { font-size: 1.3rem; }
.step p { color: var(--muted); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.about__text h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 1.2rem; }
.about__text p { color: var(--ink-soft); margin-bottom: 1.8rem; }
.about__frame { position: relative; border-radius: 26px; }
.about__frame::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border-radius: 26px; background: var(--accent); z-index: 0; }
.about__frame img { position: relative; z-index: 1; aspect-ratio: 1; object-fit: cover; border-radius: 26px; width: 100%; box-shadow: var(--shadow-lg); }

/* ---------- Reviews ---------- */
.reviews-sec { background: var(--bg); }
.review-featured { max-width: 980px; margin: 0 auto clamp(3rem, 6vw, 4.5rem); background: var(--card); border-radius: var(--radius); padding: clamp(2.2rem, 5vw, 4rem); box-shadow: var(--shadow); position: relative; text-align: center; }
.review-featured__mark { position: absolute; top: clamp(1rem,3vw,2.4rem); left: clamp(1.6rem,4vw,3.4rem); font: 700 6rem var(--serif); color: var(--accent-soft); line-height: .65; }
.review-featured blockquote { position: relative; font: 500 clamp(1.3rem, 2.8vw, 2.05rem) var(--serif); color: var(--ink); line-height: 1.32; letter-spacing: -.015em; }
.review-featured figcaption { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.review-featured__who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.review-featured__who strong { font: 500 1.15rem var(--serif); }
.review-featured__g, .review__g { display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.15); font: 700 .9rem var(--serif); background-image: linear-gradient(90deg,#4285F4,#EA4335,#FBBC05,#34A853); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.review-featured__g { width: 28px; height: 28px; }
.review__av--lg { width: 58px; height: 58px; font-size: 1.15rem; }

.reviews-wrap { display: grid; grid-template-columns: 280px 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.reviews-rate { text-align: center; background: var(--card); border-radius: var(--radius); padding: 2.4rem 1.6rem; box-shadow: var(--shadow); position: sticky; top: 110px; }
.reviews-rate__num { font: 600 3.4rem var(--serif); color: var(--ink); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.reviews-rate__big { font: 600 1.9rem var(--serif); color: var(--ink); letter-spacing: -.02em; }
.stars { color: #ffb020; letter-spacing: 1px; }
.stars--lg { font-size: 1.6rem; display: block; margin: .6rem 0 .3rem; }
.reviews-rate p { color: var(--muted); font-size: .95rem; }
.reviews-rate__google { display: inline-block; margin-top: .8rem; font: 700 1.35rem var(--serif); background: linear-gradient(90deg,#4285F4,#EA4335,#FBBC05,#34A853); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.reviews-grid { columns: 2; column-gap: 1.6rem; }
.review { break-inside: avoid; margin-bottom: 1.6rem; background: var(--card); border-radius: var(--radius); padding: 1.8rem 1.9rem; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.review:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.review__top { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.review__av { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-dk); font: 600 .95rem var(--serif); }
.review__top > div { display: flex; flex-direction: column; line-height: 1.25; }
.review__top strong { font: 500 1.05rem var(--serif); }
.review__top span { font-size: .8rem; color: var(--muted); }
.review__g { margin-left: auto; width: 24px; height: 24px; }
.review blockquote { color: var(--ink-soft); font-size: 1.02rem; margin-top: .6rem; line-height: 1.55; }

/* ---------- FAQ ---------- */
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 3.4rem); align-items: start; }
.faq { display: grid; gap: .2rem; align-content: start; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; padding: 1.5rem .4rem; font: 500 1.14rem var(--serif); display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: color .2s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.6rem; color: var(--accent); transition: transform .35s var(--ease); flex: none; line-height: 1; }
.faq__item[open] summary { color: var(--accent); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__body { padding: 0 .4rem 1.5rem; color: var(--muted); }
.faq__body p + p { margin-top: .75rem; }
.faq__body ul { display: grid; gap: .5rem; margin-top: .65rem; }
.faq__body li { position: relative; padding-left: 1.6rem; }
.faq__body li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.faq__body a { color: var(--accent); font-weight: 500; }

/* ---------- CTA ---------- */
.cta-sec { padding-bottom: clamp(4.5rem, 9vw, 8rem); }
.cta { position: relative; overflow: hidden; text-align: center; max-width: 960px; margin-inline: auto; background: var(--dark); color: #fff; border-radius: 30px; padding: clamp(3.2rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem); box-shadow: var(--shadow-lg); }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 75% at 50% 0%, rgba(58,107,255,.5), transparent 70%), radial-gradient(40% 60% at 90% 100%, rgba(58,107,255,.28), transparent 70%); }
.cta > * { position: relative; z-index: 1; }
.cta__ic { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: rgba(255,255,255,.1); font-size: 1.6rem; margin-bottom: 1.4rem; }
.cta h2 { color: #fff; font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
.cta p { color: #b6bacb; font-size: 1.14rem; margin: 1.4rem auto 2.2rem; max-width: 620px; }
.cta p strong { color: #fff; font-weight: 500; }
.cta .btn--primary { background: #fff; color: var(--ink); box-shadow: 0 18px 44px -16px rgba(0,0,0,.6); }
.cta .btn--primary:hover { background: var(--accent); color: #fff; }
.cta .btn--link { color: #cdd1de; display: block; margin: 1rem auto 0; }
.cta .btn--link:hover { color: #fff; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.contact__intro h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
.contact__intro > p { color: var(--muted); margin: 1rem 0 2.2rem; font-size: 1.1rem; }
.contact__list { display: grid; gap: 1.1rem; }
.contact__list li { display: flex; align-items: center; gap: 1rem; font: 500 1.1rem var(--serif); }
.contact__list a:hover { color: var(--accent); }
.ci { display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 1.2rem; box-shadow: inset 0 0 0 1px var(--accent-line); }
.contact__form { background: var(--card); border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.8rem); display: grid; gap: 1.1rem; box-shadow: var(--shadow); }
.field { display: grid; gap: .42rem; }
.field label { font-size: .87rem; font-weight: 500; color: var(--ink-soft); }
.field input, .field textarea { width: 100%; padding: .95rem 1.1rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg-2); color: var(--ink); font: 400 1rem var(--sans); resize: vertical; transition: border-color .25s, box-shadow .25s, background .25s; }
.field input::placeholder, .field textarea::placeholder { color: #9a9aa4; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.form__note { font-size: .92rem; min-height: 1.2em; }
.form__note.is-ok { color: #1f8a4c; }
.form__note.is-err { color: #d23030; }

/* ---------- Footer ---------- */
.footer { background: var(--bg); border-top: 1px solid var(--line); padding: clamp(3.2rem, 6vw, 5rem) 0 2.2rem; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.6rem; }
.footer__logo { height: 34px; margin-bottom: 1.4rem; }
.footer__col h4 { font: 600 .92rem var(--serif); letter-spacing: .06em; margin-bottom: 1.3rem; }
.footer__contact { display: grid; gap: .9rem; }
.footer__contact li { display: flex; align-items: center; gap: .8rem; color: var(--ink-soft); font-size: .96rem; }
.footer__contact .ci { width: 38px; height: 38px; font-size: 1rem; }
.footer__links { display: grid; gap: .72rem; }
.footer__links li, .footer__links a { color: var(--ink-soft); font-size: .96rem; }
.footer__links a:hover { color: var(--accent); }
.footer__in { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-top: 1.3rem; border-radius: 12px; background: var(--ink); color: #fff; font: 700 1rem var(--serif); transition: background .2s, transform .2s; }
.footer__in:hover { background: var(--accent); transform: translateY(-2px); }
.footer__bottom { text-align: center; margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }

/* ---------- To top ---------- */
.to-top { position: fixed; bottom: 1.7rem; right: 1.7rem; z-index: 800; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: var(--ink); color: #fff; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s; font-size: 1.2rem; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); }

/* ============================================================
   Scroll reveal
   ============================================================ */
.js [data-anim] { opacity: 0; transition: opacity 1s var(--ease), transform 1s var(--ease); will-change: opacity, transform; }
.js [data-anim="up"]    { transform: translateY(46px); }
.js [data-anim="left"]  { transform: translateX(-54px); }
.js [data-anim="right"] { transform: translateX(54px); }
.js [data-anim="zoom"]  { transform: scale(.93); }
[data-anim].in { opacity: 1 !important; transform: none !important; }
.js .reveal-head { clip-path: inset(0 105% 0 0); transition: clip-path 1.15s var(--ease2); }
.reveal-head.in { clip-path: inset(0 0 0 0); }
/* Nadpis uvnitř data-anim rodiče se NEskrývá clip-path — rodič sám zajistí fade-in */
.js [data-anim] .reveal-head { clip-path: inset(0 0 0 0) !important; transition: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav__links { position: fixed; inset: 84px 0 auto; flex-direction: column; gap: 0; align-items: stretch; background: rgba(255,255,255,.98); backdrop-filter: blur(18px); padding: .6rem 1.5rem 1.5rem; border-bottom: 1px solid var(--line); transform: translateY(-140%); transition: transform .45s var(--ease); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); max-height: calc(100vh - 84px); overflow: auto; }
  .nav__links.is-open { transform: none; }
  .nav__links a:not(.nav__cta) { padding: 1rem .2rem; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  .nav__flag { display: none; }
  .nav__cta { text-align: center; margin-top: .8rem; }
  .nav__toggle { display: flex; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 560px; margin: 1.8rem auto 0; }
  .hero__scroll { display: none; }
  .values { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .cases { grid-template-columns: 1fr 1fr; }
  .approach, .about, .contact { grid-template-columns: 1fr; }
  .about__media { max-width: 440px; margin-inline: auto; }
  .steps { grid-template-columns: 1fr; gap: 2.2rem; }
  .reviews-wrap { grid-template-columns: 1fr; }
  .reviews-rate { position: static; max-width: 360px; margin-inline: auto; }
  .faq-cols { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .portfolio { columns: 1; }
  .cases { grid-template-columns: 1fr; }
  .reviews-grid { columns: 1; }
  .values { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero__actions .btn--primary { width: 100%; }
  .hero__stats { flex-wrap: wrap; }
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .review-featured figcaption { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; }
  .js [data-anim], .js .reveal-head, .js .reveal-img > img, .js .intro-up, .js .hero__title .ln > span { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* ============================================================
   Nav dropdown
   ============================================================ */
.has-dropdown { position: relative; display: flex; align-items: center; }
.nav__drop-trigger { display: flex; align-items: center; gap: .35rem; }
.drop-caret { font-size: .6rem; line-height: 1; transition: transform .3s var(--ease); }
.has-dropdown:hover .drop-caret,
.has-dropdown:focus-within .drop-caret,
.has-dropdown.is-open .drop-caret { transform: rotate(180deg); }
.nav__sub::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav__sub {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .5rem; min-width: 218px;
  display: grid; gap: .15rem; box-shadow: var(--shadow-lg);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.has-dropdown:hover .nav__sub,
.has-dropdown:focus-within .nav__sub,
.has-dropdown.is-open .nav__sub { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__sub a { display: block; padding: .7rem 1rem; border-radius: 10px; font: 500 .92rem var(--sans); color: var(--ink-soft); transition: background .15s, color .15s; }
.nav__sub a:hover { background: var(--accent-soft); color: var(--accent); }
.nav__sub a.is-current { background: var(--accent-soft); color: var(--accent-dk); font-weight: 600; }
.nav__sub a::after { display: none !important; }
.nav__drop-trigger.is-active { color: var(--ink) !important; }
.nav__drop-trigger.is-active::after { transform: scaleX(1) !important; transform-origin: left !important; }

/* ============================================================
   Service subpages — common components
   ============================================================ */

/* Page hero */
.page-hero { padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 50%, rgba(58,107,255,.11), transparent 65%); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: 1.2rem; }
.page-hero__title { font-size: clamp(2.8rem, 6vw, 5rem); max-width: 18ch; margin: .2rem 0 1.2rem; }
.page-hero__lead { font-size: clamp(1.1rem, 2vw, 1.28rem); color: var(--ink-soft); max-width: 60ch; margin-bottom: 2.5rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; }
.page-hero__stats { display: flex; gap: clamp(1.5rem, 4vw, 3.2rem); margin-top: 2.8rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* Feature cards */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.feat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem 2rem; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.feat:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.feat__ic { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-soft); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 1.4rem; box-shadow: inset 0 0 0 1px var(--accent-line); }
.feat h3 { font-size: 1.22rem; margin-bottom: .65rem; }
.feat p { color: var(--muted); font-size: .97rem; line-height: 1.62; }
.feat strong { color: var(--ink); font-weight: 500; }

/* Checklist */
.checklist { list-style: none; display: grid; gap: .55rem; }
.checklist li { display: flex; align-items: flex-start; gap: .9rem; padding: .85rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.checklist__mark { color: var(--accent); font-weight: 700; flex: none; margin-top: .1rem; }
.checklist strong { color: var(--ink); font-weight: 500; }

/* Steps vertical */
.steps-v { display: grid; gap: 1rem; }
.step-v { display: grid; grid-template-columns: 3.2rem 1fr; gap: .8rem 1.2rem; align-items: start; padding: 1.6rem 1.8rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease); }
.step-v:hover { transform: translateX(6px); }
.step-v__n { font: 600 1.8rem var(--serif); color: var(--accent); line-height: 1; letter-spacing: -.03em; }
.step-v h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.step-v p { color: var(--muted); font-size: .94rem; }

/* Stat row */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.stat-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.8rem; box-shadow: var(--shadow-sm); text-align: center; transition: transform .4s var(--ease); }
.stat-box:hover { transform: translateY(-6px); }
.stat-box strong { display: block; font: 600 clamp(1.8rem, 3.5vw, 2.8rem) var(--serif); color: var(--accent); letter-spacing: -.03em; margin-bottom: .4rem; }
.stat-box span { font-size: .88rem; color: var(--muted); }

/* Info box */
.info-box { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 2.4rem 2.2rem; }
.info-box h3 { font-size: 1.45rem; margin-bottom: .8rem; }
.info-box p { color: var(--ink-soft); font-size: .98rem; }
.info-box strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   Service subpages — responsive
   ============================================================ */
@media (max-width: 980px) {
  .has-dropdown { width: 100%; align-items: stretch; flex-direction: column; }
  .nav__drop-trigger { padding: 1rem .2rem !important; border-bottom: 1px solid var(--line); font-size: 1.1rem !important; justify-content: space-between; }
  .nav__sub { position: static; transform: none !important; opacity: 1; pointer-events: auto; box-shadow: none; border: none; border-radius: 0; padding: 0 !important; min-width: 0; background: transparent; display: none; transition: none; }
  .has-dropdown.is-open .nav__sub { display: grid; padding: .3rem 0 .4rem 1.2rem !important; }
  .nav__sub a { padding: .65rem .2rem; border-radius: 0; font-size: 1rem; border-bottom: 1px solid var(--line); background: none !important; }
  .nav__sub a:last-child { border-bottom: none; }
  .feats { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .feats { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .page-hero__actions .btn--primary { width: 100%; }
  .step-v { grid-template-columns: 2.2rem 1fr; }
  .page-hero__stats { flex-wrap: wrap; gap: 1.5rem; }
}

/* ============================================================
   Premium visual enhancements
   ============================================================ */

/* Page hero — second accent blob */
.page-hero::after { content: ""; position: absolute; width: 480px; height: 480px; background: radial-gradient(circle, rgba(58,107,255,.07), transparent 65%); bottom: -200px; left: -160px; border-radius: 50%; pointer-events: none; z-index: 0; }

/* Feat cards */
.feat { position: relative; border-top: 3px solid var(--accent-line); overflow: hidden; }
.feat:hover { border-top-color: var(--accent); box-shadow: 0 28px 64px -24px rgba(58,107,255,.18); }
.feat__ic { width: 64px; height: 64px; font-size: 1.65rem; border-radius: 20px; background: linear-gradient(140deg, rgba(58,107,255,.15), rgba(58,107,255,.04)); }

/* Stat boxes */
.stat-box { position: relative; border-top: 3px solid var(--accent); }
.stat-box strong { font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--accent); letter-spacing: -.04em; }

/* Step-v */
.step-v { border-left: 3px solid var(--accent-line); }
.step-v:hover { border-left-color: var(--accent); transform: translateX(8px); }

/* Checklist */
.checklist li { transition: background .2s, border-color .2s; }
.checklist li:hover { background: var(--accent-soft); border-color: var(--accent-line); }

/* Info-box */
.info-box { background: linear-gradient(140deg, var(--accent-soft), rgba(58,107,255,.03)); border-color: var(--accent-line); }
.info-box h3 { color: var(--accent-dk); }

/* Section head centered */
.section__head--center { text-align: center; }
.section__head--center p { margin-inline: auto; }

/* ============================================================
   Reviews horizontal slider
   ============================================================ */
.reviews-slider-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 1.5rem 2.8rem; align-items: center; }
.slider-outer { position: relative; display: flex; align-items: center; gap: .8rem; min-width: 0; }
.slider { overflow: hidden; flex: 1; min-width: 0; }
.slider__track { display: flex; gap: 1.4rem; transition: transform .6s var(--ease); will-change: transform; }
.slider .review { flex: 0 0 calc((100% - 2.8rem) / 3); min-width: 0; break-inside: unset; margin-bottom: 0; }
.slider .review blockquote { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review__read { display: inline-block; margin-top: .9rem; font: 500 .86rem var(--sans); color: var(--accent); }
.review__read:hover { text-decoration: underline; }
.slider__btn { flex: none; width: 44px; height: 44px; background: var(--card); border: 1.5px solid var(--line); border-radius: 50%; box-shadow: var(--shadow-sm); font-size: 1.5rem; display: grid; place-items: center; color: var(--ink); transition: background .22s, color .22s, transform .25s var(--ease), box-shadow .22s; line-height: 1; }
.slider__btn:hover { background: var(--accent); color: #fff; box-shadow: var(--shadow); transform: scale(1.08); }
.slider__btn:disabled { opacity: .28; pointer-events: none; }
@media (pointer: fine) { .slider__btn { cursor: none; } }

@media (max-width: 980px) {
  .reviews-slider-wrap { grid-template-columns: 1fr; }
  .reviews-rate { position: static !important; max-width: 360px; margin-inline: auto; text-align: center; }
  .slider .review { flex: 0 0 calc((100% - 1.4rem) / 2); }
}
@media (max-width: 620px) {
  .slider .review { flex: 0 0 100%; }
  .slider__btn { width: 38px; height: 38px; font-size: 1.3rem; }
}

/* ============================================================
   WOW VISUAL UPGRADES — Round 1
   ============================================================ */

/* 1. Hero — dot grid texture (behind content via hero__bg::after) */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(58, 107, 255, .18) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 58% 85% at 72% 50%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 58% 85% at 72% 50%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* 2. Hero rating badge — subtle pulse */
.is-ready .hero__rating {
  animation: badgePulse 4s ease-in-out 2s infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 6px 22px -12px rgba(10,14,26,.28); }
  50%       { box-shadow: 0 6px 22px -12px rgba(10,14,26,.28), 0 0 0 6px rgba(58,107,255,.1); }
}

/* 3. Value cards — card treatment + hover lift */
.value {
  position: relative;
  padding: 2.4rem 2rem;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.value:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line);
  box-shadow: 0 24px 60px -22px rgba(58,107,255,.22);
}

/* 4. Portfolio hover overlay — gradient + project name */
.work::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 11, 22, .9) 0%,
    rgba(8, 11, 22, .5) 38%,
    transparent 68%
  );
  opacity: 0;
  transition: opacity .45s var(--ease);
  z-index: 2;
}
.work:hover::after { opacity: 1; }

/* Project name from data-title — slides up on hover */
.work[data-title]::before {
  content: attr(data-title) " →";
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  right: 1.4rem;
  color: #fff;
  font: 600 1.05rem var(--serif);
  letter-spacing: -.01em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  z-index: 3;
  pointer-events: none;
}
.work:hover[data-title]::before { opacity: 1; transform: none; }

/* 5. Primary button — shimmer sweep on hover */
.btn--primary { overflow: hidden; }
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -80%;
  width: 48%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::before { left: 165%; }

/* 6. Scroll progress — gradient strip */
.scroll-progress {
  background: linear-gradient(90deg, var(--accent), #7096ff);
  height: 3px;
}

/* 7. Step decorative background numbers */
.steps { counter-reset: wow-step; }
.step { counter-increment: wow-step; }
.step::before {
  content: "0" counter(wow-step);
  position: absolute;
  bottom: -1.4rem; right: -.4rem;
  font: 700 8rem var(--serif);
  color: var(--accent);
  opacity: .065;
  line-height: 1;
  letter-spacing: -.06em;
  pointer-events: none;
  z-index: 0;
}
.step__head,
.step p { position: relative; z-index: 1; }

/* 8. Review cards — top accent reveal */
.review { border-top: 2px solid var(--accent-line); }
.review:hover { border-top-color: var(--accent); }

/* 9. Rating block — top accent stripe + gradient label */
.reviews-rate { border-top: 4px solid var(--accent); }
.reviews-rate__big {
  background: linear-gradient(135deg, var(--accent) 30%, #7096ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 10. Eyebrow numbers — gradient text */
.eyebrow i {
  background: linear-gradient(135deg, var(--accent), #7096ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 11. About frame — gradient offset square */
.about__frame::before {
  background: linear-gradient(145deg, var(--accent) 0%, #6b8fff 100%);
  opacity: .88;
}

/* 12. CTA icon — glassmorphism */
.cta__ic {
  width: 72px; height: 72px; font-size: 2rem; border-radius: 24px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 28px -8px rgba(0,0,0,.35);
}

/* 13. To-top button — glassmorphism */
.to-top {
  background: rgba(8, 11, 22, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1);
}
.to-top:hover { background: var(--accent); border-color: transparent; }

/* 14. Nav CTA — glow on hover */
.nav__cta:hover {
  box-shadow: 0 8px 28px -12px rgba(58,107,255,.55);
}

/* 15. Approach chip — gradient background */
.approach__chip {
  background: linear-gradient(140deg, var(--accent) 0%, #2d5ce8 100%);
}

/* 16. Feat card top border enhancement (subpages) */
.feat:hover { border-top-color: var(--accent); }

/* 17. Dark footer — premium contrast */
.footer {
  background: var(--dark);
  border-top-color: rgba(255, 255, 255, .07);
}
.footer__logo {
  filter: brightness(0) invert(1);
  opacity: .9;
}
.footer__col h4 { color: rgba(255,255,255,.38); }
.footer__contact li { color: rgba(255,255,255,.62); }
.footer__contact .ci {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.footer__links li,
.footer__links a { color: rgba(255,255,255,.52); }
.footer__links a:hover { color: #fff; }
.footer__in {
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}
.footer__in:hover {
  background: var(--accent);
  border-color: transparent;
}
.footer__bottom {
  border-top-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.28);
}

/* 18. Marquee — slightly larger, full opacity */
.marquee { padding: 2rem 0; }
.marquee__track span { opacity: 1; }

/* ============================================================
   WOW VISUAL UPGRADES — Round 2
   ============================================================ */

/* 1. Hero mockup — blue glow halo */
.hero__visual img {
  filter:
    drop-shadow(0 50px 70px rgba(10,14,26,.22))
    drop-shadow(0 0 55px rgba(58,107,255,.2));
}

/* 2. Hero stats — gradient text numbers */
.hstat strong {
  background: linear-gradient(135deg, var(--ink) 20%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 3. Step connector lines between cards */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.85rem;
  left: 100%;
  width: 2.6rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-line));
  opacity: .55;
}
@media (max-width: 980px) {
  .step:not(:last-child)::after { display: none; }
}

/* 4. Section soft — subtle gradient instead of flat grey */
.section--soft {
  background: linear-gradient(180deg, var(--bg-2) 0%, rgba(244,243,239,.55) 100%);
}

/* 5. FAQ — enhanced open state */
.faq__item[open] {
  border-bottom-color: var(--accent-line);
}
.faq__item[open] .faq__body {
  border-left: 2px solid var(--accent);
  padding-left: 1.2rem;
  margin-left: .4rem;
}

/* 6. Contact info icons — accent color upgrade */
.contact__intro h2 {
  font-size: clamp(2.1rem, 4vw, 3rem);
}

/* 7. Approach chip — add small label animation */
.approach__chip { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.approach__chip:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -20px rgba(58,107,255,.55); }

/* 8. Form submit button — extra glow */
.contact__form .btn--primary {
  box-shadow: 0 18px 36px -16px rgba(58,107,255,.55);
}
.contact__form .btn--primary:hover {
  box-shadow: 0 24px 48px -18px rgba(58,107,255,.75);
}

/* 9. Nav scrolled — stronger glass effect */
.nav.is-scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* 10. Review slider buttons — larger & more premium */
.slider__btn {
  width: 48px; height: 48px;
  font-size: 1.6rem;
  border-radius: 50%;
}

/* 11. Section head — accent line auto-width */
.section__head .head-underline {
  width: 50px;
  background: linear-gradient(90deg, var(--accent), #7096ff);
  height: 3px;
  border-radius: 3px;
  margin-top: 1.2rem;
}

/* 12. Stars rating — brighter gold */
.stars { color: #f5a623; }
.stars--lg { letter-spacing: 2px; }

/* 13. Value chip — more premium icon container */
.value__chip {
  width: 72px; height: 72px;
  background: linear-gradient(140deg, rgba(58,107,255,.12), rgba(58,107,255,.04));
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 8px 24px -8px rgba(58,107,255,.15);
}

/* 14. CTA section — extra depth with inner glow ring */
.cta {
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.2);
}

/* 15. Hero scroll indicator — glow on the line */
.hero__scroll span {
  background: linear-gradient(var(--accent), transparent);
  box-shadow: 0 0 12px rgba(58,107,255,.4);
}

/* 16. Marquee separator dots — accent color */
.marquee__track i { font-size: 1.1rem; opacity: .7; }

/* 17. Intro reveal — blue accent word more prominent */
.intro__word b {
  text-shadow: 0 0 60px rgba(58,107,255,.6);
}

/* 18. About section — photo frame depth */
.about__frame {
  filter: drop-shadow(0 40px 80px rgba(10,14,26,.18));
}

/* 19. Process section — step card hover lift */
.step {
  padding: 1.8rem 1.6rem;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.step:hover {
  transform: translateY(-5px);
  border-color: var(--accent-line);
  box-shadow: 0 20px 52px -20px rgba(58,107,255,.2);
}

/* 20. Feat cards on subpages — gradient icon bg */
.feat__ic {
  background: linear-gradient(140deg, rgba(58,107,255,.14), rgba(58,107,255,.04));
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 6px 18px -6px rgba(58,107,255,.12);
}

/* ============================================================
   WOW VISUAL UPGRADES — Round 3
   ============================================================ */

/* 1. Hero visual — position context for floating badges */
.hero__visual { position: relative; }

/* 2. Hero floating badge — "Strategie webu ZDARMA" */
.hero__float-badge {
  position: absolute;
  bottom: 3rem;
  left: -2.2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: .95rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  box-shadow: var(--shadow-lg);
  animation: floatBadge 4.5s ease-in-out 2s infinite;
  z-index: 4;
}
.hero__float-badge__icon {
  width: 44px; height: 44px; flex: none;
  border-radius: 13px;
  background: linear-gradient(135deg, #1dc85e, #12a34b);
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px -8px rgba(29,200,94,.5);
}
.hero__float-badge strong {
  display: block;
  font: 600 .92rem var(--serif);
  color: var(--ink);
  white-space: nowrap;
}
.hero__float-badge span {
  display: block;
  font-size: .76rem;
  color: var(--muted);
  margin-top: .1rem;
}
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* 3. Hero floating reviews badge */
.hero__float-reviews {
  position: absolute;
  top: 2.5rem;
  right: -1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: .85rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  box-shadow: var(--shadow-lg);
  animation: floatBadge 5s ease-in-out 2.6s infinite;
  z-index: 4;
  text-align: center;
}
.hero__float-reviews .stars {
  font-size: .9rem;
  letter-spacing: 1px;
}
.hero__float-reviews strong {
  font: 700 .85rem var(--serif);
  color: var(--ink);
  white-space: nowrap;
}

/* 4. Mobile sticky CTA bar */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 850;
  padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  gap: .7rem;
}
.mobile-bar__call {
  flex: 0 0 auto;
  padding: .9rem 1.3rem;
  border-radius: 100px;
  background: var(--bg-2);
  color: var(--ink);
  font: 500 1rem var(--serif);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.mobile-bar__quiz {
  flex: 1;
  border-radius: 100px;
  text-align: center;
  padding: .9rem 1.2rem;
}
@media (max-width: 820px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 76px; }
}
@media (pointer: fine) {
  .mobile-bar { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* 5. Page hero stats — gradient text (subpages) */
.page-hero__stats .hstat strong {
  background: linear-gradient(135deg, var(--ink) 20%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 6. Hero float badges — hide on small mobile to avoid overlap */
@media (max-width: 620px) {
  .hero__float-badge,
  .hero__float-reviews { display: none; }
}

/* 7. Blob animations — slightly more vivid */
.blob--1 {
  background: radial-gradient(circle, rgba(58,107,255,.36), transparent 65%);
}
.blob--2 {
  background: radial-gradient(circle, rgba(88,130,255,.2), transparent 65%);
}

/* 8. Intro reveal — faster, snappier */
.intro { background: var(--dark); }
.intro__word { font-size: clamp(2rem, 7vw, 4rem); }

/* 9. Approach section — strategy image with frame */
.approach__media .reveal-img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-line);
}

/* 10. Section eyebrow — add subtle separator after number */
.eyebrow { margin-bottom: 1.8rem; }

/* 11. FAQ body links — more polished */
.faq__body a {
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.faq__body a:hover { border-bottom-color: var(--accent); }

/* 12. Footer — add subtle grid texture */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.footer { position: relative; overflow: hidden; }

/* 13. CTA section — particle dots decoration */
.cta::after {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.06);
  bottom: -100px; left: -80px;
  pointer-events: none;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 75% at 50% 0%, rgba(58,107,255,.5), transparent 70%),
    radial-gradient(40% 60% at 90% 100%, rgba(58,107,255,.28), transparent 70%);
}

/* 14. Review slider buttons — gap between btn and slider */
.slider-outer { gap: 1rem; }

/* 15. Nav link hover underline — thicker */
.nav__links a:not(.nav__cta)::after { height: 2px; border-radius: 2px; }

/* 16. Section head max-width — slightly wider */
.section__head { max-width: 860px; }

/* ============================================================
   WOW VISUAL UPGRADES — Round 4
   ============================================================ */

/* 1. Hero availability indicator */
.hero__avail {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: 500 .82rem var(--sans);
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.avail__dot {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: #1dc85e;
  box-shadow: 0 0 0 3px rgba(29,200,94,.22);
  animation: pulseGreen 2.2s ease-in-out infinite;
}
@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 3px rgba(29,200,94,.22); }
  50%       { box-shadow: 0 0 0 7px rgba(29,200,94,.08); }
}

/* 2. Value cards — numbered corner badge */
.values { counter-reset: val-counter; }
.value { counter-increment: val-counter; }
.value::before {
  content: "0" counter(val-counter);
  position: absolute;
  top: 1.2rem; right: 1.4rem;
  font: 700 .7rem var(--serif);
  letter-spacing: .12em;
  color: var(--accent);
  opacity: .38;
}

/* 3. Hero title — push max size on wide screens */
.hero__title { font-size: clamp(2rem, 4.2vw, 3.3rem); }

/* 4. Contact intro — dark card treatment */
.contact__intro {
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.2rem);
}
.contact__intro h2 { color: #fff; }
.contact__intro > p { color: rgba(255,255,255,.6); }
.contact__intro .ci {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.contact__list li { color: rgba(255,255,255,.7); }
.contact__list a:hover { color: var(--accent); }

/* 5. Portfolio section header underline */
#portfolio .section__head { border-left: none; }

/* 6. Marquee track — stronger visual weight */
.marquee__track span {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
}
.marquee {
  background: var(--bg);
  border-block-color: var(--line);
}

/* 7. Approach text — sub-head underline sits closer */
.head-underline--sm { margin: .8rem 0 1.6rem; width: 44px; height: 3px; }

/* 8. Step cards — left border accent on hover */
.step { border-left: 3px solid transparent; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-left-color .3s; }
.step:hover { border-left-color: var(--accent); }

/* 9. Work items — subtle border radius upgrade */
.work { border-radius: 18px; }
.work__media { border-radius: 0; }

/* 10. Nav links gap tighter */
.nav__links { gap: 1.7rem; }

/* 11. Hero lead — tighter line spacing */
.hero__lead { line-height: 1.58; }

/* 12. Section head eyebrow spacing */
.section__head .eyebrow { margin-bottom: 1.4rem; }

/* 13. Footer grid with logo left, wider col */
.footer__inner { grid-template-columns: 1.6fr 1fr 1fr; }

/* 14. Scroll to top — round shape */
.to-top { border-radius: 18px; }

/* 15. Page hero — subpages eyebrow accent */
.page-hero .eyebrow i {
  background: linear-gradient(135deg, var(--accent), #7096ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 16. Contact form — label upgrade */
.field label {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

/* 17. Contact form input — subtle inset shadow */
.field input, .field textarea {
  box-shadow: inset 0 2px 4px rgba(10,14,26,.04);
}

/* 18. About frame — bigger offset */
.about__frame::before {
  inset: 26px -26px -26px 26px;
}

/* 19. Approach chip — bigger, more dramatic */
.approach__chip {
  border-radius: 22px;
  padding: 1.3rem 1.8rem;
  bottom: -28px; left: -28px;
}
.approach__chip span { font-size: .68rem; }
.approach__chip strong { font-size: 2rem; }

/* 20. CTA title — even bigger */
.cta h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); }

/* ============================================================
   WOW VISUAL UPGRADES — Round 5
   ============================================================ */

/* 1. Skill tags */
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.4rem 0 2rem;
}
.stag {
  display: inline-flex;
  align-items: center;
  padding: .38rem .95rem;
  border-radius: 100px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font: 500 .8rem var(--sans);
  color: var(--accent-dk);
  letter-spacing: .025em;
  transition: background .22s, color .22s, transform .22s var(--ease);
  white-space: nowrap;
}
.stag:hover {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

/* 2. Review featured — premium gradient card */
.review-featured {
  background: linear-gradient(140deg, var(--bg) 30%, var(--accent-soft));
  border: 1px solid var(--accent-line);
}
.review-featured__mark {
  color: var(--accent);
  opacity: .15;
  font-size: clamp(5rem, 10vw, 9rem);
}
.review-featured blockquote {
  color: var(--ink);
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
}

/* 3. Featured review avatar — gradient ring */
.review__av--lg {
  background: linear-gradient(135deg, var(--accent), #7096ff);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 8px 20px -8px rgba(58,107,255,.4);
}

/* 4. Page hero — stronger background accent */
.page-hero::before {
  background: radial-gradient(65% 90% at 90% 50%, rgba(58,107,255,.13), transparent 65%);
}

/* 5. Footer — large watermark logo behind content */
.footer__inner { position: relative; z-index: 1; }
.footer::after {
  content: "W";
  position: absolute;
  right: -2rem;
  bottom: 1rem;
  font: 700 22rem var(--serif);
  color: rgba(255,255,255,.02);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -.06em;
}

/* 6. FAQ item — smooth height transition via grid trick */
.faq__item { display: grid; }
.faq__item summary { grid-row: 1; }
.faq__body { overflow: hidden; }

/* 7. About section — photo frame ring glow */
.about__frame::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 30px;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(58,107,255,.1);
  pointer-events: none;
}

/* 8. Steps section — light background for sections */
#proces .steps {
  padding-bottom: .5rem;
}

/* 9. Value section — stronger chip glow on hover */
.value:hover .value__chip {
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 12px 28px -10px rgba(58,107,255,.3);
}

/* 10. Hero stats border — accent gradient */
.hero__stats {
  border-top-color: transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(90deg, var(--accent-line), var(--line), var(--accent-line)) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 1.6rem 2rem;
  margin-top: 2rem;
}

/* 11. Approach text — subtle quote left border */
.approach__text > p:first-of-type {
  border-left: 3px solid var(--accent-line);
  padding-left: 1.1rem;
}

/* 12. Nav — logo slight scale on scroll */
.nav.is-scrolled .brand__logo {
  transform: scale(.92);
  transition: transform .35s var(--ease);
}
.brand__logo { transition: transform .35s var(--ease); }

/* 13. Process step number — gradient text */
.step__num {
  background: linear-gradient(135deg, var(--accent), #7096ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.6rem;
}

/* 14. CTA section — more vivid gradient background */
.cta::before {
  background:
    radial-gradient(55% 80% at 50% -5%, rgba(58,107,255,.55), transparent 65%),
    radial-gradient(45% 55% at 95% 105%, rgba(58,107,255,.32), transparent 65%),
    radial-gradient(30% 40% at 5% 95%, rgba(100,140,255,.2), transparent 65%);
}

/* 15. Contact list — spacing */
.contact__list { gap: 1.3rem; }
.contact__list li { font-size: 1rem; }

/* 16. Mobile bar call button — phone icon prefix */
.mobile-bar__call::before {
  content: "✆ ";
  font-size: .9em;
}

/* 17. Grain overlay — slightly stronger */
.grain { opacity: .055; }

/* 18. Intro word — uppercase, tighter tracking */
.intro__word {
  text-transform: uppercase;
  letter-spacing: -.04em;
}

/* 19. Section head p — larger on desktop */
@media (min-width: 980px) {
  .section__head p { font-size: 1.18rem; }
}

/* 20. Portfolio — even spacing on masonry */
.portfolio { column-gap: 2rem; }

/* ============================================================
   WOW VISUAL UPGRADES — Round 6
   ============================================================ */

/* 1. Portfolio focus effect — dim non-hovered items */
.portfolio:has(.work:hover) .work:not(:hover) {
  filter: brightness(.88) blur(.5px);
  transform: scale(.985);
  transition: filter .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.portfolio .work {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), filter .5s var(--ease);
}

/* 2. Trust strip under form */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin-top: .9rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.contact__form .trust-strip {
  border-top-color: var(--line);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font: 500 .8rem var(--sans);
  color: rgba(255,255,255,.55);
}
.contact__form .trust-item { color: var(--muted); }
.trust-ic {
  color: var(--accent);
  font-size: .82rem;
}
.contact__form .trust-ic { color: var(--accent); }

/* 3. Review avatars — gradient background */
.review__av {
  background: linear-gradient(135deg, var(--accent) 0%, #7096ff 100%);
  color: #fff;
  font-weight: 700;
}

/* 4. Feat cards — left accent border on hover */
.feat { border-left: 3px solid transparent; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-left-color .3s, border-top-color .3s; }
.feat:hover { border-left-color: var(--accent); }

/* 5. Hero title accent — stronger gradient underline */
.hero__title .accent::after {
  height: .09em;
  background: linear-gradient(90deg, var(--accent), #7096ff);
  border-radius: 4px;
}

/* 6. Stats row — gradient top border */
.hstat { position: relative; }
.hstat::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .6s var(--ease);
}
.hero__stats .hstat::before { display: none; }

/* 7. Page hero title — more editorial on wide screens */
@media (min-width: 1200px) {
  .page-hero__title { font-size: clamp(3.5rem, 6.5vw, 6rem); }
}

/* 8. Page hero — dual blob background */
.page-hero {
  background:
    radial-gradient(ellipse 50% 70% at 90% 40%, rgba(58,107,255,.09), transparent 65%),
    radial-gradient(ellipse 30% 40% at 5% 80%, rgba(58,107,255,.06), transparent 65%),
    var(--bg);
}

/* 9. Nav — stronger backdrop on scroll */
.nav.is-scrolled {
  box-shadow: 0 8px 40px -20px rgba(10,14,26,.35), 0 1px 0 var(--line);
}

/* 10. CTA icon — text better centered */
.cta__ic { line-height: 1; padding: 0; }

/* 11. Marquee — slightly bolder font */
.marquee__track span { font-weight: 700; }

/* 12. Section head strong — accent treatment */
.section__head strong { color: var(--accent-dk); font-weight: 600; }

/* 13. FAQ body — more readable */
.faq__body { font-size: .98rem; line-height: 1.7; }

/* 14. Approach media — second decorative ring */
.approach__media::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: calc(var(--radius) + 16px);
  border: 1px dashed var(--accent-line);
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}

/* 15. Scroll progress — taller on hover */
.scroll-progress:hover { height: 4px; }

/* 16. Brand logo — slight hover lift */
.brand:hover .brand__logo {
  transform: scale(1.04);
}
.brand__logo { transition: transform .3s var(--ease); }

/* 17. Contact section—soft → white override for cleaner look */
#kontakt { background: var(--bg); }

/* 18. Review featured — shadow glow */
.review-featured {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-line);
}

/* 19. Hstat strong on page hero — ensure gradient text works */
.page-hero__stats .hstat strong[data-count] {
  background: linear-gradient(135deg, var(--ink) 20%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 20. Mobile bar — stronger shadow */
.mobile-bar {
  box-shadow: 0 -8px 32px -16px rgba(10,14,26,.18);
}

/* ============================================================
   WOW VISUAL UPGRADES — Round 7
   ============================================================ */

/* 1. CTA section — animated shimmer sweep */
.cta {
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -100%;
  width: 60%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.05) 50%,
    transparent 70%
  );
  transform: skewX(-12deg);
  animation: ctaShimmer 7s linear 3s infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes ctaShimmer {
  0%   { left: -100%; }
  45%  { left: 160%; }
  100% { left: 160%; }
}

/* 2. Hero title — stronger accent glow */
.hero__title .accent {
  text-shadow: 0 0 40px rgba(58,107,255,.15);
}

/* 3. Stat row items — grow label text on hover */
.hstat { transition: transform .3s var(--ease); }
.hstat:hover { transform: translateY(-3px); }

/* 4. Value chip — subtle rotation animation on card hover */
.value:hover .value__chip img {
  animation: chipSpin .6s var(--ease) forwards;
}
@keyframes chipSpin {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(-15deg) scale(1.1); }
  100% { transform: rotate(-8deg) scale(1.05); }
}

/* 5. Section eyebrow number — larger */
.eyebrow i { font-size: 1.05rem; padding-right: .8rem; }

/* 6. Approach section — text strong emphasis */
.approach__text strong {
  position: relative;
  color: var(--ink);
}

/* 7. Rating block — enhanced stars */
.reviews-rate .stars--lg { font-size: 1.8rem; }

/* 8. FAQ chevron — thicker and more visible */
.faq__item summary::after {
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--accent);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
}
.faq__item[open] summary::after {
  background: linear-gradient(135deg, var(--accent), #7096ff);
  color: #fff;
}

/* 9. Footer watermark — slower, more legible */
.footer::after {
  font-size: 18rem;
  opacity: .025;
  right: -1rem;
  bottom: .5rem;
  letter-spacing: -.1em;
}

/* 10. About text — first paragraph drop cap style leading */
.about__text > p:first-of-type {
  font-size: 1.12rem;
  color: var(--ink);
  line-height: 1.65;
}

/* 11. Portfolio — gap between columns */
.portfolio { gap: 2rem; }

/* 12. Step number — gradient text stronger */
.step__num {
  font-size: 3.8rem;
  letter-spacing: -.05em;
}

/* 13. Contact form card — subtle top accent line */
.contact__form {
  border-top: 3px solid var(--accent);
}

/* 14. Nav — blur transition smoother */
.nav {
  transition: border-color .4s, box-shadow .4s, background .4s, min-height .4s var(--ease);
}

/* 15. Intro word — dramatic scale animation */
.js .intro__word {
  animation: introWord .9s var(--ease) .1s forwards;
  transform-origin: center bottom;
}
@keyframes introWord {
  0%   { opacity: 0; transform: translateY(24px) scale(.94); }
  100% { opacity: 1; transform: none; }
}

/* 16. Page hero title — clip-reveal delay */
.page-hero__title { margin-bottom: .2rem; }

/* 17. Review cards in slider — subtle left border */
.slider .review {
  border-left: 2px solid var(--accent-line);
  transition: border-left-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.slider .review:hover { border-left-color: var(--accent); }

/* 18. Approach chip — pulse animation */
.approach__chip {
  animation: chipFloat 5s ease-in-out 1s infinite;
}
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* 19. Section tight (values) — subtle top separator (no extra margin) */
.section--tight::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin-bottom: 0;
}

/* 20. Hero float badges — more contrast shadow */
.hero__float-badge,
.hero__float-reviews {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
}

/* ============================================================
   WOW VISUAL UPGRADES — Round 8
   ============================================================ */

/* 1. About badge — floating experience chip */
.about__media { position: relative; }
.about__badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--dark);
  color: #fff;
  border-radius: 20px;
  padding: 1.1rem 1.6rem;
  text-align: center;
  z-index: 4;
  box-shadow: var(--shadow-lg);
  animation: floatBadge 5s ease-in-out 1.8s infinite;
}
.about__badge strong {
  display: block;
  font: 700 2.6rem var(--serif);
  background: linear-gradient(135deg, var(--accent), #7096ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.04em;
  line-height: 1;
}
.about__badge span {
  display: block;
  font: 500 .72rem var(--sans);
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: .25rem;
}

/* 2. About frame — clip the about frame decoration so badge shows above */
.about__frame { position: relative; }

/* 3. Approach chip — match about badge style */
.approach__chip span { letter-spacing: .1em; }

/* 4. Hero section — taller on big screens */
@media (min-width: 1400px) {
  .hero { padding-top: 7rem; padding-bottom: 6rem; }
}

/* 5. Value section title — slightly bigger */
.value h3 { font-size: 1.5rem; }

/* 6. Section head h2 — better line height */
.section__head h2 { line-height: 1.05; }

/* 7. Marquee items — wider gap between brand names */
.marquee__track { gap: 3rem; }

/* 8. Review blockquotes — slightly italic for elegance */
.review blockquote { font-style: italic; color: var(--ink-soft); }
.review-featured blockquote { font-style: italic; }

/* 9. Featured review — bigger quote mark */
.review-featured__mark { font-size: clamp(6rem, 12vw, 11rem); line-height: .55; }

/* 10. Portfolio title in overlay — add small category below */
.work[data-title]::before {
  font-size: 1rem;
  letter-spacing: -.01em;
}

/* 11. Scrollbar — custom minimal styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-line); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* 12. Footer bottom link — add hover effect */
.footer__bottom a { color: rgba(255,255,255,.35); transition: color .2s; }
.footer__bottom a:hover { color: #fff; }

/* 13. Steps ol — remove default list styles */
.steps { list-style: none; }

/* 14. Contact section (index) — add subtle gradient */
#kontakt {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* 15. Hero visual — drop shadow glow stronger */
@media (min-width: 980px) {
  .hero__visual img {
    filter:
      drop-shadow(0 60px 80px rgba(10,14,26,.25))
      drop-shadow(0 0 70px rgba(58,107,255,.22));
  }
}

/* 16. Page hero eyebrow — bigger gap from title */
.page-hero .eyebrow { margin-bottom: 1.6rem; }

/* 17. Values section — adjust chip for numbered corner */
.value__chip { margin-bottom: 1.6rem; }

/* 18. CTA button in hero — subtle arrow icon */
.hero__actions .btn--primary::after {
  content: " →";
  transition: transform .3s var(--ease);
  display: inline-block;
}
.hero__actions .btn--primary:hover::after {
  transform: translateX(4px);
}

/* 19. Contact list item animation */
.contact__list li { transition: transform .3s var(--ease); }
.contact__list li:hover { transform: translateX(4px); }

/* 20. Section head — add gradient line decoration on subpages */
.page-hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--accent), #7096ff);
  border-radius: 2px;
  margin-right: .6rem;
  vertical-align: middle;
  flex: none;
}
.page-hero .eyebrow { align-items: center; }

/* ============================================================
   WOW VISUAL UPGRADES — Round 9
   ============================================================ */

/* 1. Second marquee — reverse direction */
.marquee--reverse { margin-top: -1px; }
.marquee--reverse .marquee__track {
  animation-direction: reverse;
  animation-duration: 30s;
}
.marquee--reverse .marquee__track span {
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--ink-soft);
  opacity: .65;
  font-weight: 500;
}

/* 2. Marquee double block — no gap between them */
.marquee + .marquee { margin-top: -1px; }

/* 3. Footer links — hover arrow */
.footer__links a::after {
  content: " →";
  opacity: 0;
  transform: translateX(-4px);
  display: inline-block;
  transition: opacity .2s, transform .2s var(--ease);
}
.footer__links a:hover::after {
  opacity: 1;
  transform: none;
}

/* 4. Approach chip — z-index above media decoration */
.approach__chip { z-index: 3; }

/* 5. Page hero leading — tighter on bigger screens */
@media (min-width: 980px) {
  .page-hero__lead { font-size: 1.28rem; line-height: 1.6; max-width: 56ch; }
}

/* 6. Hero actions — btn arrow doesn't conflict with shimmer */
.hero__actions .btn--primary { overflow: hidden; }

/* 7. Values section — bottom divider (no extra margin) */
.section--tight::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin-top: 0;
}

/* 8. About text heading — bigger on desktop */
@media (min-width: 980px) {
  .about__text h3 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
}

/* 9. Contact intro — items glow on hover in dark card */
.contact__intro .contact__list li:hover .ci {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 20px rgba(58,107,255,.25);
}

/* 10. Process steps — gap adjust for connector line */
.steps { gap: 2.8rem; }

/* 11. Section heads — stronger weight */
.section__head h2 { font-weight: 700; }

/* 12. hero title lines — cap on biggest screens */
@media (min-width: 1400px) {
  .hero__title { font-size: 3.6rem; }
}

/* 13. CTA section — show shimmer only once then loop */
.cta::after { animation-timing-function: linear; }

/* 14. Feat card icons — center and size up */
.feat__ic { font-size: 1.9rem; width: 68px; height: 68px; border-radius: 22px; }

/* 15. Review featured — center text stronger */
.review-featured { text-align: left; padding: clamp(2.5rem, 6vw, 4.5rem); }
.review-featured figcaption { justify-content: flex-start; }

/* 16. Footer contact address — line-height */
.footer__contact address { line-height: 1.5; font-size: .92rem; }

/* 17. About badge — media query hide on small screens */
@media (max-width: 620px) {
  .about__badge { display: none; }
}

/* 18. Nav sub links — slight icon prefix */
.nav__sub a::before {
  content: "→ ";
  font-size: .8em;
  color: var(--accent);
  opacity: 0;
  transition: opacity .15s, transform .15s;
  display: inline-block;
  transform: translateX(-4px);
}
.nav__sub a:hover::before {
  opacity: 1;
  transform: none;
}

/* 19. Step card — stronger step number visibility */
.step::before { opacity: .085; }

/* 20. Heading weight — h1 on page hero extra heavy */
.page-hero__title { font-weight: 700; }

/* ============================================================
   WOW VISUAL UPGRADES — Round 10 — Final Polish
   ============================================================ */

/* 1. Hero title line 2 — accent highlight reveal (delayed, matches text) */
.is-ready .hero__title .ln:nth-child(2) {
  border-radius: 6px;
  animation: lineHighlight .6s var(--ease) .5s both;
}
@keyframes lineHighlight {
  from { background: transparent; }
  to   { background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 72%); }
}

/* 2. Hero section — border at bottom toward marquee */
.hero { border-bottom: 1px solid var(--line); }

/* 3. Portfolio section head — align left variant */
#portfolio .section__head { text-align: left; }
#portfolio .section__head p { max-width: 60ch; }

/* 4. Strategy section — chip glow */
.approach__chip:hover {
  box-shadow: 0 32px 60px -20px rgba(58,107,255,.6);
}

/* 5. Checklist items — animated left border */
.checklist li { border-left: 3px solid var(--accent-line); padding-left: 1.2rem; transition: border-left-color .25s, background .2s; }
.checklist li:hover { border-left-color: var(--accent); background: var(--accent-soft); }

/* 6. Step-v hover — left border color */
.step-v { border-left: 3px solid var(--accent-line); }
.step-v:hover { border-left-color: var(--accent); }

/* 7. Review grid on reference page — column gap */
.reviews-grid { column-gap: 2rem; }

/* 8. Feat card — top border width */
.feat { border-top-width: 3px; }

/* 9. Value card text — better spacing */
.value p { margin-top: .8rem; }
.value h3 { margin-top: 0; }

/* 10. Navigation sub — white backdrop */
.nav__sub { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255,255,255,.96); }

/* 11. To-top arrow — upgrade style */
.to-top { font-size: 1rem; letter-spacing: .05em; }

/* 12. Hero stats — add subtle card */
.hero__stats { background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(244,243,239,.6)); }
@supports (backdrop-filter: blur(8px)) {
  .hero__stats { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

/* 13. Page hero subpage — bigger blobs */
.page-hero::before { background: radial-gradient(65% 90% at 92% 50%, rgba(58,107,255,.14), transparent 65%); }

/* 14. About photo — scale up on hover */
.about__frame img { transition: transform 1.2s var(--ease); }
.about__frame:hover img { transform: scale(1.04); }

/* 15. Hero title — improve accent weight */
.hero__title .accent { font-weight: 700; }

/* 16. Review slider — show dots pagination below on mobile */
@media (max-width: 620px) {
  .reviews-slider-wrap { padding-bottom: .5rem; }
}

/* 17. Nav CTA — ensure shimmer doesn't break nav CTA */
.nav__cta { overflow: hidden; }

/* 18. Forms — auto-fill override (preserve brand style) */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--bg-2) inset !important; -webkit-text-fill-color: var(--ink) !important; }
input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #fff inset !important; }

/* 19. Footer col gap — tighter */
.footer__inner { gap: 2rem; }

/* 20. Overall — smooth focus ring for a11y */
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   Slider dot pagination
   ============================================================ */
.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  margin-top: 1.4rem;
}
.slider-dot {
  width: 8px; height: 8px;
  border-radius: 100px;
  background: var(--accent-line);
  border: none;
  padding: 0;
  cursor: none;
  transition: background .3s var(--ease), width .35s var(--ease), transform .25s var(--ease);
}
.slider-dot.is-active {
  background: var(--accent);
  width: 28px;
}
.slider-dot:hover:not(.is-active) {
  background: var(--muted);
  transform: scale(1.2);
}
@media (pointer: coarse) { .slider-dot { cursor: auto; } }

/* ============================================================
   WOW VISUAL UPGRADES — Round 11 — Detail Work
   ============================================================ */

/* 1. Hero background — slow ambient gradient shift */
.hero {
  background-image:
    radial-gradient(ellipse 65% 50% at 75% 50%, rgba(58,107,255,.06), transparent 70%);
  animation: heroBgShift 20s ease-in-out infinite alternate;
}
@keyframes heroBgShift {
  0%   { background-position: 75% 50%; }
  100% { background-position: 65% 45%; }
}

/* 2. Google G badge — more visible */
.review__g {
  width: 28px; height: 28px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  flex-shrink: 0;
}

/* 3. FAQ large background number counter */
.faq-cols { counter-reset: faq-count; }

/* 4. Contact intro — accent glow border-left */
.contact__intro {
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-lg);
}

/* 5. Reviews section dark bg — revert to white for contrast */
.reviews-sec { background: var(--bg-2); }

/* 6. Rating card — shadow */
.reviews-rate {
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
}

/* 7. CTA section button — white with glow */
.cta .btn--primary {
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 18px 44px -16px rgba(0,0,0,.55);
}
.cta .btn--primary:hover {
  box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 24px 54px -18px rgba(0,0,0,.65);
}

/* 8. Values grid — tighter gap on medium screens */
@media (min-width: 621px) and (max-width: 980px) {
  .values { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
}

/* 9. Portfolio work hover — prevent native link outline */
.work:focus { outline: none; }
.work:focus-visible { outline: 2.5px solid var(--accent); }

/* 10. Steps — card left border line color matches step number */
.step:nth-child(1):hover { border-left-color: var(--accent); }
.step:nth-child(2):hover { border-left-color: #6b8fff; }
.step:nth-child(3):hover { border-left-color: #9fb4ff; }

/* 11. Nav logo area — allow proper space */
.nav__inner { gap: 1.5rem; }

/* 12. Sticky nav — compact logo on scroll */
.nav.is-scrolled .brand__logo { height: 32px; }

/* 13. Footer contact CI icons — text perfectly centered */
.footer__contact .ci { line-height: 1; }

/* 14. Approach text — second paragraph slightly muted */
.approach__text p + p { color: var(--muted); font-size: .97rem; }

/* 15. Hero stats strong — tabular nums for consistent spacing */
.hstat strong { font-variant-numeric: tabular-nums; }

/* 16. About frame overflow — ensure badge is visible */
.about__media { overflow: visible; }

/* 17. Featured review figcaption avatar — stronger */
.review__av--lg {
  width: 62px; height: 62px;
  font-size: 1.2rem;
  box-shadow: 0 8px 24px -8px rgba(58,107,255,.45);
}

/* 18. Intro — matching height always full viewport */
.intro { min-height: 100dvh; }

/* 19. Marquee reverse items — slightly smaller */
.marquee--reverse .marquee__track i { font-size: .8rem; opacity: .5; }

/* 20. Input focus — transition faster for snappier feel */
.field input, .field textarea { transition: border-color .18s, box-shadow .18s, background .18s; }

/* ============================================================
   WOW VISUAL UPGRADES — Round 12 — Micro-polish
   ============================================================ */

/* 1. Hero rating badge — animated ring on hover */
.hero__rating:hover {
  box-shadow: var(--shadow-sm), 0 0 0 8px rgba(58,107,255,.08);
  transform: translateY(-1px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hero__rating { transition: transform .3s var(--ease), box-shadow .4s var(--ease); }

/* 2. Value card — icon transforms on hover (scale instead of rotate for emoji) */
.value:hover .value__chip { transform: translateY(-6px) scale(1.08) rotate(-3deg); }

/* 3. Footer — copyright text refinement */
.footer__bottom { font-size: .82rem; letter-spacing: .02em; }

/* 4. Nav links — slightly heavier font weight */
.nav__links a:not(.nav__cta) { font-weight: 600; }

/* 5. Approach chip — bright accent above image */
.approach__chip { font-variant-numeric: tabular-nums; }

/* 6. Steps counter — ensure proper specificity */
.steps { counter-reset: wow-step; overflow: visible; }

/* 7. Hero avail dot — brighter green */
.avail__dot { background: #18d462; }

/* 8. Section soft gradient — slightly stronger */
.section--soft {
  background: linear-gradient(180deg, #f0eeea 0%, rgba(244,243,239,.45) 100%);
}

/* 9. Feat card h3 — larger */
.feat h3 { font-size: 1.3rem; }

/* 10. CTA inner elements — stronger z-index above shimmer */
.cta h2, .cta p, .cta .btn, .cta__ic { position: relative; z-index: 2; }

/* 11. Header logo — no filter on dark pages (only footer needs it) */
.nav .brand__logo { filter: none !important; }

/* 12. Grain — richer texture */
.grain {
  opacity: .06;
  background-size: 180px 180px;
}

/* 13. Slider dot buttons — use pointer cursor on coarse */
@media (pointer: coarse) { .slider-dot { cursor: pointer; } }

/* 14. Section head on approach (--left) */
.approach .section__head { text-align: left; }

/* 15. Work — ensure border-radius doesn't clip our before/after pseudo */
.work { isolation: isolate; }

/* 16. Stats area — use gap instead of margin for hstat items */
.hero__stats { align-items: flex-end; }

/* 17. Contact form submit — full width text centered */
.contact__form .btn--block { justify-content: center; font-size: 1.06rem; }

/* 18. Marquee border — slightly more opaque */
.marquee { border-block-color: rgba(0,0,0,.08); }

/* 19. Reviews rate block — sticky position on desktop */
@media (min-width: 981px) {
  .reviews-rate { position: sticky; top: 110px; }
}

/* 20. Page section eyebrow gap — consistent across subpages */
.section .eyebrow { margin-bottom: 1.5rem; }

/* ============================================================
   WOW VISUAL UPGRADES — Round 13 — Texture & Polish
   ============================================================ */

/* 1. Contact intro dark card — subtle dot texture */
.contact__intro {
  background-image:
    radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(160deg, #0e1323, var(--dark));
  background-size: 22px 22px, 100% 100%;
}

/* 2. Contact intro — heading font size */
.contact__intro h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }

/* 3. CI icons — hover glow in dark contact */
.contact__intro .ci {
  transition: background .2s, box-shadow .3s var(--ease), transform .25s var(--ease);
}
.contact__intro .contact__list li:hover .ci {
  transform: scale(1.1) rotate(-5deg);
  background: rgba(58,107,255,.25);
  box-shadow: 0 0 24px rgba(58,107,255,.3);
}

/* 4. Step connector — add arrow tip */
.step:not(:last-child)::after {
  background: linear-gradient(90deg, var(--accent-line) 0%, var(--accent) 60%, transparent 100%);
}

/* 5. Portfolio — smooth render on GPU */
.work__media img { will-change: transform; }

/* 6. Hero avail text — nowrap */
.hero__avail { white-space: nowrap; }

/* 7. Value section text — line-height */
.value p { line-height: 1.65; }

/* 8. Approach text bullet points in checklist (subpages) */
.checklist__mark { font-size: 1.05rem; }

/* 9. Reviews slider — transition smoother */
.slider__track { transition: transform .65s var(--ease2); }

/* 10. Page hero on narrow — compact stats */
@media (max-width: 620px) {
  .page-hero__stats { flex-direction: column; gap: 1rem; }
  .page-hero__stats .hstat { display: flex; align-items: center; gap: 1rem; }
  .page-hero__stats .hstat strong { font-size: 1.8rem; }
}

/* 11. Marquee — add 3D depth effect */
.marquee { perspective: 800px; }

/* 12. Review card — add date style */
.review__top span:last-of-type { font-size: .76rem; color: var(--muted); }

/* 13. FAQ open body — better typography */
.faq__body p { margin-top: .5rem; }
.faq__body li { padding: .55rem 1rem .55rem 1.6rem; }

/* 14. Nav height on bigger screens */
@media (min-width: 1400px) {
  .nav__inner { min-height: 90px; }
}

/* 15. Process section — add center align for CTA button */
#proces .center { margin-top: 4rem; }

/* 16. Footer col — add top border accent */
.footer__col:first-child { border-top: 2px solid var(--accent); padding-top: 2rem; }

/* 17. CTA icon emoji — add glow on mobile */
@media (max-width: 620px) {
  .cta__ic { width: 60px; height: 60px; font-size: 1.6rem; }
}

/* 18. About badge — add inner glow */
.about__badge { box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06); }

/* 19. Work media — ensure consistent height per column */
.work + .work .work__media img { aspect-ratio: auto; }

/* 20. Hero stats number suffix — normal weight */
.hstat strong { font-weight: 700; }

/* Also clean up the redundant aspect-ratio rule */
.work + .work .work__media img { aspect-ratio: auto; }

/* ============================================================
   WOW VISUAL UPGRADES — Round 14 — Conversion Polish
   ============================================================ */

/* 1. Hero CTA — pulsing glow to draw attention */
.hero__actions .btn--primary:not(:hover) {
  animation: heroBtnGlow 3.5s ease-in-out 2s infinite;
}
@keyframes heroBtnGlow {
  0%, 100% { box-shadow: 0 18px 36px -16px rgba(58,107,255,.7); }
  50%       { box-shadow: 0 18px 36px -16px rgba(58,107,255,.7), 0 0 28px rgba(58,107,255,.22); }
}

/* 2. Hero visual container — ensure proper stacking */
.hero__visual { z-index: 1; }

/* 3. Page hero container — stay above decorative blobs */
.page-hero .container { position: relative; z-index: 3; }

/* 4. Process section — connected card row */
#proces .steps {
  position: relative;
}

/* 5. Footer — logo area align */
.footer__col:first-child .footer__logo {
  margin-bottom: 1.8rem;
}

/* 6. Value card chip icon — contain */
.value__chip img { image-rendering: auto; }

/* 7. Stars throughout — consistent size */
.stars { font-size: 1rem; }
.hero__rating .stars { font-size: .92rem; }

/* 8. Review card header — top padding balance */
.review { padding-top: 1.6rem; }

/* 9. About media — ensure overflow visible for badge */
@media (max-width: 980px) {
  .about__media { padding-bottom: 24px; padding-right: 24px; }
}

/* 10. Section head paragraph — muted tones stronger */
.section__head p { color: var(--ink-soft); }

/* 11. FAQ body link — remove border-bottom artifact */
.faq__body a { border-bottom: 1px solid var(--accent-line); text-decoration: none; }

/* 12. Contact form note — success state animation */
.form__note.is-ok {
  animation: noteSlideIn .4s var(--ease) forwards;
}
@keyframes noteSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* 13. CTA — stronger text contrast */
.cta p { color: #c8cce0; }

/* 14. Approach image — ensure parallax works with relative frame */
.approach__media { overflow: visible; }

/* 15. Blob animations — more fluid easing */
@keyframes float1 { 0%, 100% { transform: none; } 50% { transform: translate(-50px, 45px) scale(1.12); } }
@keyframes float2 { 0%, 100% { transform: none; } 50% { transform: translate(55px, -35px) scale(1.1); } }

/* 16. Hero scroll indicator — stronger contrast */
.hero__scroll { color: var(--ink-soft); font-weight: 600; }

/* 17. Values grid — taller cards uniform height */
.values { align-items: stretch; }
.value { display: flex; flex-direction: column; justify-content: flex-start; }

/* 18. Feat hover box-shadow — more accent glow */
.feat:hover { box-shadow: 0 28px 64px -24px rgba(58,107,255,.22); }

/* 19. Nav cta — gradient background on hover */
.nav__cta:hover { background: linear-gradient(135deg, var(--accent), #5580ff); }

/* 20. Grain — responsive scale */
@media (max-width: 620px) {
  .grain { background-size: 160px 160px; }
}

/* ============================================================
   WOW VISUAL UPGRADES — Round 15
   Timeline nodes · stat shimmer · nav underline · micro-polish
   ============================================================ */

/* 1. Step-v vertical timeline — circular badge nodes */
.step-v__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent), #5580ff);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  font-family: var(--serif);
  letter-spacing: -.01em;
  box-shadow: 0 6px 20px -8px rgba(58,107,255,.65);
  flex-shrink: 0;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step-v:hover .step-v__n {
  transform: scale(1.12);
  box-shadow: 0 8px 28px -8px rgba(58,107,255,.8);
}

/* 2. Stat box — shimmer sweep on hover */
.stat-box { overflow: hidden; }
.stat-box::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: -120%;
  width: 60%;
  background: linear-gradient(105deg, transparent 20%, rgba(58,107,255,.07) 50%, transparent 80%);
  transition: left .55s var(--ease);
  pointer-events: none;
}
.stat-box:hover::after { left: 140%; }

/* 3. Feat card — accent bottom reveal line */
.feat::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 1.8rem;
  right: 1.8rem;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #7096ff, transparent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.feat:hover::after { transform: scaleX(1); }

/* 4. Hstat — vertical separator on desktop */
.page-hero__stats .hstat + .hstat {
  padding-left: clamp(1.5rem, 4vw, 3.2rem);
  border-left: 1px solid var(--line);
}

/* 5. Btn link — faster underline + accent color on hover */
.btn--link:hover { letter-spacing: .01em; }
.btn--link::after { transition: transform .3s var(--ease); }

/* 6. Nav links — slide-from-left underline */
.nav__links a:not(.nav__cta):not(.nav__drop-trigger) {
  position: relative;
}
.nav__links a:not(.nav__cta):not(.nav__drop-trigger)::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links a:not(.nav__cta):not(.nav__drop-trigger):hover::after,
.nav__links a.is-active:not(.nav__cta)::after { transform: scaleX(1); }

/* 7. Footer H4 headings — accent top line */
.footer__col h4 {
  position: relative;
  padding-top: 1rem;
  margin-bottom: 1.2rem;
}
.footer__col h4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* 8. Review featured — left accent bar + gradient tint */
.review-featured {
  border-left: 4px solid var(--accent);
  background: linear-gradient(135deg, rgba(58,107,255,.025) 0%, var(--card) 50%);
}

/* 9. Section--soft subtle dot texture overlay */
.section--soft::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .45;
  pointer-events: none;
  z-index: 0;
}
.section--soft > .container { position: relative; z-index: 1; }

/* 10. Page hero title — gradient span highlight */
.page-hero__title .hl,
.hero__title .hl {
  background: linear-gradient(135deg, var(--accent) 0%, #7096ff 60%, #a0b8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 11. Steps-v — left border gradient on container */
.steps-v {
  border-left: 2px solid var(--accent-line);
  padding-left: .5rem;
}
.step-v { border-left: none; }
.step-v:hover { border-left: none; }

/* 12. About badge — stronger glass effect */
.about__badge {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 64px -20px rgba(10,14,26,.45), 0 0 0 1px rgba(58,107,255,.1);
}

/* 13. Hero visual — colored shadow pulse */
@keyframes visualGlow {
  0%, 100% { filter: drop-shadow(0 50px 70px rgba(10,14,26,.22)) drop-shadow(0 0 55px rgba(58,107,255,.2)); }
  50%       { filter: drop-shadow(0 50px 80px rgba(10,14,26,.28)) drop-shadow(0 0 75px rgba(58,107,255,.32)); }
}
.hero__visual img { animation: visualGlow 5s ease-in-out 2s infinite; }

/* 14. Stat box strong — number scale up on hover */
.stat-box:hover strong { transform: scale(1.05); display: block; }
.stat-box strong { transition: transform .35s var(--ease); }

/* 15. Value card — hover accent ring */
.value:hover {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(58,107,255,.08), var(--shadow);
}

/* 16. Mobile steps-v — no left border on narrow */
@media (max-width: 620px) {
  .steps-v { border-left: none; padding-left: 0; }
}

/* 17. Approach chip — glass treatment */
.approach__chip {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 32px -12px rgba(10,14,26,.18), 0 0 0 1px rgba(58,107,255,.08);
}

/* 18. Footer bottom — gradient separator */
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.15);
}

/* 19. Scroll progress bar — gradient */
.scroll-progress {
  background: linear-gradient(90deg, var(--accent), #7096ff, #a0b8ff);
}

/* 20. To-top button — rotate on hover */
.to-top { transition: transform .35s var(--ease), background .25s, opacity .3s, box-shadow .3s; }
.to-top:hover { transform: translateY(-4px) rotate(-10deg); }

/* ============================================================
   WOW VISUAL UPGRADES — Round 16
   Page hero ambient · dropdown glass · typography micro-polish
   ============================================================ */

/* 1. Page hero — ambient radial glow behind content */
.page-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse 55% 70% at 80% 30%, rgba(58,107,255,.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.page-hero .container { z-index: 1; }

/* 2. Nav dropdown — premium glass card treatment */
.nav__sub {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 24px 60px -20px rgba(10,14,26,.22), 0 0 0 1px rgba(10,14,26,.04);
}
.nav__sub a {
  position: relative;
  transition: color .2s, padding-left .2s var(--ease);
}
.nav__sub a::before {
  content: "";
  position: absolute;
  left: .75rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%) scale(0);
  transition: transform .25s var(--ease);
}
.nav__sub a:hover::before { transform: translateY(-50%) scale(1); }
.nav__sub a:hover { padding-left: 1.8rem; color: var(--accent); }

/* 3. Footer LinkedIn button — premium hover */
.footer__in {
  transition: background .25s, transform .25s var(--ease), box-shadow .25s;
}
.footer__in:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px -10px rgba(58,107,255,.7);
}

/* 4. Review card — hover lift with accent glow */
.review:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -24px rgba(58,107,255,.18), 0 0 0 1px var(--accent-line);
}

/* 5. Featured review — quote mark size pulse on scroll in */
.review-featured.in .review-featured__mark {
  animation: quotePulse .7s var(--ease) .3s both;
}
@keyframes quotePulse {
  from { opacity: 0; transform: scale(.6) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* 6. Eyebrow number — accent glow */
.eyebrow i {
  text-shadow: 0 0 18px rgba(58,107,255,.35);
}

/* 7. CTA section — stronger gradient border */
.cta {
  border: 1px solid rgba(58,107,255,.18);
  box-shadow: 0 0 0 6px rgba(58,107,255,.04), var(--shadow);
}

/* 8. Feat icon — hover rotation */
.feat:hover .feat__ic { transform: rotate(-6deg) scale(1.1); }
.feat__ic { transition: transform .35s var(--ease); }

/* 9. Approach chip — animate in */
.approach__chip.in {
  animation: chipReveal .6s var(--ease) .4s both;
}
@keyframes chipReveal {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* 10. Footer bottom — year highlight */
.footer__bottom span { font-size: .82rem; color: rgba(255,255,255,.35); }

/* ============================================================
   Case Callout — dark dramatic before/after card
   ============================================================ */
.case-callout {
  background: var(--dark);
  border-radius: var(--radius);
  padding: clamp(2.4rem, 5vw, 3.6rem) clamp(2rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
}
.case-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 120%, rgba(58,107,255,.22), transparent 70%);
  pointer-events: none;
}
.case-callout__body {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.case-callout__before,
.case-callout__after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}
.case-callout__val {
  font: 700 clamp(2.6rem, 6vw, 4.2rem) var(--serif);
  letter-spacing: -.04em;
  line-height: 1;
}
.case-callout__before .case-callout__val { color: rgba(255,255,255,.45); }
.case-callout__after .case-callout__val {
  color: #fff;
  background: linear-gradient(135deg, #fff 0%, #a0b8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.case-callout__unit { font: 500 .9rem var(--sans); color: rgba(255,255,255,.5); }
.case-callout__after .case-callout__unit { color: rgba(255,255,255,.7); }
.case-callout__tag {
  font: 600 .72rem var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .22rem .7rem;
  border-radius: 100px;
  margin-top: .4rem;
}
.case-callout__before .case-callout__tag { background: rgba(255,255,255,.07); color: rgba(255,255,255,.4); }
.case-callout__after .case-callout__tag { background: rgba(58,107,255,.3); color: #a0b8ff; border: 1px solid rgba(58,107,255,.4); }
.case-callout__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: var(--accent);
}
.case-callout__arrow svg { width: 80px; height: 24px; }
.case-callout__arrow span { font: 500 .78rem var(--sans); color: rgba(255,255,255,.4); letter-spacing: .08em; text-transform: uppercase; }
.case-callout__label { position: relative; z-index: 1; }
.case-callout .eyebrow { color: rgba(255,255,255,.6); }
.case-callout .eyebrow i { color: var(--accent); border-right-color: rgba(255,255,255,.18); }
.case-callout .btn--primary { position: relative; z-index: 1; }

@media (max-width: 620px) {
  .case-callout__arrow svg { width: 50px; }
  .case-callout__body { gap: 1rem; }
}

/* Traffic growth mini chart */
.traffic-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 72px;
  padding-bottom: 20px;
  position: relative;
  z-index: 1;
  margin-top: .4rem;
}
.traffic-chart__bar {
  position: relative;
  flex: 1;
  height: var(--h);
  background: rgba(255,255,255,.1);
  border-radius: 4px 4px 0 0;
  overflow: visible;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .9s var(--ease);
}
.case-callout.in .traffic-chart__bar { transform: scaleY(1); }
.case-callout.in .traffic-chart__bar:nth-child(2) { transition-delay: .1s; }
.case-callout.in .traffic-chart__bar:nth-child(3) { transition-delay: .2s; }
.case-callout.in .traffic-chart__bar:nth-child(4) { transition-delay: .3s; }
.traffic-chart__bar--peak {
  background: linear-gradient(180deg, rgba(58,107,255,.95), rgba(58,107,255,.55));
  box-shadow: 0 0 18px rgba(58,107,255,.35);
}
.traffic-chart__bar span {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font: 500 .55rem var(--sans);
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ============================================================
   WOW VISUAL UPGRADES — Round 17
   Form fields · contact icons · info-box · heading polish
   ============================================================ */

/* 1. Form fields — premium focus with accent underline */
.field input, .field textarea, .field select {
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58,107,255,.12), 0 2px 0 0 var(--accent);
  outline: none;
}

/* 2. Contact list icons — accent color on link hover */
.contact__list a:hover { color: var(--accent); }
.contact__list .ci {
  transition: transform .25s var(--ease), color .2s;
  display: inline-block;
}
.contact__list li:hover .ci { transform: scale(1.2); color: var(--accent); }

/* 3. Info-box — dark left border + stronger shadow */
.info-box {
  border-left: 3px solid var(--accent);
  background: linear-gradient(135deg, rgba(58,107,255,.03), var(--card));
}

/* 4. Checklist mark — animated check */
.checklist__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dk);
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background .25s, transform .25s var(--ease);
}
.checklist li:hover .checklist__mark {
  background: var(--accent);
  color: #fff;
  transform: scale(1.1);
}

/* 5. Head underline — gradient version */
.head-underline {
  background: linear-gradient(90deg, var(--accent), #a0b8ff, transparent);
  opacity: .7;
}

/* 6. Page-hero availability dot — add to subpages */
.page-hero__avail {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: 500 .8rem var(--sans);
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.page-hero__avail::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18d462;
  box-shadow: 0 0 0 2px rgba(24,212,98,.25);
  animation: pulseGreen 2.2s ease-in-out infinite;
}

/* 7. Footer contact items — hover accent */
.footer__contact a:hover { color: var(--accent); }
.footer__contact .ci { color: var(--accent); opacity: .7; }

/* 8. Reviews rate big — gradient text */
.reviews-rate__big {
  background: linear-gradient(135deg, var(--ink), var(--accent-dk));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 9. Review card blockquote — larger quote on first word */
.review blockquote::before {
  content: "\201C";
  font: 700 2rem var(--serif);
  color: var(--accent-line);
  line-height: 0;
  position: relative;
  top: .5rem;
  margin-right: .15rem;
}

/* 10. Approach text h3 — gradient on key word */
.approach__text h3 { line-height: 1.15; }

/* 11. Feat cards grid — equal height */
.feats { align-items: stretch; }
.feat { display: flex; flex-direction: column; }
.feat p { flex: 1; }

/* 12. About badge — scale in animation */
.about__badge.in { animation: badgeIn .6s var(--ease) .5s both; }
@keyframes badgeIn {
  from { opacity: 0; transform: translateY(20px) scale(.85); }
  to   { opacity: 1; transform: none; }
}

/* 13. Nav dropdown caret — smooth rotation */
.has-dropdown.is-open .drop-caret { display: inline-block; transform: rotate(180deg); }
.drop-caret { display: inline-block; transition: transform .3s var(--ease); }

/* 14. Stat-box — top gradient bar thicker accent */
.stat-box { position: relative; }
.stat-box::before { height: 3px; }

/* 15. Step vertical connector — gradient fade at bottom of container */
.steps-v::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -.5rem;
  width: 2px;
  height: 2rem;
  background: linear-gradient(transparent, var(--accent-line));
  pointer-events: none;
}

/* ============================================================
   Results Strip — dark inline metrics bar
   ============================================================ */
.results-strip {
  background: var(--dark);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 0;
  position: relative;
  overflow: hidden;
}
.results-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 150% at 50% -20%, rgba(58,107,255,.15), transparent 65%);
  pointer-events: none;
}
.results-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 3rem);
  position: relative;
  z-index: 1;
}
.results-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .25rem;
}
.results-strip__item strong {
  font: 700 clamp(1.6rem, 3vw, 2.4rem) var(--serif);
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #fff 0%, #a0b8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-variant-numeric: tabular-nums;
}
.results-strip__item span {
  font: 500 .8rem var(--sans);
  color: rgba(255,255,255,.45);
  max-width: 14ch;
  line-height: 1.3;
}
.results-strip__div {
  width: 1px;
  height: 2.4rem;
  background: rgba(255,255,255,.1);
}
@media (max-width: 620px) {
  .results-strip__div { display: none; }
  .results-strip__inner { gap: 1.5rem 2rem; }
}

/* ============================================================
   WOW VISUAL UPGRADES — Round 18
   Typography · Portfolio depth · Marquee polish · Global micro
   ============================================================ */

/* 1. Heading font-feature-settings — more refined rendering */
h1, h2, h3 {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* 2. Portfolio work item — stronger hover depth */
.work {
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.work:hover { box-shadow: 0 32px 80px -24px rgba(10,14,26,.3); }

/* 3. Marquee track spans — subtle hover scale on touch via parent */
.marquee__track span { transition: color .2s; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* 4. Value chip image — subtle entrance scale */
.value__chip { transition: transform .4s var(--ease); }
.value:hover .value__chip { transform: scale(1.1) rotate(-5deg); }

/* 5. Page hero stats — stronger separator and muted label */
.page-hero__stats .hstat span { font-size: .82rem; }

/* 6. Featured review mark — deeper accent */
.review-featured__mark { color: rgba(58,107,255,.15); }

/* 7. Section head h2 — max width for editorial readability */
.section__head h2 { max-width: 24ch; }

/* 8. Reduced motion — ensure all animations off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 9. Nav scrolled state — stronger shadow */
.nav.is-scrolled {
  box-shadow: 0 1px 0 var(--line), 0 8px 32px -20px rgba(10,14,26,.12);
}

/* 10. FAQ open state — accent background tint */
.faq__item[open] {
  background: linear-gradient(135deg, rgba(58,107,255,.03), transparent 60%);
  border-radius: var(--radius-sm);
  padding: 0 .6rem;
  margin-inline: -.6rem;
}

/* 11. CTA icon — rotate on section reveal */
.cta.in .cta__ic {
  animation: ctaIconSpin .6s var(--ease) .2s both;
}
@keyframes ctaIconSpin {
  from { transform: rotate(-20deg) scale(.7); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* 12. Review avatar — hover ring */
.review__av:hover {
  box-shadow: 0 0 0 3px var(--accent);
  transform: scale(1.08);
  transition: transform .25s var(--ease), box-shadow .25s;
}

/* 13. Approach media image — deeper shadow on large screens */
@media (min-width: 980px) {
  .approach__media .reveal-img img {
    box-shadow: 0 40px 80px -30px rgba(10,14,26,.28);
  }
}

/* 14. Hero scroll indicator — animated bounce */
@keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.hero__scroll { animation: scrollBounce 2.5s ease-in-out 3s infinite; }

/* 15. Footer links — accent color on hover with transition */
.footer__links a { transition: color .2s, padding-left .2s var(--ease); }
.footer__links a:hover { color: var(--accent); padding-left: .4rem; }

/* ============================================================
   WOW VISUAL UPGRADES — Round 19 (Final polish)
   Head underline · About frame depth · Price callout · Blobs
   ============================================================ */

/* 1. Head underline — wider, more dramatic gradient */
.head-underline {
  display: block;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, #7096ff 60%, transparent 100%);
  border-radius: 3px;
  margin-top: 1.4rem;
  opacity: .85;
}
.head-underline--sm { width: 36px; }

/* 2. About frame accent square — richer gradient, slightly more visible */
.about__frame::before {
  background: linear-gradient(145deg, var(--accent) 0%, #7096ff 50%, #a0b8ff 100%);
  opacity: .92;
  box-shadow: 0 12px 40px -16px rgba(58,107,255,.5);
}

/* 3. Price highlight — accent number pill */
strong[data-count] {
  display: inline-block;
}

/* 4. Hero blobs — slightly more visible */
.blob--1 {
  background: radial-gradient(circle, rgba(58,107,255,.42), transparent 65%);
}
.blob--2 {
  background: radial-gradient(circle, rgba(100,150,255,.22), transparent 65%);
}

/* 5. Results strip — pulse animation on load */
.results-strip__item strong {
  display: block;
  animation: resultsPop .6s var(--ease) both;
}
.results-strip__item:nth-child(3) strong { animation-delay: .15s; }
.results-strip__item:nth-child(5) strong { animation-delay: .3s; }
.results-strip__item:nth-child(7) strong { animation-delay: .45s; }
@keyframes resultsPop {
  from { opacity: 0; transform: scale(.85) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 6. Page hero lead text — max-width for readability */
.page-hero__lead { max-width: 64ch; }

/* 7. Review featured blockquote — italic + slightly larger */
.review-featured blockquote { font-size: clamp(1.3rem, 2.8vw, 2.1rem); }

/* 8. Contact intro — link color in dark card */
.contact__intro a { color: var(--accent-line); }
.contact__intro a:hover { color: #fff; }

/* 9. Mobile nav links — larger tap targets */
@media (max-width: 980px) {
  .nav__links a { padding-block: .8rem; }
}

/* 10. Feat h3 — slightly tighter tracking */
.feat h3 { letter-spacing: -.02em; }

/* 11. Step-v connector — left border matches new node style */
.steps-v { border-left-color: rgba(58,107,255,.2); }
.step-v:hover .steps-v { border-left-color: var(--accent); }

/* 12. Form submit button — full-width block with larger size */
.btn--block { width: 100%; justify-content: center; font-size: 1.08rem; padding: .9rem 1.6rem; }

/* 13. Page hero stats strong — larger on desktop */
@media (min-width: 980px) {
  .page-hero__stats .hstat strong { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
}

/* 14. Value cards — 3-col layout min height alignment */
@media (min-width: 980px) {
  .values { grid-template-rows: auto; }
  .value { min-height: 180px; }
}

/* 15. Intro word — larger on big screens */
@media (min-width: 1200px) {
  .intro__word { font-size: clamp(2.2rem, 5vw, 4rem); }
}

/* Contact social proof widget */
.contact__social-proof {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.contact__avatars {
  display: flex;
  flex-direction: row-reverse;
}
.contact__av {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #7096ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 .7rem var(--sans);
  letter-spacing: .02em;
  border: 2px solid var(--dark);
  margin-left: -8px;
}
.contact__av:last-child { margin-left: 0; }
.contact__social-proof p { font-size: .88rem; color: rgba(255,255,255,.65); line-height: 1.4; }
.contact__social-proof strong { color: #fff; }

/* Stat marquee — dark accent variant */
.stat-marquee {
  background: var(--dark);
  border-block: none;
  margin-top: 0;
  padding: 1.2rem 0;
}
.stat-marquee .marquee__track span {
  font-size: clamp(.9rem, 1.5vw, 1.1rem);
  font-weight: 500;
  color: rgba(255,255,255,.7);
  font-family: var(--sans);
  letter-spacing: .01em;
}
.stat-marquee .marquee__track i { color: var(--accent); opacity: .6; font-size: .7rem; }

/* Přeskočení intra při navigaci (po první návštěvě v rámci session) */
.no-intro .intro { display: none !important; }

/* Unified layout, typography and interaction cleanup */
:root { --container: 1280px; --page-pad: 32px; }
html { scroll-padding-top: 84px; }
body { cursor: auto !important; }
body.menu-open { overflow: hidden; }
a, button, summary { cursor: pointer !important; }
.grain, .hero__scroll, .head-underline { display: none !important; }
.container {
  width: min(calc(100% - (var(--page-pad) * 2)), var(--container));
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 0;
}
h1, h2, h3, h4, .hero__title, .page-hero__title, .section__head h2 {
  font-weight: 500;
  letter-spacing: 0;
  text-wrap: balance;
}
h1, .hero__title, .page-hero__title { line-height: 1.04; }
h2, .section__head h2 { line-height: 1.12; }
h3, h4 { line-height: 1.22; }
.page-hero__title { font-size: clamp(3rem, 6vw, 5.4rem); }
.section__head, .section__head--center {
  max-width: 820px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.section__head p, .page-hero__lead, .approach__text > p { max-width: 70ch; }
.section { padding-block: clamp(4.5rem, 7vw, 7rem); }
.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.hl, .accent { color: #2856d9; background: none; -webkit-text-fill-color: currentColor; }
.btn { white-space: normal; text-align: center; }
.google-rating {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  width: fit-content;
  margin-bottom: 1.4rem;
  padding: .7rem 1rem;
  color: var(--dark);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px -20px rgba(10,14,26,.35);
  text-decoration: none;
}
.google-rating__g { font: 600 1.65rem var(--sans); color: #4285f4; }
.google-rating strong { margin-right: .35rem; }
.google-rating .stars { color: #e6a800; letter-spacing: .02em; }
.google-rating small { display: block; margin-top: .12rem; color: var(--muted); font-size: .76rem; }
.portfolio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.work { color: var(--dark); box-shadow: none; }
.work__media { aspect-ratio: 4 / 3; overflow: hidden; }
.work__media img { width: 100%; height: 100%; object-fit: cover; }
.work::after {
  content: attr(data-title);
  position: static;
  display: block;
  padding-top: .85rem;
  color: var(--dark);
  opacity: 1;
  transform: none;
  font: 500 1rem var(--sans);
}
.approach__list { display: grid; gap: 1rem; margin: 1.6rem 0 2rem; padding: 0; list-style: none; }
.approach__list li { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.approach__list span { color: var(--muted); }
.privacy { padding-block: clamp(8rem, 12vw, 11rem) clamp(5rem, 8vw, 8rem); }
.privacy__inner { max-width: 820px; }
.privacy h1 { margin-bottom: 1.5rem; font-size: clamp(2.8rem, 6vw, 5rem); }
.privacy h2 { margin: 3rem 0 1rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.privacy p, .privacy li { color: var(--muted); line-height: 1.75; }
.privacy ul { display: grid; gap: .55rem; padding-left: 1.25rem; }
.form__privacy { margin: -.2rem 0 .8rem; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.form__privacy a { color: currentColor; text-decoration: underline; }
@media (max-width: 980px) {
  :root { --page-pad: 24px; }
  .nav__links { top: 66px; }
  .portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  :root { --page-pad: 20px; }
  .portfolio { grid-template-columns: 1fr; gap: 34px; }
  .approach__list li { grid-template-columns: 1fr; gap: .35rem; }
}

/* ============================================================
   Layout refinements — July 2026
   ============================================================ */

/* Homepage results use the same width and visual scale as the rest of the page. */
.results-strip__inner {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, auto));
  justify-content: space-between;
  width: 100%;
  gap: clamp(.9rem, 2vw, 2.2rem);
}
.results-strip__item {
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}
.results-strip__item strong {
  font: 500 clamp(2.25rem, 4vw, 3.7rem) var(--serif);
  letter-spacing: 0;
  line-height: .95;
}
.results-strip__item span {
  max-width: 23ch;
  color: rgba(255,255,255,.7);
  font-size: clamp(.84rem, 1.1vw, .98rem);
  line-height: 1.4;
}
.results-strip__div {
  align-self: center;
  height: 4rem;
}

/* Two-column portfolio makes the wide screenshots readable. */
.portfolio {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3.4rem) clamp(1.5rem, 2.5vw, 2.4rem);
}
.work {
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
}
.work__media {
  aspect-ratio: 16 / 9;
  border-radius: 15px;
  background: #eef0f4;
}
.work__media img { object-position: center top; }
.work::after {
  padding: 1rem .45rem .35rem;
  font-size: 1.08rem;
}
.work[data-title]::before { display: none; }
.work:nth-child(4n + 2),
.work:nth-child(4n + 3) { background: #f4f6fa; }

/* Non-clickable process cards have no misleading hover and only one number. */
.step::before { content: none !important; }
.step,
.step:hover,
.step:nth-child(1):hover,
.step:nth-child(2):hover,
.step:nth-child(3):hover {
  transform: none;
  border-left-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.step:not(:last-child)::after { opacity: .55; }
.step__num {
  flex: 0 0 auto;
  font-size: clamp(2rem, 3vw, 2.7rem);
  letter-spacing: 0;
}

/* Repeated CTA and featured review align with the full content grid. */
.cta,
.review-featured {
  width: 100%;
  max-width: none;
}
.cta { padding-inline: clamp(1.5rem, 8vw, 7rem); }

/* The hovered SEO result-card state is now the permanent state. */
.stat-box,
.stat-box:hover {
  transform: none;
  border-color: var(--accent-line);
  background: linear-gradient(145deg, #fff 20%, rgba(58,107,255,.075));
  box-shadow: 0 22px 50px -28px rgba(40,86,217,.48), 0 0 0 1px rgba(58,107,255,.08);
}
.stat-box strong,
.stat-box:hover strong { transform: scale(1.05); }
.stat-box::after { left: 140%; }

/* Light-grey footer with dark, readable text. */
.footer {
  background: #f0f2f5;
  border-top-color: #dfe2e8;
}
.footer::before {
  background-image: radial-gradient(rgba(10,14,26,.05) 1px, transparent 1px);
}
.footer::after { color: rgba(10,14,26,.025); }
.footer__logo {
  filter: none;
  opacity: 1;
}
.footer__col h4 { color: var(--muted); }
.footer__contact li,
.footer__links li,
.footer__links a { color: var(--ink-soft); }
.footer__contact .ci {
  background: #fff;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.footer__links a:hover,
.footer__contact a:hover { color: var(--accent); }
.footer__in {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
}
.footer__bottom {
  border-top-color: #dfe2e8;
  background: rgba(255,255,255,.35);
}
.footer__bottom span { color: var(--muted); }

/* Service heroes: text and a relevant visual share the desktop composition. */
.page-hero--service .container {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 6.5rem);
}
.page-hero--service .page-hero__title {
  max-width: 12.5ch;
  font-size: clamp(3rem, 5vw, 4.8rem);
}
.page-hero--service .page-hero__stats {
  justify-content: flex-start;
  gap: clamp(1rem, 2vw, 2rem);
}
.page-hero--service .page-hero__stats .hstat {
  min-width: 0;
}
.page-hero--service .page-hero__stats .hstat + .hstat {
  padding-left: clamp(1rem, 2vw, 2rem);
}
.page-hero--service .page-hero__stats .hstat strong {
  font-size: clamp(1.55rem, 2.3vw, 2.15rem);
  letter-spacing: 0;
}
.page-hero--service .page-hero__stats .hstat span {
  max-width: 17ch;
  line-height: 1.35;
}
.service-visual {
  position: relative;
  width: min(100%, 550px);
  min-height: 470px;
  justify-self: end;
}
.service-visual::before {
  content: "";
  position: absolute;
  inset: 12% 4% 5% 8%;
  border-radius: 42% 58% 55% 45%;
  background: rgba(58,107,255,.11);
  filter: blur(1px);
  transform: rotate(-8deg);
}
.service-visual__window {
  position: absolute;
  inset: 13% 5% 13% 5%;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(10,14,26,.1);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 38px 90px -38px rgba(10,14,26,.42);
  transform: rotate(2deg);
}
.service-visual__toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: #f7f8fa;
}
.service-visual__toolbar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccd0d9;
}
.service-visual__toolbar span {
  margin-left: auto;
  color: var(--muted);
  font: 500 .72rem var(--sans);
}
.service-visual__badge {
  position: absolute;
  z-index: 2;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 15px 40px -24px rgba(10,14,26,.45);
  color: var(--ink);
  font: 500 .82rem var(--sans);
  animation: serviceBadgeFloat 4.5s ease-in-out infinite;
}
.service-visual__badge--a { top: 7%; right: -2%; }
.service-visual__badge--b { bottom: 5%; left: 0; animation-delay: -2.1s; }
@keyframes serviceBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Web visual */
.service-visual__canvas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 330px;
  padding: clamp(2.4rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 85% 20%, rgba(58,107,255,.16), transparent 28%),
    #fff;
}
.service-visual__canvas small {
  margin-bottom: 1rem;
  color: var(--accent);
  font: 600 .72rem var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.service-visual__canvas strong {
  color: var(--ink);
  font: 500 clamp(2rem, 3.4vw, 3rem)/1.03 var(--serif);
}
.service-visual__line {
  width: 58%;
  height: 7px;
  margin-top: .7rem;
  border-radius: 9px;
  background: #e8eaf0;
}
.service-visual__line--lg { width: 82%; margin-top: 1.6rem; }
.service-visual__canvas b {
  margin-top: 2rem;
  padding: .75rem 1rem;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font: 500 .8rem var(--sans);
}

/* SEO visual */
.service-visual__chart {
  position: absolute;
  inset: 105px 42px 48px;
  display: flex;
  align-items: flex-end;
  gap: 15px;
  padding-top: 65px;
  border-bottom: 1px solid var(--line);
}
.service-visual__chart::before,
.service-visual__chart::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: var(--line);
}
.service-visual__chart::before { top: 34%; }
.service-visual__chart::after { top: 66%; }
.service-visual__chart span {
  z-index: 1;
  flex: 1;
  height: var(--h);
  min-height: 20px;
  border-radius: 10px 10px 2px 2px;
  background: linear-gradient(180deg, #7397ff, var(--accent));
  box-shadow: 0 10px 24px -12px rgba(58,107,255,.7);
}
.service-visual__result {
  position: absolute;
  top: 78px;
  left: 42px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.service-visual__result strong { color: var(--accent); font: 500 2.7rem var(--serif); }
.service-visual__result span { color: var(--muted); font-size: .78rem; }

/* PPC visual */
.service-visual__metric {
  display: flex;
  flex-direction: column;
  padding: 3.2rem 3rem 1rem;
}
.service-visual__metric small { color: var(--muted); font-size: .78rem; }
.service-visual__metric strong { color: var(--ink); font: 500 clamp(2.8rem, 5vw, 4.5rem) var(--serif); }
.service-visual__metric span { color: #138a4b; font: 500 .8rem var(--sans); }
.service-visual__spark {
  display: flex;
  align-items: flex-end;
  gap: 11px;
  height: 150px;
  margin: 1rem 3rem 0;
}
.service-visual__spark i {
  flex: 1;
  height: 28%;
  border-radius: 7px 7px 2px 2px;
  background: #dce4ff;
}
.service-visual__spark i:nth-child(2) { height: 40%; }
.service-visual__spark i:nth-child(3) { height: 34%; }
.service-visual__spark i:nth-child(4) { height: 62%; }
.service-visual__spark i:nth-child(5) { height: 75%; }
.service-visual__spark i:nth-child(6) { height: 92%; background: var(--accent); }

/* Graphic-design visual */
.service-visual__brand {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 1.8rem;
  padding: 3.2rem 2.7rem 2rem;
}
.service-visual__brand > strong {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 25px;
  background: var(--ink);
  color: #fff;
  font: 500 3.2rem var(--serif);
}
.service-visual__brand div { display: grid; gap: .45rem; }
.service-visual__brand b { font: 500 1rem var(--serif); }
.service-visual__brand span { color: var(--muted); font-size: .72rem; }
.service-visual__swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  padding: 0 2.7rem;
}
.service-visual__swatches i {
  aspect-ratio: 1.25;
  border-radius: 13px;
  background: var(--ink);
}
.service-visual__swatches i:nth-child(2) { background: var(--accent); }
.service-visual__swatches i:nth-child(3) { background: #b8c8ff; }
.service-visual__swatches i:nth-child(4) { background: #eef0f4; }

/* Case studies use an editorial hierarchy instead of a generic dark box. */
.case-callout {
  align-items: flex-start;
  padding: clamp(2.5rem, 5vw, 4.7rem);
  text-align: left;
}
.case-callout::before {
  background:
    linear-gradient(115deg, rgba(58,107,255,.12), transparent 42%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(58,107,255,.24), transparent 70%);
}
.case-callout__title {
  position: relative;
  z-index: 1;
  max-width: 20ch;
  color: #fff;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: 1.04;
}
.case-callout__lead {
  position: relative;
  z-index: 1;
  max-width: 65ch;
  color: rgba(255,255,255,.64);
  font-size: 1rem;
}
.case-callout__body {
  width: 100%;
  justify-content: flex-start;
  padding: 1.6rem 0;
}
.case-callout__before,
.case-callout__after { align-items: flex-start; }
.case-callout__val {
  font-weight: 500;
  letter-spacing: 0;
}
.case-callout--seo .traffic-chart {
  width: min(100%, 620px);
  height: 135px;
  gap: 14px;
}
.case-callout--seo .traffic-chart__bar {
  min-height: 8px;
  border-radius: 8px 8px 2px 2px;
}
.case-callout--journey .case-callout__val {
  font-size: clamp(2.1rem, 4vw, 3.5rem);
}

@media (max-width: 1100px) {
  .page-hero--service .container {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
    gap: 2.5rem;
  }
  .service-visual { min-height: 410px; }
}
@media (max-width: 880px) {
  .page-hero--service .container { grid-template-columns: 1fr; }
  .page-hero--service .page-hero__title { max-width: 15ch; }
  .service-visual {
    width: min(100%, 650px);
    min-height: 420px;
    justify-self: center;
  }
  .results-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-strip__div { display: none; }
}
@media (max-width: 620px) {
  .results-strip__inner { gap: 1.8rem 1.2rem; }
  .results-strip__item strong { font-size: 2.15rem; }
  .portfolio { grid-template-columns: 1fr; }
  .service-visual {
    min-height: 340px;
    margin-top: 1rem;
  }
  .service-visual__window { inset: 8% 0 10%; }
  .service-visual__badge { display: none; }
  .service-visual__brand {
    grid-template-columns: 90px 1fr;
    padding-inline: 1.5rem;
  }
  .service-visual__swatches { padding-inline: 1.5rem; }
  .case-callout__body { align-items: flex-start; }
}

/* ============================================================
   Alignment corrections — Round 19
   ============================================================ */

/* The homepage benefit icons sit on the same visual axis. */
.values .value {
  align-items: center;
  text-align: center;
}
.values .value__chip {
  flex: 0 0 72px;
  margin-inline: auto;
}
.values .value h3,
.values .value p {
  width: 100%;
}

/* Result cards always use a conventional number-over-description layout. */
.stat-row .stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  min-height: 260px;
  padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.5rem, 3vw, 2.4rem);
}
.stat-row .stat-box strong,
.stat-row .stat-box:hover strong {
  display: block;
  width: 100%;
  margin: 0;
  transform: none;
  font-size: clamp(2.5rem, 4.8vw, 4.4rem);
  line-height: 1.04;
  text-align: center;
}
.stat-row .stat-box span {
  display: block;
  width: min(100%, 34ch);
  margin: 0 auto;
  font-size: clamp(.92rem, 1.2vw, 1.02rem);
  line-height: 1.55;
  text-align: center;
}

/* Selected case-study blocks use a centered editorial hierarchy. */
.case-callout--centered {
  align-items: center;
  text-align: center;
}
.case-callout--centered .case-callout__label {
  align-self: center;
  text-align: center;
}
.case-callout--centered .case-callout__title,
.case-callout--centered .case-callout__lead {
  margin-inline: auto;
  text-align: center;
}
.case-callout--centered .case-callout__body {
  justify-content: center;
}
.case-callout--centered .case-callout__before,
.case-callout--centered .case-callout__after {
  align-items: center;
  text-align: center;
}
.case-callout--centered > p {
  align-self: center;
  text-align: center;
}

@media (max-width: 620px) {
  .stat-row .stat-box {
    min-height: 0;
    padding: 2.2rem 1.4rem;
  }
  .stat-row .stat-box strong,
  .stat-row .stat-box:hover strong {
    font-size: clamp(2.25rem, 13vw, 3.5rem);
  }
  .case-callout--centered .case-callout__body {
    align-items: center;
  }
}

/* ============================================================
   Content, metrics, contacts and portfolio — Round 20
   ============================================================ */

:root {
  --container: 1280px;
}

/* Privacy content follows the same page grid as the rest of the website. */
.privacy__inner {
  width: 100%;
  max-width: var(--container);
}
.privacy__inner > p,
.privacy__inner > ul {
  max-width: none;
}

/* Hero facts: value above, description below, consistently left-aligned. */
.page-hero__stats,
.page-hero--service .page-hero__stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  justify-content: stretch;
  width: 100%;
  max-width: 880px;
  gap: 0;
}
.page-hero--service .page-hero__stats {
  max-width: none;
}
.page-hero__stats .hstat,
.page-hero--service .page-hero__stats .hstat {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .7rem;
  min-width: 0;
  padding-right: clamp(.8rem, 2vw, 1.8rem);
  text-align: left;
  transform: none;
}
.page-hero__stats .hstat + .hstat,
.page-hero--service .page-hero__stats .hstat + .hstat {
  padding-left: clamp(.8rem, 2vw, 1.8rem);
  border-left: 1px solid var(--line);
}
.page-hero__stats .hstat::before {
  display: none;
}
.page-hero__stats .hstat strong,
.page-hero--service .page-hero__stats .hstat strong,
.page-hero__stats .hstat strong[data-count] {
  display: block;
  width: 100%;
  margin: 0;
  background: none;
  color: var(--ink);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(1.65rem, 2.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
}
.page-hero__stats .hstat span,
.page-hero--service .page-hero__stats .hstat span {
  display: block;
  max-width: 20ch;
  margin: 0;
  font-size: .84rem;
  line-height: 1.4;
  text-align: left;
}

/* Contact glyphs stay centered inside compact, fixed-size boxes. */
.contact__list li,
.footer__contact li {
  align-items: center;
}
.contact__list .ci,
.contact__intro .ci {
  display: inline-grid !important;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
  transform: none;
}
.footer__contact .ci {
  display: inline-grid !important;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  transform: none;
}
.contact__intro .contact__list li:hover .ci,
.contact__list li:hover .ci {
  transform: none;
}

/* Screenshot portfolio: varied editorial grid without repeated captions. */
.portfolio--screens {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.15rem, 2vw, 1.8rem);
}
.portfolio--screens .work {
  grid-column: span 6;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #eef0f4;
  box-shadow: 0 18px 48px -34px rgba(10,14,26,.38);
}
.portfolio--screens .work--7 {
  grid-column: span 7;
}
.portfolio--screens .work--5 {
  grid-column: span 5;
}
.portfolio--screens .work::before,
.portfolio--screens .work::after {
  content: none !important;
  display: none !important;
}
.portfolio--screens .work__media {
  width: 100%;
  height: clamp(280px, 30vw, 430px);
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: inherit;
  background: #eef0f4;
}
.portfolio--screens .work__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: none;
}
.portfolio--screens a.work:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -36px rgba(10,14,26,.52);
}
.portfolio--screens a.work:hover .work__media img {
  transform: scale(1.015);
}
.portfolio--screens .work--comparison {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--line);
}
.portfolio--screens .work__compare {
  position: relative;
  min-width: 0;
  background: #eef0f4;
}
.portfolio--screens .work__compare > span {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  padding: .45rem .8rem;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  background: rgba(10,14,26,.82);
  color: #fff;
  font: 500 .76rem var(--sans);
  line-height: 1;
  backdrop-filter: blur(8px);
}
.portfolio--screens .work--comparison .work__media {
  height: clamp(320px, 34vw, 500px);
  border-radius: 0;
}

@media (max-width: 880px) {
  .portfolio--screens .work,
  .portfolio--screens .work--5,
  .portfolio--screens .work--7 {
    grid-column: span 6;
  }
}

@media (max-width: 620px) {
  .page-hero__stats,
  .page-hero--service .page-hero__stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .page-hero__stats .hstat,
  .page-hero--service .page-hero__stats .hstat {
    padding: 0;
  }
  .page-hero__stats .hstat + .hstat,
  .page-hero--service .page-hero__stats .hstat + .hstat {
    padding: 1rem 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .page-hero__stats .hstat strong,
  .page-hero--service .page-hero__stats .hstat strong {
    font-size: 1.8rem;
  }
  .portfolio--screens .work,
  .portfolio--screens .work--5,
  .portfolio--screens .work--7,
  .portfolio--screens .work--comparison {
    grid-column: 1 / -1;
  }
  .portfolio--screens .work--comparison {
    grid-template-columns: 1fr;
  }
  .portfolio--screens .work__media,
  .portfolio--screens .work--comparison .work__media {
    height: clamp(250px, 78vw, 360px);
  }
}
/* Language switcher */
.nav__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink) !important;
  font: 700 .78rem/1 var(--sans);
  letter-spacing: .08em;
}
.nav__lang::after { display: none !important; }
.nav__lang:hover,
.nav__lang:focus-visible {
  border-color: var(--accent);
  color: var(--accent) !important;
}
@media (max-width: 980px) {
  .nav__lang {
    width: 100%;
    height: auto;
    min-height: 2.75rem;
    margin-top: .4rem;
    border-bottom: 1px solid var(--line) !important;
  }
}

/* ============================================================
   White surface system — client revision, July 2026
   Keep this layer last so earlier decorative variants cannot
   restore the removed grey page backgrounds.
   ============================================================ */
:root {
  --bg-2: #fff;
}

.section--soft,
.reviews-sec,
.footer,
.footer__bottom,
.work,
.work:nth-child(4n + 2),
.work:nth-child(4n + 3),
.portfolio--screens .work,
.portfolio--screens .work__media,
.portfolio--screens .work__compare,
.hero__stats,
.stat-box,
.stat-box:hover {
  background: #fff;
}

.section--soft::after {
  display: none;
}

.footer,
.footer__bottom {
  border-color: var(--line);
}

.wd-trustindex .section__head {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.wd-trustindex .head-underline {
  margin: 1.2rem auto 0;
}

.wd-trustindex__widget {
  width: 100%;
}

/* Homepage portfolio screenshots: exact 16:9 crop matching 1920 × 1080 source files. */
.portfolio--screens .work__media,
.portfolio--screens .work--comparison .work__media {
  height: auto;
  aspect-ratio: 16 / 9;
}

@media (max-width: 620px) {
  .portfolio--screens .work__media,
  .portfolio--screens .work--comparison .work__media {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Portfolio previews without a production URL stay visible but are not interactive. */
.portfolio--screens article.work:not(.work--comparison) {
  cursor: default;
}
.portfolio--screens article.work:not(.work--comparison):hover {
  transform: none;
  box-shadow: 0 18px 48px -34px rgba(10,14,26,.38);
}
.portfolio--screens article.work:not(.work--comparison):hover .work__media img {
  transform: none;
}

/* Mobile alignment and flat hero backgrounds. */
@media (max-width: 620px) {
  #top .hero,
  #top .page-hero {
    background: #fff !important;
    background-image: none !important;
    animation: none !important;
  }
  #top .hero__bg,
  #top .page-hero::before,
  #top .page-hero::after {
    display: none !important;
    content: none !important;
  }
  #top :where(.hero, .page-hero, .section) :where(h1, h2, h3, h4, p),
  #top .section__head,
  #top #portfolio .section__head,
  #top .approach .section__head,
  #top .hero__text,
  #top .page-hero__content,
  #top .about__text,
  #top .approach__text,
  #top .contact__intro,
  #top .feat,
  #top .value,
  #top .stat-box,
  #top .results-strip__item {
    text-align: center;
  }
  #top :where(.hero, .page-hero, .section) :where(ul, ol, li, li h3, li h4, li p, .faq__item summary, .faq__body, .faq__body p, .faq__body li, .field, .field label, .field input, .field textarea) {
    text-align: left;
  }
  #top .section__head,
  #top .section__head p,
  #top .hero__title,
  #top .hero__lead,
  #top .page-hero__title,
  #top .page-hero__lead,
  #top .approach__text > p {
    margin-left: auto;
    margin-right: auto;
  }
  #top .hero__avail,
  #top .page-hero__avail,
  #top .google-rating,
  #top .section__head .eyebrow,
  #top .page-hero .eyebrow {
    margin-left: auto;
    margin-right: auto;
  }
  #top .hero__actions,
  #top .page-hero__actions {
    justify-content: center;
  }
  #top .page-hero__stats .hstat,
  #top .page-hero--service .page-hero__stats .hstat {
    align-items: center;
    text-align: center;
  }
  #top .page-hero__stats .hstat strong,
  #top .page-hero--service .page-hero__stats .hstat strong,
  #top .page-hero__stats .hstat span,
  #top .page-hero--service .page-hero__stats .hstat span {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  #top .results-strip__item {
    align-items: center;
  }
}

/* ============================================================
   SEO landing pages
   ============================================================ */
.seo-landing__hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(4.5rem, 8vw, 6.5rem);
  background:
    radial-gradient(52rem 36rem at 88% 28%, rgba(58,107,255,.13), transparent 62%),
    linear-gradient(180deg, #fff 0%, #fbfbfa 100%);
  border-bottom: 1px solid var(--line);
}
.seo-landing__hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  left: -160px;
  bottom: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58,107,255,.08), transparent 66%);
  pointer-events: none;
}
.seo-landing__hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.seo-landing__title {
  max-width: 13ch;
  font-size: clamp(2.8rem, 6.4vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.045em;
}
.seo-landing__lead {
  max-width: 64ch;
  margin-top: 1.7rem;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.45vw, 1.2rem);
}
.seo-landing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.4rem;
  margin-top: 2.2rem;
}
.seo-landing__visual {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
}
.seo-browser {
  position: relative;
  width: min(100%, 520px);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(10,14,26,.09);
  border-radius: 26px;
  box-shadow: 0 42px 90px -40px rgba(10,14,26,.38);
  overflow: hidden;
  transform: rotate(1.5deg);
}
.seo-browser__bar {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(244,243,239,.72);
}
.seo-browser__bar > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9d9d5;
}
.seo-browser__bar b {
  margin-left: 8px;
  color: var(--muted);
  font: 500 .72rem var(--sans);
}
.seo-browser__body { padding: clamp(2rem, 5vw, 3.6rem); }
.seo-browser__body small {
  display: block;
  margin-bottom: 1rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.seo-browser__body strong {
  display: block;
  max-width: 18ch;
  font: 600 clamp(1.6rem, 3vw, 2.35rem)/1.08 var(--serif);
  letter-spacing: -.025em;
}
.seo-browser__line {
  width: 58%;
  height: 8px;
  margin-top: .8rem;
  border-radius: 99px;
  background: #ebeae5;
}
.seo-browser__line--long { width: 82%; margin-top: 2rem; }
.seo-browser__button {
  display: inline-flex;
  margin-top: 2rem;
  padding: .72rem 1.2rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 600 .86rem var(--serif);
}
.seo-landing__tags {
  position: absolute;
  inset: auto 0 2.2rem auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}
.seo-landing__tags span {
  padding: .68rem 1rem;
  border: 1px solid rgba(58,107,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  color: var(--accent-dk);
  box-shadow: var(--shadow-sm);
  font: 600 .78rem var(--sans);
}
.seo-landing__content-section { padding-top: clamp(4rem, 8vw, 7rem); }
.seo-landing__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.seo-landing__toc {
  position: sticky;
  top: 110px;
  padding: 1.45rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.seo-landing__toc > span {
  display: block;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.seo-landing__toc nav { display: grid; gap: .18rem; }
.seo-landing__toc nav a {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: .45rem;
  padding: .62rem .55rem;
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.35;
  transition: background .2s, color .2s, transform .2s;
}
.seo-landing__toc nav a b { color: var(--accent); font-size: .72rem; padding-top: .08rem; }
.seo-landing__toc nav a:hover { background: var(--accent-soft); color: var(--ink); transform: translateX(2px); }
.seo-landing__toc-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.15rem;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font: 600 .88rem var(--serif);
}
.seo-landing__toc-cta span { color: #fff; }
.seo-landing__article { min-width: 0; }
.seo-landing__section {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: 0 0 clamp(3.7rem, 7vw, 6rem);
  scroll-margin-top: 120px;
}
.seo-landing__section + .seo-landing__section {
  padding-top: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.seo-landing__section:last-child { padding-bottom: 0; }
.seo-landing__section-num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dk);
  font: 700 .78rem var(--sans);
}
.seo-landing__section-body h2 {
  max-width: 18ch;
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.02;
}
.seo-landing__section-body p {
  max-width: 72ch;
  color: var(--ink-soft);
  font-size: 1.04rem;
}
.seo-landing__section-body p + p { margin-top: 1.15rem; }
.seo-landing__section-body p a,
.seo-landing__list a {
  color: var(--accent-dk);
  text-decoration: underline;
  text-decoration-color: rgba(58,107,255,.32);
  text-underline-offset: 3px;
}
.seo-landing__list {
  display: grid;
  gap: .75rem;
  margin-top: 1.55rem;
  counter-reset: seo-list;
}
.seo-landing__list li {
  position: relative;
  max-width: 76ch;
  padding: 1rem 1.1rem 1rem 3.05rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink-soft);
}
.seo-landing__list li::before {
  content: "✓";
  position: absolute;
  left: 1rem;
  top: 1.04rem;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dk);
  font: 700 .72rem var(--sans);
}
.seo-landing__list.is-ordered li { counter-increment: seo-list; }
.seo-landing__list.is-ordered li::before { content: counter(seo-list); }
.seo-landing__list strong { color: var(--ink); font-weight: 650; }
.seo-landing__cta { padding-top: clamp(4rem, 8vw, 7rem); }

@media (max-width: 980px) {
  .seo-landing__hero-grid { grid-template-columns: 1fr; }
  .seo-landing__visual { min-height: 360px; }
  .seo-landing__layout { grid-template-columns: 1fr; }
  .seo-landing__toc { position: static; }
  .seo-landing__toc nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .seo-landing__hero { padding-top: 3.3rem; }
  .seo-landing__title { font-size: clamp(2.55rem, 13vw, 4rem); }
  .seo-landing__visual { min-height: 310px; }
  .seo-browser { transform: none; border-radius: 20px; }
  .seo-landing__tags { right: -.2rem; bottom: .2rem; }
  .seo-landing__tags span { padding: .55rem .8rem; font-size: .72rem; }
  .seo-landing__toc nav { grid-template-columns: 1fr; }
  .seo-landing__section { grid-template-columns: 1fr; gap: 1rem; }
  .seo-landing__section-num { width: 42px; height: 42px; }
  .seo-landing__list li { padding-left: 2.9rem; }
}

.seo-landing__after { margin-top: 1.2rem; }