:root {
  --white: #ffffff;
  --off-white: #f8f8f8;
  --paper: #f3f1ee;
  --blue: #3898ec;
  --red: #cf2131;
  --red-dark: #c01827;
  --red-rgb: 207, 33, 49;
  --red-dark-rgb: 192, 24, 39;
  --blue-rgb: 56, 152, 236;
  --ink: #111111;
  --charcoal: #2a2929;
  --dark: #222222;
  --dark-2: #171717;
  --dark-3: #101010;
  --line: rgba(17, 17, 17, .1);
  --line-dark: rgba(255, 255, 255, .14);
  --muted: #696969;
  --muted-light: rgba(255, 255, 255, .72);
  --shadow: 0 24px 70px rgba(0, 0, 0, .12);
  --shadow-strong: 0 44px 110px rgba(0, 0, 0, .34);
  --shadow-soft: 0 14px 40px rgba(17, 17, 17, .08);
  --container: 1180px;
  --topbar-h: 38px;
  --header-h: 76px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
::selection { background: rgba(var(--red-rgb), .18); color: var(--ink); }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-140%);
  padding: 10px 14px;
  background: var(--red);
  color: var(--white);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
.container.narrow { width: min(100% - 40px, 980px); }
.dark-section {
  color: var(--white);
  background: radial-gradient(circle at 20% 10%, rgba(var(--red-rgb), .16), transparent 28%), linear-gradient(135deg, #151515, #222222 52%, #111111);
}
.light-section { background: var(--white); }
.section { padding: clamp(76px, 9vw, 130px) 0; position: relative; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head.centered { text-align: center; margin-inline: auto; }

.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--red);
}
.eyebrow.red { color: var(--red); }
.eyebrow.blue { color: var(--blue); }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--red);
  font-weight: 650;
  letter-spacing: .18em;
}
.hero-eyebrow span {
  width: 8px;
  height: 8px;
  background: var(--red);
  box-shadow: 0 0 18px rgba(var(--red-rgb),.74);
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 22px;
  font-size: clamp(48px, 6.8vw, 78px);
  line-height: .98;
  letter-spacing: -.06em;
  max-width: 790px;
}
h1 span { color: var(--red); text-shadow: 0 20px 55px rgba(var(--red-rgb),.25); }
h2 { margin-bottom: 18px; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.02; letter-spacing: -.045em; }
h3 { font-size: 20px; line-height: 1.16; letter-spacing: -.025em; }
p { color: var(--muted); }
.dark-section p { color: var(--muted-light); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 13px 18px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: var(--white); background: linear-gradient(135deg, var(--red), var(--red-dark)); box-shadow: 0 16px 34px rgba(var(--red-rgb), .25); }
.btn-primary:hover { box-shadow: 0 20px 48px rgba(var(--red-rgb), .34); }
.btn-ghost { color: var(--white); border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.04); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.09); }
.btn-outline { color: var(--ink); border-color: rgba(17,17,17,.18); background: var(--white); }
.btn-white { color: var(--red-dark); background: var(--white); box-shadow: 0 18px 38px rgba(0,0,0,.12); }
.btn-lg { min-height: 56px; padding: 18px 24px; }
.btn-full { width: 100%; }

.topbar {
  background: #111;
  color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}
.topbar-inner {
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.topbar p { margin: 0; color: rgba(255,255,255,.62); }
.topbar-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--white); font-weight: 700; }
.topbar-phone svg { width: 15px; height: 15px; stroke: var(--red); fill: none; stroke-width: 2; }
.topbar-phone strong { color: var(--white); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(17,17,17,.08);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled {
  background: rgba(17,17,17,.92);
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 20px 55px rgba(0,0,0,.2);
}
.header-inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { display: inline-flex; align-items: baseline; color: var(--ink); font-size: 29px; font-weight: 950; letter-spacing: -.065em; line-height: 1; white-space: nowrap; }
.brand strong { color: var(--red); }
.site-header.is-scrolled .brand span { color: var(--white); }
.site-header.is-scrolled .nav-link, .site-header.is-scrolled .nav-trigger { color: var(--white); }
.site-header.is-scrolled .menu-toggle { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.site-header.is-scrolled .menu-toggle span { background: var(--white); }

.desktop-nav { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.2vw, 30px); flex: 1; }
.nav-link, .nav-trigger {
  position: relative;
  font-size: 14px;
  font-weight: 850;
  color: #242424;
  transition: color .2s ease;
  border: 0;
  background: transparent;
  padding: 28px 0;
  cursor: pointer;
}
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav-link::after, .nav-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 19px;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: right;
  background: var(--red);
  transition: transform .22s ease;
}
.nav-link:hover, .nav-link.is-active, .nav-trigger:hover { color: var(--red); }
.nav-link:hover::after, .nav-link.is-active::after, .nav-dropdown:hover .nav-trigger::after { transform: scaleX(1); transform-origin: left; }
.nav-dropdown { position: relative; }
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(720px, calc(100vw - 48px));
  transform: translate(-50%, 18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(17,17,17,.96);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-strong);
  padding: 24px;
  display: grid;
  grid-template-columns: 1.08fr 1fr 1fr;
  gap: 14px;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  backdrop-filter: blur(18px);
}
.nav-dropdown:hover .mega-menu, .nav-dropdown:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega-intro {
  grid-row: span 2;
  padding: 22px;
  background: linear-gradient(135deg, rgba(var(--red-rgb),.94), rgba(var(--red-dark-rgb),.86));
  min-height: 198px;
}
.mega-intro p { margin: 0 0 10px; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: 11px; }
.mega-intro h2 { margin: 0; font-size: 28px; color: var(--white); }
.mega-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  padding: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.mega-card:hover { background: rgba(255,255,255,.1); border-color: rgba(var(--red-rgb),.55); transform: translateY(-2px); }
.mega-card svg { width: 34px; height: 34px; stroke: var(--red); fill: none; stroke-width: 1.75; }
.mega-card strong { display: block; color: var(--white); font-size: 15px; margin-bottom: 4px; }
.mega-card small { display: block; color: rgba(255,255,255,.62); line-height: 1.35; }
.header-cta { min-width: 164px; }
.menu-toggle { display: none; width: 48px; height: 48px; border: 1px solid rgba(17,17,17,.12); background: var(--white); align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
.menu-toggle span { width: 20px; height: 2px; background: var(--ink); }

.offcanvas { position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; }
.offcanvas.is-open { visibility: visible; pointer-events: auto; }
.offcanvas-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.58); opacity: 0; transition: opacity .25s ease; }
.offcanvas.is-open .offcanvas-backdrop { opacity: 1; }
.offcanvas-panel { position: absolute; top: 0; right: 0; width: min(90vw, 410px); height: 100%; padding: 22px; background: var(--white); transform: translateX(102%); transition: transform .28s cubic-bezier(.2,.9,.2,1); display: flex; flex-direction: column; gap: 24px; overflow-y: auto; }
.offcanvas.is-open .offcanvas-panel { transform: translateX(0); }
.offcanvas-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.icon-btn { width: 46px; height: 46px; border: 1px solid rgba(17,17,17,.12); background: var(--off-white); display: grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }
.mobile-call { display: flex; align-items: center; gap: 12px; padding: 16px; color: var(--white); background: linear-gradient(135deg, var(--red), var(--red-dark)); font-weight: 900; }
.mobile-call svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.mobile-nav { display: grid; gap: 8px; }
.mobile-nav a { padding: 16px 0; border-bottom: 1px solid rgba(17,17,17,.08); font-size: 22px; font-weight: 850; letter-spacing: -.04em; }
.mobile-mini { padding: 18px; background: var(--off-white); border: 1px solid var(--line); display: grid; gap: 4px; }
.mobile-mini span { color: var(--muted); font-size: 13px; }

.hero { position: relative; overflow: hidden; padding: clamp(90px, 9vw, 136px) 0 clamp(74px, 8vw, 116px); min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,.99) 0%, rgba(17,17,17,.86) 44%, rgba(17,17,17,.58) 100%), radial-gradient(circle at 76% 26%, rgba(var(--red-rgb),.22), transparent 22%), radial-gradient(circle at 66% 66%, rgba(56,152,236,.16), transparent 28%), linear-gradient(135deg, #111, #2a2929); }
.hero-bg::before { content: ""; position: absolute; right: 4%; top: 14%; width: min(48vw, 720px); aspect-ratio: 1.28; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 38%), repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 20px), linear-gradient(135deg, #141414, #2f2f2f); transform: rotate(-7deg) skewY(2deg); opacity: .72; box-shadow: 0 60px 120px rgba(0,0,0,.48); }
.hero-bg::after { content: ""; position: absolute; left: -10%; bottom: -30%; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--red-rgb),.32), transparent 62%); filter: blur(8px); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 468px); gap: clamp(36px, 7vw, 92px); align-items: center; }
.hero-lead { max-width: 610px; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 18px; }
.hero-phone { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.78); font-size: 14px; margin-bottom: 34px; }
.hero-phone svg { width: 18px; height: 18px; stroke: var(--red); fill: none; stroke-width: 2; }
.hero-phone strong { color: var(--white); }
.trust-strip { display: flex; flex-wrap: wrap; gap: 24px; }
.trust-item { display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; column-gap: 12px; min-width: 150px; align-items: center; }
.trust-item svg { grid-row: 1 / 3; width: 42px; height: 42px; stroke: var(--white); fill: none; stroke-width: 1.8; }
.trust-item strong { display: block; font-size: 34px; line-height: 1; letter-spacing: -.05em; }
.trust-item span { color: rgba(255,255,255,.76); font-size: 13px; line-height: 1.25; }
.hero-panel { position: relative; min-height: 600px; }
.hero-dashboard { position: absolute; right: -38px; top: 0; width: min(105%, 540px); height: 285px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), linear-gradient(135deg, #0d0d0d, #303030); box-shadow: var(--shadow-strong); transform: rotate(3deg); overflow: hidden; }
.hero-dashboard::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 20%, rgba(var(--red-rgb),.32), transparent 24%); }
.dash-top { display: flex; gap: 7px; padding: 14px; border-bottom: 1px solid rgba(255,255,255,.11); }
.dash-top span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.42); }
.dash-screen { position: relative; padding: 26px; }
.dash-line { height: 14px; width: 48%; background: rgba(255,255,255,.16); margin-bottom: 12px; }
.dash-line.wide { height: 30px; width: 72%; background: rgba(var(--red-rgb),.72); }
.dash-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dash-grid i { min-height: 66px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.lead-card { position: relative; z-index: 2; margin-top: 138px; padding: 28px; background: rgba(34,34,34,.9); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 100px rgba(0,0,0,.4); backdrop-filter: blur(16px); }
.lead-card-head { display: grid; grid-template-columns: 52px 1fr; gap: 16px; margin-bottom: 22px; }
.lead-card h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.035em; }
.lead-card p { margin-bottom: 0; font-size: 14px; }
.contact-form { display: grid; gap: 12px; }
.contact-form label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: var(--white); padding: 14px 15px; outline: none; resize: vertical; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.48); }
.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(var(--red-rgb),.8); box-shadow: 0 0 0 4px rgba(var(--red-rgb),.18); background: rgba(255,255,255,.09); }
.form-note, .form-status { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.66) !important; font-size: 12px !important; }
.form-note svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.form-status { min-height: 20px; color: #fff !important; }

.statement-band { padding: 60px 0; background: linear-gradient(135deg, var(--red), var(--red-dark)); color: var(--white); text-align: center; overflow: hidden; }
.statement-inner { width: min(100% - 40px, 860px); }
.statement-inner svg { width: 28px; height: 28px; margin: 0 auto 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.statement-inner h2 { margin: 0; font-size: clamp(28px, 4vw, 48px); color: var(--white); }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card, .work-card, .testimonial-card, .answer-card { border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; }
.service-card { min-height: 318px; padding: clamp(28px, 4vw, 44px); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.service-card::after { content: ""; position: absolute; right: -44px; bottom: -44px; width: 190px; height: 190px; opacity: 0; transform: translate(22px, 22px) scale(.85); transition: opacity .25s ease, transform .25s ease; background: currentColor; color: rgba(var(--red-rgb),.08); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.service-card-site::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M4 9h16M8 13h4M8 16h8'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M4 9h16M8 13h4M8 16h8'/%3E%3C/svg%3E"); }
.service-card-care::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3C/svg%3E"); }
.service-card-seo::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.service-card:hover, .work-card:hover, .testimonial-card:hover, .answer-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: rgba(var(--red-rgb),.22); }
.service-card:hover::after { opacity: 1; transform: translate(0, 0) scale(1); }
.icon-badge { width: 62px; height: 62px; margin-bottom: 24px; display: grid; place-items: center; color: var(--red); border: 1px solid rgba(var(--red-rgb),.22); background: rgba(var(--red-rgb),.05); }
.icon-badge.dark { margin: 0; color: var(--white); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); }
.icon-badge svg, .line-icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.service-card h3 { margin-bottom: 12px; position: relative; z-index: 1; }
.service-card p { margin-bottom: 22px; position: relative; z-index: 1; }
.service-card a, .work-body a, .footer-media a { color: var(--red); font-weight: 850; font-size: 14px; position: relative; z-index: 1; }

.split-section { background: linear-gradient(180deg, var(--off-white), var(--paper)); }
.split-grid, .media-grid, .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(42px, 7vw, 90px); align-items: center; }
.device-scene { min-height: 450px; display: grid; place-items: center; background: radial-gradient(circle at 18% 20%, rgba(var(--red-rgb),.12), transparent 26%), linear-gradient(135deg, #111, #2a2929); overflow: hidden; box-shadow: var(--shadow); }
.device-window { width: min(86%, 520px); background: #0d0d0d; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 24px 80px rgba(0,0,0,.34); transform: perspective(800px) rotateY(-9deg) rotateX(3deg); }
.device-top { display: flex; gap: 7px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.device-top span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); }
.device-content { min-height: 270px; padding: 36px; position: relative; overflow: hidden; }
.device-content p { max-width: 240px; color: var(--white); font-size: 33px; line-height: 1; letter-spacing: -.055em; font-weight: 900; }
.device-content a { position: absolute; left: 36px; bottom: 34px; color: var(--white); border: 1px solid rgba(255,255,255,.2); padding: 10px 13px; font-size: 12px; font-weight: 800; }
.orbit { position: absolute; right: 24px; top: 42px; width: 170px; height: 170px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.orbit::before, .orbit::after { content: ""; position: absolute; inset: 30px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.orbit::after { inset: 64px; }
.orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 18px rgba(var(--red-rgb),.8); }
.orbit i:nth-child(1) { left: 20px; top: 24px; }
.orbit i:nth-child(2) { right: 12px; top: 54px; background: var(--blue); }
.orbit i:nth-child(3) { right: 44px; bottom: 16px; }
.orbit i:nth-child(4) { left: 46px; bottom: 48px; background: var(--blue); }
.why-copy h2 { color: #191919; }
.benefit-list { display: grid; gap: 26px; margin-top: 30px; }
.benefit-item { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: start; }
.line-icon { width: 54px; height: 54px; display: grid; place-items: center; color: var(--red); }
.benefit-item h3 { margin: 0 0 4px; }
.benefit-item p { margin: 0; }

.focus-section { overflow: hidden; }
.focus-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 5%, rgba(var(--red-rgb),.16), transparent 28%), radial-gradient(circle at 90% 65%, rgba(56,152,236,.12), transparent 26%); pointer-events: none; }
.focus-section .container { position: relative; }
.focus-list { border-top: 1px solid var(--line-dark); }
.focus-row { border-bottom: 1px solid var(--line-dark); }
.focus-row button { width: 100%; padding: 24px 0; border: 0; background: transparent; color: var(--white); display: grid; grid-template-columns: 58px 200px 1fr 34px; gap: 16px; align-items: center; text-align: left; cursor: pointer; }
.focus-number { color: var(--white); font-size: 18px; font-weight: 900; }
.focus-row strong { font-size: 22px; letter-spacing: -.03em; }
.focus-row em { color: var(--muted-light); font-style: normal; font-size: 15px; }
.plus { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); transition: transform .2s ease, background .2s ease; }
.focus-row button:hover .plus, .focus-row.is-open .plus { background: var(--red); border-color: var(--red); }
.focus-row.is-open .plus { transform: rotate(45deg); }
.focus-row [data-accordion-content], .faq-item [data-accordion-content] { display: block; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; margin: 0; }
.focus-row.is-open [data-accordion-content] { max-height: 120px; padding: 0 0 24px 74px; }
.center-actions { text-align: center; margin-top: 34px; }

.work-section { background: var(--white); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.work-card { overflow: hidden; background: var(--white); }
.work-media { min-height: 235px; padding: 18px; display: flex; align-items: flex-end; color: var(--white); font-size: 26px; font-weight: 900; letter-spacing: -.055em; position: relative; overflow: hidden; }
.work-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.58)); }
.work-media span { position: relative; z-index: 1; }
.media-realestate { background: linear-gradient(135deg, rgba(var(--red-rgb),.1), rgba(0,0,0,.3)), repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 68px), linear-gradient(135deg, #5b5b5b, #111); }
.media-dental { background: radial-gradient(circle at 75% 22%, rgba(56,152,236,.45), transparent 26%), linear-gradient(135deg, #e7f2f9, #3898ec 52%, #17334f); }
.media-network { background: radial-gradient(circle at 28% 38%, rgba(var(--red-rgb),.62), transparent 20%), repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 1px, transparent 1px 26px), linear-gradient(135deg, #151515, #2a2929); }
.work-body { padding: 24px; }
.tagline { margin: 0 0 8px; color: var(--red); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.work-body h3 { margin-bottom: 10px; }
.work-body p:not(.tagline) { margin-bottom: 18px; }

.media-section { background: radial-gradient(circle at 15% 20%, rgba(var(--red-rgb),.09), transparent 30%), var(--off-white); }
.media-copy > p:not(.eyebrow) { font-size: 18px; margin-bottom: 28px; }
.media-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.media-cards article { position: relative; padding: 28px; border: 1px solid var(--line); background: var(--white); min-height: 220px; transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease; overflow: hidden; }
.media-cards article > svg { position: absolute; right: 20px; bottom: 18px; width: 92px; height: 92px; stroke: rgba(var(--red-rgb),.12); fill: none; stroke-width: 1.4; transition: transform .22s ease, opacity .22s ease; }
.media-cards article:hover { transform: translateY(-5px); background: var(--dark); border-color: var(--dark); }
.media-cards article:hover h3, .media-cards article:hover p { color: var(--white); }
.media-cards article:hover > svg { transform: scale(1.08) rotate(-4deg); stroke: rgba(255,255,255,.16); }
.media-cards article:first-child { grid-column: span 2; background: linear-gradient(135deg, var(--red), var(--red-dark)); color: var(--white); }
.media-cards article:first-child p { color: rgba(255,255,255,.76); }
.media-cards span { display: block; color: var(--red); font-weight: 900; margin-bottom: 18px; }
.media-cards article:first-child span { color: var(--white); }
.media-cards h3 { margin-bottom: 12px; position: relative; }
.media-cards p { margin: 0; position: relative; }

.testimonials { background: linear-gradient(180deg, var(--paper), var(--off-white)); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card { padding: 28px; }
.stars { color: var(--red); letter-spacing: .12em; margin-bottom: 18px; }
.testimonial-card p { color: #252525; font-size: 18px; line-height: 1.45; margin-bottom: 26px; }
.person { display: flex; align-items: center; gap: 12px; }
.person > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--dark); color: var(--white); font-weight: 900; font-size: 13px; }
.person strong { display: block; font-size: 14px; }
.person small { display: block; color: var(--muted); font-size: 12px; }

.faq-section { background: var(--white); }
.faq-grid { align-items: start; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
.faq-list { margin-top: 28px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item button { width: 100%; padding: 20px 0; border: 0; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 20px; font-weight: 850; text-align: left; cursor: pointer; }
.faq-item button span { transition: transform .2s ease; }
.faq-item.is-open button span { transform: rotate(45deg); }
.faq-item.is-open [data-accordion-content] { max-height: 140px; padding-bottom: 18px; }
.answer-card { padding: clamp(28px, 4vw, 42px); position: sticky; top: calc(var(--header-h) + 24px); }
.answer-card .icon-badge { margin-bottom: 28px; }
.answer-card p { margin-bottom: 26px; }

.cta-strip { background: linear-gradient(135deg, var(--red), var(--red-dark)); color: var(--white); padding: clamp(38px, 5vw, 58px) 0; }
.cta-inner { display: grid; grid-template-columns: 72px 1fr auto; gap: 24px; align-items: center; }
.rocket { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); }
.rocket svg { width: 38px; height: 38px; stroke: var(--white); fill: none; stroke-width: 1.8; }
.cta-inner h2 { margin-bottom: 4px; color: var(--white); font-size: clamp(28px, 4vw, 44px); }
.cta-inner p { margin: 0; color: rgba(255,255,255,.8); }
.cta-actions { display: grid; gap: 10px; justify-items: end; }
.cta-phone { color: rgba(255,255,255,.84); font-size: 13px; font-weight: 800; }

.site-footer { padding: 70px 0 22px; background: linear-gradient(135deg, #171717, #222222); color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.35fr repeat(4, .85fr) 1.1fr; gap: clamp(24px, 4vw, 54px); align-items: start; }
.brand-footer { color: var(--white); margin-bottom: 14px; }
.footer-brand p, .footer-col p { color: rgba(255,255,255,.62); margin-bottom: 22px; }
.socials { display: flex; gap: 10px; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); transition: background .2s ease, transform .2s ease; }
.socials a:hover { background: var(--red); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.footer-col h3 { color: var(--white); font-size: 16px; margin: 0 0 16px; display: flex; align-items: center; gap: 9px; }
.footer-col h3 svg { width: 18px; height: 18px; stroke: var(--red); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.footer-col a, .footer-col p { display: block; color: rgba(255,255,255,.64); font-size: 14px; margin-bottom: 10px; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { margin-top: 58px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-bottom p { color: rgba(255,255,255,.54); margin: 0; font-size: 13px; }

.back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); background: var(--red); color: var(--white); box-shadow: 0 18px 42px rgba(0,0,0,.22); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .22s ease, transform .22s ease, visibility .22s ease, background .22s ease; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--red-dark); }
.back-to-top svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

.reveal { opacity: 0; transform: translateY(26px); filter: blur(12px); transition: opacity .75s ease, transform .75s ease, filter .75s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.delay-1 { transition-delay: .09s; }
.delay-2 { transition-delay: .18s; }

@media (max-width: 1100px) {
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { max-width: 560px; min-height: 590px; }
  .service-grid, .work-grid, .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand, .footer-media { grid-column: span 3; }
}
@media (max-width: 860px) {
  .topbar-inner { display: grid; justify-content: stretch; gap: 5px; padding: 8px 0; }
  .topbar p { font-size: 12px; }
  .section { padding: 72px 0; }
  .split-grid, .media-grid, .faq-grid { grid-template-columns: 1fr; }
  .answer-card { position: relative; top: auto; }
  .focus-row button { grid-template-columns: 48px 1fr 28px; }
  .focus-row em { grid-column: 2 / 3; }
  .focus-row.is-open [data-accordion-content] { padding-left: 64px; }
  .cta-inner { grid-template-columns: 1fr; text-align: left; }
  .cta-actions { justify-items: start; }
  .rocket { width: 60px; height: 60px; }
}
@media (max-width: 680px) {
  :root { --header-h: 68px; }
  .container, .container.narrow { width: min(100% - 28px, var(--container)); }
  .brand { font-size: 25px; }
  .hero { padding-top: 74px; min-height: auto; }
  h1 { font-size: clamp(42px, 13vw, 62px); }
  h2 { font-size: clamp(30px, 9vw, 42px); }
  .hero-actions, .trust-strip { display: grid; }
  .hero-phone { align-items: flex-start; }
  .trust-item { min-width: 0; }
  .hero-panel { min-height: 560px; }
  .hero-dashboard { right: -20px; width: 104%; height: 245px; }
  .lead-card { padding: 22px; margin-top: 115px; }
  .lead-card-head { grid-template-columns: 1fr; }
  .service-grid, .work-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; text-align: left; align-items: flex-start; }
  .media-cards { grid-template-columns: 1fr; }
  .media-cards article:first-child { grid-column: span 1; }
  .device-scene { min-height: 360px; }
  .device-content { padding: 26px; }
  .device-content p { font-size: 28px; }
  .orbit { opacity: .55; right: -16px; }
  .focus-row button { padding: 20px 0; grid-template-columns: 42px 1fr 28px; gap: 10px; }
  .focus-row strong { font-size: 18px; }
  .focus-row em { font-size: 13px; }
  .focus-row.is-open [data-accordion-content] { padding: 0 0 20px 52px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand, .footer-media { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .back-to-top { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* V3: richer mega menu, pricing, locations and blog sections */
.header-inner { position: relative; }
.desktop-nav { gap: clamp(10px, 1.4vw, 22px); }
.nav-link, .nav-trigger { font-size: 13px; }
.nav-dropdown { position: static; }
.mega-menu {
  left: 0;
  right: 0;
  width: 100%;
  top: 100%;
  transform: translateY(18px);
  grid-template-columns: 300px repeat(4, minmax(0, 1fr));
  padding: 18px;
  gap: 12px;
}
.nav-dropdown:hover .mega-menu,
.nav-dropdown:focus-within .mega-menu { transform: translateY(0); }
.mega-menu-media { grid-template-columns: 300px repeat(3, minmax(0, 1fr)); }
.mega-intro { grid-row: span 1; min-height: 214px; display: flex; flex-direction: column; justify-content: space-between; }
.mega-intro h2 { font-size: 26px; line-height: 1.02; }
.mega-intro small { display: block; color: rgba(255,255,255,.76); line-height: 1.45; font-weight: 650; margin-top: 18px; }
.mega-card { min-height: 214px; align-content: start; grid-template-columns: 1fr; gap: 16px; }
.mega-card svg { width: 38px; height: 38px; }
.mega-card strong { font-size: 17px; letter-spacing: -.03em; }
.mega-card small { font-size: 13px; }

.mobile-mega-group {
  display: grid;
  gap: 8px;
  padding: 18px;
  background: #111;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.1);
}
.mobile-mega-group.media { background: linear-gradient(135deg, var(--red), var(--red-dark)); }
.mobile-mega-group strong { margin-bottom: 8px; color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: .14em; }
.mobile-mega-group a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  font-weight: 850;
}
.mobile-mega-group a span {
  width: 36px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  color: var(--white);
  font-size: 11px;
  letter-spacing: .08em;
}

.logo-marquee {
  overflow: hidden;
  background: #111;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 12px;
  padding: 17px 0;
  animation: marquee 34s linear infinite;
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 850;
}
@keyframes marquee { to { transform: translateX(-50%); } }

.service-grid { grid-template-columns: repeat(4, 1fr); }
.service-card-social::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M8 9h8M8 13h5M17 17l3 3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M8 9h8M8 13h5M17 17l3 3'/%3E%3C/svg%3E");
}

.pricing-section { background: linear-gradient(180deg, var(--white), var(--paper)); }
.pricing-section .section-head p:last-child { max-width: 760px; margin-inline: auto; font-size: 18px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 42px);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.pricing-card::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -54px;
  width: 170px;
  height: 170px;
  background: radial-gradient(circle, rgba(var(--red-rgb),.12), transparent 62%);
}
.pricing-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: rgba(var(--red-rgb),.24); }
.pricing-card h3 { margin-bottom: 8px; font-size: 27px; }
.price-kicker { color: var(--red); text-transform: uppercase; letter-spacing: .14em; font-weight: 900; font-size: 12px; margin-bottom: 12px; }
.price { color: var(--ink); font-size: clamp(36px, 5vw, 54px); line-height: 1; letter-spacing: -.06em; font-weight: 950; margin: 8px 0 16px; }
.pricing-card ul { position: relative; z-index: 1; list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 11px; color: #303030; }
.pricing-card li { display: flex; gap: 10px; align-items: center; }
.pricing-card li::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: 0 0 auto; }
.pricing-card .btn { margin-top: auto; align-self: flex-start; position: relative; z-index: 1; }
.pricing-featured { background: linear-gradient(135deg, #171717, #2a2929); color: var(--white); border-color: rgba(255,255,255,.12); box-shadow: var(--shadow-strong); }
.pricing-featured p, .pricing-featured li { color: rgba(255,255,255,.72); }
.pricing-featured .price { color: var(--white); }
.badge { position: absolute; top: 18px; right: 18px; padding: 9px 12px; background: var(--red); color: var(--white); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.pricing-note { max-width: 820px; margin: 26px auto 0; text-align: center; font-size: 14px; }

.locations-section { background: #151515; color: var(--white); overflow: hidden; }
.locations-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 20%, rgba(var(--red-rgb),.2), transparent 28%), radial-gradient(circle at 20% 80%, rgba(56,152,236,.13), transparent 30%); pointer-events: none; }
.locations-grid { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 6vw, 74px); align-items: center; }
.locations-copy h2 { color: var(--white); }
.locations-copy p { color: rgba(255,255,255,.72); font-size: 18px; }
.local-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.local-proof span { padding: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.72); font-size: 13px; }
.local-proof strong { display: block; color: var(--white); font-size: 32px; line-height: 1; margin-bottom: 6px; }
.city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.city-grid a { position: relative; min-height: 76px; display: flex; align-items: flex-end; padding: 14px; color: var(--white); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-weight: 900; overflow: hidden; transition: transform .22s ease, background .22s ease, border-color .22s ease; }
.city-grid a::before { content: ""; position: absolute; inset: auto 12px 12px auto; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.13); transform: rotate(45deg); opacity: .5; }
.city-grid a:hover { transform: translateY(-5px); background: var(--red); border-color: var(--red); }

.blog-section { background: var(--off-white); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { position: relative; min-height: 300px; padding: clamp(26px, 4vw, 38px); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; overflow: hidden; }
.blog-card::after { content: ""; position: absolute; right: -38px; bottom: -38px; width: 126px; height: 126px; background: rgba(var(--red-rgb),.08); transform: rotate(45deg); }
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); background: var(--dark); color: var(--white); }
.blog-card:hover p { color: rgba(255,255,255,.72); }
.blog-card span { color: var(--red); font-size: 12px; text-transform: uppercase; letter-spacing: .13em; font-weight: 900; margin-bottom: 18px; }
.blog-card h3 { font-size: 26px; margin-bottom: 14px; }
.blog-card p { margin-bottom: 24px; }
.blog-card a { margin-top: auto; color: var(--red); font-weight: 900; position: relative; z-index: 1; }

@media (max-width: 1180px) {
  .desktop-nav { gap: 10px; }
  .nav-link, .nav-trigger { font-size: 12px; }
  .header-cta { min-width: 148px; padding-inline: 14px; }
  .mega-menu { grid-template-columns: 1fr 1fr; }
  .mega-intro { grid-column: span 2; min-height: auto; }
  .mega-card { min-height: 160px; }
}
@media (max-width: 1100px) {
  .service-grid, .pricing-grid, .blog-grid { grid-template-columns: 1fr 1fr; }
  .pricing-featured { grid-column: span 2; }
}
@media (max-width: 860px) {
  .logo-marquee { margin-top: 0; }
  .locations-grid { grid-template-columns: 1fr; }
  .local-proof { grid-template-columns: 1fr; }
  .city-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .service-grid, .pricing-grid, .blog-grid { grid-template-columns: 1fr; }
  .pricing-featured { grid-column: auto; }
  .city-grid { grid-template-columns: 1fr 1fr; }
  .marquee-track span { min-width: 138px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}


/* V4: polished service slider, pricing switch, city pins and refined headings */
.services-stage {
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--red-rgb),.08), transparent 28%),
    linear-gradient(180deg, #f8f8f8 0%, #ffffff 54%, #f3f1ee 100%);
  overflow: hidden;
}
.services-layout {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  gap: clamp(24px, 4vw, 46px);
  align-items: stretch;
}
.services-showcase {
  position: relative;
  min-height: 610px;
  background: radial-gradient(circle at 18% 10%, rgba(var(--red-rgb),.34), transparent 34%), linear-gradient(145deg, #141414, #252525 58%, #111);
  color: var(--white);
  box-shadow: var(--shadow-strong);
  overflow: hidden;
  isolation: isolate;
}
.services-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
  pointer-events: none;
}
.service-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1.04fr auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px);
  transition: opacity .55s ease, transform .55s ease, visibility .55s ease;
}
.service-slide.is-active { opacity: 1; visibility: visible; transform: translateX(0); }
.showcase-media { position: relative; min-height: 318px; margin: 26px 26px 0; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045); overflow: hidden; }
.showcase-media::after { content: ""; position: absolute; inset: auto -18% -30% -18%; height: 62%; background: radial-gradient(closest-side, rgba(var(--red-rgb),.42), transparent); filter: blur(4px); }
.browser-frame { position: absolute; top: 22px; left: 22px; right: 22px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.32); z-index: 2; }
.browser-frame span { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.34); }
.visual-panel { position: absolute; left: 46px; right: 46px; bottom: 46px; min-height: 150px; padding: 28px; background: rgba(17,17,17,.72); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 28px 70px rgba(0,0,0,.32); z-index: 2; }
.visual-panel strong { display: block; color: var(--white); font-size: clamp(34px, 5vw, 62px); line-height: .9; letter-spacing: -.07em; }
.visual-panel em { display: block; margin-top: 12px; color: var(--red); font-style: normal; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
.visual-seo { display: flex; align-items: center; justify-content: center; gap: 22px; }
.rank-card { width: 178px; height: 178px; display: grid; place-items: center; text-align: center; background: var(--red); color: var(--white); z-index: 2; box-shadow: 0 24px 70px rgba(var(--red-rgb),.3); }
.rank-card b { display: block; font-size: 54px; line-height: .9; letter-spacing: -.06em; }
.rank-card span { font-size: 12px; text-transform: uppercase; letter-spacing: .13em; font-weight: 900; }
.rank-lines { width: min(46%, 260px); display: grid; gap: 12px; z-index: 2; }
.rank-lines i { display: block; height: 18px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.12); }
.rank-lines i:nth-child(1), .rank-lines i:nth-child(3) { width: 80%; }
.rank-lines i:nth-child(2) { width: 100%; background: rgba(var(--red-rgb),.38); }
.rank-lines i:nth-child(4) { width: 62%; }
.visual-care { display: grid; place-items: center; }
.pulse-shield { width: 140px; height: 140px; display: grid; place-items: center; background: var(--red); z-index: 2; box-shadow: 0 0 0 18px rgba(var(--red-rgb),.12), 0 0 0 36px rgba(var(--red-rgb),.07); }
.pulse-shield svg { width: 70px; height: 70px; stroke: var(--white); fill: none; stroke-width: 1.8; }
.status-stack { position: absolute; right: 30px; bottom: 30px; display: grid; gap: 8px; z-index: 3; }
.status-stack span { padding: 10px 13px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.82); font-size: 12px; font-weight: 800; }
.showcase-copy { position: relative; z-index: 3; padding: clamp(28px, 4vw, 42px); }
.showcase-copy .eyebrow { color: var(--red); }
.showcase-copy h2 { max-width: 560px; margin-bottom: 14px; color: var(--white); font-size: clamp(32px, 4.2vw, 54px); }
.showcase-copy p:last-child { max-width: 560px; color: rgba(255,255,255,.72); margin-bottom: 0; }
.slider-controls { position: absolute; right: 28px; bottom: 28px; z-index: 6; display: flex; gap: 8px; }
.slider-controls button { width: 34px; height: 4px; padding: 0; border: 0; background: rgba(255,255,255,.26); cursor: pointer; transition: width .2s ease, background .2s ease; }
.slider-controls button.is-active { width: 56px; background: var(--red); }
.service-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.service-grid-compact .service-card { min-height: 296px; padding: clamp(24px, 3.4vw, 34px); text-align: left; align-items: flex-start; justify-content: flex-start; }
.service-grid-compact .icon-badge { width: 58px; height: 58px; margin-bottom: 24px; }
.service-grid-compact .service-card h3 { font-size: 23px; }
.service-grid-compact .service-card p { font-size: 15px; }
.why-copy h2 { font-size: clamp(30px, 3.7vw, 46px); letter-spacing: -.04em; }
.why-copy .benefit-item p { font-size: 15px; }
.billing-toggle { margin: 28px auto 0; width: fit-content; display: flex; align-items: center; gap: 6px; padding: 6px; background: #111; border: 1px solid rgba(17,17,17,.1); box-shadow: var(--shadow-soft); }
.billing-toggle button { border: 0; background: transparent; color: rgba(255,255,255,.68); padding: 12px 16px; font-weight: 900; cursor: pointer; transition: background .2s ease, color .2s ease; }
.billing-toggle button.is-active { background: var(--red); color: var(--white); }
.billing-toggle span { margin-left: 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.price-sub { margin: -6px 0 14px; color: var(--red); font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.pricing-featured .price-sub { color: rgba(255,255,255,.78); }
.locations-copy h2 { font-size: clamp(30px, 4vw, 48px); }
.city-grid a { min-height: 68px; align-items: center; gap: 10px; padding: 13px 12px; font-size: 14px; letter-spacing: -.015em; }
.city-grid a::after { content: ""; width: 17px; height: 17px; flex: 0 0 auto; order: -1; background: var(--red); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat; }
.city-grid a:hover::after { background: var(--white); }
.blog-section .section-head { max-width: 100%; }
.blog-section .section-head h2 { max-width: 1180px; font-size: clamp(30px, 4.3vw, 50px); }
.blog-card h3 { font-size: clamp(21px, 2.4vw, 24px); }
.blog-card p { font-size: 15px; }
.footer-bottom p:last-child { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1100px) {
  .services-layout { grid-template-columns: 1fr; }
  .services-showcase { min-height: 570px; }
  .service-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .services-showcase { min-height: 650px; }
  .service-slide { grid-template-rows: 290px auto; }
  .showcase-media { min-height: 250px; margin: 18px 18px 0; }
  .visual-panel { left: 22px; right: 22px; bottom: 24px; padding: 20px; }
  .service-grid-compact { grid-template-columns: 1fr; }
  .slider-controls { left: 28px; right: auto; }
  .billing-toggle { width: 100%; justify-content: center; }
  .billing-toggle button { flex: 1; }
}

/* V5: final polish requested - safer service copy, better pricing, FAQ visual, footer arrows */
.services-showcase {
  min-height: 705px;
}
.service-slide {
  grid-template-rows: minmax(300px, .96fr) auto;
}
.showcase-media {
  min-height: 330px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    radial-gradient(circle at 22% 30%, rgba(var(--red-rgb),.22), transparent 26%),
    linear-gradient(135deg, #151515, #272727);
}
.showcase-copy {
  padding: clamp(30px, 4vw, 48px);
}
.showcase-copy h2 {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: .98;
}
.showcase-copy p:last-child {
  font-size: 17px;
  line-height: 1.55;
}
.visual-panel {
  background: linear-gradient(135deg, rgba(17,17,17,.88), rgba(17,17,17,.68));
}
.visual-panel strong {
  font-size: clamp(38px, 5vw, 66px);
}
.visual-web::before,
.visual-seo::before,
.visual-care::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.06) 42% 43%, transparent 43% 100%),
    radial-gradient(circle at 76% 22%, rgba(255,255,255,.12), transparent 20%);
  pointer-events: none;
}

.why-intro {
  max-width: 620px;
  margin: -4px 0 28px;
  font-size: 17px;
  line-height: 1.65;
  color: #4f4f4f;
}

.pricing-section .section-head h2 {
  font-size: clamp(32px, 4.1vw, 52px);
}
.pricing-card {
  min-height: 100%;
}
.pricing-card .price-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 10px;
  background: rgba(var(--red-rgb),.08);
  border: 1px solid rgba(var(--red-rgb),.18);
}
.pricing-featured .price-kicker {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: var(--white);
}
.package-scope {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  margin: 18px 0 4px;
  background: rgba(17,17,17,.035);
  border: 1px solid rgba(17,17,17,.08);
}
.package-scope span {
  color: var(--red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.package-scope strong {
  color: var(--ink);
  font-size: 15px;
  letter-spacing: -.02em;
}
.pricing-featured .package-scope {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.pricing-featured .package-scope strong {
  color: var(--white);
}
.one-time-strip {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.one-time-strip span {
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.one-time-strip strong {
  font-size: 20px;
  letter-spacing: -.035em;
}
.one-time-strip p {
  margin: 0;
  justify-self: end;
  max-width: 480px;
  font-size: 14px;
}

.city-grid a {
  font-size: 13px;
}
.city-grid a::before {
  display: none;
}
.city-grid a::after {
  opacity: .95;
}

.blog-section .section-head h2 {
  max-width: 1180px;
  font-size: clamp(30px, 3.3vw, 45px);
}
.blog-section .section-head {
  margin-bottom: 36px;
}

.answer-card {
  overflow: hidden;
  padding-top: 0;
}
.answer-visual {
  position: relative;
  min-height: 176px;
  margin: -44px -44px 28px;
  background:
    radial-gradient(circle at 72% 30%, rgba(var(--red-rgb),.32), transparent 26%),
    linear-gradient(135deg, #111, #2a2929);
  border-bottom: 1px solid rgba(17,17,17,.08);
  overflow: hidden;
}
.answer-window {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 24px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.24);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
}
.answer-window span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.34);
}
.answer-bubble {
  position: absolute;
  left: 32px;
  bottom: 26px;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--red);
  font-size: 40px;
  font-weight: 950;
  box-shadow: 0 18px 42px rgba(var(--red-rgb),.28);
}
.answer-visual i {
  position: absolute;
  left: 122px;
  right: 32px;
  height: 13px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.1);
}
.answer-visual i:nth-of-type(1) { bottom: 78px; width: 52%; }
.answer-visual i:nth-of-type(2) { bottom: 52px; width: 68%; }
.answer-visual i:nth-of-type(3) { bottom: 26px; width: 42%; }

.rocket svg {
  transform: none;
}
.cta-strip .rocket {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.28);
}

.site-footer {
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  right: -110px;
  top: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--red-rgb),.28), transparent 66%);
  filter: blur(6px);
  pointer-events: none;
}
.site-footer > .container {
  position: relative;
  z-index: 1;
}
nav.footer-col a {
  display: flex;
  align-items: center;
  gap: 8px;
}
nav.footer-col a::before {
  content: "→";
  color: var(--red);
  font-weight: 900;
  transform: translateX(0);
  transition: transform .18s ease;
}
nav.footer-col a:hover::before {
  transform: translateX(3px);
}
.serbia-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 18px;
  line-height: 1;
  font-size: 17px;
  background: linear-gradient(to bottom, var(--red) 0 33.3%, #0c4076 33.3% 66.6%, #ffffff 66.6% 100%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .services-showcase { min-height: 660px; }
  .pricing-featured { grid-column: span 2; }
  .one-time-strip { grid-template-columns: 1fr; }
  .one-time-strip p { justify-self: start; }
}
@media (max-width: 720px) {
  .services-showcase { min-height: 720px; }
  .service-slide { grid-template-rows: 260px auto; }
  .showcase-copy h2 { font-size: clamp(30px, 9vw, 44px); }
  .showcase-copy p:last-child { font-size: 15px; }
  .pricing-featured { grid-column: auto; }
  .one-time-strip { padding: 18px; }
}
@media (max-width: 520px) {
  .services-showcase { min-height: 760px; }
  .showcase-media { min-height: 230px; }
  .visual-panel strong { font-size: 36px; }
}

/* V6: home polish - mobile CTA, cleaner service slider, pricing proof and footer/mobile layout */
.mobile-header-call {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 13px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: var(--white);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 14px 32px rgba(var(--red-rgb),.24);
}
.mobile-header-call svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.site-header.is-scrolled .mobile-header-call { box-shadow: none; }

.mega-card { position: relative; overflow: hidden; }
.mega-card::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -28px;
  width: 112px;
  height: 112px;
  opacity: 0;
  transform: translate(16px, 16px) scale(.82);
  background: rgba(var(--red-rgb),.18);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  mask: var(--mega-icon, none) center/contain no-repeat;
  -webkit-mask: var(--mega-icon, none) center/contain no-repeat;
}
.mega-card:hover::after { opacity: 1; transform: translate(0, 0) scale(1); }
.services-mega .mega-card:nth-of-type(1), .mega-menu-media .mega-card:nth-of-type(1) { --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M4 9h16M8 13h4M8 16h8'/%3E%3C/svg%3E"); }
.services-mega .mega-card:nth-of-type(2) { --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E"); }
.services-mega .mega-card:nth-of-type(3) { --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M8 12l2 2 4-5'/%3E%3C/svg%3E"); }
.services-mega .mega-card:nth-of-type(4) { --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M8 9h8M8 13h5M17 17l3 3'/%3E%3C/svg%3E"); }
.mega-menu-media .mega-card:nth-of-type(2) { --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 9h5M7 13h10M7 17h3'/%3E%3C/svg%3E"); }
.mega-menu-media .mega-card:nth-of-type(3) { --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E"); }

.services-showcase { min-height: 720px; }
.service-slide { grid-template-rows: minmax(275px, .82fr) auto; }
.showcase-media {
  margin: 20px 20px 0;
  min-height: 300px;
  display: block;
}
.showcase-media .browser-frame { top: 20px; left: 20px; right: 20px; }
.visual-panel {
  left: 54px;
  right: 54px;
  bottom: 38px;
  min-height: 128px;
  padding: 24px 28px;
}
.visual-panel strong { font-size: clamp(34px, 4.5vw, 58px); }
.mini-alert {
  position: absolute;
  left: 58px;
  top: 112px;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--red);
  font-size: 42px;
  line-height: 1;
  font-weight: 950;
  z-index: 3;
  box-shadow: 0 22px 48px rgba(var(--red-rgb),.28);
}
.mini-lines {
  position: absolute;
  left: 160px;
  right: 58px;
  top: 118px;
  display: grid;
  gap: 13px;
  z-index: 2;
}
.mini-lines i {
  display: block;
  height: 13px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.12);
}
.mini-lines i:nth-child(1) { width: 72%; }
.mini-lines i:nth-child(2) { width: 94%; background: rgba(var(--red-rgb),.32); }
.mini-lines i:nth-child(3) { width: 58%; }
.visual-seo {
  align-items: center;
  justify-content: center;
  padding-top: 44px;
}
.visual-seo .rank-card { width: 154px; height: 154px; }
.visual-seo .rank-card b { font-size: 48px; }
.visual-care { padding-top: 48px; }
.status-stack { right: 24px; bottom: 24px; }
.showcase-copy { padding: clamp(28px, 3.6vw, 42px); }
.showcase-copy h2 { font-size: clamp(34px, 4.15vw, 54px); }

.media-cards article:first-child p {
  max-width: 700px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.62;
}
.media-cards article:first-child h3 { margin-bottom: 12px; }

.price-sub strong,
.saving-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 8px;
  background: rgba(var(--red-rgb),.09);
  color: var(--red);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pricing-followup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px auto 0;
  max-width: 980px;
}
.pricing-followup div {
  padding: 20px 22px;
  background: #111;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.pricing-followup div::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -48px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--red-rgb),.27), transparent 64%);
}
.pricing-followup strong {
  display: block;
  color: var(--white);
  font-size: 18px;
  margin-bottom: 5px;
}
.pricing-followup span {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: 14px;
  line-height: 1.55;
}

.cta-strip .rocket svg {
  width: 42px;
  height: 42px;
  stroke-width: 1.9;
}

.flag-fallback {
  display: inline-flex;
  width: 26px;
  height: 18px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(to bottom, var(--red) 0 33.3%, #0c4076 33.3% 66.6%, #ffffff 66.6% 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}
.serbia-flag:not(:empty) + .flag-fallback { display: none; }

@media (max-width: 1100px) {
  .mobile-header-call { display: inline-flex; margin-left: auto; }
  .header-inner { gap: 10px; }
}
@media (max-width: 860px) {
  .topbar { display: none; }
  .hero { padding-top: 84px; }
  .trust-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .trust-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: start;
    min-width: 0;
    padding: 12px 10px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.1);
  }
  .trust-item svg { grid-row: auto; width: 27px; height: 27px; margin-bottom: 8px; }
  .trust-item strong { font-size: clamp(23px, 6vw, 30px); }
  .trust-item span { font-size: 11px; }
  .lead-card-head { grid-template-columns: 52px 1fr; }
  .lead-card-head .icon-badge { width: 52px; height: 52px; }
  .pricing-followup { grid-template-columns: 1fr; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 22px;
  }
  .footer-brand, .footer-media {
    grid-column: 1 / -1;
  }
}
@media (max-width: 720px) {
  .services-showcase { min-height: 690px; }
  .service-slide { grid-template-rows: 245px auto; }
  .showcase-media { min-height: 225px; margin: 14px 14px 0; }
  .showcase-media .browser-frame { top: 14px; left: 14px; right: 14px; height: 30px; }
  .visual-panel { left: 26px; right: 26px; bottom: 22px; min-height: 104px; padding: 18px; }
  .visual-panel strong { font-size: clamp(30px, 9vw, 44px); }
  .visual-panel em { font-size: 10px; }
  .mini-alert { left: 32px; top: 82px; width: 58px; height: 58px; font-size: 34px; }
  .mini-lines { left: 106px; right: 30px; top: 88px; gap: 10px; }
  .mini-lines i { height: 10px; }
  .visual-seo .rank-card { width: 116px; height: 116px; }
  .visual-seo .rank-card b { font-size: 36px; }
  .rank-lines { width: 42%; gap: 9px; }
  .rank-lines i { height: 12px; }
  .pulse-shield { width: 112px; height: 112px; }
  .pulse-shield svg { width: 56px; height: 56px; }
  .status-stack { right: 16px; bottom: 14px; }
  .status-stack span { font-size: 11px; padding: 8px 10px; }
  .service-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .service-grid-compact .service-card {
    min-height: 214px;
    padding: 18px 14px;
  }
  .service-grid-compact .icon-badge { width: 44px; height: 44px; margin-bottom: 16px; }
  .service-grid-compact .icon-badge svg { width: 25px; height: 25px; }
  .service-grid-compact .service-card h3 { font-size: 18px; }
  .service-grid-compact .service-card p { font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
  .service-grid-compact .service-card a { font-size: 12px; }
}
@media (max-width: 680px) {
  .topbar { display: none; }
  .header-inner { min-height: 68px; }
  .mobile-header-call { min-height: 42px; padding: 0 11px; }
  .mobile-header-call span { font-size: 11px; }
  .menu-toggle { width: 44px; height: 44px; }
  .hero-actions { display: flex; }
  .hero-actions .btn { width: 100%; }
  .trust-strip { display: grid; }
  .lead-card-head { grid-template-columns: 48px 1fr; gap: 12px; }
  .lead-card-head .icon-badge { width: 48px; height: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col h3 { font-size: 14px; }
  .footer-col a, .footer-col p { font-size: 13px; }
  .footer-bottom { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .container, .container.narrow { width: min(100% - 24px, var(--container)); }
  .brand { font-size: 23px; }
  .mobile-header-call { padding: 0 9px; gap: 6px; }
  .mobile-header-call svg { width: 15px; height: 15px; }
  .trust-item { padding: 10px 7px; }
  .trust-item strong { font-size: 22px; }
  .trust-item span { font-size: 10px; }
  .services-showcase { min-height: 730px; }
  .service-grid-compact .service-card { min-height: 230px; }
}


/* V7: final home polish + complete site pages */
.showcase-copy h2 {
  font-size: clamp(34px, 2.15vw, 36px) !important;
  line-height: 1.04;
  letter-spacing: -.045em;
  max-width: 520px;
}
.services-showcase { min-height: 665px; }
.service-slide { grid-template-rows: 335px auto; }
.showcase-media {
  min-height: 300px;
  margin: 24px 24px 0;
  border-color: rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 78% 28%, rgba(255,255,255,.13), transparent 13%),
    radial-gradient(circle at 22% 26%, rgba(var(--red-rgb),.32), transparent 26%),
    linear-gradient(135deg, #1a1a1a, #282828 54%, #111);
}
.showcase-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 45%, rgba(255,255,255,.06) 45% 47%, transparent 47% 100%);
  pointer-events: none;
}
.showcase-media::after { opacity: .62; }
.visual-panel {
  left: 52px;
  right: 52px;
  bottom: 40px;
  min-height: 120px;
  overflow: hidden;
}
.visual-panel::before {
  content: "";
  position: absolute;
  right: 20px;
  top: 20px;
  width: 160px;
  height: 9px;
  background: rgba(var(--red-rgb),.22);
}
.visual-panel strong { font-size: clamp(38px, 5vw, 62px); }
.mini-alert,
.rank-card,
.pulse-shield {
  border-radius: 0;
  box-shadow: 0 30px 70px rgba(var(--red-rgb),.22);
}
.mini-alert { left: 64px; top: 112px; width: 82px; height: 82px; }
.mini-lines { left: 178px; right: 64px; top: 120px; }
.visual-seo { align-items: center; justify-content: flex-start; padding-left: 58px; padding-top: 48px; }
.visual-seo .rank-card {
  width: 132px;
  height: 132px;
  place-items: start;
  padding: 22px;
}
.visual-seo .rank-card b { font-size: 48px; }
.visual-seo .rank-card span { align-self: end; }
.rank-lines { width: min(50%, 285px); margin-left: 28px; }
.rank-lines i { height: 12px; }
.visual-care { place-items: center; padding: 58px 42px 34px; }
.pulse-shield { width: 118px; height: 118px; }
.status-stack { right: 46px; bottom: 54px; gap: 10px; }
.status-stack span { min-width: 150px; text-align: left; background: rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.pricing-followup { display: none !important; }
.portfolio-wall { background: linear-gradient(180deg, #fff, #f7f7f7); }
.portfolio-wall .section-head p { max-width: 760px; margin-inline: auto; }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.portfolio-card {
  position: relative;
  min-height: 270px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.1);
  box-shadow: var(--shadow-soft);
  isolation: isolate;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 40%, rgba(0,0,0,.62) 100%),
    linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,0));
  opacity: .9;
  z-index: -1;
}
.portfolio-card::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 86px;
  height: 86px;
  opacity: .18;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M4 9h16M8 13h4M8 16h8'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M4 9h16M8 13h4M8 16h8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.portfolio-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: rgba(var(--red-rgb),.28); }
.portfolio-card span { color: rgba(255,255,255,.74); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; }
.portfolio-card strong { margin-top: 9px; color: #fff; font-size: clamp(23px, 2.7vw, 34px); line-height: .98; letter-spacing: -.05em; }
.portfolio-card em {
  position: absolute;
  inset: auto 20px 20px auto;
  color: #fff;
  background: var(--red);
  padding: 11px 14px;
  font-style: normal;
  font-weight: 900;
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.portfolio-card:hover em { opacity: 1; transform: translateY(0); }
.portfolio-card.tone-dark { color: #fff; background: radial-gradient(circle at 22% 20%, rgba(var(--red-rgb),.3), transparent 30%), linear-gradient(135deg, #151515, #2a2929); }
.portfolio-card.tone-red { color: #fff; background: linear-gradient(135deg, var(--red), var(--red-dark)); }
.portfolio-card.tone-light { color: var(--red); background: linear-gradient(135deg, #f8f8f8, #fff); }
.portfolio-card.tone-light::before { background: linear-gradient(180deg, transparent 0 36%, rgba(17,17,17,.74)); }
.portfolio-wall .center-actions { margin-top: 28px; }
.subpage-hero {
  padding: clamp(92px, 12vw, 150px) 0 clamp(72px, 9vw, 112px);
  position: relative;
  overflow: hidden;
}
.subpage-hero::after {
  content:"";
  position:absolute;
  right:-10%; top:10%; width:420px; height:420px;
  background: radial-gradient(circle, rgba(var(--red-rgb),.22), transparent 65%);
  pointer-events:none;
}
.subpage-hero .container { position:relative; z-index:1; }
.subpage-hero h1 { max-width: 900px; }
.subpage-hero p { max-width: 690px; font-size: clamp(18px, 2vw, 22px); }
.page-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:22px; }
.page-card {
  position:relative;
  min-height: 250px;
  padding: 28px;
  border:1px solid rgba(17,17,17,.1);
  background:#fff;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.page-card::after {
  content:""; position:absolute; right:-46px; bottom:-46px; width:160px; height:160px;
  background: radial-gradient(circle, rgba(var(--red-rgb),.13), transparent 68%);
}
.page-card h3 { font-size: 25px; }
.page-card p { font-size: 15px; }
.page-card ul { margin: 18px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.page-card li { color:#303030; display:flex; gap:10px; }
.page-card li::before { content:""; width:8px; height:8px; margin-top:.55em; background:var(--red); flex:0 0 auto; }
.page-split { display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 70px); align-items:center; }
.dark-card { background:linear-gradient(135deg,#161616,#2a2929); color:#fff; border-color:rgba(255,255,255,.12); }
.dark-card p, .dark-card li { color: rgba(255,255,255,.72); }
.check-list { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px; }
.check-list li { display:flex; gap:12px; color:#303030; }
.dark-section .check-list li { color:rgba(255,255,255,.78); }
.check-list li::before { content:"✓"; color:#fff; background:var(--red); width:24px; height:24px; display:grid; place-items:center; font-weight:900; flex:0 0 auto; }
.process-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; counter-reset: step; }
.process-card { padding:24px; background:#fff; border:1px solid rgba(17,17,17,.1); box-shadow:var(--shadow-soft); }
.process-card::before { counter-increment: step; content: "0" counter(step); color:var(--red); font-weight:950; display:block; margin-bottom:18px; }
.page-cta { padding:50px; background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.page-cta h2 { color:#fff; font-size:clamp(30px,4vw,52px); margin:0; }
.page-cta p { color:rgba(255,255,255,.78); margin:10px 0 0; }
.error-hero { min-height: 70vh; display:grid; place-items:center; text-align:center; }
.error-code { color:var(--red); font-size: clamp(84px,18vw,220px); line-height:.8; font-weight:950; letter-spacing:-.08em; }
.blog-list { display:grid; gap:18px; }
.blog-row { display:grid; grid-template-columns: 190px 1fr auto; gap:24px; align-items:center; padding:22px; background:#fff; border:1px solid rgba(17,17,17,.1); box-shadow:var(--shadow-soft); }
.blog-row span { color:var(--red); font-weight:900; text-transform:uppercase; font-size:12px; letter-spacing:.13em; }
.blog-row h3 { margin:0; }
.blog-row p { margin:6px 0 0; }
@media (max-width: 980px) {
  .portfolio-grid, .page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-split { grid-template-columns:1fr; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .blog-row { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .services-showcase { min-height: 600px; }
  .service-slide { grid-template-rows: 250px auto; }
  .showcase-media { margin:14px; min-height: 226px; }
  .showcase-copy h2 { font-size: clamp(30px, 8.5vw, 38px) !important; }
  .visual-seo { padding-left: 28px; padding-top: 54px; }
  .visual-seo .rank-card { width:96px; height:96px; padding:16px; }
  .visual-seo .rank-card b { font-size:34px; }
  .rank-lines { margin-left:16px; width: 48%; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-card { min-height: 220px; }
  .page-grid, .process-grid { grid-template-columns:1fr; }
  .page-cta { padding:30px; display:block; }
  .page-cta .btn { margin-top:18px; }
}


/* V8: home polish + developed Izrada sajta and SEO pages */
.services-showcase { min-height: 648px; }
.service-slide { grid-template-rows: 314px auto; }
.showcase-copy h2 {
  font-size: clamp(34px, 2.15vw, 36px) !important;
  line-height: 1.04;
  letter-spacing: -.045em;
  max-width: 540px;
}
.showcase-copy p:last-child { max-width: 620px; font-size: 16px; }
.showcase-media {
  min-height: 286px;
  margin: 24px 24px 0;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 76% 28%, rgba(255,255,255,.10), transparent 14%),
    radial-gradient(circle at 20% 30%, rgba(var(--red-rgb),.34), transparent 27%),
    linear-gradient(135deg, #1b1b1b, #2a2929 58%, #101010);
}
.showcase-media .browser-frame { top: 20px; left: 20px; right: 20px; height: 34px; }
.visual-web .mini-alert {
  left: auto !important;
  right: 56px;
  top: 88px;
  width: 58px;
  height: 58px;
  z-index: 4;
  font-size: 34px;
  box-shadow: 0 24px 60px rgba(var(--red-rgb),.28);
}
.visual-web .visual-panel {
  left: 52px;
  right: 132px;
  bottom: 42px;
  min-height: 112px;
  padding: 26px 30px;
}
.visual-web .visual-panel strong { font-size: clamp(34px, 4.2vw, 52px); }
.visual-web .mini-lines { left: 70px; right: 80px; top: 176px; z-index: 2; opacity: .75; }
.visual-web .mini-lines i { height: 10px; }
.visual-seo { display: block; padding: 0; }
.visual-seo .rank-card {
  position: absolute;
  left: 58px;
  top: 92px;
  width: 132px;
  height: 132px;
  z-index: 3;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.visual-seo .rank-card b { font-size: 46px; }
.visual-seo .rank-card span { font-size: 11px; }
.visual-seo .rank-lines {
  position: absolute;
  left: 220px;
  right: 54px;
  top: 112px;
  width: auto;
  margin: 0;
  display: grid;
  gap: 12px;
  z-index: 2;
}
.visual-seo .rank-lines i { height: 12px; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.12); }
.visual-seo .rank-lines i:nth-child(2) { background: rgba(var(--red-rgb),.36); }
.visual-care { padding: 0; place-items: center; }
.visual-care .pulse-shield { width: 112px; height: 112px; }
.visual-care .status-stack { right: 40px; bottom: 38px; }
.visual-care .status-stack span { min-width: 142px; }
.portfolio-card em {
  position: absolute;
  right: 18px;
  top: 18px;
  bottom: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  font-size: 20px;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
  opacity: 1;
  transform: none;
  transition: background .22s ease, transform .22s ease, border-color .22s ease;
}
.portfolio-card:hover em { background: var(--red); border-color: var(--red); transform: translate(3px, -3px); }
.portfolio-card.tone-light em { color: var(--red); border-color: rgba(var(--red-rgb),.18); background: rgba(255,255,255,.76); }
.portfolio-card.tone-light:hover em { color: #fff; background: var(--red); }
.service-detail-hero { padding-top: clamp(88px, 10vw, 134px); padding-bottom: clamp(70px, 8vw, 110px); }
.detail-hero-grid { display:grid; grid-template-columns: 1.02fr .98fr; gap: clamp(36px, 6vw, 76px); align-items:center; }
.detail-hero-copy h1 { max-width: 720px; font-size: clamp(46px, 6.2vw, 84px); line-height: .92; letter-spacing:-.075em; color:#fff; margin:0 0 20px; }
.detail-hero-copy p:not(.eyebrow) { max-width: 640px; color: rgba(255,255,255,.74); font-size: clamp(18px, 2vw, 22px); }
.detail-visual { min-height: 440px; position: relative; overflow:hidden; border:1px solid rgba(255,255,255,.14); background: radial-gradient(circle at 78% 26%, rgba(255,255,255,.12), transparent 16%), radial-gradient(circle at 24% 24%, rgba(var(--red-rgb),.34), transparent 30%), linear-gradient(135deg,#1a1a1a,#2a2929 58%,#101010); box-shadow: var(--shadow-strong); }
.detail-visual::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 0 46%, rgba(255,255,255,.06) 46% 48%, transparent 48%); }
.detail-window { position:absolute; top:34px; left:34px; right:34px; height:42px; display:flex; gap:9px; align-items:center; padding:0 15px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.32); }
.detail-window span { width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.4); }
.detail-screen-card { position:absolute; left:62px; right:62px; bottom:74px; padding:34px; min-height:170px; background:rgba(17,17,17,.78); border:1px solid rgba(255,255,255,.14); }
.detail-screen-card strong { display:block; color:#fff; font-size: clamp(42px, 5vw, 72px); line-height:.9; letter-spacing:-.08em; }
.detail-screen-card em { display:block; margin-top:14px; color:var(--red); font-style:normal; text-transform:uppercase; letter-spacing:.16em; font-weight:950; font-size:12px; }
.detail-floating { position:absolute; z-index:3; padding:12px 14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:900; font-size:13px; backdrop-filter:blur(10px); }
.detail-floating.one { top:112px; right:48px; }
.detail-floating.two { bottom:42px; left:78px; background:var(--red); }
.facts-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:18px; }
.fact-card { position:relative; min-height: 238px; padding: 28px; background:#fff; border:1px solid rgba(17,17,17,.1); box-shadow:var(--shadow-soft); overflow:hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.fact-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(var(--red-rgb),.22); }
.fact-card::after { content:""; position:absolute; right:-44px; bottom:-54px; width:140px; height:140px; background:radial-gradient(circle, rgba(var(--red-rgb),.12), transparent 68%); }
.fact-card span { color:var(--red); font-weight:950; letter-spacing:.12em; font-size:12px; }
.fact-card h3 { margin:18px 0 10px; font-size:24px; letter-spacing:-.04em; }
.fact-card p { margin:0; color:var(--muted); }
.detail-package { overflow:hidden; }
.detail-two-col { display:grid; grid-template-columns: .9fr 1.1fr; gap:clamp(34px,6vw,76px); align-items:center; }
.detail-two-col h2 { color:inherit; font-size:clamp(34px,4.4vw,58px); line-height:.98; letter-spacing:-.06em; }
.detail-two-col p { font-size:18px; color:inherit; opacity:.76; }
.deliverables-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
.deliverables-grid span { padding:18px 20px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:#fff; font-weight:850; }
.work-carousel-section { background:linear-gradient(180deg,#fff,#f7f7f7); }
.work-carousel { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(270px, 33%); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 20px; scrollbar-width:thin; }
.work-mini-card { scroll-snap-align:start; min-height:260px; padding:24px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border:1px solid rgba(17,17,17,.1); box-shadow:var(--shadow-soft); transition:transform .22s ease, box-shadow .22s ease; }
.work-mini-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.work-mini-card::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 0 40%, rgba(0,0,0,.62)); z-index:0; }
.work-mini-card span, .work-mini-card strong, .work-mini-card em { position:relative; z-index:1; }
.work-mini-card span { color:rgba(255,255,255,.75); font-weight:950; text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
.work-mini-card strong { margin-top:8px; color:#fff; font-size:clamp(24px,3vw,36px); line-height:.98; letter-spacing:-.055em; }
.work-mini-card em { position:absolute; top:18px; right:18px; width:42px; height:42px; display:grid; place-items:center; font-style:normal; background:rgba(255,255,255,.13); color:#fff; border:1px solid rgba(255,255,255,.25); }
.work-mini-card.tone-dark { background:radial-gradient(circle at 24% 22%, rgba(var(--red-rgb),.28), transparent 30%), linear-gradient(135deg,#151515,#2a2929); }
.work-mini-card.tone-red { background:linear-gradient(135deg,var(--red),var(--red-dark)); }
.work-mini-card.tone-light { background:linear-gradient(135deg,#f8f8f8,#fff); }
.process-grid-rich .process-card { min-height:210px; }
.pricing-mini-section { background:var(--paper); }
.pricing-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pricing-mini-card { padding:34px; background:#fff; border:1px solid rgba(17,17,17,.1); box-shadow:var(--shadow-soft); }
.pricing-mini-card.dark { background:linear-gradient(135deg,#151515,#2a2929); color:#fff; border-color:rgba(255,255,255,.12); }
.pricing-mini-card h2 { font-size:clamp(30px,3.6vw,50px); line-height:1; letter-spacing:-.06em; }
.pricing-mini-card p { color:#555; font-size:17px; }
.pricing-mini-card.dark p { color:rgba(255,255,255,.72); }
.mini-faq-list { display:grid; gap:12px; }
.mini-faq-list details { background:#fff; border:1px solid rgba(17,17,17,.1); padding:18px 20px; box-shadow:var(--shadow-soft); }
.mini-faq-list summary { cursor:pointer; font-weight:900; color:#111; }
.mini-faq-list p { margin:10px 0 0; color:#606060; font-size:15px; }
.seo-detail-visual .seo-rank-card { position:absolute; left:54px; top:112px; width:150px; height:150px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; background:var(--red); color:#fff; z-index:2; }
.seo-detail-visual .seo-rank-card strong { font-size:54px; line-height:.9; letter-spacing:-.06em; }
.seo-detail-visual .seo-rank-card em { font-style:normal; font-weight:950; text-transform:uppercase; letter-spacing:.13em; font-size:12px; }
.seo-result-lines { position:absolute; left:240px; right:52px; top:140px; display:grid; gap:15px; z-index:2; }
.seo-result-lines i { height:16px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.12); }
.seo-result-lines i:nth-child(2) { background:rgba(var(--red-rgb),.36); }
.seo-result-lines i:nth-child(4) { width:64%; }
.keyword-section { overflow:hidden; }
.keyword-cloud { display:flex; flex-wrap:wrap; gap:12px; }
.keyword-cloud span { padding:13px 16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:850; }
.seo-month-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
.seo-month-grid article { padding:24px; background:#fff; border:1px solid rgba(17,17,17,.1); box-shadow:var(--shadow-soft); }
.seo-month-grid span { color:var(--red); font-weight:950; font-size:12px; letter-spacing:.13em; }
.seo-month-grid strong { display:block; margin:12px 0 8px; font-size:22px; letter-spacing:-.04em; }
.seo-month-grid p { margin:0; color:#666; font-size:15px; }
.city-chip-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.city-chip-grid span { padding:16px 18px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:#fff; font-weight:850; }
.city-chip-grid span::before { content:"⌖"; color:var(--red); margin-right:8px; }
@media (max-width: 980px) {
  .detail-hero-grid, .detail-two-col, .pricing-mini-grid { grid-template-columns:1fr; }
  .facts-grid { grid-template-columns:repeat(2,1fr); }
  .work-carousel { grid-auto-columns:minmax(260px, 48%); }
  .city-chip-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 720px) {
  .services-showcase { min-height: 592px; }
  .service-slide { grid-template-rows: 244px auto; }
  .showcase-copy h2 { font-size: clamp(30px, 8.5vw, 38px) !important; }
  .visual-web .visual-panel { left:28px; right:28px; bottom:26px; min-height:96px; padding:22px; }
  .visual-web .visual-panel strong { font-size:38px; }
  .visual-web .mini-alert { width:44px; height:44px; right:30px; top:76px; font-size:26px; }
  .visual-web .mini-lines { display:none; }
  .visual-seo .rank-card { left:34px; top:78px; width:98px; height:98px; padding:16px; }
  .visual-seo .rank-card b { font-size:34px; }
  .visual-seo .rank-lines { left:150px; right:28px; top:94px; gap:9px; }
  .visual-care .pulse-shield { width:88px; height:88px; }
  .visual-care .status-stack { right:24px; bottom:24px; }
  .visual-care .status-stack span { min-width:120px; font-size:11px; padding:8px 10px; }
  .detail-hero-copy h1 { font-size: clamp(40px, 12vw, 58px); }
  .detail-visual { min-height: 330px; }
  .detail-screen-card { left:28px; right:28px; bottom:42px; padding:26px; }
  .detail-screen-card strong { font-size:42px; }
  .detail-floating.one { top:90px; right:24px; }
  .detail-floating.two { bottom:20px; left:30px; }
  .facts-grid, .seo-month-grid, .deliverables-grid, .city-chip-grid { grid-template-columns:1fr; }
  .work-carousel { grid-auto-columns:86%; }
  .pricing-mini-card { padding:26px; }
  .seo-detail-visual .seo-rank-card { left:32px; top:94px; width:112px; height:112px; }
  .seo-result-lines { left:164px; right:26px; top:112px; }
}


/* V9 final system polish: consistent subpages, richer icons, better cards/forms */
:root { --radius-none: 0; --section-title: clamp(32px, 3.8vw, 48px); }
.section-head h2,
.detail-two-col h2,
.process-section h2,
.faq-mini-section h2,
.pricing-mini-section h2,
.page-cta h2,
.subpage-section-title {
  font-size: clamp(32px, 3.8vw, 48px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}
.eyebrow,
.detail-hero-copy .eyebrow,
.subpage-hero .eyebrow {
  font-size: 10.5px !important;
  letter-spacing: .18em !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
}
.hero-eyebrow span { width: 7px; height: 7px; }
.subpage-hero { padding: clamp(82px, 10vw, 126px) 0 clamp(62px, 7.4vw, 98px); }
.detail-hero-copy h1 {
  max-width: 720px !important;
  font-size: clamp(46px, 5.2vw, 74px) !important;
  line-height: .92 !important;
  letter-spacing: -.075em !important;
  color: #fff;
  margin: 0 0 20px !important;
}
.subpage-hero p:not(.eyebrow),
.detail-hero-copy p:not(.eyebrow) {
  max-width: 690px;
  font-size: clamp(14px, .8vw, 14px) !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,.72);
}
.detail-hero-copy .hero-actions { margin-top: 26px; }
.detail-visual { min-height: clamp(340px, 34vw, 445px); }
.detail-screen-card strong { font-size: clamp(32px, 4vw, 58px) !important; }
.detail-screen-card em { font-size: 10px !important; }
.detail-floating { font-size: 11px !important; }

/* Home service slider fixes */
.services-showcase { min-height: 640px !important; }
.service-slide { grid-template-rows: 304px auto !important; }
.showcase-media { min-height: 282px !important; isolation:isolate; }
.showcase-media::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 0 45%, rgba(255,255,255,.055) 45% 47%, transparent 47%); pointer-events:none; }
.showcase-media .browser-frame { z-index:3; }
.visual-web .visual-panel { left: 56px !important; right: 72px !important; bottom: 44px !important; min-height: 104px !important; padding: 24px 28px !important; z-index: 2; }
.visual-web .visual-panel strong { font-size: clamp(30px, 3.6vw, 46px) !important; line-height: .92; }
.visual-web .visual-panel em { font-size: 10.5px; }
.visual-web .mini-alert { right: auto !important; left: 56px !important; top: 86px !important; width: 48px !important; height: 48px !important; font-size: 28px !important; z-index: 4; }
.visual-web .mini-lines { left: 190px !important; right: 54px !important; top: 112px !important; gap: 10px !important; }
.visual-web .mini-lines i { height: 9px !important; opacity: .72; }
.visual-web .mini-lines i:nth-child(2) { background: rgba(var(--red-rgb),.32); border-color:rgba(var(--red-rgb),.4); }
.visual-seo .rank-card { left: 52px !important; top: 92px !important; width: 124px !important; height: 124px !important; }
.visual-seo .rank-card b { font-size: 44px !important; }
.visual-seo .rank-lines { left: 206px !important; top: 112px !important; right: 52px !important; }
.visual-care .pulse-shield { width: 104px !important; height: 104px !important; }
.visual-care .status-stack { right: 42px !important; bottom: 42px !important; }
.showcase-copy h2 { font-size: clamp(34px, 2.15vw, 36px) !important; }
.showcase-copy p:last-child { font-size: 15px !important; line-height:1.68; }

/* Better explanatory sections */
.what-site-layout { display:grid; grid-template-columns: minmax(0, .94fr) minmax(300px, .72fr); gap: clamp(34px, 6vw, 78px); align-items:center; margin-bottom: 34px; }
.what-site-layout .section-head { margin-bottom:0; max-width:720px; }
.site-system-visual,
.subpage-visual-card {
  position:relative; min-height: 360px; overflow:hidden; border:1px solid rgba(17,17,17,.1); background: radial-gradient(circle at 74% 28%, rgba(var(--red-rgb),.18), transparent 20%), linear-gradient(135deg,#191919,#2a2929 58%,#101010); box-shadow: var(--shadow);
}
.site-system-visual::before,
.subpage-visual-card::before { content:""; position:absolute; inset:28px; border:1px solid rgba(255,255,255,.13); }
.site-system-visual::after,
.subpage-visual-card::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 0 45%, rgba(255,255,255,.07) 45% 47%, transparent 47%); }
.visual-browser-top { position:absolute; left:44px; right:44px; top:42px; height:42px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.35); display:flex; align-items:center; gap:8px; padding:0 14px; z-index:2; }
.visual-browser-top span { width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.42); }
.system-score { position:absolute; left:64px; bottom:64px; z-index:2; display:grid; gap:10px; }
.system-score strong { color:#fff; font-size:clamp(42px,4.8vw,62px); line-height:.9; letter-spacing:-.07em; }
.system-score em { color:var(--red); font-style:normal; font-weight:950; text-transform:uppercase; letter-spacing:.16em; font-size:11px; }
.system-lines { position:absolute; right:56px; top:128px; width:42%; display:grid; gap:12px; z-index:2; }
.system-lines i { height:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.12); }
.system-lines i:nth-child(2) { background:rgba(var(--red-rgb),.36); border-color:rgba(var(--red-rgb),.42); }
.system-lines i:nth-child(3) { width:74%; }
.system-icon { position:absolute; right:64px; bottom:66px; z-index:2; width:74px; height:74px; display:grid; place-items:center; background:var(--red); color:#fff; box-shadow:0 24px 60px rgba(var(--red-rgb),.28); }
.system-icon svg { width:36px; height:36px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.facts-grid.icon-facts { grid-template-columns: repeat(3, minmax(0,1fr)); }
.fact-card { padding: 30px !important; }
.fact-icon { width: 54px; height:54px; display:grid; place-items:center; margin-bottom:24px; border:1px solid rgba(var(--red-rgb),.18); background:rgba(var(--red-rgb),.055); color:var(--red); transition:background .22s ease, color .22s ease, transform .22s ease; }
.fact-icon svg, .deliverable svg, .process-icon svg, .pricing-mark svg, .contact-mini-icon svg { width:27px; height:27px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.fact-card:hover .fact-icon { background:var(--red); color:#fff; transform: translateY(-3px); }
.fact-card h3 { font-size: clamp(20px, 2vw, 25px) !important; }
.fact-card p { font-size: 15.5px; line-height:1.65; }

.deliverables-grid.rich { grid-template-columns: repeat(2,minmax(0,1fr)); }
.deliverable { display:flex; align-items:flex-start; gap:14px; padding:18px 18px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:#fff; font-weight:850; }
.deliverable svg { flex:0 0 auto; color:var(--red); }
.deliverable span { display:block; }
.deliverable small { display:block; margin-top:4px; color:rgba(255,255,255,.62); font-weight:650; line-height:1.5; }

.work-carousel-section.fullwork { overflow:hidden; background:linear-gradient(180deg,#fff 0,#f5f3f1 100%); }
.work-carousel-section.fullwork .container { width:min(100% - 40px, 1320px); }
.work-carousel { grid-auto-columns: minmax(320px, 31%) !important; gap: 22px !important; padding-bottom: 28px !important; }
.work-mini-card { min-height: 330px !important; padding: 28px !important; }
.work-mini-card::after { content:""; position:absolute; right:22px; top:22px; width:72px; height:72px; opacity:.18; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M4 9h16M8 13h4M8 16h8'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M4 9h16M8 13h4M8 16h8'/%3E%3C/svg%3E") center/contain no-repeat; }
.work-mini-card em { border-radius:0; }

.process-grid-rich .process-card { min-height: 220px; position:relative; overflow:hidden; }
.process-icon { width:46px; height:46px; display:grid; place-items:center; margin-bottom:18px; color:var(--red); background:rgba(var(--red-rgb),.06); border:1px solid rgba(var(--red-rgb),.16); }
.process-grid-rich .process-card::after { content:""; position:absolute; right:-52px; bottom:-58px; width:145px; height:145px; background:radial-gradient(circle, rgba(var(--red-rgb),.13), transparent 68%); }

.pricing-mini-grid.polished { grid-template-columns: 1fr 1fr; }
.pricing-mini-card { position:relative; min-height: 360px; overflow:hidden; }
.pricing-mini-card::after { content:""; position:absolute; right:-80px; bottom:-80px; width:220px; height:220px; background:radial-gradient(circle, rgba(var(--red-rgb),.15), transparent 70%); pointer-events:none; }
.pricing-mark { width:60px; height:60px; display:grid; place-items:center; margin-bottom:28px; background:rgba(var(--red-rgb),.08); color:var(--red); border:1px solid rgba(var(--red-rgb),.18); }
.pricing-mini-card.dark .pricing-mark { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.13); color:#fff; }
.pricing-mini-card ul { margin:24px 0 0; padding:0; list-style:none; display:grid; gap:10px; position:relative; z-index:1; }
.pricing-mini-card li { display:flex; gap:10px; color:#555; }
.pricing-mini-card.dark li { color:rgba(255,255,255,.76); }
.pricing-mini-card li::before { content:"→"; color:var(--red); font-weight:950; }

.contact-split { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,6vw,76px); align-items:start; }
.contact-panel { background:#fff; border:1px solid rgba(17,17,17,.1); box-shadow:var(--shadow); padding: clamp(26px,4vw,44px); }
.contact-panel .contact-form label span { color:#222; }
.contact-panel input, .contact-panel textarea { color:#111; background:#f8f8f8; border-color:rgba(17,17,17,.12); }
.contact-panel textarea { resize:vertical; min-height:120px; }
.contact-benefits { display:grid; gap:16px; margin-top:26px; }
.contact-benefit { display:flex; gap:14px; align-items:flex-start; }
.contact-mini-icon { width:42px; height:42px; display:grid; place-items:center; color:var(--red); background:rgba(var(--red-rgb),.07); border:1px solid rgba(var(--red-rgb),.16); flex:0 0 auto; }
.contact-benefit h3 { margin:0 0 4px; font-size:18px; }
.contact-benefit p { margin:0; font-size:14px; }

.mini-faq-list details { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.mini-faq-list details:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(var(--red-rgb),.18); }
.page-cta { position:relative; overflow:hidden; }
.page-cta::before { content:""; width:74px; height:74px; display:block; flex:0 0 auto; background:#fff; opacity:.95; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M13 3 6 14h5l-1 7 8-12h-5l0-6Z'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center/42px 42px no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M13 3 6 14h5l-1 7 8-12h-5l0-6Z'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center/42px 42px no-repeat; }
.page-cta::after { content:""; position:absolute; right:-80px; bottom:-90px; width:240px; height:240px; background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); }

/* Generic page completion components */
.premium-panel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.premium-panel { padding:28px; background:#fff; border:1px solid rgba(17,17,17,.1); box-shadow:var(--shadow-soft); min-height:220px; position:relative; overflow:hidden; transition:.22s ease; }
.premium-panel:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(var(--red-rgb),.22); }
.premium-panel .fact-icon { margin-bottom:20px; }
.premium-panel h3 { font-size:24px; margin-bottom:10px; }
.premium-panel p { font-size:15px; line-height:1.65; }

@media (max-width: 980px) {
  .what-site-layout, .contact-split, .pricing-mini-grid.polished { grid-template-columns:1fr; }
  .facts-grid.icon-facts, .premium-panel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-carousel { grid-auto-columns: minmax(280px, 48%) !important; }
}
@media (max-width: 720px) {
  .detail-hero-copy h1 { font-size: clamp(38px, 10vw, 54px) !important; letter-spacing:-.06em !important; }
  .subpage-hero { padding-top: 68px; }
  .site-system-visual { min-height:290px; }
  .visual-browser-top { left:22px; right:22px; top:22px; }
  .system-score { left:30px; bottom:44px; }
  .system-lines { right:24px; top:94px; width:44%; gap:8px; }
  .system-icon { right:28px; bottom:42px; width:56px; height:56px; }
  .facts-grid.icon-facts, .deliverables-grid.rich, .premium-panel-grid { grid-template-columns:1fr; }
  .work-carousel { grid-auto-columns: 86% !important; }
  .work-mini-card { min-height:275px !important; }
  .page-cta { gap:18px; }
  .page-cta::before { width:54px; height:54px; }
  .services-showcase { min-height: 596px !important; }
  .service-slide { grid-template-rows: 246px auto !important; }
  .visual-web .visual-panel { left:26px !important; right:26px !important; bottom:26px !important; }
  .visual-web .mini-alert { left:28px !important; top:72px !important; }
  .visual-web .mini-lines { left:120px !important; right:28px !important; top:84px !important; }
}

/* V10 - Izrada sajta focused premium polish */
:root {
  --h2-service: clamp(32px, 3.8vw, 48px);
  --detail-h1: clamp(46px, 5.2vw, 74px);
}
.subpage-hero .eyebrow,
.detail-hero-copy .eyebrow,
.detail-two-col .eyebrow,
.process-section .eyebrow,
.faq-mini-section .eyebrow,
.contact-section .eyebrow,
.pricing-mini-section .eyebrow {
  font-size: 11px !important;
  letter-spacing: .18em !important;
  font-weight: 850 !important;
}
.detail-hero-copy h1 {
  max-width: 720px !important;
  font-size: var(--detail-h1) !important;
  line-height: .92 !important;
  letter-spacing: -.075em !important;
}
.subpage-hero p:not(.eyebrow),
.detail-hero-copy p:not(.eyebrow) {
  max-width: 690px !important;
  font-size: clamp(14px, .95vw, 16px) !important;
  line-height: 1.65 !important;
}
.detail-screen-card strong { font-size: clamp(36px, 4.2vw, 56px) !important; }
.detail-screen-card em { font-size: 10px !important; letter-spacing: .18em !important; }
.detail-floating { font-size: 11px !important; padding: 10px 12px !important; }
.section-head h2,
.detail-two-col h2,
.process-section h2,
.faq-mini-section h2,
.contact-section h2,
.pricing-mini-section h2 {
  font-size: var(--h2-service) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}
.detail-package .detail-two-col { grid-template-columns: .92fr 1.08fr; }
.deliverables-grid.rich { gap: 14px !important; }
.deliverables-grid.rich .deliverable {
  position: relative;
  min-height: 118px;
  align-items: center;
  padding: 22px 24px !important;
  gap: 18px;
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  overflow: hidden;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.deliverables-grid.rich .deliverable:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(var(--red-rgb),.42) !important;
}
.deliverables-grid.rich .deliverable::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -44px;
  width: 128px;
  height: 128px;
  background: radial-gradient(circle, rgba(var(--red-rgb),.22), transparent 70%);
  opacity: 0;
  transition: opacity .22s ease;
}
.deliverables-grid.rich .deliverable:hover::after { opacity: 1; }
.deliverables-grid.rich .deliverable > svg {
  width: 28px;
  height: 28px;
  color: var(--red);
  position: relative;
  z-index: 1;
}
.deliverables-grid.rich .deliverable span {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 17px;
  line-height: 1.22;
  position: relative;
  z-index: 1;
}
.deliverables-grid.rich .deliverable small {
  font-size: 13.5px;
  color: rgba(255,255,255,.64) !important;
  font-weight: 680;
}
.web-process-section { background: #fff; }
.process-steps-horizontal { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 16px !important; }
.process-step {
  min-height: 235px !important;
  padding: 26px !important;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.1);
  background: linear-gradient(145deg, #fff, #fbfbfb);
  box-shadow: var(--shadow-soft);
}
.process-step::after { display: none !important; }
.process-step .process-bg-icon {
  position: absolute;
  right: -22px;
  bottom: -26px;
  width: 142px;
  height: 142px;
  color: var(--red);
  opacity: .055;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  transition: transform .26s ease, opacity .26s ease;
}
.process-step:hover .process-bg-icon { opacity: .13; transform: scale(1.08) rotate(-4deg); }
.process-number {
  display: block;
  margin-bottom: 24px;
  color: var(--red);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .08em;
}
.process-row { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; position: relative; z-index: 1; }
.process-row .process-icon {
  width: 48px;
  height: 48px;
  margin: 0;
  display: grid;
  place-items: center;
  color: var(--red);
  background: rgba(var(--red-rgb),.06);
  border: 1px solid rgba(var(--red-rgb),.18);
}
.process-row .process-icon svg,
.process-bg-icon { stroke-linecap: round; stroke-linejoin: round; }
.process-row h3 { margin: 2px 0 8px; font-size: 21px; }
.process-row p { margin: 0; font-size: 15px; line-height: 1.62; }
.service-price-grid { align-items: stretch; }
.service-price-card {
  min-height: 460px !important;
  padding: clamp(30px, 4vw, 42px) !important;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(var(--red-rgb),.24); }
.service-price-card .pricing-bg-icon {
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 190px;
  height: 190px;
  color: var(--red);
  opacity: .055;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.45;
  transition: opacity .22s ease, transform .22s ease;
}
.service-price-card:hover .pricing-bg-icon { opacity: .14; transform: scale(1.05) rotate(-4deg); }
.service-price-card h2 span { display: block; }
.service-price-card > p,
.service-price-card .price-note,
.price-includes { position: relative; z-index: 1; }
.price-includes { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(17,17,17,.08); }
.service-price-card.dark .price-includes { border-top-color: rgba(255,255,255,.12); }
.price-includes strong { display:block; margin-bottom: 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.price-includes ul { margin: 0 !important; gap: 9px !important; }
.service-price-card .price-note { margin-top: auto; padding-top: 22px; font-size: 14px !important; color: #777; }
.service-price-card.dark .price-note { color: rgba(255,255,255,.62); }
.service-price-card .btn { width: fit-content; margin-top: auto; }
.premium-faq-section { background: linear-gradient(180deg,#fff 0,#f7f5f2 100%); }
.faq-layout-web { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(34px, 6vw, 76px); align-items: start; }
.faq-intro-card { position: sticky; top: 112px; }
.faq-intro-card h2 { max-width: 560px; }
.faq-intro-card p { max-width: 540px; font-size: 16px; }
.faq-visual-mini {
  margin-top: 32px;
  position: relative;
  min-height: 168px;
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.1);
  background: radial-gradient(circle at 26% 28%, rgba(var(--red-rgb),.22), transparent 28%), linear-gradient(135deg,#191919,#2a2929 60%,#101010);
  box-shadow: var(--shadow-soft);
}
.faq-visual-mini span { position:absolute; left:34px; top:38px; width:66px; height:66px; display:grid; place-items:center; background:var(--red); color:#fff; font-weight:950; font-size:38px; }
.faq-visual-mini i { position:absolute; left:126px; height:12px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.1); }
.faq-visual-mini i:nth-of-type(1){top:50px;width:58%;}
.faq-visual-mini i:nth-of-type(2){top:82px;width:74%;background:rgba(var(--red-rgb),.32);border-color:rgba(var(--red-rgb),.38);}
.faq-visual-mini i:nth-of-type(3){top:114px;width:46%;}
.premium-faq-list details {
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(17,17,17,.1);
  box-shadow: 0 18px 42px rgba(17,17,17,.05);
}
.premium-faq-list summary {
  position: relative;
  padding: 24px 28px 24px 58px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  color: #111;
  list-style: none;
}
.premium-faq-list summary::-webkit-details-marker { display: none; }
.premium-faq-list summary::before {
  content: "+";
  position: absolute;
  left: 22px;
  top: 21px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--red);
  font-weight: 950;
  border: 1px solid rgba(var(--red-rgb),.18);
  background: rgba(var(--red-rgb),.05);
}
.premium-faq-list details[open] summary::before { content: "–"; }
.premium-faq-list details p { margin: 0; padding: 0 28px 24px 58px; font-size: 15.5px; line-height: 1.7; color: #666; }
.estimate-dark-section { overflow: hidden; }
.estimate-dark-section::after { content:""; position:absolute; right:-100px; top:10%; width:300px; height:300px; background: radial-gradient(circle, rgba(var(--red-rgb),.18), transparent 70%); pointer-events:none; }
.estimate-copy h2 { max-width: 620px; }
.dark-benefits .contact-benefit h3 { color: #fff; }
.dark-benefits .contact-benefit p { color: rgba(255,255,255,.68); }
.dark-form-panel {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: var(--shadow-strong) !important;
  position: relative;
  overflow: hidden;
}
.dark-form-panel::before {
  content:"";
  position:absolute;
  left:-70px;
  top:-70px;
  width:210px;
  height:210px;
  background: radial-gradient(circle, rgba(var(--red-rgb),.18), transparent 70%);
}
.dark-form-panel .contact-form { position: relative; z-index:1; }
.dark-form-panel .contact-form label span { color: rgba(255,255,255,.72) !important; }
.dark-form-panel input,
.dark-form-panel textarea {
  color: #fff !important;
  background: rgba(0,0,0,.22) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.dark-form-panel input::placeholder,
.dark-form-panel textarea::placeholder { color: rgba(255,255,255,.38); }
.dark-form-panel input:focus,
.dark-form-panel textarea:focus { outline: none; border-color: rgba(var(--red-rgb),.9) !important; box-shadow: 0 0 0 4px rgba(var(--red-rgb),.16); }
@media (max-width: 1100px) {
  .process-steps-horizontal { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 980px) {
  .detail-package .detail-two-col,
  .faq-layout-web { grid-template-columns: 1fr; }
  .faq-intro-card { position: static; }
}
@media (max-width: 720px) {
  .section-head h2,
  .detail-two-col h2,
  .process-section h2,
  .faq-mini-section h2,
  .contact-section h2,
  .pricing-mini-section h2 { font-size: clamp(31px, 9vw, 42px) !important; }
  .detail-hero-copy h1 { font-size: clamp(38px, 10vw, 54px) !important; }
  .deliverables-grid.rich,
  .process-steps-horizontal { grid-template-columns: 1fr !important; }
  .deliverables-grid.rich .deliverable { min-height: 102px; }
  .process-step { min-height: 205px !important; }
  .process-row { grid-template-columns: 48px 1fr; gap: 14px; }
  .faq-visual-mini { min-height: 144px; }
  .premium-faq-list summary { font-size: 16px; padding-right: 18px; }
  .premium-faq-list details p { padding-right: 18px; }
  .service-price-card { min-height: auto !important; }
}
.process-step::before { display:none !important; content:none !important; }

/* V11: izrada-sajta and odrzavanje premium polish */
:root { --h2-premium: clamp(32px, 3.8vw, 48px); }
.detail-hero-copy h1 { font-size: clamp(46px, 5.2vw, 74px) !important; }
.detail-hero-copy .eyebrow,
.subpage-hero .eyebrow,
.detail-two-col .eyebrow,
.section-head .eyebrow { font-size: 11px !important; letter-spacing: .22em !important; }
.section-head h2,
.detail-two-col h2,
.process-section h2,
.faq-mini-section h2,
.contact-section h2,
.pricing-mini-section h2 { font-size: var(--h2-premium) !important; }
.subpage-hero p:not(.eyebrow),
.detail-hero-copy p:not(.eyebrow) { font-size: clamp(14px, .8vw, 14px) !important; line-height: 1.7 !important; }
.what-site-section .section-head p:not(.eyebrow),
.maintenance-analogy-section .section-head p:not(.eyebrow) { max-width: 690px; }
.icon-facts .fact-card {
  display: grid !important;
  grid-template-columns: 62px 1fr !important;
  grid-template-areas: "num num" "icon title" "desc desc" !important;
  align-items: center !important;
  gap: 14px 18px !important;
  min-height: 218px !important;
  isolation: isolate;
}
.icon-facts .fact-card > span { grid-area: num !important; margin: 0 !important; position:relative; z-index:2; }
.icon-facts .fact-card .fact-icon { grid-area: icon !important; margin: 0 !important; position:relative; z-index:2; align-self:center; }
.icon-facts .fact-card h3 { grid-area: title !important; margin: 0 !important; align-self:center; position:relative; z-index:2; }
.icon-facts .fact-card p { grid-area: desc !important; margin: 0 !important; position:relative; z-index:2; }
.icon-facts .fact-card .fact-bg-icon {
  position:absolute;
  right:-20px;
  bottom:-26px;
  width:158px;
  height:158px;
  color:var(--red);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.35;
  opacity:0;
  transform: scale(.86) rotate(-8deg);
  transition: opacity .25s ease, transform .25s ease;
  z-index:0;
  pointer-events:none;
}
.icon-facts .fact-card:hover .fact-bg-icon { opacity:.09; transform: scale(1.04) rotate(-3deg); }
.icon-facts .fact-card:hover .fact-icon { background:var(--red) !important; color:#fff !important; transform: translateY(-2px); }
.process-step { display:flex !important; flex-direction:column !important; justify-content:flex-start !important; }
.process-step .process-number { margin-bottom: 26px !important; }
.process-step .process-row { grid-template-columns: 58px 1fr !important; align-items: center !important; margin-top: auto !important; margin-bottom: auto !important; }
.process-step .process-row h3 { margin: 0 0 8px !important; line-height:1.05 !important; }
.process-step .process-row p { max-width: 250px; }
.maintenance-hero .detail-hero-copy h1 { max-width: 820px; }
.maintenance-visual { min-height: 430px; }
.maintenance-gauge { position:absolute; left:clamp(30px,4vw,58px); top:33%; width:174px; height:174px; display:grid; place-items:center; text-align:center; background:var(--red); color:#fff; box-shadow: 0 30px 80px rgba(var(--red-rgb),.34); z-index:2; }
.maintenance-gauge strong { display:block; font-size:52px; line-height:.9; letter-spacing:-.07em; }
.maintenance-gauge em { display:block; margin-top:10px; font-style:normal; font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.maintenance-card { position:absolute; right:42px; padding:16px 20px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; font-weight:900; box-shadow: var(--shadow-soft); }
.maintenance-card.one { top:34%; }
.maintenance-card.two { top:49%; }
.maintenance-card.three { top:64%; }
.maintenance-analogy-grid { display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 7vw, 86px); align-items:center; margin-bottom: clamp(34px, 5vw, 62px); }
.maintenance-analogy-panel { position:relative; padding:26px; border:1px solid rgba(17,17,17,.1); background:#fff; box-shadow: var(--shadow-soft); overflow:hidden; }
.maintenance-analogy-panel::after { content:""; position:absolute; right:-80px; bottom:-110px; width:260px; height:260px; background: radial-gradient(circle, rgba(var(--red-rgb),.16), transparent 68%); }
.analogy-row { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; border-bottom:1px solid rgba(17,17,17,.08); }
.analogy-row:last-child { border-bottom:0; }
.analogy-row span { color:var(--red); font-weight:950; text-transform:uppercase; letter-spacing:.16em; font-size:12px; }
.analogy-row strong { font-size: clamp(20px, 2vw, 28px); letter-spacing:-.045em; color:#111; text-align:right; }
.analogy-row.active { padding:24px; margin-top:12px; background:linear-gradient(135deg, #1f1f1f, #111); color:#fff; border:0; }
.analogy-row.active strong { color:#fff; }
.maintenance-deliverables .deliverable span { max-width: 300px; }
.maintenance-pricing-section { background:#f7f5f2; }
.maintenance-pricing-section .service-price-card h2 { max-width: 540px; }
.maintenance-faq-section { background: #fff !important; }
.estimate-dark-section + .section { background:#fff; }
@media (max-width: 980px) {
  .maintenance-analogy-grid { grid-template-columns:1fr; }
  .maintenance-visual { min-height: 380px; }
}
@media (max-width: 720px) {
  .detail-hero-copy h1 { font-size: clamp(38px, 10vw, 54px) !important; }
  .icon-facts .fact-card { grid-template-columns: 54px 1fr !important; min-height: 190px !important; padding: 24px !important; }
  .process-step .process-row { grid-template-columns: 50px 1fr !important; }
  .maintenance-gauge { left:24px; top:31%; width:138px; height:138px; }
  .maintenance-gauge strong { font-size:40px; }
  .maintenance-card { right:20px; padding:12px 14px; font-size:12px; }
  .analogy-row { align-items:flex-start; flex-direction:column; }
  .analogy-row strong { text-align:left; }
}


/* V12: održavanje polish, SEO premium and compact global footer */
.compact-footer { position: relative; overflow: hidden; }
.compact-footer::after { content:""; position:absolute; right:-120px; bottom:-150px; width:360px; height:360px; background:radial-gradient(circle, rgba(var(--red-rgb),.22), transparent 68%); pointer-events:none; }
.footer-grid-compact { grid-template-columns: 1.35fr .95fr .9fr 1.1fr !important; gap: clamp(24px, 4vw, 58px) !important; position: relative; z-index: 1; }
.footer-col a { position:relative; padding-left:14px; }
.footer-col a::before { content:"→"; position:absolute; left:0; color:var(--red); opacity:.9; font-weight:950; transition: transform .2s ease; }
.footer-col a:hover::before { transform: translateX(3px); }
.contact-col p { padding-left:0; }
.contact-col a { padding-left:0; }
.contact-col a::before { display:none; }

.maintenance-visual-clean { min-height: 450px; }
.maintenance-gauge { align-content:center; gap:4px; }
.maintenance-gauge svg { width:42px; height:42px; margin:0 auto 10px; stroke:#fff; fill:none; stroke-width:1.9; }
.maintenance-checks { position:absolute; right: clamp(30px, 4vw, 58px); top: 34%; z-index:2; list-style:none; padding:0; margin:0; display:grid; gap:18px; min-width:210px; }
.maintenance-checks li { display:flex; align-items:center; gap:12px; color:#fff; font-weight:950; letter-spacing:-.025em; transform: translateX(0); transition: transform .22s ease, color .22s ease; }
.maintenance-checks li span { width:28px; height:28px; display:grid; place-items:center; background:rgba(var(--red-rgb),.22); border:1px solid rgba(255,255,255,.18); color:#fff; box-shadow:0 10px 26px rgba(var(--red-rgb),.2); }
.maintenance-visual-clean:hover .maintenance-checks li:nth-child(1) { transform: translateX(-6px); }
.maintenance-visual-clean:hover .maintenance-checks li:nth-child(2) { transform: translateX(4px); }
.maintenance-visual-clean:hover .maintenance-checks li:nth-child(3) { transform: translateX(-3px); }

.maintenance-price-redesign { background: #f7f5f2; }
.maintenance-price-head { max-width: 850px; margin-bottom: 30px; }
.maintenance-price-head h2 { max-width: 780px; font-size: clamp(34px, 4.2vw, 58px); line-height:.98; letter-spacing:-.06em; margin:0 0 16px; }
.maintenance-price-head p:not(.eyebrow) { max-width: 720px; color:#666; font-size:18px; }
.maintenance-pricing-cards { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.maintenance-plan-card { position:relative; overflow:hidden; padding: clamp(34px, 5vw, 56px); min-height: 560px; background:#fff; border:1px solid rgba(17,17,17,.1); box-shadow: var(--shadow-soft); display:flex; flex-direction:column; align-items:flex-start; }
.maintenance-plan-card.featured { background:linear-gradient(135deg,#171717,#242424); color:#fff; border-color:rgba(255,255,255,.12); }
.maintenance-plan-card h2 { max-width:620px; font-size: clamp(34px, 4vw, 58px); line-height:.96; letter-spacing:-.065em; margin:22px 0 18px; }
.maintenance-plan-card p:not(.eyebrow) { max-width: 620px; color:#5e5e5e; font-size:18px; line-height:1.55; }
.maintenance-plan-card.featured p:not(.eyebrow) { color:rgba(255,255,255,.74); }
.maintenance-plan-card .pricing-mark { width:62px; height:62px; }
.maintenance-plan-card .pricing-bg-icon { position:absolute; right:-54px; bottom:-58px; width:260px; height:260px; stroke:var(--red); fill:none; stroke-width:1.2; opacity:.075; transition: transform .35s ease, opacity .35s ease; }
.maintenance-plan-card:hover .pricing-bg-icon { transform: scale(1.08) rotate(-5deg); opacity:.13; }
.clean-check-list { margin-top:auto; padding-top:28px; display:grid; gap:14px; width:100%; position:relative; z-index:1; }
.clean-check-list span { display:flex; align-items:center; gap:12px; color:#383838; font-weight:850; }
.clean-check-list svg { width:24px; height:24px; border:1px solid rgba(var(--red-rgb),.2); background:rgba(var(--red-rgb),.06); stroke:var(--red); fill:none; stroke-width:2.2; padding:5px; flex:0 0 auto; }
.clean-check-list.dark-list span, .featured .clean-check-list span { color:rgba(255,255,255,.82); }
.clean-check-list.dark-list svg, .featured .clean-check-list svg { border-color:rgba(255,255,255,.16); background:rgba(var(--red-rgb),.22); stroke:#fff; }
.maintenance-plan-card .btn { margin-top:26px; }

.seo-hero .detail-hero-copy h1 { max-width: 850px; }
.seo-ai-visual .ai-chip { position:absolute; left:52px; right:52px; bottom:54px; padding:18px 22px; z-index:3; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; font-weight:950; letter-spacing:-.02em; }
.seo-ai-section { background:#fff; }
.seo-ai-grid { align-items:start; }
.ai-proof-panel { display:grid; gap:14px; }
.ai-proof-panel article { position:relative; overflow:hidden; padding:28px; background:#fff; border:1px solid rgba(17,17,17,.1); box-shadow:var(--shadow-soft); }
.ai-proof-panel article::after { content:""; position:absolute; right:-50px; bottom:-60px; width:150px; height:150px; background:radial-gradient(circle, rgba(var(--red-rgb),.12), transparent 70%); }
.ai-proof-panel span { color:var(--red); font-weight:950; letter-spacing:.14em; font-size:12px; }
.ai-proof-panel strong { display:block; margin:12px 0 8px; font-size:24px; letter-spacing:-.045em; }
.ai-proof-panel p { margin:0; color:#666; font-size:16px; }
.seo-before-after-section { overflow:hidden; }
.seo-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.seo-compare-card { position:relative; overflow:hidden; padding: clamp(30px, 4vw, 46px); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); min-height:380px; }
.seo-compare-card.after { background:linear-gradient(135deg, rgba(var(--red-rgb),.86), rgba(var(--red-dark-rgb),.82)); }
.seo-compare-card h3 { color:#fff; font-size: clamp(28px, 3vw, 44px); line-height:1; letter-spacing:-.06em; margin:16px 0 24px; max-width:520px; }
.seo-compare-card ul { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.seo-compare-card li { display:flex; gap:10px; color:rgba(255,255,255,.82); font-weight:820; }
.seo-compare-card li::before { content:""; width:8px; height:8px; background:var(--red); margin-top:9px; flex:0 0 auto; }
.seo-compare-card.after li::before { background:#fff; }
.seo-stat-row { margin-top:20px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.seo-stat-row div { padding:24px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); }
.seo-stat-row strong { display:block; color:#fff; font-size:28px; letter-spacing:-.05em; }
.seo-stat-row span { color:rgba(255,255,255,.62); font-size:14px; }
.seo-pillar-grid .fact-card { min-height: 270px; }
.seo-process-grid .process-card { min-height: 260px; }
.seo-pricing-section { background:#f7f5f2; }
.seo-faq-section { background:#fff !important; }

@media (max-width: 1100px) {
  .footer-grid-compact { grid-template-columns: 1.2fr 1fr 1fr !important; }
  .footer-grid-compact .contact-col { grid-column: 2 / span 2; }
}
@media (max-width: 980px) {
  .maintenance-pricing-cards, .seo-compare-grid, .seo-stat-row { grid-template-columns:1fr; }
  .maintenance-plan-card { min-height:auto; }
}
@media (max-width: 720px) {
  .maintenance-checks { right:20px; top:38%; min-width:170px; gap:14px; }
  .maintenance-checks li { font-size:12px; }
  .maintenance-checks li span { width:24px; height:24px; }
  .maintenance-gauge svg { width:32px; height:32px; }
  .footer-grid-compact { grid-template-columns:1fr 1fr !important; }
  .footer-grid-compact .footer-brand, .footer-grid-compact .contact-col { grid-column:1 / -1; }
  .footer-col h3 { font-size:15px; }
  .seo-detail-visual .seo-rank-card { left:26px; top:94px; width:120px; height:120px; }
  .seo-ai-visual .ai-chip { left:24px; right:24px; bottom:28px; font-size:13px; }
}


/* V13: SEO refinements + social media premium page */
:root { --card-pad: clamp(26px, 3.2vw, 42px); }

/* Cleaner global service pricing/list rhythm */
.service-price-card h2,
.maintenance-plan-card h2,
.seo-price-grid .service-price-card h2 {
  font-size: clamp(30px, 3.35vw, 50px) !important;
  line-height: .99 !important;
  letter-spacing: -.055em !important;
}
.clean-check-list,
.clean-check-list.dark-list {
  margin-top: 22px !important;
  padding-top: 24px !important;
  gap: 12px !important;
  border-top: 1px solid rgba(17,17,17,.08);
}
.featured .clean-check-list,
.service-price-card.dark .clean-check-list,
.clean-check-list.dark-list {
  border-top-color: rgba(255,255,255,.12) !important;
}
.clean-check-list span {
  line-height: 1.35;
  align-items: flex-start !important;
}
.clean-check-list svg {
  margin-top: 1px;
}
.seo-price-grid .service-price-card,
.maintenance-plan-card {
  min-height: 510px;
}
.seo-price-grid .service-price-card .btn,
.maintenance-plan-card .btn {
  align-self: flex-start;
  margin-top: 22px !important;
}

/* SEO hero graphic: smaller top 3, icon above, no clumsy block */
.seo-ai-visual .seo-rank-card {
  left: 54px !important;
  top: 118px !important;
  width: 178px !important;
  height: auto !important;
  min-height: 126px;
  padding: 18px 18px 16px !important;
  align-items: flex-start;
  justify-content: flex-start !important;
  gap: 12px;
}
.seo-rank-card .rank-icon {
  width: 28px;
  height: 28px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  opacity: .95;
}
.seo-rank-card strong {
  font-size: 38px !important;
  line-height: .9 !important;
  display: inline-block;
  letter-spacing: -.05em !important;
}
.seo-rank-card .rank-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.seo-rank-card em {
  font-size: 10px !important;
  letter-spacing: .1em !important;
  max-width: 82px;
}
.seo-ai-visual .ai-chip {
  display: flex;
  align-items: center;
  gap: 12px;
}
.seo-ai-visual .ai-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--red);
  box-shadow: 0 0 18px rgba(var(--red-rgb),.6);
  flex: 0 0 auto;
}

/* AI proof boxes with real icons */
.ai-proof-panel article {
  padding: 26px 28px 26px 88px !important;
  min-height: 138px;
}
.ai-proof-icon {
  position: absolute;
  left: 28px;
  top: 30px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--red-rgb),.18);
  background: rgba(var(--red-rgb),.055);
  color: var(--red);
  z-index: 1;
}
.ai-proof-icon svg,
.ai-proof-bg svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
}
.ai-proof-bg {
  position: absolute;
  right: -16px;
  bottom: -22px;
  width: 120px;
  height: 120px;
  color: var(--red);
  opacity: .075;
  display: grid;
  place-items: center;
  transition: transform .32s ease, opacity .32s ease;
}
.ai-proof-bg svg { width: 100%; height: 100%; }
.ai-proof-panel article:hover .ai-proof-bg { transform: scale(1.08) rotate(-5deg); opacity:.13; }
.ai-proof-panel strong { font-size: 22px !important; }

/* Before / after SEO compare, stats with icons */
.seo-compare-card { min-height: 360px !important; isolation: isolate; }
.compare-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  margin-bottom: 12px;
  color: #fff;
}
.compare-mark svg,
.compare-bg-icon,
.seo-stat-row svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.compare-mark svg { width: 26px; height: 26px; }
.compare-bg-icon {
  position: absolute;
  right: -38px;
  bottom: -44px;
  width: 210px;
  height: 210px;
  color: #fff;
  opacity: .055;
  z-index: -1;
  transition: transform .32s ease, opacity .32s ease;
}
.seo-compare-card.before .compare-bg-icon { color: var(--red); opacity:.075; }
.seo-compare-card:hover .compare-bg-icon { transform: scale(1.06) rotate(-4deg); opacity:.13; }
.seo-compare-card h3 { font-size: clamp(25px, 2.7vw, 38px) !important; }
.seo-compare-card li { align-items: flex-start; }
.seo-compare-card li::before {
  width: 9px !important;
  height: 9px !important;
  margin-top: 8px !important;
  box-shadow: 0 0 18px rgba(var(--red-rgb),.34);
}
.seo-stat-row div {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 118px;
}
.seo-stat-row svg {
  width: 44px;
  height: 44px;
  color: var(--red);
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(var(--red-rgb),.13);
}
.seo-stat-row strong,
.seo-stat-row span { grid-column: 2; }
.seo-stat-row strong { margin-top: -58px; font-size: 26px !important; }
.seo-stat-row span { margin-top: -34px; }

/* Social media page */
.social-hero .detail-screen-card { background: var(--red); }
.social-visual {
  min-height: 470px;
}
.social-calendar-card {
  position: absolute;
  left: 54px;
  top: 106px;
  z-index: 2;
  width: 186px;
  min-height: 166px;
  padding: 20px;
  background: var(--red);
  color: #fff;
  display: grid;
  align-content: space-between;
  box-shadow: 0 30px 70px rgba(var(--red-rgb),.28);
}
.social-calendar-card svg { width: 34px; height: 34px; stroke:#fff; fill:none; stroke-width:1.8; }
.social-calendar-card strong { font-size: 44px; line-height: .9; letter-spacing:-.06em; }
.social-calendar-card em { font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 950; }
.social-mini-list { position:absolute; right:48px; top:132px; display:grid; gap:13px; z-index:2; }
.social-mini-list span { display:flex; align-items:center; gap:10px; min-width:220px; padding:14px 16px; color:#fff; font-weight:900; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); }
.social-mini-list span::before { content:""; width:8px; height:8px; background:var(--red); box-shadow:0 0 18px rgba(var(--red-rgb),.6); }
.social-visual .ai-chip { position:absolute; left:54px; right:54px; bottom:52px; color:#fff; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); padding:18px 22px; font-weight:950; }
.social-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 6vw, 80px); align-items:start; }
.social-stack { display:grid; gap:16px; }
.social-stack-card { position:relative; overflow:hidden; padding:28px; border:1px solid rgba(17,17,17,.1); background:#fff; box-shadow:var(--shadow-soft); display:grid; grid-template-columns: 62px 1fr; gap:20px; min-height:150px; }
.social-stack-card .fact-icon { width:58px; height:58px; margin:0; }
.social-stack-card h3 { margin:0 0 8px; font-size:22px; }
.social-stack-card p { margin:0; font-size:16px; }
.social-stack-card .fact-bg-icon { width:156px; height:156px; right:-46px; bottom:-48px; }
.content-system-section { background:#f7f5f2; }
.content-system-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.content-system-card { position:relative; overflow:hidden; min-height:280px; padding:30px; border:1px solid rgba(17,17,17,.1); background:#fff; box-shadow:var(--shadow-soft); }
.content-system-card.featured { background:linear-gradient(135deg,#171717,#262626); color:#fff; border-color:rgba(255,255,255,.12); }
.content-system-card.featured p { color:rgba(255,255,255,.72); }
.content-system-card span { color:var(--red); font-weight:950; letter-spacing:.14em; font-size:12px; }
.content-system-card h3 { font-size: clamp(25px, 2.7vw, 34px); margin:18px 0 10px; }
.content-system-card svg.bg { position:absolute; right:-34px; bottom:-44px; width:180px; height:180px; stroke:var(--red); fill:none; stroke-width:1.2; opacity:.08; }
.social-process-section .process-card { min-height: 255px; }
.social-pricing-section { background:#fff; }
.social-pricing-grid { display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
.social-contact-section { background:#171717; }

@media (max-width: 980px) {
  .social-grid, .content-system-grid, .social-pricing-grid { grid-template-columns:1fr; }
  .seo-stat-row div { grid-template-columns: 42px 1fr; }
  .seo-stat-row strong { margin-top:-54px; }
  .seo-stat-row span { margin-top:-30px; }
}
@media (max-width: 720px) {
  .seo-ai-visual .seo-rank-card { width: 128px !important; min-height: 100px; left:26px !important; top:96px !important; padding:14px !important; }
  .seo-rank-card strong { font-size: 30px !important; }
  .seo-rank-card em { font-size: 8px !important; }
  .seo-rank-card .rank-icon { width:22px; height:22px; }
  .seo-result-lines { left:170px !important; }
  .ai-proof-panel article { padding:24px 24px 24px 78px !important; }
  .ai-proof-icon { left:24px; top:26px; width:38px; height:38px; }
  .seo-stat-row div { min-height: 108px; padding:20px; }
  .seo-stat-row strong { font-size:22px !important; }
  .social-calendar-card { left:26px; top:96px; width:140px; min-height:122px; padding:14px; }
  .social-calendar-card strong { font-size:31px; }
  .social-calendar-card em { font-size:8px; }
  .social-mini-list { right:24px; top:112px; gap:8px; }
  .social-mini-list span { min-width:142px; padding:10px; font-size:11px; }
  .social-visual .ai-chip { left:24px; right:24px; bottom:28px; font-size:13px; }
  .social-stack-card { grid-template-columns:1fr; }
}

/* V13.1: cleaner SEO stat card text flow */
.seo-stat-row div {
  display: block !important;
  padding-left: 88px !important;
}
.seo-stat-row svg {
  position: absolute;
  left: 24px;
  top: 28px;
}
.seo-stat-row strong,
.seo-stat-row span {
  display: block !important;
  grid-column: auto !important;
  margin-top: 0 !important;
}
.seo-stat-row strong { margin-bottom: 6px !important; }
@media (max-width: 720px) {
  .seo-stat-row div { padding-left: 76px !important; }
  .seo-stat-row svg { left: 20px; top: 24px; }
}

/* V14: visual polish for social, SEO, maintenance and izrada graphics */
/* Izrada sajta: PageSpeed style hero visual */
.speed-visual { min-height: clamp(360px, 35vw, 450px); }
.speed-panel {
  position:absolute;
  left: clamp(44px, 6vw, 82px);
  right: clamp(44px, 6vw, 82px);
  top: 112px;
  bottom: 62px;
  z-index:2;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(17,17,17,.78), rgba(34,34,34,.55));
  padding: clamp(22px, 3vw, 34px);
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: clamp(18px, 3vw, 38px);
  align-items:center;
}
.speed-panel > span {
  grid-column: 1 / -1;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing:.16em;
  font-size: 12px;
  font-weight:950;
}
.speed-ring {
  width: 146px;
  height: 146px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  align-content:center;
  background: conic-gradient(#19c37d 0 82%, rgba(255,255,255,.12) 82% 100%);
  position:relative;
  box-shadow:0 0 42px rgba(25,195,125,.24);
}
.speed-ring::before { content:""; position:absolute; inset:12px; border-radius:50%; background:#151515; border:1px solid rgba(255,255,255,.1); }
.speed-ring strong,
.speed-ring em { position:relative; z-index:1; display:block; text-align:center; }
.speed-ring strong { color:#fff; font-size:48px; line-height:.9; letter-spacing:-.07em; }
.speed-ring em { margin-top:6px; color:#19c37d; font-style:normal; text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:950; }
.speed-scale { display:grid; gap:14px; width:100%; }
.speed-scale i { height:15px; display:block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); position:relative; overflow:hidden; }
.speed-scale i::after { content:""; position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg, var(--red), #ffb000, #19c37d); animation: speedFill 2.6s ease-in-out infinite; }
.speed-scale i:nth-child(1)::after { max-width:92%; animation-delay:.1s; }
.speed-scale i:nth-child(2)::after { max-width:82%; animation-delay:.28s; }
.speed-scale i:nth-child(3)::after { max-width:70%; animation-delay:.46s; }
@keyframes speedFill { 0%,100% { width:38%; } 50% { width:var(--fill, 90%); } }
.speed-scale i:nth-child(1) { --fill:92%; }
.speed-scale i:nth-child(2) { --fill:82%; }
.speed-scale i:nth-child(3) { --fill:70%; }
.speed-checks { position:absolute; z-index:3; right:clamp(32px,5vw,68px); bottom:36px; list-style:none; margin:0; padding:0; display:flex; gap:10px; flex-wrap:wrap; }
.speed-checks li { color:#fff; font-size:12px; font-weight:900; letter-spacing:.02em; padding:10px 12px; background:rgba(25,195,125,.13); border:1px solid rgba(25,195,125,.24); }

/* Odrzavanje: green checks and softer note */
.maintenance-checks.clean-green { right: clamp(42px, 5vw, 72px); top: 34%; gap: 16px; }
.maintenance-checks.clean-green li { font-size:15px; gap:12px; }
.maintenance-checks.clean-green li span {
  background: rgba(25,195,125,.16) !important;
  border-color: rgba(25,195,125,.34) !important;
  color: #31d48a !important;
  box-shadow: 0 12px 28px rgba(25,195,125,.14) !important;
  border-radius: 0;
}
.maintenance-note {
  position:absolute;
  right: clamp(38px, 5vw, 72px);
  bottom: clamp(28px, 4vw, 54px);
  width: min(360px, 46%);
  z-index:2;
  margin:0;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height:1.55;
  padding-left:16px;
  border-left:2px solid rgba(25,195,125,.55);
}
.maintenance-visual-clean:hover .maintenance-checks.clean-green li span { transform: scale(1.04); }

/* SEO hero: cleaner Top 3 and rank chart */
.seo-graph-visual .seo-rank-card {
  left: 56px !important;
  top: 122px !important;
  width: 160px !important;
  min-height: 132px !important;
  padding: 18px !important;
  display:grid !important;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  align-content:center;
  gap:8px 12px;
}
.seo-graph-visual .seo-rank-card .rank-icon { grid-row: 1 / span 2; align-self:start; }
.seo-graph-visual .seo-rank-card strong { grid-column:2; font-size:40px !important; white-space:nowrap; }
.seo-graph-visual .seo-rank-card em { grid-column:2; display:block; max-width:none; font-size:10px !important; }
.rank-bars { position:absolute; z-index:2; left:252px; right:52px; top:116px; margin:0; padding:0; list-style:none; display:grid; gap:13px; }
.rank-bars li { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:12px; }
.rank-bars span { color:rgba(255,255,255,.68); font-weight:950; font-size:12px; }
.rank-bars i { height:15px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.1); position:relative; overflow:hidden; }
.rank-bars i::after { content:""; position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg, var(--red), rgba(255,255,255,.28)); }
.rank-bars li:nth-child(1) i::after { width:94%; }
.rank-bars li:nth-child(2) i::after { width:78%; }
.rank-bars li:nth-child(3) i::after { width:62%; }
.rank-bars li:nth-child(4) i::after { width:38%; }
.seo-graph-visual:hover .rank-bars i::after { filter:brightness(1.18); }
.seo-graph-visual .ai-chip { bottom:52px; }

/* SEO cards and stats: consistent icons and list spacing */
.seo-compare-card ul { gap:16px !important; }
.seo-compare-card li { font-size:15px; line-height:1.35; }
.seo-compare-card h3 { max-width: 500px; }
.seo-stat-row div { transition:transform .22s ease, border-color .22s ease, background .22s ease; }
.seo-stat-row div:hover { transform: translateY(-4px); border-color: rgba(var(--red-rgb),.32); background: rgba(255,255,255,.085); }

/* Social media hero: phone, no heavy boxes */
.social-phone-visual { min-height:470px; }
.phone-frame {
  position:absolute;
  left: clamp(54px, 6vw, 86px);
  top: 100px;
  bottom: 70px;
  width: 210px;
  z-index:2;
  border:1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow:0 28px 90px rgba(0,0,0,.28), 0 0 70px rgba(var(--red-rgb),.12);
  padding:22px;
}
.phone-notch { width:60px; height:6px; border-radius:999px; background:rgba(255,255,255,.26); margin:0 auto 22px; }
.phone-post { height:116px; background:linear-gradient(135deg, var(--red), var(--red-dark)); margin-bottom:16px; box-shadow:0 16px 46px rgba(var(--red-rgb),.28); }
.phone-line { height:10px; width:70%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.1); margin-bottom:10px; }
.phone-line.long { width:100%; }
.phone-actions { display:flex; gap:9px; margin-top:18px; }
.phone-actions i { width:28px; height:28px; border-radius:999px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.12); }
.social-calendar-card.compact { left: clamp(54px, 6vw, 86px); top:auto; bottom:54px; width:172px; min-height:72px; grid-template-columns:32px 1fr; grid-template-rows:auto auto; gap:2px 12px; align-items:center; padding:14px 16px; }
.social-calendar-card.compact svg { grid-row:1/span 2; width:28px; height:28px; }
.social-calendar-card.compact strong { font-size:30px; }
.social-calendar-card.compact em { font-size:8px; }
.social-check-list { position:absolute; z-index:2; right: clamp(44px, 5vw, 70px); top: 136px; list-style:none; padding:0; margin:0; display:grid; gap:18px; min-width:250px; }
.social-check-list li { display:flex; align-items:center; gap:12px; color:#fff; font-weight:950; letter-spacing:-.025em; }
.social-check-list svg { width:24px; height:24px; padding:5px; stroke:#fff; fill:none; stroke-width:2.5; background:rgba(var(--red-rgb),.24); border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 30px rgba(var(--red-rgb),.18); }
.social-phone-visual .ai-chip { left:auto; right:clamp(44px,5vw,70px); bottom:60px; max-width:330px; }
.social-phone-visual:hover .phone-frame { transform: translateY(-4px); }
.phone-frame { transition: transform .28s ease; }

/* Social strategy cards: no accidental black svg blocks */
.social-stack-clean .social-stack-card { min-height:auto; padding:26px; align-items:center; }
.social-stack-clean .social-stack-card::after { content:""; position:absolute; right:-34px; bottom:-46px; width:150px; height:150px; background:radial-gradient(circle, rgba(var(--red-rgb),.10), transparent 66%); }
.social-stack-clean .fact-icon { color:var(--red); background:rgba(var(--red-rgb),.055); border-color:rgba(var(--red-rgb),.18); }
.social-stack-clean .fact-icon svg { stroke:currentColor; fill:none; stroke-width:1.9; }
.social-stack-clean .social-stack-card:hover { transform:translateY(-4px); border-color:rgba(var(--red-rgb),.22); }

/* Social process: readable cards on dark background */
.social-process-section .process-card {
  background: rgba(255,255,255,.97) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #111 !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.2);
}
.social-process-section .process-card h3 { color:#111 !important; }
.social-process-section .process-card p { color:#666 !important; opacity:1 !important; }
.social-process-section .process-number { color:var(--red) !important; }
.social-process-section .process-icon { background:rgba(var(--red-rgb),.06) !important; border-color:rgba(var(--red-rgb),.18) !important; color:var(--red) !important; }
.social-process-section .process-icon svg { stroke:currentColor; fill:none; stroke-width:1.9; }
.social-process-section .process-bg-icon { color:var(--red) !important; opacity:.055 !important; }
.social-process-section .process-card:hover .process-bg-icon { opacity:.11 !important; transform: scale(1.08) rotate(-5deg); }

@media (max-width: 980px) {
  .speed-panel { grid-template-columns:1fr; top:92px; bottom:82px; }
  .speed-ring { width:128px; height:128px; }
  .rank-bars { left:210px; right:28px; }
  .social-check-list { right:28px; min-width:210px; }
}
@media (max-width: 720px) {
  .speed-panel { left:24px; right:24px; top:82px; bottom:74px; padding:20px; }
  .speed-ring { width:112px; height:112px; }
  .speed-ring strong { font-size:38px; }
  .speed-checks { left:24px; right:24px; bottom:22px; }
  .rank-bars { left:168px; top:112px; right:20px; gap:9px; }
  .rank-bars li { grid-template-columns:24px 1fr; gap:8px; }
  .seo-graph-visual .seo-rank-card { width:126px !important; grid-template-columns:22px 1fr; }
  .seo-graph-visual .seo-rank-card strong { font-size:28px !important; }
  .phone-frame { left:24px; top:88px; width:142px; bottom:92px; padding:16px; border-radius:22px; }
  .phone-post { height:76px; }
  .social-calendar-card.compact { left:24px; bottom:34px; width:142px; }
  .social-check-list { right:20px; top:116px; gap:12px; min-width:160px; }
  .social-check-list li { font-size:12px; }
  .social-check-list svg { width:21px; height:21px; padding:4px; }
  .social-phone-visual .ai-chip { left:20px; right:20px; bottom:18px; max-width:none; }
  .maintenance-note { left:24px; right:24px; bottom:26px; width:auto; }
}

/* V15: total premium polish for SEO, izrada, odrzavanje, social and home hero */
/* Home hero project thumbnails inside dashboard */
.hero-project-thumbs {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  height: 92px;
  overflow: hidden;
  z-index: 3;
}
.hero-project-thumbs span {
  position: absolute;
  inset: 0;
  padding: 18px 20px;
  display: grid;
  align-content: end;
  gap: 6px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, transparent 0 28%, rgba(0,0,0,.68) 100%),
    radial-gradient(circle at 18% 28%, rgba(var(--red-rgb),.46), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.025));
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateX(22px);
  animation: heroProjectSlide 12s infinite ease-in-out;
}
.hero-project-thumbs .is-two { animation-delay: 4s; background:
  linear-gradient(180deg, transparent 0 28%, rgba(0,0,0,.7) 100%),
  radial-gradient(circle at 78% 22%, rgba(56,152,236,.26), transparent 28%),
  linear-gradient(135deg, rgba(248,248,248,.12), rgba(255,255,255,.035)); }
.hero-project-thumbs .is-three { animation-delay: 8s; background:
  linear-gradient(180deg, transparent 0 28%, rgba(0,0,0,.7) 100%),
  radial-gradient(circle at 42% 34%, rgba(var(--red-rgb),.66), transparent 24%),
  linear-gradient(135deg, #2a2929, #121212); }
.hero-project-thumbs b { font-size: 20px; line-height: .98; letter-spacing: -.045em; }
.hero-project-thumbs em { font-style: normal; color: rgba(255,255,255,.68); font-size: 12px; font-weight: 850; }
@keyframes heroProjectSlide {
  0%, 25% { opacity: 1; transform: translateX(0); }
  33%, 100% { opacity: 0; transform: translateX(-22px); }
}

/* Izrada sajta PageSpeed visual: slower and centered */
.speed-visual { min-height: clamp(390px, 36vw, 470px) !important; }
.speed-panel {
  left: clamp(36px, 5vw, 70px) !important;
  right: clamp(36px, 5vw, 70px) !important;
  top: 96px !important;
  bottom: 76px !important;
  grid-template-columns: 150px 1fr !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 24% 60%, rgba(25,195,125,.14), transparent 28%),
    linear-gradient(135deg, rgba(17,17,17,.86), rgba(34,34,34,.62)) !important;
}
.speed-panel > span { grid-column: 1 / -1; }
.speed-scale i::after { animation-duration: 5.8s !important; animation-timing-function: cubic-bezier(.45,0,.18,1) !important; }
.speed-checks {
  left: 50% !important;
  right: auto !important;
  bottom: 28px !important;
  transform: translateX(-50%);
  justify-content: center;
  width: auto;
  min-width: min(88%, 420px);
}
.speed-checks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d9fff0 !important;
  background: rgba(25,195,125,.12) !important;
  border-color: rgba(25,195,125,.36) !important;
}
.speed-checks li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #19c37d;
  box-shadow: 0 0 18px rgba(25,195,125,.58);
}
.system-score { display: grid; place-items: center; align-content: center; gap: 3px; }
.system-score::before {
  content:"";
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Odrzavanje hero: cleaner, premium and not clunky */
.maintenance-visual-clean { min-height: clamp(400px, 36vw, 470px) !important; }
.maintenance-gauge {
  left: clamp(44px, 6vw, 82px) !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 178px !important;
  height: 178px !important;
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
  box-shadow: 0 34px 86px rgba(var(--red-rgb),.36) !important;
}
.maintenance-checks.clean-green {
  right: clamp(42px, 5vw, 72px) !important;
  top: 42% !important;
  transform: translateY(-50%);
  gap: 18px !important;
  min-width: 240px;
}
.maintenance-checks.clean-green li { font-size: 16px !important; }
.maintenance-checks.clean-green li span {
  border-radius: 0 !important;
  background: rgba(25,195,125,.14) !important;
  border: 1px solid rgba(25,195,125,.36) !important;
  color: #36dd97 !important;
}
.maintenance-note {
  right: clamp(42px, 5vw, 72px) !important;
  bottom: clamp(40px, 5vw, 68px) !important;
  width: min(390px, 48%) !important;
  padding: 18px 18px 18px 22px !important;
  border-left: 2px solid #36dd97 !important;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.76) !important;
  box-shadow: 0 20px 58px rgba(0,0,0,.18);
}
.maintenance-visual-clean:hover .maintenance-gauge { transform: translateY(-50%) scale(1.02); transition: transform .28s ease; }

/* Social hero: phone graphic + clean checklist, no boxed bullets */
.social-phone-visual { min-height: clamp(420px, 37vw, 500px) !important; }
.phone-frame {
  width: 220px !important;
  left: clamp(42px, 6vw, 78px) !important;
  top: 92px !important;
  bottom: 76px !important;
  border-radius: 30px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    radial-gradient(circle at 50% 22%, rgba(var(--red-rgb),.28), transparent 32%) !important;
}
.phone-frame::before {
  content:"";
  position:absolute;
  right:18px;
  bottom:18px;
  width:44px;
  height:44px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M9 18h6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M9 18h6'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .42;
}
.social-calendar-card.compact {
  left: clamp(72px, 8vw, 112px) !important;
  bottom: 52px !important;
  width: 180px !important;
  min-height: 78px !important;
  box-shadow: 0 28px 75px rgba(var(--red-rgb),.36) !important;
}
.social-check-list {
  right: clamp(42px, 5vw, 72px) !important;
  top: 50% !important;
  transform: translateY(-50%);
  gap: 20px !important;
  min-width: 255px !important;
}
.social-check-list li {
  padding: 0 0 0 2px;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 16px;
}
.social-check-list svg {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 28px !important;
  height: 28px !important;
  stroke: var(--red) !important;
}
.social-phone-visual .ai-chip {
  left: clamp(42px, 5vw, 72px) !important;
  right: clamp(42px, 5vw, 72px) !important;
  bottom: 28px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-phone-visual .ai-chip::before { content:""; width:8px; height:8px; background:var(--red); box-shadow:0 0 18px rgba(var(--red-rgb),.6); }
.social-stack-clean .social-stack-card { min-height: 132px !important; }

/* SEO hero graph: icon above Top 3, target below, clean rank bars */
.seo-graph-visual .seo-rank-card,
.seo-ai-visual .seo-rank-card {
  left: clamp(48px, 6vw, 82px) !important;
  top: 118px !important;
  width: 160px !important;
  min-height: 160px !important;
  padding: 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, var(--red), var(--red-dark)) !important;
}
.seo-graph-visual .seo-rank-card .rank-icon,
.seo-ai-visual .seo-rank-card .rank-icon {
  width: 26px !important;
  height: 26px !important;
  margin-bottom: 6px;
  opacity: .95;
}
.seo-graph-visual .seo-rank-card strong,
.seo-ai-visual .seo-rank-card strong {
  font-size: 42px !important;
  line-height: .88 !important;
  grid-column: auto !important;
}
.seo-graph-visual .seo-rank-card em,
.seo-ai-visual .seo-rank-card em {
  font-size: 10px !important;
  letter-spacing: .13em !important;
  max-width: none !important;
  grid-column: auto !important;
}
.rank-bars {
  left: clamp(245px, 32vw, 315px) !important;
  right: clamp(40px, 5vw, 64px) !important;
  top: 132px !important;
  gap: 12px !important;
}
.rank-bars li { grid-template-columns: 24px 1fr !important; }
.rank-bars span {
  font-size: 14px !important;
  color: rgba(255,255,255,.78) !important;
}
.rank-bars i { height: 14px !important; }
.seo-graph-visual .ai-chip {
  left: clamp(54px, 6vw, 82px) !important;
  right: clamp(54px, 6vw, 82px) !important;
  bottom: 46px !important;
}

/* SEO process cards: icon + title middle, description underneath */
.seo-process-grid .process-card,
.social-process-section .process-card {
  padding: 28px !important;
  min-height: 230px !important;
}
.seo-process-grid .process-card::before,
.social-process-section .process-card::before { display: none !important; }
.seo-process-grid .process-number,
.social-process-section .process-number {
  display:block;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .08em;
}
.seo-process-grid .process-row,
.social-process-section .process-row {
  display:grid !important;
  grid-template-columns: 58px 1fr !important;
  gap: 16px !important;
  align-items:center !important;
}
.seo-process-grid .process-row > div,
.social-process-section .process-row > div { display: contents; }
.seo-process-grid .process-icon,
.social-process-section .process-icon { grid-column: 1; grid-row: 1; }
.seo-process-grid h3,
.social-process-section h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
}
.seo-process-grid p,
.social-process-section p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 16px 0 0 !important;
  max-width: none !important;
}
.seo-process-grid .process-bg-icon,
.social-process-section .process-bg-icon { opacity: .045 !important; }
.seo-process-grid .process-card:hover .process-bg-icon,
.social-process-section .process-card:hover .process-bg-icon { opacity:.11 !important; transform: scale(1.08) rotate(-5deg); }

/* City chips: real map-pin icon instead of glyph */
.city-chip-grid span { position: relative; display:flex; align-items:center; gap:10px; }
.city-chip-grid span::before {
  content:"" !important;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0 !important;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* FAQ mini graphic: question in the middle, lines around it */
.seo-faq-section .faq-visual-mini,
.premium-faq-section .faq-visual-mini {
  min-height: 190px;
  display:block;
  overflow:hidden;
}
.seo-faq-section .faq-visual-mini::before,
.premium-faq-section .faq-visual-mini::before {
  content:"";
  position:absolute;
  left:32px;
  right:32px;
  top:50%;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.09), rgba(var(--red-rgb),.34), rgba(255,255,255,.08));
}
.seo-faq-section .faq-visual-mini span,
.premium-faq-section .faq-visual-mini span {
  left:50% !important;
  top:50% !important;
  transform: translate(-50%, -50%);
  width:72px !important;
  height:72px !important;
  z-index:2;
  box-shadow: 0 24px 80px rgba(var(--red-rgb),.32);
}
.seo-faq-section .faq-visual-mini i,
.premium-faq-section .faq-visual-mini i {
  left:auto !important;
  height:10px !important;
  width:22% !important;
}
.seo-faq-section .faq-visual-mini i:nth-of-type(1),
.premium-faq-section .faq-visual-mini i:nth-of-type(1){ right: calc(50% + 62px); top:62px; }
.seo-faq-section .faq-visual-mini i:nth-of-type(2),
.premium-faq-section .faq-visual-mini i:nth-of-type(2){ left: calc(50% + 62px) !important; top:88px; width:34% !important; }
.seo-faq-section .faq-visual-mini i:nth-of-type(3),
.premium-faq-section .faq-visual-mini i:nth-of-type(3){ right: calc(50% + 62px); top:116px; width:28% !important; }

/* CTA strip refinement */
.page-cta {
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 70%, var(--red) 100%) !important;
  box-shadow: 0 34px 90px rgba(var(--red-rgb),.22);
}
.page-cta::after {
  content:"";
  position:absolute;
  right:-100px;
  bottom:-120px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.2), transparent 60%);
}
.page-cta > * { position: relative; z-index: 1; }
.page-cta .btn-white { box-shadow: 0 22px 50px rgba(0,0,0,.16); }

@media (max-width: 980px) {
  .hero-project-thumbs { height: 82px; }
  .speed-panel { grid-template-columns: 1fr !important; top: 84px !important; bottom: 88px !important; }
  .speed-ring { margin: 0 auto; }
  .maintenance-gauge { left:28px !important; width:142px !important; height:142px !important; }
  .maintenance-checks.clean-green { right:28px !important; min-width:190px; }
  .rank-bars { left: 226px !important; right: 28px !important; }
  .social-check-list { right:28px !important; }
}
@media (max-width: 720px) {
  .hero-project-thumbs { left:14px; right:14px; bottom:14px; height:72px; }
  .hero-project-thumbs b { font-size:16px; }
  .hero-project-thumbs em { font-size:10px; }
  .speed-panel { left:20px !important; right:20px !important; top:74px !important; bottom:92px !important; padding:18px !important; }
  .speed-checks { bottom:18px !important; min-width: calc(100% - 40px); }
  .speed-checks li { padding:8px 9px; font-size:10px; }
  .maintenance-gauge { left:22px !important; width:118px !important; height:118px !important; }
  .maintenance-gauge strong { font-size:34px !important; }
  .maintenance-checks.clean-green { right:18px !important; top:38% !important; min-width:156px; gap:12px !important; }
  .maintenance-checks.clean-green li { font-size:12px !important; }
  .maintenance-note { left:22px !important; right:22px !important; bottom:18px !important; width:auto !important; font-size:12px !important; }
  .social-phone-visual { min-height: 430px !important; }
  .phone-frame { left:24px !important; width:158px !important; top:82px !important; bottom:100px !important; padding:16px !important; border-radius:24px !important; }
  .social-calendar-card.compact { left:36px !important; bottom:36px !important; width:138px !important; }
  .social-check-list { right:18px !important; min-width:152px !important; gap:12px !important; }
  .social-check-list li { font-size:12px !important; gap:8px; }
  .social-check-list svg { width:21px !important; height:21px !important; }
  .seo-graph-visual .seo-rank-card, .seo-ai-visual .seo-rank-card { left:24px !important; top:90px !important; width:114px !important; min-height:126px !important; }
  .seo-graph-visual .seo-rank-card strong, .seo-ai-visual .seo-rank-card strong { font-size:30px !important; }
  .rank-bars { left: 154px !important; right: 20px !important; top:104px !important; gap:9px !important; }
  .rank-bars span { font-size:12px !important; }
  .rank-bars i { height:11px !important; }
  .seo-graph-visual .ai-chip { left:22px !important; right:22px !important; bottom:22px !important; font-size:12px !important; }
  .seo-process-grid .process-card, .social-process-section .process-card { min-height: 200px !important; }
  .seo-process-grid .process-row, .social-process-section .process-row { grid-template-columns: 48px 1fr !important; }
}

/* V16: hard visual fixes - no overlaps, clean premium graphics */
/* Maintenance hero - keep every element in its own zone */
.maintenance-visual-clean {
  min-height: clamp(430px, 37vw, 500px) !important;
  overflow: hidden !important;
}
.maintenance-visual-clean .maintenance-gauge {
  left: clamp(44px, 7vw, 86px) !important;
  top: 50% !important;
  width: 168px !important;
  height: 168px !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}
.maintenance-visual-clean .maintenance-gauge strong { font-size: 48px !important; }
.maintenance-visual-clean .maintenance-gauge em { font-size: 10px !important; letter-spacing: .14em !important; }
.maintenance-visual-clean .maintenance-checks.clean-green {
  left: 53% !important;
  right: auto !important;
  top: 33% !important;
  transform: none !important;
  min-width: 230px !important;
  gap: 15px !important;
  z-index: 4 !important;
}
.maintenance-visual-clean .maintenance-checks.clean-green li {
  font-size: 15px !important;
  line-height: 1.2 !important;
  gap: 12px !important;
}
.maintenance-visual-clean .maintenance-checks.clean-green li span {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
}
.maintenance-visual-clean .maintenance-note {
  left: 53% !important;
  right: clamp(28px, 5vw, 64px) !important;
  top: 61% !important;
  bottom: auto !important;
  width: auto !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 16px 0 0 18px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-left: 2px solid #36dd97 !important;
  color: rgba(255,255,255,.74) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.maintenance-visual-clean:hover .maintenance-gauge { transform: translateY(-50%) scale(1.02) !important; }

/* SEO hero - make it feel like search results, not random bars */
.seo-graph-visual {
  min-height: clamp(430px, 37vw, 500px) !important;
}
.seo-graph-visual::after {
  content: "";
  position: absolute;
  left: clamp(40px, 5vw, 62px);
  right: clamp(40px, 5vw, 62px);
  top: 94px;
  bottom: 44px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  z-index: 1;
  pointer-events: none;
}
.seo-graph-visual .seo-rank-card,
.seo-ai-visual.seo-graph-visual .seo-rank-card {
  left: clamp(62px, 7vw, 92px) !important;
  top: 148px !important;
  width: 150px !important;
  min-height: 150px !important;
  padding: 20px !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 8px !important;
}
.seo-graph-visual .seo-rank-card .rank-icon { width: 28px !important; height: 28px !important; margin: 0 0 4px !important; }
.seo-graph-visual .seo-rank-card strong { font-size: 42px !important; line-height: .88 !important; }
.seo-graph-visual .seo-rank-card em { font-size: 10px !important; letter-spacing: .12em !important; }
.rank-search-results,
.seo-graph-visual .rank-bars.rank-search-results {
  position: absolute !important;
  left: clamp(252px, 38%, 320px) !important;
  right: clamp(50px, 6vw, 76px) !important;
  top: 128px !important;
  z-index: 3 !important;
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.rank-search-results li {
  display: grid !important;
  grid-template-columns: 30px 1fr !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
}
.rank-search-results span {
  color: rgba(255,255,255,.78) !important;
  font-weight: 950 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
}
.rank-search-results div { min-width: 0; display: grid; gap: 4px; }
.rank-search-results strong {
  display: block;
  color: #fff;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: none;
}
.rank-search-results i {
  display: block !important;
  height: 7px !important;
  width: 100% !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.08) !important;
  position: relative !important;
  overflow: hidden !important;
}
.rank-search-results i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--red), rgba(255,255,255,.28));
}
.rank-search-results li:nth-child(1) i::after { width: 96%; }
.rank-search-results li:nth-child(2) i::after { width: 86%; }
.rank-search-results li:nth-child(3) i::after { width: 74%; }
.rank-search-results li:nth-child(4) i::after { width: 62%; }
.rank-search-results li:nth-child(5) i::after { width: 50%; }
.rank-search-results small {
  color: rgba(255,255,255,.48);
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seo-graph-visual .ai-chip {
  left: clamp(62px, 7vw, 92px) !important;
  right: clamp(50px, 6vw, 76px) !important;
  bottom: 62px !important;
  z-index: 3 !important;
  padding: 14px 18px !important;
  max-width: none !important;
}

/* Social hero - no overlaps, phone + plain icon list */
.social-phone-visual {
  min-height: clamp(440px, 38vw, 520px) !important;
}
.social-phone-visual .phone-frame {
  left: clamp(58px, 8vw, 96px) !important;
  top: 108px !important;
  bottom: 84px !important;
  width: 205px !important;
  z-index: 2 !important;
}
.social-phone-visual .social-calendar-card.compact {
  left: clamp(70px, 9vw, 114px) !important;
  bottom: 62px !important;
  width: 160px !important;
  min-height: 76px !important;
  z-index: 4 !important;
}
.social-phone-visual .social-check-list {
  left: 53% !important;
  right: clamp(36px, 5vw, 64px) !important;
  top: 35% !important;
  transform: none !important;
  min-width: 0 !important;
  z-index: 3 !important;
  gap: 18px !important;
}
.social-phone-visual .social-check-list li {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  white-space: nowrap;
}
.social-phone-visual .social-check-list svg {
  flex: 0 0 25px !important;
  width: 25px !important;
  height: 25px !important;
  stroke: var(--red) !important;
  background: transparent !important;
  border: 0 !important;
}
.social-phone-visual .ai-chip {
  left: 53% !important;
  right: clamp(36px, 5vw, 64px) !important;
  bottom: 58px !important;
  padding: 0 0 0 18px !important;
  border: 0 !important;
  border-left: 2px solid var(--red) !important;
  background: transparent !important;
  color: rgba(255,255,255,.74) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.social-phone-visual .ai-chip::before { display: none !important; }

/* Izrada - make site system graphic look intentional and filled */
.site-system-visual {
  min-height: clamp(340px, 32vw, 430px) !important;
  background:
    radial-gradient(circle at 20% 24%, rgba(var(--red-rgb),.20), transparent 26%),
    radial-gradient(circle at 78% 32%, rgba(255,255,255,.10), transparent 18%),
    linear-gradient(135deg, #171717, #242424 58%, #111) !important;
}
.site-system-visual::before { inset: 26px !important; }
.site-system-visual .visual-browser-top { top: 36px !important; left: 42px !important; right: 42px !important; }
.site-system-visual .system-score {
  left: 64px !important;
  bottom: 92px !important;
  z-index: 3 !important;
  align-items: start !important;
}
.site-system-visual .system-score strong { font-size: clamp(54px, 5vw, 74px) !important; }
.site-system-visual .system-lines {
  right: 60px !important;
  top: 136px !important;
  width: 45% !important;
  gap: 12px !important;
  z-index: 3 !important;
}
.site-system-visual .system-lines i { height: 11px !important; }
.site-system-visual .system-lines i:nth-child(1) { width: 92%; }
.site-system-visual .system-lines i:nth-child(2) { width: 100%; background: rgba(var(--red-rgb),.45) !important; }
.site-system-visual .system-lines i:nth-child(3) { width: 72%; }
.site-system-visual .system-lines i:nth-child(4) { width: 88%; }
.site-system-visual .system-icon {
  right: 76px !important;
  bottom: 70px !important;
  width: 70px !important;
  height: 70px !important;
  z-index: 4 !important;
}
.site-system-visual .system-icon::after {
  content: "SEO spremno";
  position: absolute;
  right: 82px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-system-visual:hover .system-icon { transform: translateY(-4px); }
.site-system-visual .system-icon { transition: transform .24s ease; }

@media (max-width: 980px) {
  .maintenance-visual-clean .maintenance-checks.clean-green,
  .maintenance-visual-clean .maintenance-note,
  .social-phone-visual .social-check-list,
  .social-phone-visual .ai-chip { left: 49% !important; }
  .rank-search-results { left: 238px !important; right: 34px !important; }
  .rank-search-results small { display: none; }
}
@media (max-width: 720px) {
  .maintenance-visual-clean .maintenance-gauge { left: 22px !important; width: 120px !important; height: 120px !important; }
  .maintenance-visual-clean .maintenance-checks.clean-green { left: 162px !important; right: 18px !important; top: 32% !important; gap: 12px !important; }
  .maintenance-visual-clean .maintenance-checks.clean-green li { font-size: 12px !important; }
  .maintenance-visual-clean .maintenance-note { left: 22px !important; right: 22px !important; top: auto !important; bottom: 22px !important; font-size: 12px !important; }
  .seo-graph-visual .seo-rank-card, .seo-ai-visual.seo-graph-visual .seo-rank-card { left: 24px !important; top: 112px !important; width: 112px !important; min-height: 112px !important; padding: 14px !important; }
  .seo-graph-visual .seo-rank-card strong { font-size: 30px !important; }
  .rank-search-results { left: 154px !important; right: 18px !important; top: 104px !important; gap: 6px !important; }
  .rank-search-results li { grid-template-columns: 22px 1fr !important; gap: 8px !important; padding: 5px 0 !important; }
  .rank-search-results strong { font-size: 11px !important; }
  .seo-graph-visual .ai-chip { left: 22px !important; right: 22px !important; bottom: 22px !important; font-size: 12px !important; }
  .social-phone-visual .phone-frame { left: 22px !important; width: 144px !important; top: 86px !important; bottom: 106px !important; }
  .social-phone-visual .social-calendar-card.compact { left: 32px !important; width: 126px !important; bottom: 42px !important; }
  .social-phone-visual .social-check-list { left: 184px !important; right: 16px !important; top: 31% !important; gap: 12px !important; }
  .social-phone-visual .social-check-list li { font-size: 11px !important; gap: 8px !important; white-space: normal; }
  .social-phone-visual .social-check-list svg { width: 20px !important; height: 20px !important; flex-basis: 20px !important; }
  .social-phone-visual .ai-chip { left: 184px !important; right: 16px !important; bottom: 28px !important; font-size: 11px !important; line-height: 1.4 !important; }
  .site-system-visual .system-score { left: 28px !important; bottom: 66px !important; }
  .site-system-visual .system-score strong { font-size: 44px !important; }
  .site-system-visual .system-lines { right: 24px !important; top: 110px !important; width: 50% !important; }
  .site-system-visual .system-icon { right: 28px !important; bottom: 56px !important; width: 56px !important; height: 56px !important; }
  .site-system-visual .system-icon::after { display: none; }
}

/* V17: premium work and pricing pages */
.work-hero .detail-hero-copy h1,
.pricing-hero .detail-hero-copy h1 { font-size: clamp(44px, 5vw, 72px); line-height:.94; letter-spacing:-.07em; }
.work-hero-visual,
.pricing-hero-visual {
  position: relative;
  min-height: 470px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 20% 24%, rgba(var(--red-rgb),.34), transparent 28%),
    radial-gradient(circle at 77% 26%, rgba(255,255,255,.12), transparent 20%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: var(--shadow-strong);
  overflow: hidden;
}
.work-hero-visual::before,
.pricing-hero-visual::before { content:""; position:absolute; inset:0; background:linear-gradient(112deg, transparent 0 48%, rgba(255,255,255,.07) 48% 52%, transparent 52%); }
.browser-top { position:absolute; top:32px; left:34px; right:34px; height:44px; border:1px solid rgba(255,255,255,.15); background:rgba(17,17,17,.54); display:flex; gap:10px; align-items:center; padding-left:18px; }
.browser-top span { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.48); }
.work-mosaic { position:absolute; left:58px; right:58px; top:120px; bottom:78px; display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:1fr 1fr; gap:14px; }
.work-mosaic span { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055); display:flex; align-items:flex-end; padding:20px; color:#fff; font-weight:950; letter-spacing:.12em; text-transform:uppercase; font-size:12px; position:relative; overflow:hidden; }
.work-mosaic span::after { content:""; position:absolute; inset:auto -20% -40% -20%; height:70%; background:radial-gradient(closest-side, rgba(var(--red-rgb),.35), transparent); }
.work-mosaic span:nth-child(1) { grid-row: span 2; background:linear-gradient(135deg, rgba(var(--red-rgb),.38), rgba(255,255,255,.045)); }
.work-hero-card { position:absolute; z-index:3; padding:20px 22px; background:var(--red); color:#fff; box-shadow:0 24px 60px rgba(var(--red-rgb),.28); }
.work-hero-card strong { display:block; font-size:44px; line-height:.88; letter-spacing:-.06em; }
.work-hero-card em { display:block; margin-top:8px; font-style:normal; text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:950; }
.work-hero-card.main { left:78px; bottom:92px; }
.work-hero-card.side { right:72px; top:128px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); box-shadow:none; }
.work-proof-strip { padding: 46px 0; background:#fff; }
.work-proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.work-proof-item { border:1px solid rgba(17,17,17,.09); background:linear-gradient(135deg,#fff,#f8f8f8); padding:24px; min-height:190px; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.work-proof-item:hover { transform:translateY(-6px); border-color:rgba(var(--red-rgb),.22); box-shadow:var(--shadow-soft); }
.work-proof-item span,
.work-showcase-icon,
.pricing-pro-icon,
.build-price-card > span,
.pricing-principles span,
.media-price-options span { width:54px; height:54px; display:grid; place-items:center; color:var(--red); background:rgba(var(--red-rgb),.06); border:1px solid rgba(var(--red-rgb),.17); margin-bottom:20px; }
.work-proof-item svg,
.work-showcase-icon svg,
.pricing-pro-icon svg,
.build-price-card > span svg,
.pricing-principles svg,
.media-price-options svg,
.work-cta-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.work-proof-item strong { display:block; margin-bottom:8px; font-size:22px; letter-spacing:-.035em; }
.work-proof-item p { margin:0; font-size:15px; color:#666; }
.split-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px, 480px); gap:40px; align-items:end; text-align:left; }
.split-head p:last-child { margin:0; color:#666; font-size:16px; }
.work-showcase-section { background:linear-gradient(180deg,#f8f8f8,#fff); overflow:hidden; }
.work-showcase-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.work-showcase-card { min-height:330px; padding:28px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; border:1px solid rgba(17,17,17,.09); box-shadow:var(--shadow-soft); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; isolation:isolate; }
.work-showcase-card::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg, transparent 0 35%, rgba(0,0,0,.6)); }
.work-showcase-card::after { content:""; position:absolute; right:-60px; bottom:-60px; width:210px; height:210px; z-index:-1; opacity:.18; background:currentColor; mask:var(--work-mask, none); }
.work-showcase-card:hover { transform:translateY(-8px); box-shadow:var(--shadow); border-color:rgba(var(--red-rgb),.26); }
.work-showcase-card .work-showcase-icon { position:absolute; top:26px; right:26px; margin:0; color:rgba(255,255,255,.82); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
.work-showcase-card.tone-light .work-showcase-icon { color:var(--red); background:rgba(var(--red-rgb),.06); border-color:rgba(var(--red-rgb),.14); }
.work-showcase-kicker { color:rgba(255,255,255,.76); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:950; }
.work-showcase-card.tone-light .work-showcase-kicker { color:var(--red); }
.work-showcase-card strong { color:#fff; font-size:clamp(28px,3vw,42px); line-height:.96; letter-spacing:-.06em; margin:10px 0 12px; }
.work-showcase-card.tone-light strong { color:var(--ink); }
.work-showcase-card p { color:rgba(255,255,255,.72); max-width:320px; margin:0; font-size:15px; }
.work-showcase-card.tone-light p { color:#666; }
.work-showcase-card em { position:absolute; top:26px; left:26px; width:46px; height:46px; display:grid; place-items:center; background:var(--red); color:#fff; font-style:normal; opacity:0; transform:translateY(8px); transition:.22s ease; }
.work-showcase-card em svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
.work-showcase-card:hover em { opacity:1; transform:translateY(0); }
.work-showcase-card.tone-dark { background:radial-gradient(circle at 18% 18%, rgba(var(--red-rgb),.32), transparent 28%), linear-gradient(135deg,#151515,#2a2929); }
.work-showcase-card.tone-red { background:linear-gradient(135deg,var(--red),var(--red-dark)); }
.work-showcase-card.tone-light { background:linear-gradient(135deg,#fff,#f6f6f6); }
.work-method { background:radial-gradient(circle at 8% 20%, rgba(var(--red-rgb),.22), transparent 28%), linear-gradient(135deg,#161616,#232323); }
.work-method-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.work-method-grid h2 { color:#fff; font-size:clamp(34px,4vw,58px); line-height:1; letter-spacing:-.06em; }
.work-method-grid p { color:rgba(255,255,255,.72); }
.work-method-steps { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.work-method-steps div { border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.055); padding:24px; min-height:190px; }
.work-method-steps span { color:var(--red); font-weight:950; letter-spacing:.12em; }
.work-method-steps strong { display:block; margin:36px 0 8px; color:#fff; font-size:24px; letter-spacing:-.04em; }
.work-method-steps p { margin:0; font-size:15px; }
.work-cta-section { background:linear-gradient(180deg,#fff,#f8f8f8); }
.work-cta-card { display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; background:var(--red); color:#fff; padding:44px; box-shadow:var(--shadow); }
.work-cta-card .eyebrow, .work-cta-card p { color:rgba(255,255,255,.78); }
.work-cta-card h2 { color:#fff; font-size:clamp(30px,4vw,54px); line-height:1; letter-spacing:-.06em; max-width:760px; }
.work-cta-icon { width:70px; height:70px; display:grid; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.09); }
.work-cta-card .btn { background:#fff; color:var(--red); box-shadow:none; }
.dark-contact-section { background:radial-gradient(circle at 12% 20%, rgba(var(--red-rgb),.22), transparent 30%), linear-gradient(135deg,#151515,#242424); color:#fff; }
.dark-contact-section h2 { color:#fff; }
.dark-contact-section p { color:rgba(255,255,255,.72); }
.dark-contact-section .contact-benefit h3 { color:#fff; }
.dark-contact-section .contact-panel { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.dark-contact-section .contact-form input,
.dark-contact-section .contact-form textarea { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.17); }
.dark-contact-section .contact-form input::placeholder,
.dark-contact-section .contact-form textarea::placeholder { color:rgba(255,255,255,.42); }

/* Pricing page */
.pricing-hero-visual { min-height:440px; }
.pricing-visual-stack { position:absolute; left:70px; bottom:96px; width:190px; height:190px; background:var(--red); color:#fff; display:flex; flex-direction:column; justify-content:center; padding:28px; box-shadow:0 26px 70px rgba(var(--red-rgb),.27); }
.pricing-visual-stack strong { font-size:38px; letter-spacing:-.06em; }
.pricing-visual-stack em { font-style:normal; font-weight:950; text-transform:uppercase; letter-spacing:.14em; font-size:12px; margin-top:8px; }
.pricing-visual-line { position:absolute; left:304px; right:70px; height:15px; border:1px solid rgba(255,255,255,.2); background:linear-gradient(90deg, var(--red), rgba(255,255,255,.45), rgba(255,255,255,.12)); }
.pricing-visual-line.one { top:166px; }
.pricing-visual-line.two { top:214px; width:46%; }
.pricing-visual-line.three { top:262px; width:60%; }
.pricing-visual-badge { position:absolute; right:70px; bottom:88px; padding:16px 20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; font-weight:950; }
.pricing-intro-section { background:#fff; }
.pricing-intro-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.pricing-principles { display:grid; gap:16px; }
.pricing-principles div { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:24px; border:1px solid rgba(17,17,17,.1); background:linear-gradient(135deg,#fff,#f8f8f8); box-shadow:var(--shadow-soft); }
.pricing-principles span { margin:0; }
.pricing-principles strong { display:block; font-size:22px; letter-spacing:-.04em; }
.pricing-principles p { margin:6px 0 0; color:#666; }
.build-pricing-section { background:linear-gradient(180deg,#f8f8f8,#fff); }
.build-price-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.build-price-card { position:relative; padding:34px; background:#fff; border:1px solid rgba(17,17,17,.1); box-shadow:var(--shadow-soft); overflow:hidden; transition:.22s ease; }
.build-price-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(var(--red-rgb),.22); }
.build-price-card.premium { background:linear-gradient(135deg,#171717,#2a2929); color:#fff; border-color:rgba(255,255,255,.13); }
.build-price-card.premium p, .build-price-card.premium li { color:rgba(255,255,255,.75); }
.build-price-card h3 { font-size:clamp(40px,5vw,66px); line-height:.92; letter-spacing:-.07em; margin:8px 0 16px; }
.build-price-card p { color:#666; font-size:17px; max-width:560px; }
.build-price-card ul { list-style:none; padding:0; margin:26px 0; display:grid; gap:11px; }
.build-price-card li { display:flex; align-items:center; gap:10px; color:#555; }
.build-price-card li::before { content:""; width:8px; height:8px; background:var(--red); flex:0 0 auto; }
.monthly-pricing-section { background:radial-gradient(circle at 10% 0%, rgba(var(--red-rgb),.23), transparent 30%), linear-gradient(135deg,#151515,#242424); }
.monthly-pricing-section .section-head h2 { color:#fff; }
.monthly-pricing-section .section-head p { color:rgba(255,255,255,.72); }
.billing-toggle-wrap { display:flex; justify-content:center; margin: -18px 0 34px; }
.monthly-pricing-section .billing-toggle { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
.pricing-pro-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pricing-pro-card { position:relative; padding:30px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13); color:#fff; min-height:520px; display:flex; flex-direction:column; overflow:hidden; transition:.22s ease; }
.pricing-pro-card::after { content:""; position:absolute; width:210px; height:210px; right:-90px; bottom:-90px; background:radial-gradient(circle, rgba(var(--red-rgb),.22), transparent 70%); }
.pricing-pro-card:hover { transform:translateY(-6px); border-color:rgba(var(--red-rgb),.42); box-shadow:0 28px 72px rgba(0,0,0,.28); }
.pricing-pro-card.featured { background:linear-gradient(135deg,#fff,#f8f8f8); color:var(--ink); border-color:rgba(var(--red-rgb),.25); }
.pricing-pro-card.featured .price-sub, .pricing-pro-card.featured li { color:#555; }
.pricing-pro-icon { margin-bottom:20px; background:rgba(var(--red-rgb),.09); }
.pricing-pro-card:not(.featured) .pricing-pro-icon { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.17); }
.pricing-pro-badge { position:absolute; top:22px; right:22px; padding:9px 12px; background:var(--red); color:#fff; font-style:normal; font-size:11px; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.pricing-pro-card h3 { font-size:30px; letter-spacing:-.05em; margin:0 0 6px; }
.pricing-pro-card .price { font-size:clamp(44px,5vw,64px); margin:12px 0 12px; color:inherit; }
.pricing-pro-card .price-sub { min-height:54px; color:rgba(255,255,255,.72); font-size:16px; }
.pricing-pro-card ul { list-style:none; margin:24px 0 28px; padding:0; display:grid; gap:12px; }
.pricing-pro-card li { display:flex; gap:10px; align-items:center; color:rgba(255,255,255,.75); }
.pricing-pro-card li::before { content:"✓"; width:22px; height:22px; display:grid; place-items:center; background:rgba(var(--red-rgb),.13); color:var(--red); font-weight:950; flex:0 0 auto; }
.pricing-pro-card .btn { margin-top:auto; align-self:flex-start; position:relative; z-index:1; }
.btn-ghost-dark { background:transparent; color:var(--ink); border:1px solid rgba(17,17,17,.2); box-shadow:none; }
.btn-ghost-dark:hover { border-color:var(--red); color:var(--red); transform:translateY(-2px); }
.media-price-section { background:#fff; }
.media-price-card { display:grid; grid-template-columns:.85fr 1.15fr auto; gap:28px; align-items:center; padding:38px; border:1px solid rgba(17,17,17,.1); background:linear-gradient(135deg,#fff,#f8f8f8); box-shadow:var(--shadow-soft); }
.media-price-card h2 { font-size:clamp(32px,4vw,56px); line-height:1; letter-spacing:-.06em; }
.media-price-options { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.media-price-options div { border:1px solid rgba(17,17,17,.1); background:#fff; padding:20px; }
.media-price-options span { width:46px; height:46px; margin-bottom:14px; }
.media-price-options strong { display:block; font-size:20px; margin-bottom:8px; }
.media-price-options p { font-size:14px; margin:0; color:#666; }
.pricing-faq-section { background:linear-gradient(180deg,#f8f8f8,#fff); }
.pricing-faq-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; }
.pricing-faq-list { display:grid; gap:12px; }
.pricing-faq-list details { border:1px solid rgba(17,17,17,.1); background:#fff; padding:22px 24px; box-shadow:var(--shadow-soft); }
.pricing-faq-list summary { cursor:pointer; font-weight:950; font-size:18px; }
.pricing-faq-list p { margin:14px 0 0; color:#666; }

@media (max-width: 1100px) {
  .work-proof-grid, .pricing-pro-grid { grid-template-columns:1fr 1fr; }
  .work-showcase-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pricing-pro-card.featured { grid-column: span 2; }
  .media-price-card { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
  .work-method-grid, .pricing-intro-grid, .pricing-faq-grid, .split-head { grid-template-columns:1fr; }
  .build-price-grid { grid-template-columns:1fr; }
  .work-cta-card { grid-template-columns:1fr; }
  .work-hero-visual, .pricing-hero-visual { min-height:360px; }
  .work-mosaic { left:24px; right:24px; top:96px; bottom:70px; }
  .work-hero-card.main { left:34px; bottom:72px; }
  .work-hero-card.side { right:30px; top:100px; }
  .pricing-visual-stack { left:34px; bottom:74px; width:150px; height:150px; }
  .pricing-visual-line { left:220px; right:28px; }
  .pricing-visual-badge { right:30px; bottom:70px; }
}
@media (max-width: 640px) {
  .work-proof-grid, .work-showcase-grid, .work-method-steps, .pricing-pro-grid, .media-price-options { grid-template-columns:1fr; }
  .pricing-pro-card.featured { grid-column:auto; }
  .work-showcase-card { min-height:260px; }
  .work-proof-item { min-height:auto; }
  .work-cta-card, .media-price-card { padding:26px; }
  .pricing-pro-card { min-height:auto; }
  .browser-top { left:18px; right:18px; top:20px; }
  .work-mosaic { grid-template-columns:1fr 1fr; top:82px; }
  .work-mosaic span { padding:14px; }
  .work-mosaic span:nth-child(1) { grid-row:auto; }
  .work-hero-card.main { left:22px; bottom:30px; }
  .work-hero-card.side { display:none; }
  .pricing-visual-line { display:none; }
  .pricing-visual-badge { left:34px; right:auto; bottom:42px; }
}
.pricing-pro-card:not(.featured) .btn-ghost-dark { color:#fff; border-color:rgba(255,255,255,.22); }
.pricing-pro-card:not(.featured) .btn-ghost-dark:hover { color:#fff; background:var(--red); border-color:var(--red); }


/* V18 portfolio and CTA polish */
.work-heading-stacked {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}
.work-heading-stacked h2 {
  max-width: 820px;
  margin-inline: auto;
  font-size: clamp(34px, 4.1vw, 58px);
  line-height: .98;
  letter-spacing: -.06em;
}
.work-heading-stacked p {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: clamp(15px, 1vw, 18px);
  color: #626262;
}
.method-icon-steps div {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  transition: transform .24s ease, border-color .24s ease, background .24s ease;
}
.method-icon-steps div::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 142px;
  height: 142px;
  opacity: .06;
  background: var(--red);
  mask: var(--method-icon) center/contain no-repeat;
  -webkit-mask: var(--method-icon) center/contain no-repeat;
  transition: opacity .24s ease, transform .24s ease;
}
.method-icon-steps div:nth-child(1) { --method-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M4 9h16M8 13h4M8 16h8'/%3E%3C/svg%3E"); }
.method-icon-steps div:nth-child(2) { --method-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M8 7h12v14H8z'/%3E%3Cpath d='M4 3h12v4M12 11h4M12 15h4'/%3E%3C/svg%3E"); }
.method-icon-steps div:nth-child(3) { --method-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z'/%3E%3C/svg%3E"); }
.method-icon-steps div:nth-child(4) { --method-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3M8 12l2 2 4-5'/%3E%3C/svg%3E"); }
.method-icon-steps div:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--red-rgb),.42);
  background: rgba(255,255,255,.08);
}
.method-icon-steps div:hover::after {
  opacity: .12;
  transform: translate(-8px, -8px) scale(1.05);
}
.method-step-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 10px;
}
.method-step-title i {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--red-rgb),.36);
  background: rgba(var(--red-rgb),.09);
  color: var(--red);
  flex: 0 0 auto;
}
.method-step-title svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.method-icon-steps .method-step-title strong {
  margin: 0;
}
.method-icon-steps p {
  position: relative;
  z-index: 1;
}
.page-cta-strip {
  margin: 0;
}
.page-cta-strip .cta-inner {
  min-height: 150px;
}
.page-cta-strip .cta-inner h2 {
  max-width: 850px;
}
.page-cta-strip + .site-footer,
.cta-strip + .site-footer {
  margin-top: 0;
}
@media (max-width: 980px) {
  .work-heading-stacked { text-align: left; }
  .work-heading-stacked h2,
  .work-heading-stacked p { margin-inline: 0; }
  .work-method-grid { grid-template-columns: 1fr; }
  .cta-inner { grid-template-columns: 56px 1fr; }
  .cta-actions { grid-column: 2; justify-items: start; }
}
@media (max-width: 640px) {
  .method-icon-steps { grid-template-columns: 1fr; }
  .method-icon-steps div { min-height: 0; }
  .cta-inner { grid-template-columns: 1fr; }
  .rocket { width: 58px; height: 58px; }
  .cta-actions { grid-column: auto; }
}

/* V19 final polish: portfolio, pricing and graphic consistency */
/* Stop recursive card styling that created box-inside-box layouts */
.work-method-steps > div {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
  padding: 26px !important;
  min-height: 176px !important;
  position: relative !important;
  overflow: hidden !important;
}
.work-method-steps > div > span {
  display: inline-flex !important;
  margin-bottom: 24px !important;
  color: var(--red) !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
}
.work-method-steps > div .method-step-title,
.work-method-steps > div .method-step-title div,
.work-method-steps > div .method-step-title i {
  border: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.work-method-steps > div .method-step-title {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 12px !important;
  position: relative !important;
  z-index: 2 !important;
}
.work-method-steps > div .method-step-title i {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--red) !important;
  border: 1px solid rgba(var(--red-rgb),.38) !important;
  background: rgba(var(--red-rgb),.08) !important;
}
.work-method-steps > div .method-step-title strong {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(21px, 1.7vw, 26px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
}
.work-method-steps > div > p {
  margin: 0 !important;
  max-width: 300px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  position: relative !important;
  z-index: 2 !important;
}
.work-method-steps > div::after {
  right: -18px !important;
  bottom: -24px !important;
  width: 120px !important;
  height: 120px !important;
  opacity: .055 !important;
}
.work-method-steps > div:hover::after { opacity: .14 !important; transform: translate(-8px,-8px) scale(1.04) !important; }

/* Portfolio visual made compact and clean */
.work-hero-visual {
  min-height: 410px !important;
  padding: 34px !important;
}
.work-hero-visual .browser-top { left: 34px !important; right: 34px !important; top: 30px !important; }
.work-mosaic {
  left: 54px !important;
  right: 54px !important;
  top: 110px !important;
  bottom: 74px !important;
  grid-template-columns: 1.1fr .9fr !important;
  gap: 14px !important;
}
.work-mosaic span {
  min-height: 86px !important;
  padding: 18px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.work-hero-card.main {
  left: 82px !important;
  bottom: 48px !important;
  width: 158px !important;
  min-height: 112px !important;
}
.work-hero-card.side {
  right: 64px !important;
  top: 158px !important;
  width: 138px !important;
  min-height: 96px !important;
}
.work-hero-card strong { font-size: 36px !important; }
.work-hero-card em { font-size: 10px !important; }

/* Pricing page rebuild */
.pricing-hero-visual {
  min-height: 410px !important;
  padding: 34px !important;
}
.pricing-visual-stack {
  left: 70px !important;
  bottom: 70px !important;
  width: 176px !important;
  height: 176px !important;
  box-shadow: 0 26px 70px rgba(var(--red-rgb),.24) !important;
}
.pricing-visual-stack strong { font-size: 36px !important; }
.pricing-visual-line {
  left: 302px !important;
  right: 72px !important;
  height: 10px !important;
  border-color: rgba(255,255,255,.18) !important;
  background: linear-gradient(90deg, var(--red), rgba(255,255,255,.42), rgba(255,255,255,.08)) !important;
}
.pricing-visual-line.one { top: 160px !important; }
.pricing-visual-line.two { top: 208px !important; width: auto !important; right: 118px !important; }
.pricing-visual-line.three { top: 256px !important; width: auto !important; right: 168px !important; }
.pricing-visual-badge {
  left: 302px !important;
  bottom: 74px !important;
  min-width: 176px !important;
  height: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
.pricing-intro-section { background: linear-gradient(180deg,#fff,#f8f8f8) !important; }
.pricing-intro-grid {
  grid-template-columns: .86fr 1.14fr !important;
  gap: clamp(38px, 6vw, 86px) !important;
  align-items: center !important;
}
.pricing-intro-grid .section-head { margin-bottom: 0 !important; }
.pricing-principles {
  display: grid !important;
  gap: 16px !important;
}
.pricing-principles > div {
  display: grid !important;
  grid-template-columns: 58px 1fr !important;
  column-gap: 18px !important;
  align-items: center !important;
  padding: 24px !important;
  min-height: 118px !important;
  border: 1px solid rgba(17,17,17,.1) !important;
  background: #fff !important;
  box-shadow: 0 18px 55px rgba(17,17,17,.05) !important;
}
.pricing-principles span {
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  grid-row: span 2 !important;
}
.pricing-principles strong {
  display: block !important;
  margin: 0 0 4px !important;
  font-size: 22px !important;
  letter-spacing: -.04em !important;
}
.pricing-principles p { margin: 0 !important; color: #666 !important; }
.build-pricing-section { background: #fff !important; }
.build-price-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
}
.build-price-card {
  position: relative !important;
  min-height: 430px !important;
  padding: clamp(30px, 4vw, 48px) !important;
  border: 1px solid rgba(17,17,17,.1) !important;
  background: linear-gradient(135deg,#fff,#f8f8f8) !important;
  box-shadow: 0 28px 80px rgba(17,17,17,.07) !important;
  overflow: hidden !important;
}
.build-price-card.premium { background: radial-gradient(circle at 100% 100%, rgba(var(--red-rgb),.2), transparent 33%), linear-gradient(135deg,#161616,#242424) !important; color:#fff !important; border-color: rgba(255,255,255,.12) !important; }
.build-price-card > span { margin-bottom: 26px !important; }
.build-price-card .price-kicker { letter-spacing: .16em !important; }
.build-price-card h3 { font-size: clamp(42px, 5vw, 70px) !important; line-height: .9 !important; letter-spacing: -.07em !important; margin: 0 0 18px !important; }
.build-price-card p { max-width: 560px !important; }
.build-price-card.premium p { color: rgba(255,255,255,.72) !important; }
.build-price-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 26px 0 30px !important;
  display: grid !important;
  gap: 13px !important;
}
.build-price-card li { display: flex !important; align-items: center !important; gap: 12px !important; color: #555 !important; }
.build-price-card.premium li { color: rgba(255,255,255,.76) !important; }
.build-price-card li::before { content: "→" !important; color: var(--red) !important; font-weight: 950 !important; }
.monthly-pricing-section { background: radial-gradient(circle at 15% 8%, rgba(var(--red-rgb),.18), transparent 28%), linear-gradient(135deg,#141414,#222) !important; }
.pricing-pro-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
}
.pricing-pro-card {
  position: relative !important;
  padding: 30px !important;
  min-height: 460px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.pricing-pro-card.featured { background: linear-gradient(135deg, rgba(var(--red-rgb),.98), rgba(var(--red-dark-rgb),.96)) !important; border-color: transparent !important; }
.pricing-pro-card::after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.08); opacity: .45; transform: rotate(12deg); }
.pricing-pro-card .pricing-pro-icon { margin-bottom: 28px !important; background: rgba(255,255,255,.08) !important; color:#fff !important; border-color: rgba(255,255,255,.18) !important; }
.pricing-pro-card .price-kicker { color: rgba(255,255,255,.74) !important; }
.pricing-pro-card h3 { font-size: clamp(28px, 2.5vw, 38px) !important; margin: 0 0 8px !important; }
.pricing-pro-card .price { font-size: clamp(42px, 4.5vw, 62px) !important; line-height: .95 !important; letter-spacing: -.065em !important; margin: 10px 0 !important; }
.pricing-pro-card .price-sub { color: rgba(255,255,255,.7) !important; min-height: 52px !important; }
.pricing-pro-card ul { list-style:none !important; margin: 24px 0 30px !important; padding:0 !important; display:grid !important; gap: 12px !important; }
.pricing-pro-card li { color: rgba(255,255,255,.77) !important; display:flex !important; gap:10px !important; }
.pricing-pro-card li::before { content:"✓" !important; color:#fff !important; width: 18px !important; flex: 0 0 18px !important; }
.pricing-pro-card:not(.featured) .btn { background:#fff !important; color:var(--red) !important; border-color:#fff !important; }
.media-price-section { background: #fff !important; }
.media-price-card {
  display: grid !important;
  grid-template-columns: .85fr 1.15fr !important;
  gap: 34px !important;
  align-items: center !important;
  padding: clamp(32px,5vw,58px) !important;
  border: 1px solid rgba(17,17,17,.1) !important;
  box-shadow: 0 32px 95px rgba(17,17,17,.08) !important;
  background: linear-gradient(135deg,#fff,#f8f8f8) !important;
}
.media-price-options { display:grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
.media-price-options > div {
  padding: 24px !important;
  min-height: 220px !important;
  background: #fff !important;
  border: 1px solid rgba(17,17,17,.08) !important;
}
.media-price-card > .btn { grid-column: 2 !important; justify-self: start !important; }
.pricing-faq-section { background: linear-gradient(180deg,#f8f8f8,#fff) !important; }
.pricing-faq-grid { display:grid !important; grid-template-columns: .8fr 1.2fr !important; gap: 54px !important; align-items: start !important; }
.pricing-faq-list details { background:#fff !important; border:1px solid rgba(17,17,17,.09) !important; box-shadow:0 16px 50px rgba(17,17,17,.05) !important; }

@media (max-width: 980px) {
  .work-method-grid,
  .pricing-intro-grid,
  .media-price-card,
  .pricing-faq-grid { grid-template-columns: 1fr !important; }
  .work-proof-grid,
  .work-showcase-grid,
  .pricing-pro-grid,
  .media-price-options { grid-template-columns: 1fr 1fr !important; }
  .build-price-grid { grid-template-columns: 1fr !important; }
  .media-price-card > .btn { grid-column: auto !important; }
  .pricing-hero-visual,
  .work-hero-visual { min-height: 360px !important; }
}
@media (max-width: 680px) {
  .work-method-steps,
  .work-proof-grid,
  .work-showcase-grid,
  .pricing-pro-grid,
  .media-price-options { grid-template-columns: 1fr !important; }
  .work-hero-visual,
  .pricing-hero-visual { min-height: 320px !important; padding: 20px !important; }
  .work-mosaic { left: 28px !important; right: 28px !important; top: 92px !important; bottom: 56px !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .work-mosaic span { min-height: 64px !important; padding: 12px !important; font-size: 10px !important; }
  .work-hero-card.main { left: 34px !important; bottom: 34px !important; width: 118px !important; min-height: 88px !important; padding: 14px !important; }
  .work-hero-card.side { right: 32px !important; top: 126px !important; width: 104px !important; min-height: 78px !important; padding: 14px !important; }
  .work-hero-card strong { font-size: 26px !important; }
  .browser-top { left: 22px !important; right: 22px !important; top: 22px !important; height: 38px !important; }
  .pricing-visual-stack { left: 34px !important; bottom: 42px !important; width: 124px !important; height: 124px !important; padding: 18px !important; }
  .pricing-visual-stack strong { font-size: 28px !important; }
  .pricing-visual-line { left: 178px !important; right: 34px !important; height: 8px !important; }
  .pricing-visual-line.one { top: 132px !important; }
  .pricing-visual-line.two { top: 170px !important; right: 54px !important; }
  .pricing-visual-line.three { top: 208px !important; right: 76px !important; }
  .pricing-visual-badge { left: 178px !important; bottom: 48px !important; min-width: 128px !important; height: 48px !important; font-size: 12px !important; }
  .pricing-principles > div { grid-template-columns: 48px 1fr !important; padding: 20px !important; }
  .pricing-principles span { width: 48px !important; height: 48px !important; }
  .work-method-steps > div { min-height: 0 !important; }
}


/* V20 requested polish: stable hero background, rebuilt pricing, professional blog and single posts */
.hero { overflow: hidden; }
.hero-bg { overflow: hidden; z-index: 0; pointer-events: none; }
.hero .hero-grid { position: relative; z-index: 2; }
.hero-bg::before {
  right: 2.5% !important;
  top: 12% !important;
  width: min(49vw, 760px) !important;
  min-width: 520px;
  aspect-ratio: 1.28 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  opacity: .42 !important;
  transform: none !important;
  skew: none !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0 52px, transparent 52px),
    radial-gradient(circle at 18% 20%, rgba(var(--red-rgb),.58), transparent 21%),
    linear-gradient(135deg, rgba(255,255,255,.12) 0 26%, transparent 26% 30%, rgba(var(--red-rgb),.42) 30% 44%, transparent 44% 50%, rgba(255,255,255,.1) 50% 72%, transparent 72%),
    linear-gradient(135deg, #171717, #303030) !important;
  box-shadow: 0 70px 140px rgba(0,0,0,.52) !important;
}
.hero-bg::after {
  content:"";
  position:absolute;
  right: 8%;
  top: 24%;
  width: min(35vw, 500px);
  height: min(23vw, 330px);
  border: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(90deg, transparent 0 55%, rgba(var(--red-rgb),.55) 55% 58%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.12) 0 18%, transparent 18% 27%, rgba(var(--red-rgb),.35) 27% 40%, transparent 40% 49%, rgba(255,255,255,.14) 49% 58%, transparent 58%),
    radial-gradient(circle at 70% 28%, rgba(255,255,255,.22), transparent 14%),
    linear-gradient(135deg, #111, #252525);
  opacity:.34;
  filter:none;
  border-radius:0;
}
.hero-dashboard { z-index: 1; }
.lead-card { position:relative; z-index: 4; }

/* Pricing v20 */
.pricing-hero-card,
.blog-hero-visual,
.post-visual {
  position:relative;
  min-height: clamp(360px, 35vw, 460px);
  border:1px solid rgba(255,255,255,.16);
  background: radial-gradient(circle at 22% 25%, rgba(var(--red-rgb),.22), transparent 28%), linear-gradient(135deg,#171717,#2a2929);
  box-shadow: var(--shadow-strong);
  overflow:hidden;
}
.pricing-hero-card::before,
.blog-hero-visual::before,
.post-visual::before {
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(105deg, transparent 0 42px, rgba(255,255,255,.045) 42px 44px, transparent 44px 86px);
  opacity:.7;
}
.pricing-hero-card .browser-top,
.blog-hero-visual .browser-top,
.post-visual .browser-top { left:34px; right:34px; top:34px; }
.price-tile { position:absolute; left:70px; bottom:72px; width:178px; height:178px; display:grid; align-content:center; gap:10px; padding:26px; color:#fff; background:var(--red); box-shadow:0 26px 70px rgba(var(--red-rgb),.25); }
.price-tile strong { font-size:38px; letter-spacing:-.06em; line-height:.9; }
.price-tile em { font-style:normal; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:950; }
.price-lines { position:absolute; left:300px; right:70px; top:150px; display:grid; gap:28px; }
.price-lines i { height:11px; border:1px solid rgba(255,255,255,.16); background:linear-gradient(90deg,var(--red),rgba(255,255,255,.42),rgba(255,255,255,.08)); }
.price-lines i:nth-child(2){ width:86%; } .price-lines i:nth-child(3){ width:68%; }
.price-chip { position:absolute; left:300px; bottom:82px; min-width:180px; height:58px; display:grid; place-items:center; color:#fff; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); font-weight:950; }
.pricing-read-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,88px); align-items:center; }
.pricing-read-grid .section-head { margin:0; }
.pricing-principle-list { display:grid; gap:18px; }
.pricing-principle-list article { display:grid; grid-template-columns:64px 1fr; gap:18px; align-items:center; padding:26px; border:1px solid rgba(17,17,17,.1); background:#fff; box-shadow:0 20px 58px rgba(17,17,17,.055); }
.pricing-principle-list h3 { margin:0 0 5px; font-size:24px; }
.pricing-principle-list p { margin:0; }
.clean-pricing-grid { gap:24px !important; }
.clean-card { border:1px solid rgba(17,17,17,.1) !important; box-shadow:0 28px 90px rgba(17,17,17,.08) !important; }
.clean-card h3 { font-size:clamp(42px,5.4vw,72px) !important; }
.clean-card.premium { background:radial-gradient(circle at 100% 100%,rgba(var(--red-rgb),.18),transparent 35%),linear-gradient(135deg,#151515,#252525) !important; }
.clean-monthly-grid .pricing-pro-card { min-height: 440px !important; display:flex !important; flex-direction:column !important; }
.clean-monthly-grid .pricing-pro-card .btn { margin-top:auto !important; align-self:flex-start !important; }
.clean-media-card { grid-template-columns:.82fr 1.18fr !important; }
.clean-media-card .btn { margin-top:22px; }
.clean-media-options > div { position:relative; overflow:hidden; }
.clean-media-options span svg { width:30px; height:30px; fill:none; stroke:var(--red); stroke-width:1.8; }

/* Blog index */
.blog-index-head { max-width: 980px; }
.featured-post { display:grid; grid-template-columns:.92fr 1.08fr; gap:34px; align-items:center; margin-bottom:34px; padding:34px; border:1px solid rgba(17,17,17,.09); background:#fff; box-shadow:0 30px 90px rgba(17,17,17,.08); }
.featured-post-visual { min-height:290px; padding:30px; display:grid; align-content:end; gap:10px; color:#fff; background:radial-gradient(circle at 20% 15%,rgba(var(--red-rgb),.6),transparent 32%),linear-gradient(135deg,#151515,#2a2929); position:relative; overflow:hidden; }
.featured-post-visual::after { content:""; position:absolute; inset:28px; border:1px solid rgba(255,255,255,.14); }
.featured-post-visual span { color:var(--red); font-weight:950; letter-spacing:.14em; }
.featured-post-visual strong { font-size:clamp(34px,4vw,54px); line-height:.94; letter-spacing:-.06em; position:relative; z-index:1; }
.featured-post-visual em { font-style:normal; color:rgba(255,255,255,.7); position:relative; z-index:1; }
.featured-post h3 { font-size:clamp(32px,3.8vw,48px); margin-bottom:14px; }
.blog-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.blog-pro-card { min-height:330px; padding:30px; border:1px solid rgba(17,17,17,.1); background:#fff; box-shadow:0 20px 60px rgba(17,17,17,.065); display:flex; flex-direction:column; transition:transform .24s ease, background .24s ease, color .24s ease; }
.blog-pro-card:hover { transform:translateY(-6px); background:#171717; color:#fff; }
.blog-pro-card:hover p:not(.eyebrow) { color:rgba(255,255,255,.72); }
.blog-pro-card .fact-icon { margin-bottom:24px; }
.blog-pro-card h3 { font-size:clamp(25px,2.3vw,32px); }
.blog-pro-card strong { margin-top:auto; color:var(--red); }
.blog-authority-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:60px; align-items:center; }
.authority-points { display:grid; gap:18px; }
.authority-points div { display:grid; grid-template-columns:58px 1fr; gap:16px; align-items:start; padding:24px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055); }
.authority-points span { width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(var(--red-rgb),.4); color:var(--red); background:rgba(var(--red-rgb),.08); }
.authority-points svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; }
.authority-points strong { font-size:22px; }
.authority-points p { grid-column:2; margin:0; }
.blog-visual-card { position:absolute; left:70px; bottom:70px; width:155px; height:155px; display:grid; place-items:center; background:var(--red); color:#fff; font-size:42px; font-weight:950; }
.blog-visual-lines { position:absolute; left:280px; right:70px; top:150px; display:grid; gap:18px; }
.blog-visual-lines i { height:12px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.12); }
.blog-visual-lines i:nth-child(2){background:rgba(var(--red-rgb),.7)} .blog-visual-lines i:nth-child(3){width:76%;} .blog-visual-lines i:nth-child(4){width:58%;}
.blog-visual-badge { position:absolute; left:280px; bottom:80px; color:#fff; font-weight:950; border:1px solid rgba(255,255,255,.16); padding:18px 20px; background:rgba(255,255,255,.06); }

/* Single post */
.post-hero { padding:clamp(82px,9vw,132px) 0; }
.post-hero-grid { display:grid; grid-template-columns:1fr .82fr; gap:clamp(42px,6vw,82px); align-items:center; }
.post-hero h1 { max-width:860px; }
.post-hero p { max-width:720px; font-size:18px; }
.post-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.post-meta span { padding:9px 12px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:rgba(255,255,255,.7); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.12em; }
.post-visual-card { position:absolute; left:60px; bottom:70px; width:170px; height:170px; background:var(--red); color:#fff; display:grid; place-items:center; align-content:center; gap:4px; }
.post-visual-card strong { font-size:42px; line-height:.9; }
.post-visual-card em { font-style:normal; text-transform:uppercase; letter-spacing:.13em; font-weight:950; font-size:10px; }
.post-visual-lines { position:absolute; left:285px; right:58px; top:150px; display:grid; gap:22px; }
.post-visual-lines i { height:12px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(90deg,var(--red),rgba(255,255,255,.26)); }
.post-visual-lines i:nth-child(2){width:82%;} .post-visual-lines i:nth-child(3){width:64%;}
.post-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:start; }
.post-content { font-size:18px; }
.post-intro { font-size:22px; color:#333; }
.post-content h2 { font-size:clamp(30px,3.2vw,44px); margin-top:48px; }
.post-point-list { display:grid; gap:18px; margin:28px 0; }
.post-point-list article { display:grid; grid-template-columns:62px 1fr; gap:18px; align-items:start; padding:24px; border:1px solid rgba(17,17,17,.1); background:#fff; box-shadow:0 18px 54px rgba(17,17,17,.05); }
.post-point-list h3 { margin:0 0 7px; font-size:24px; }
.post-point-list p { margin:0; }
.post-content blockquote { margin:38px 0; padding:28px; border-left:4px solid var(--red); background:#f8f8f8; font-weight:850; font-size:22px; line-height:1.35; }
.post-sidebar { position:sticky; top:110px; display:grid; gap:18px; }
.post-side-card, .post-side-links { padding:26px; border:1px solid rgba(17,17,17,.1); background:#fff; box-shadow:0 20px 58px rgba(17,17,17,.06); }
.post-side-card h3 { font-size:28px; }
.post-side-links { display:grid; gap:12px; }
.post-side-links a { color:var(--red); font-weight:900; }

@media (max-width:980px){
  .hero-bg::before{min-width:0;width:76vw!important;right:-20vw!important;opacity:.22!important;}
  .hero-bg::after{display:none;}
  .pricing-read-grid,.featured-post,.blog-authority-grid,.post-hero-grid,.post-layout{grid-template-columns:1fr;}
  .blog-card-grid,.clean-monthly-grid{grid-template-columns:1fr 1fr!important;}
  .post-sidebar{position:static;}
}
@media (max-width:680px){
  .pricing-hero-card,.blog-hero-visual,.post-visual{min-height:320px;}
  .price-tile,.blog-visual-card,.post-visual-card{left:28px;bottom:40px;width:122px;height:122px;padding:18px;}
  .price-tile strong,.blog-visual-card,.post-visual-card strong{font-size:30px;}
  .price-lines,.blog-visual-lines,.post-visual-lines{left:170px;right:24px;top:120px;gap:14px;}
  .price-chip,.blog-visual-badge{left:170px;bottom:50px;min-width:118px;font-size:12px;padding:12px;}
  .blog-card-grid,.clean-monthly-grid,.pricing-pro-grid{grid-template-columns:1fr!important;}
  .pricing-principle-list article,.post-point-list article{grid-template-columns:52px 1fr;padding:20px;}
  .featured-post{padding:22px;}
  .featured-post-visual{min-height:220px;}
}

/* V21 HOME GRAPHIC POLISH - requested: project previews in hero background, no floating thumb labels */
.hero-project-thumbs { display: none !important; }
.hero-bg::before {
  right: 1.4% !important;
  top: 10.5% !important;
  width: min(50vw, 760px) !important;
  min-width: 560px !important;
  aspect-ratio: 1.23 !important;
  transform: none !important;
  opacity: .62 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    /* front project browser */
    linear-gradient(180deg, rgba(255,255,255,.12) 0 42px, transparent 42px 100%),
    radial-gradient(circle at 8% 10%, rgba(255,255,255,.42) 0 4px, transparent 4.5px),
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.34) 0 4px, transparent 4.5px),
    radial-gradient(circle at 16% 10%, rgba(255,255,255,.28) 0 4px, transparent 4.5px),
    linear-gradient(90deg, transparent 0 8%, rgba(var(--red-rgb),.9) 8% 58%, transparent 58% 100%) 0 82px/100% 44px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.20) 8% 42%, transparent 42% 100%) 0 148px/100% 18px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.14) 8% 33%, transparent 33% 100%) 0 184px/100% 14px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,.16) 8% 49%, transparent 49% 100%) 0 214px/100% 14px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(var(--red-rgb),.76) 8% 27%, transparent 27% 34%, rgba(255,255,255,.11) 34% 53%, transparent 53% 60%, rgba(255,255,255,.10) 60% 82%, transparent 82%) 0 275px/100% 78px no-repeat,
    radial-gradient(circle at 72% 35%, rgba(var(--red-rgb),.45), transparent 22%),
    linear-gradient(125deg, rgba(255,255,255,.12) 0 1px, transparent 1px 20px),
    linear-gradient(135deg, #171717 0%, #252525 56%, #111 100%) !important;
  box-shadow: 0 70px 150px rgba(0,0,0,.56), inset 0 0 0 52px rgba(0,0,0,.11) !important;
}
.hero-bg::after {
  right: 15.5% !important;
  top: 17.5% !important;
  width: min(35vw, 520px) !important;
  min-width: 380px !important;
  height: min(28vw, 390px) !important;
  transform: rotate(-6deg) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  opacity: .58 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0 40px, transparent 40px),
    radial-gradient(circle at 7% 10%, rgba(255,255,255,.44) 0 4px, transparent 4.5px),
    radial-gradient(circle at 11% 10%, rgba(255,255,255,.34) 0 4px, transparent 4.5px),
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.26) 0 4px, transparent 4.5px),
    linear-gradient(90deg, transparent 0 7%, rgba(var(--red-rgb),.84) 7% 72%, transparent 72%) 0 85px/100% 26px no-repeat,
    linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.18) 7% 48%, transparent 48%) 0 129px/100% 14px no-repeat,
    linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.13) 7% 60%, transparent 60%) 0 156px/100% 13px no-repeat,
    linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.10) 7% 42%, transparent 42%) 0 184px/100% 13px no-repeat,
    linear-gradient(135deg, rgba(var(--red-rgb),.18), transparent 42%),
    linear-gradient(135deg, #141414, #2f2f2f) !important;
  box-shadow: 0 38px 100px rgba(0,0,0,.45) !important;
  filter: none !important;
}
.hero-dashboard {
  top: 8px !important;
  right: -22px !important;
  width: min(96%, 500px) !important;
  height: 245px !important;
  transform: rotate(2.2deg) !important;
  opacity: .82 !important;
}
.hero-dashboard .dash-grid { display: none !important; }
.hero-dashboard .dash-screen::before {
  content:"";
  position:absolute;
  left:26px; right:34px; top:36px; height:112px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(90deg, rgba(var(--red-rgb),.82) 0 58%, transparent 58%) 0 18px/100% 24px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.18) 0 44%, transparent 44%) 0 60px/100% 12px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.14) 0 66%, transparent 66%) 0 86px/100% 12px no-repeat,
    radial-gradient(circle at 80% 28%, rgba(255,255,255,.16), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.hero-dashboard .dash-line { display:none !important; }
.lead-card { margin-top: 142px !important; }

/* Home service slider: cleaner, compact and more premium visual cards */
.showcase-media {
  min-height: 304px !important;
  background:
    radial-gradient(circle at 20% 36%, rgba(var(--red-rgb),.26), transparent 32%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.10), transparent 16%),
    linear-gradient(135deg, #171717, #292929 58%, #101010) !important;
}
.showcase-media .browser-frame { height: 38px !important; }
.visual-web .mini-alert { display:none !important; }
.visual-web .visual-panel {
  left: 54px !important; right: 54px !important; bottom: 42px !important;
  min-height: 116px !important; padding: 26px 30px !important;
  background: linear-gradient(135deg, rgba(17,17,17,.9), rgba(17,17,17,.70)) !important;
}
.visual-web .visual-panel::after {
  content:""; position:absolute; right:30px; top:26px; width:86px; height:46px;
  background: linear-gradient(90deg, rgba(var(--red-rgb),.88) 0 74%, rgba(255,255,255,.12) 74%);
  box-shadow: 0 18px 45px rgba(var(--red-rgb),.22);
}
.visual-web .mini-lines { top: 102px !important; left: 70px !important; right: 70px !important; display:grid !important; gap:14px !important; }
.visual-web .mini-lines i { height:12px !important; background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.10); }
.visual-web .mini-lines i:nth-child(2){ width:72%; background:rgba(var(--red-rgb),.44)!important; }

.visual-seo { display:block !important; padding:0 !important; }
.visual-seo .rank-card {
  left: 54px !important; top: 94px !important; width: 126px !important; height: 126px !important;
  padding: 20px !important; align-items: flex-start !important; justify-content: center !important;
  gap: 4px !important; box-shadow: 0 26px 64px rgba(var(--red-rgb),.26) !important;
}
.visual-seo .rank-card b { font-size: 39px !important; line-height:.82 !important; }
.visual-seo .rank-card span { font-size: 10px !important; line-height:1.15 !important; }
.visual-seo .rank-lines {
  left: 220px !important; right: 54px !important; top: 103px !important; gap: 15px !important;
}
.visual-seo .rank-lines i {
  height: 16px !important;
  background: linear-gradient(90deg, rgba(var(--red-rgb),.88), rgba(255,255,255,.25) 74%, rgba(255,255,255,.08) 74%) !important;
}
.visual-seo .rank-lines i:nth-child(1){ width:100%!important; }
.visual-seo .rank-lines i:nth-child(2){ width:88%!important; }
.visual-seo .rank-lines i:nth-child(3){ width:74%!important; }
.visual-seo .rank-lines i:nth-child(4){ width:58%!important; }

.visual-care { display:block !important; padding:0 !important; }
.visual-care .pulse-shield {
  position:absolute; left:58px; top:88px; width:124px !important; height:124px !important;
  box-shadow:0 0 0 14px rgba(var(--red-rgb),.11), 0 30px 70px rgba(var(--red-rgb),.22)!important;
}
.visual-care .status-stack {
  right:54px !important; top:90px !important; bottom:auto !important; gap:14px !important;
}
.visual-care .status-stack span {
  min-width: 178px !important; background: transparent !important; border:0 !important; padding:0 0 0 34px !important;
  position:relative; color:#fff !important; font-size:14px !important;
}
.visual-care .status-stack span::before {
  content:"✓"; position:absolute; left:0; top:-2px; width:22px; height:22px; display:grid; place-items:center;
  color:#20d38b; border:1px solid rgba(32,211,139,.55); background:rgba(32,211,139,.12); font-weight:950;
}
.visual-care::before {
  content:"Mesečna briga pre problema"; position:absolute; left:58px; right:54px; bottom:44px;
  padding:18px 22px; border:1px solid rgba(255,255,255,.13); color:rgba(255,255,255,.75); font-weight:850;
  background:rgba(255,255,255,.05); z-index:3;
}

@media (max-width: 1100px){
  .hero-bg::before{right:-8% !important; min-width:470px!important; opacity:.34!important;}
  .hero-bg::after{right:5%!important; min-width:330px!important; opacity:.34!important;}
}
@media (max-width: 980px){
  .hero-bg::before,.hero-bg::after{opacity:.18!important;}
  .hero-dashboard{position:relative!important; right:auto!important; width:100%!important; transform:none!important; opacity:.75!important; margin-bottom:-100px;}
  .lead-card{margin-top:60px!important;}
}
@media (max-width: 720px){
  .hero-bg::before{right:-36%!important; top:9%!important; width:112vw!important; min-width:0!important; opacity:.18!important;}
  .hero-bg::after{display:none!important;}
  .hero-dashboard{height:210px!important; margin-bottom:-72px!important;}
  .visual-web .visual-panel{left:26px!important;right:26px!important;bottom:30px!important;}
  .visual-seo .rank-card{left:28px!important;top:82px!important;width:104px!important;height:104px!important;}
  .visual-seo .rank-lines{left:152px!important;right:26px!important;top:88px!important;gap:12px!important;}
  .visual-care .pulse-shield{left:28px!important;top:86px;width:96px!important;height:96px!important;}
  .visual-care .status-stack{right:24px!important;top:84px!important;gap:10px!important;}
  .visual-care .status-stack span{min-width:0!important;font-size:12px!important;padding-left:28px!important;}
}

/* V22 HOME HTML POLISH - premium slider graphics, stable hero previews, FAQ card */
.hero { overflow: hidden; }
.hero-bg { overflow: hidden !important; }
.hero-bg::before {
  content: "" !important;
  position: absolute !important;
  right: 2.5% !important;
  top: 9.5% !important;
  width: min(46vw, 700px) !important;
  min-width: 520px !important;
  height: min(34vw, 450px) !important;
  transform: rotate(-2deg) skewY(0) !important;
  opacity: .42 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 0 !important;
  box-shadow: 0 70px 150px rgba(0,0,0,.55) !important;
  filter: none !important;
  background:
    radial-gradient(circle at 62% 36%, rgba(var(--red-rgb),.30), transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0 44px, rgba(0,0,0,.18) 44px 45px, transparent 45px),
    radial-gradient(circle at 26px 22px, rgba(255,255,255,.45) 0 4px, transparent 4.5px),
    radial-gradient(circle at 46px 22px, rgba(255,255,255,.34) 0 4px, transparent 4.5px),
    radial-gradient(circle at 66px 22px, rgba(255,255,255,.25) 0 4px, transparent 4.5px),
    linear-gradient(90deg, transparent 0 7%, rgba(var(--red-rgb),.85) 7% 70%, transparent 70%) 0 94px/100% 26px no-repeat,
    linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.18) 7% 50%, transparent 50%) 0 140px/100% 12px no-repeat,
    linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.14) 7% 64%, transparent 64%) 0 166px/100% 12px no-repeat,
    linear-gradient(90deg, transparent 0 7%, rgba(255,255,255,.10) 7% 40%, transparent 40%) 0 192px/100% 12px no-repeat,
    linear-gradient(135deg, rgba(var(--red-rgb),.16), transparent 44%),
    linear-gradient(135deg, #121212, #303030) !important;
}
.hero-bg::after {
  content: "" !important;
  position: absolute !important;
  right: -5% !important;
  top: 15% !important;
  width: min(36vw, 540px) !important;
  min-width: 380px !important;
  height: min(30vw, 390px) !important;
  transform: rotate(3deg) !important;
  opacity: .26 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 0 !important;
  box-shadow: 0 50px 110px rgba(0,0,0,.45) !important;
  filter: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0 42px, rgba(0,0,0,.18) 42px 43px, transparent 43px),
    radial-gradient(circle at 24px 21px, rgba(255,255,255,.42) 0 4px, transparent 4.5px),
    radial-gradient(circle at 44px 21px, rgba(255,255,255,.30) 0 4px, transparent 4.5px),
    radial-gradient(circle at 64px 21px, rgba(255,255,255,.22) 0 4px, transparent 4.5px),
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.20) 10% 54%, transparent 54%) 0 96px/100% 12px no-repeat,
    linear-gradient(90deg, transparent 0 10%, rgba(var(--red-rgb),.50) 10% 76%, transparent 76%) 0 124px/100% 20px no-repeat,
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.14) 10% 62%, transparent 62%) 0 166px/100% 12px no-repeat,
    radial-gradient(circle at 82% 62%, rgba(56,152,236,.20), transparent 23%),
    linear-gradient(135deg, #141414, #272727) !important;
}
.hero-dashboard {
  top: 18px !important;
  right: 6px !important;
  width: min(95%, 520px) !important;
  height: 250px !important;
  transform: rotate(-3deg) !important;
  opacity: .74 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0 40px, transparent 40px),
    radial-gradient(circle at 22px 20px, rgba(255,255,255,.45) 0 4px, transparent 4.5px),
    radial-gradient(circle at 42px 20px, rgba(255,255,255,.34) 0 4px, transparent 4.5px),
    radial-gradient(circle at 62px 20px, rgba(255,255,255,.25) 0 4px, transparent 4.5px),
    linear-gradient(120deg, rgba(var(--red-rgb),.14), transparent 50%),
    linear-gradient(135deg, #111, #2b2b2b) !important;
}
.hero-dashboard::before,
.hero-dashboard::after {
  content:"";
  position:absolute;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.hero-dashboard::before { inset:72px 42px 56px 54px; background:
  linear-gradient(90deg, rgba(var(--red-rgb),.82) 0 64%, transparent 64%) 0 22px/100% 26px no-repeat,
  linear-gradient(90deg, rgba(255,255,255,.18) 0 46%, transparent 46%) 0 68px/100% 12px no-repeat,
  linear-gradient(90deg, rgba(255,255,255,.14) 0 72%, transparent 72%) 0 92px/100% 12px no-repeat,
  rgba(255,255,255,.035); }
.hero-dashboard::after { right:28px; bottom:36px; width:120px; height:90px; background:
  linear-gradient(135deg, rgba(var(--red-rgb),.55), transparent 64%), rgba(255,255,255,.045); }
.hero-dashboard .dash-top,
.hero-dashboard .dash-screen { display:none !important; }

/* Powerful dark slider visuals on homepage */
.services-showcase {
  background:
    radial-gradient(circle at 17% 8%, rgba(var(--red-rgb),.28), transparent 30%),
    radial-gradient(circle at 78% 20%, rgba(56,152,236,.10), transparent 22%),
    linear-gradient(145deg, #080909, #18191a 62%, #080909) !important;
}
.showcase-media {
  border-color: rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 20% 36%, rgba(var(--red-rgb),.20), transparent 31%),
    radial-gradient(circle at 76% 44%, rgba(255,255,255,.09), transparent 18%),
    linear-gradient(135deg, #0d0e0f, #222 60%, #0b0c0d) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 34px 90px rgba(0,0,0,.32);
}
.showcase-media::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(112deg, transparent 0 44%, rgba(255,255,255,.065) 44% 47%, transparent 47%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size:auto, 38px 38px, 38px 38px !important;
  pointer-events:none;
}
.visual-web::after {
  content:"" !important;
  position:absolute !important;
  z-index:2 !important;
  right:48px !important;
  top:86px !important;
  width:170px !important;
  height:170px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle, rgba(var(--red-rgb),.95) 0 14px, rgba(var(--red-rgb),.18) 15px 25px, transparent 26px),
    radial-gradient(circle at 78% 28%, #3898ec 0 5px, transparent 6px),
    radial-gradient(circle at 24% 72%, #3898ec 0 5px, transparent 6px),
    radial-gradient(circle at 17% 18%, var(--red) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 78%, var(--red) 0 5px, transparent 6px),
    repeating-radial-gradient(circle, transparent 0 36px, rgba(255,255,255,.12) 37px 38px, transparent 39px 62px) !important;
  filter: drop-shadow(0 0 26px rgba(var(--red-rgb),.24));
}
.visual-web .visual-panel {
  left:52px !important;
  right:auto !important;
  top:88px !important;
  bottom:auto !important;
  min-height:0 !important;
  width:235px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.visual-web .visual-panel strong {
  font-size: clamp(34px, 4.5vw, 50px) !important;
  line-height:.92 !important;
  letter-spacing:-.065em !important;
  text-shadow:0 16px 34px rgba(0,0,0,.35);
}
.visual-web .visual-panel em {
  display:inline-block !important;
  margin-top:28px !important;
  padding:13px 18px !important;
  color:#fff !important;
  letter-spacing:0 !important;
  font-size:13px !important;
  text-transform:none !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.035) !important;
}
.visual-web .visual-panel::after,
.visual-web .mini-lines { display:none !important; }

.visual-seo .rank-card {
  left:60px !important;
  top:94px !important;
  width:132px !important;
  height:132px !important;
  padding:18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
.visual-seo .rank-card::before {
  content:"";
  width:25px;
  height:25px;
  margin-bottom:8px;
  background:#fff;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.visual-seo .rank-card b { font-size:42px !important; }
.visual-seo .rank-card span { margin-top:3px; }
.visual-seo .rank-lines { left:234px !important; right:54px !important; top:100px !important; gap:13px !important; }
.visual-seo .rank-lines i {
  position:relative;
  height:15px !important;
  border-color:rgba(255,255,255,.12) !important;
  background:linear-gradient(90deg, rgba(var(--red-rgb),.90), rgba(255,255,255,.26) 75%, rgba(255,255,255,.08) 75%) !important;
}

.visual-care .pulse-shield {
  left:64px !important;
  top:94px !important;
  width:132px !important;
  height:132px !important;
}
.visual-care .status-stack {
  right:58px !important;
  top:92px !important;
  gap:16px !important;
}
.visual-care .status-stack span {
  font-size:14px !important;
  font-weight:950 !important;
  line-height:1.2 !important;
}
.visual-care::before {
  left:64px !important;
  right:58px !important;
  bottom:42px !important;
  max-width:none !important;
  padding:16px 20px 16px 54px !important;
  font-size:14px !important;
  line-height:1.5 !important;
}
.visual-care::after {
  content:"" !important;
  position:absolute !important;
  left:86px !important;
  bottom:57px !important;
  width:10px !important;
  height:10px !important;
  background:var(--red) !important;
  z-index:4 !important;
  filter:none !important;
}

/* FAQ answer card: visible browser graphic + icon and title in the same row */
.answer-card {
  display:grid !important;
  grid-template-columns:72px 1fr !important;
  align-items:start !important;
  gap:0 22px !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#fff !important;
  position:sticky;
}
.answer-card .answer-visual {
  grid-column:1 / -1 !important;
  height:168px !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(17,17,17,.10) !important;
  background:
    radial-gradient(circle at 22% 46%, rgba(var(--red-rgb),.30), transparent 35%),
    linear-gradient(135deg,#101010,#2a2929) !important;
  overflow:hidden !important;
}
.answer-card .answer-visual::before {
  content:"";
  position:absolute;
  left:32px; right:32px; top:30px; height:112px;
  border:1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0 34px, transparent 34px),
    radial-gradient(circle at 20px 17px, rgba(255,255,255,.42) 0 4px, transparent 4.5px),
    radial-gradient(circle at 40px 17px, rgba(255,255,255,.31) 0 4px, transparent 4.5px),
    radial-gradient(circle at 60px 17px, rgba(255,255,255,.22) 0 4px, transparent 4.5px),
    linear-gradient(90deg, transparent 0 26%, rgba(255,255,255,.20) 26% 72%, transparent 72%) 0 54px/100% 11px no-repeat,
    linear-gradient(90deg, transparent 0 26%, rgba(var(--red-rgb),.45) 26% 88%, transparent 88%) 0 78px/100% 13px no-repeat,
    linear-gradient(90deg, transparent 0 26%, rgba(255,255,255,.14) 26% 58%, transparent 58%) 0 104px/100% 10px no-repeat;
}
.answer-card .answer-window { display:none !important; }
.answer-card .answer-bubble {
  left:62px !important;
  top:64px !important;
  width:70px !important;
  height:70px !important;
  font-size:42px !important;
  z-index:4 !important;
  background:var(--red) !important;
  color:#fff !important;
  box-shadow:0 20px 55px rgba(var(--red-rgb),.26) !important;
}
.answer-card .answer-visual i { display:none !important; }
.answer-card > .icon-badge {
  grid-column:1 !important;
  grid-row:2 !important;
  margin:34px 0 0 34px !important;
  width:58px !important;
  height:58px !important;
}
.answer-card h3 {
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:center !important;
  margin:34px 34px 0 0 !important;
  font-size:23px !important;
  line-height:1.1 !important;
  letter-spacing:-.035em !important;
}
.answer-card p {
  grid-column:2 !important;
  margin:10px 34px 22px 0 !important;
  color:#666 !important;
  line-height:1.55 !important;
}
.answer-card p strong { display:block; color:#333; margin-bottom:2px; font-weight:500; }
.answer-card p span { display:block; }
.answer-card .btn {
  grid-column:2 !important;
  justify-self:start !important;
  margin:0 34px 38px 0 !important;
}

@media (max-width:980px){
  .hero-dashboard{position:absolute!important;right:0!important;top:0!important;width:100%!important;transform:rotate(-1.5deg)!important;margin-bottom:0!important;opacity:.55!important;}
  .lead-card{margin-top:132px!important;}
  .hero-bg::before{right:-12%!important;width:86vw!important;min-width:0!important;opacity:.18!important;}
  .hero-bg::after{display:none!important;}
}
@media (max-width:720px){
  .hero-dashboard{height:205px!important;opacity:.42!important;}
  .lead-card{margin-top:92px!important;}
  .showcase-media{min-height:245px!important;margin:16px 16px 0!important;}
  .visual-web .visual-panel{left:28px!important;top:78px!important;width:188px!important;}
  .visual-web .visual-panel strong{font-size:31px!important;}
  .visual-web::after{right:24px!important;top:88px!important;width:118px!important;height:118px!important;}
  .visual-seo .rank-card{left:28px!important;top:76px!important;width:104px!important;height:104px!important;}
  .visual-seo .rank-card b{font-size:34px!important;}
  .visual-seo .rank-lines{left:154px!important;right:24px!important;top:84px!important;gap:10px!important;}
  .visual-care .pulse-shield{left:28px!important;top:78px!important;width:96px!important;height:96px!important;}
  .visual-care .status-stack{left:150px!important;right:20px!important;top:82px!important;gap:10px!important;}
  .visual-care .status-stack span{font-size:12px!important;}
  .visual-care::before{left:28px!important;right:24px!important;bottom:22px!important;font-size:12px!important;padding:12px 14px 12px 40px!important;}
  .visual-care::after{left:43px!important;bottom:37px!important;}
  .answer-card{grid-template-columns:60px 1fr!important;}
  .answer-card .answer-visual{height:142px!important;}
  .answer-card .answer-bubble{left:44px!important;top:57px!important;width:58px!important;height:58px!important;font-size:34px!important;}
  .answer-card > .icon-badge{margin:26px 0 0 24px!important;width:50px!important;height:50px!important;}
  .answer-card h3{margin:28px 24px 0 8px!important;font-size:21px!important;}
  .answer-card p{margin:8px 24px 20px 8px!important;font-size:15px!important;}
  .answer-card .btn{margin:0 24px 30px 8px!important;}
}

/* V23 HOME PREMIUM GRAPHICS - direct HTML/CSS polish */
.hero.dark-section {
  background:
    radial-gradient(circle at 74% 18%, rgba(var(--red-rgb),.16), transparent 28%),
    radial-gradient(circle at 18% 78%, rgba(var(--red-rgb),.10), transparent 24%),
    linear-gradient(135deg, #090909 0%, #151515 48%, #0b0b0b 100%) !important;
}
.hero-bg {
  background:
    linear-gradient(90deg, rgba(9,9,9,.99) 0%, rgba(9,9,9,.94) 43%, rgba(9,9,9,.70) 100%),
    radial-gradient(circle at 74% 22%, rgba(var(--red-rgb),.18), transparent 25%),
    linear-gradient(135deg, #0b0b0b, #1a1a1a) !important;
}
.hero-bg::before,
.hero-bg::after { display:none !important; }
.hero-panel { min-height: 620px !important; }
.project-preview-stack.hero-dashboard {
  position:absolute !important;
  inset: 22px -110px auto -30px !important;
  width:auto !important;
  height: 430px !important;
  opacity: 1 !important;
  transform:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  z-index:1 !important;
}
.project-preview-stack::before,
.project-preview-stack::after { display:none !important; }
.project-window {
  position:absolute;
  width: 430px;
  height: 300px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(23,23,23,.86);
  box-shadow: 0 50px 120px rgba(0,0,0,.45);
  overflow:hidden;
  backdrop-filter: blur(8px);
}
.project-window::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(115deg, transparent 0 47%, rgba(255,255,255,.055) 47% 50%, transparent 50%);
  pointer-events:none;
}
.project-top {
  height:40px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:18px;
  background:rgba(255,255,255,.055);
}
.project-top span { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); }
.project-screen {
  position:absolute;
  left:26px;
  right:26px;
  top:68px;
  bottom:28px;
  border:1px solid rgba(255,255,255,.10);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(180deg, transparent 0 45%, rgba(0,0,0,.64) 100%),
    radial-gradient(circle at 24% 24%, rgba(var(--red-rgb),.42), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
}
.project-screen strong { color:#fff; font-size:30px; line-height:.95; letter-spacing:-.06em; max-width:230px; }
.project-screen em { margin-top:10px; color:rgba(255,255,255,.72); font-size:12px; font-style:normal; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.project-screen i { position:absolute; right:28px; height:12px; background:rgba(255,255,255,.16); display:block; }
.project-screen i:nth-of-type(1){ top:38px; width:185px; background:rgba(var(--red-rgb),.72); }
.project-screen i:nth-of-type(2){ top:68px; width:140px; }
.project-screen i:nth-of-type(3){ top:96px; width:210px; }
.project-window-one { right:168px; top:0; transform:rotate(-4deg); z-index:1; opacity:.7; }
.project-window-two { right:70px; top:64px; transform:rotate(2deg); z-index:2; opacity:.86; }
.project-window-three { right:0; top:122px; transform:rotate(-1deg); z-index:3; }
.project-screen-estate { background:
  linear-gradient(180deg, transparent 0 44%, rgba(0,0,0,.68) 100%),
  linear-gradient(135deg, rgba(var(--red-rgb),.44), transparent 42%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 42px),
  linear-gradient(135deg, #171717, #2c2c2c); }
.project-screen-dental { background:
  linear-gradient(180deg, transparent 0 44%, rgba(0,0,0,.68) 100%),
  radial-gradient(circle at 72% 28%, rgba(56,152,236,.24), transparent 28%),
  linear-gradient(135deg, #1a1a1a, #303030); }
.project-screen-media { background:
  linear-gradient(180deg, transparent 0 44%, rgba(0,0,0,.68) 100%),
  radial-gradient(circle at 56% 30%, rgba(var(--red-rgb),.50), transparent 26%),
  linear-gradient(135deg, #111, #2a2929); }
.lead-card { z-index:6 !important; margin-top:170px !important; background:rgba(31,31,31,.92) !important; }

/* Showcase slider - compact premium cards */
.services-showcase {
  min-height: 660px !important;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 45px 120px rgba(0,0,0,.35);
}
.showcase-media {
  min-height: 292px !important;
  margin: 26px 26px 0 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 20% 36%, rgba(var(--red-rgb),.22), transparent 30%),
    radial-gradient(circle at 76% 34%, rgba(255,255,255,.09), transparent 20%),
    linear-gradient(135deg, #090a0b, #202122 62%, #0d0d0e) !important;
  overflow:hidden !important;
}
.showcase-media .browser-frame {
  position:absolute !important;
  top:20px !important;
  left:24px !important;
  right:24px !important;
  height:40px !important;
  border:1px solid rgba(255,255,255,.11) !important;
  background:rgba(0,0,0,.18) !important;
  z-index:5 !important;
}
.visual-web .mini-alert { display:none !important; }
.visual-web .visual-panel {
  left:50px !important;
  top:92px !important;
  bottom:auto !important;
  right:auto !important;
  width:250px !important;
  min-height:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:5 !important;
}
.visual-web .visual-panel strong {
  font-size: clamp(38px, 4.6vw, 55px) !important;
  line-height:.88 !important;
  letter-spacing:-.07em !important;
}
.visual-web .visual-panel em {
  display:inline-flex !important;
  margin-top:22px !important;
  padding:12px 17px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  font-size:13px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  background:rgba(255,255,255,.04) !important;
}
.visual-web::after {
  content:"" !important;
  position:absolute !important;
  z-index:3 !important;
  right:58px !important;
  top:88px !important;
  width:178px !important;
  height:178px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle, rgba(var(--red-rgb),1) 0 16px, rgba(var(--red-rgb),.16) 17px 29px, transparent 30px),
    radial-gradient(circle at 82% 28%, #3898ec 0 5px, transparent 6px),
    radial-gradient(circle at 24% 74%, #3898ec 0 5px, transparent 6px),
    radial-gradient(circle at 16% 18%, var(--red) 0 5px, transparent 6px),
    radial-gradient(circle at 75% 78%, var(--red) 0 5px, transparent 6px),
    repeating-radial-gradient(circle, transparent 0 38px, rgba(255,255,255,.12) 39px 40px, transparent 41px 65px) !important;
  filter: drop-shadow(0 0 28px rgba(var(--red-rgb),.30));
}
.visual-seo .rank-card {
  left:56px !important;
  top:88px !important;
  width:136px !important;
  height:136px !important;
  padding:16px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.visual-seo .rank-card b { font-size:42px !important; line-height:.78 !important; }
.visual-seo .rank-card span { font-size:11px !important; letter-spacing:.09em !important; line-height:1.05 !important; }
.visual-seo .rank-lines { left:232px !important; top:100px !important; right:56px !important; gap:14px !important; }
.visual-seo .rank-lines i { height:15px !important; }
.visual-care .pulse-shield { left:58px !important; top:88px !important; width:136px !important; height:136px !important; }
.visual-care .status-stack { top:98px !important; right:58px !important; gap:16px !important; }
.visual-care .status-stack span { font-size:14px !important; line-height:1.15 !important; }
.visual-care::before { display:none !important; }
.visual-care::after { display:none !important; }
.showcase-copy { padding: clamp(30px, 3.5vw, 44px) !important; }
.showcase-copy h2 { font-size: clamp(34px, 4vw, 50px) !important; max-width: 640px !important; }
.showcase-copy p:last-child { max-width: 720px !important; font-size: 16px !important; line-height:1.65 !important; }
.slider-controls { bottom: 28px !important; }

/* FAQ answer card - cleaner two-column card */
.answer-card {
  display:grid !important;
  grid-template-columns: 48% 1fr !important;
  grid-template-rows: auto !important;
  gap:0 !important;
  padding:0 !important;
  align-items:stretch !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow: 0 38px 90px rgba(0,0,0,.10) !important;
}
.answer-card .answer-visual {
  grid-column:1 !important;
  grid-row: 1 / span 4 !important;
  height:auto !important;
  min-height: 100% !important;
  margin:0 !important;
  border:0 !important;
  border-right:1px solid rgba(17,17,17,.08) !important;
  background:
    radial-gradient(circle at 24% 52%, rgba(var(--red-rgb),.35), transparent 35%),
    linear-gradient(135deg, #101010, #292929) !important;
}
.answer-card .answer-visual::before {
  left:28px !important; right:28px !important; top:26px !important; bottom:26px !important; height:auto !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0 38px, transparent 38px),
    radial-gradient(circle at 20px 19px, rgba(255,255,255,.45) 0 4px, transparent 4.5px),
    radial-gradient(circle at 42px 19px, rgba(255,255,255,.32) 0 4px, transparent 4.5px),
    radial-gradient(circle at 64px 19px, rgba(255,255,255,.24) 0 4px, transparent 4.5px),
    linear-gradient(90deg, transparent 0 28%, rgba(255,255,255,.18) 28% 80%, transparent 80%) 0 68px/100% 12px no-repeat,
    linear-gradient(90deg, transparent 0 28%, rgba(var(--red-rgb),.55) 28% 88%, transparent 88%) 0 96px/100% 16px no-repeat,
    linear-gradient(90deg, transparent 0 28%, rgba(255,255,255,.14) 28% 66%, transparent 66%) 0 132px/100% 12px no-repeat !important;
}
.answer-card .answer-bubble {
  left:56px !important; top:82px !important; width:74px !important; height:74px !important; font-size:42px !important;
}
.answer-card > .icon-badge {
  grid-column:2 !important;
  grid-row:1 !important;
  width:56px !important;
  height:56px !important;
  margin:44px 0 0 44px !important;
  align-self:start !important;
}
.answer-card h3 {
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:start !important;
  margin:51px 36px 0 116px !important;
  font-size:26px !important;
  line-height:1.05 !important;
}
.answer-card p {
  grid-column:2 !important;
  margin:16px 44px 22px !important;
  font-size:16px !important;
  line-height:1.55 !important;
}
.answer-card .btn { grid-column:2 !important; margin:0 44px 44px !important; justify-self:start !important; }

@media (max-width: 1180px){
  .project-preview-stack.hero-dashboard { inset:22px -40px auto 0 !important; }
  .project-window { width:380px; height:270px; }
  .project-window-one{right:120px;} .project-window-two{right:46px;} .project-window-three{right:0;}
}
@media (max-width:980px){
  .hero-panel{min-height:600px!important;}
  .project-preview-stack.hero-dashboard{position:absolute!important;inset:0 0 auto 0!important;height:300px!important;opacity:.58!important;}
  .project-window{width:360px;height:240px;}
  .project-window-one{right:120px;top:0}.project-window-two{right:56px;top:45px}.project-window-three{right:0;top:90px}
  .lead-card{margin-top:210px!important;}
  .answer-card{grid-template-columns:1fr!important;}
  .answer-card .answer-visual{grid-column:1!important;grid-row:1!important;min-height:180px!important;border-right:0!important;border-bottom:1px solid rgba(17,17,17,.08)!important;}
  .answer-card > .icon-badge{grid-column:1!important;grid-row:2!important;margin:34px 0 0 34px!important;}
  .answer-card h3{grid-column:1!important;grid-row:2!important;margin:42px 30px 0 104px!important;}
  .answer-card p{grid-column:1!important;margin:16px 34px 22px!important;}
  .answer-card .btn{grid-column:1!important;margin:0 34px 34px!important;}
}
@media (max-width:720px){
  .hero-panel{min-height:560px!important;}
  .project-preview-stack.hero-dashboard{height:260px!important;opacity:.40!important;}
  .project-window{width:300px;height:210px;}
  .project-window-one{right:70px;top:0}.project-window-two{right:26px;top:38px}.project-window-three{right:-18px;top:76px}
  .lead-card{margin-top:170px!important;}
  .showcase-media{min-height:250px!important;margin:16px 16px 0!important;}
  .visual-web .visual-panel{left:28px!important;top:82px!important;width:180px!important;}
  .visual-web .visual-panel strong{font-size:32px!important;}
  .visual-web::after{right:18px!important;top:92px!important;width:112px!important;height:112px!important;opacity:.82;}
  .visual-seo .rank-card{left:28px!important;top:84px!important;width:104px!important;height:104px!important;}
  .visual-seo .rank-lines{left:156px!important;right:24px!important;top:90px!important;gap:10px!important;}
  .visual-care .pulse-shield{left:28px!important;top:86px!important;width:102px!important;height:102px!important;}
  .visual-care .status-stack{right:22px!important;left:156px!important;top:90px!important;gap:10px!important;}
  .visual-care .status-stack span{font-size:12px!important;min-width:0!important;}
  .answer-card .answer-visual{min-height:150px!important;}
}

/* V24 HOME FINAL GRAPHICS POLISH - homepage only */
.home-v24-note { display:none; }
.hero.dark-section {
  background:
    radial-gradient(circle at 72% 18%, rgba(var(--red-rgb),.30), transparent 30%),
    radial-gradient(circle at 49% 51%, rgba(var(--red-rgb),.15), transparent 22%),
    radial-gradient(circle at 10% 76%, rgba(var(--red-rgb),.12), transparent 24%),
    linear-gradient(115deg, #080808 0%, #121212 54%, #090909 100%) !important;
}
.hero-bg {
  background:
    linear-gradient(90deg, rgba(8,8,8,.99) 0%, rgba(8,8,8,.94) 38%, rgba(8,8,8,.76) 100%),
    radial-gradient(circle at 76% 31%, rgba(var(--red-rgb),.24), transparent 28%),
    linear-gradient(135deg, #090909, #171717) !important;
}
.hero-bg::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  right:-9% !important;
  top:10% !important;
  width:min(52vw, 780px) !important;
  height:min(42vw, 560px) !important;
  min-width:560px !important;
  transform:rotate(4deg) !important;
  opacity:.34 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 70px 160px rgba(0,0,0,.62) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0 46px, rgba(0,0,0,.20) 46px 47px, transparent 47px),
    radial-gradient(circle at 26px 23px, rgba(255,255,255,.45) 0 4px, transparent 4.7px),
    radial-gradient(circle at 48px 23px, rgba(255,255,255,.30) 0 4px, transparent 4.7px),
    radial-gradient(circle at 70px 23px, rgba(255,255,255,.20) 0 4px, transparent 4.7px),
    linear-gradient(90deg, transparent 0 12%, rgba(var(--red-rgb),.62) 12% 70%, transparent 70%) 0 105px / 100% 30px no-repeat,
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.18) 12% 55%, transparent 55%) 0 158px / 100% 13px no-repeat,
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.12) 12% 74%, transparent 74%) 0 188px / 100% 13px no-repeat,
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.10) 12% 45%, transparent 45%) 0 218px / 100% 13px no-repeat,
    radial-gradient(circle at 82% 58%, rgba(255,255,255,.12), transparent 24%),
    radial-gradient(circle at 22% 42%, rgba(var(--red-rgb),.32), transparent 30%),
    linear-gradient(135deg, #111, #262626) !important;
}
.hero-bg::after {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:-7% !important;
  top:26% !important;
  width:360px !important;
  height:250px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  opacity:.28 !important;
  transform:rotate(-2deg) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0 38px, transparent 38px),
    linear-gradient(90deg, rgba(var(--red-rgb),.42) 0 34%, transparent 34%) 0 78px/100% 20px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.13) 0 50%, transparent 50%) 0 128px/100% 12px no-repeat,
    linear-gradient(90deg, rgba(var(--red-rgb),.65) 0 66%, transparent 66%) 0 158px/100% 18px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.10) 0 42%, transparent 42%) 0 204px/100% 12px no-repeat,
    linear-gradient(135deg, #111, #202020) !important;
}
.project-preview-stack.hero-dashboard {
  inset: 18px -150px auto -8px !important;
  height: 470px !important;
  opacity: 1 !important;
  pointer-events:none !important;
}
.project-window {
  border-color:rgba(255,255,255,.18) !important;
  background:rgba(17,17,17,.74) !important;
  box-shadow:0 55px 130px rgba(0,0,0,.54) !important;
}
.project-window-one { right:252px !important; top:8px !important; transform:rotate(-5deg) !important; opacity:.62 !important; }
.project-window-two { right:114px !important; top:72px !important; transform:rotate(2.5deg) !important; opacity:.82 !important; }
.project-window-three { right:20px !important; top:142px !important; transform:rotate(-1deg) !important; opacity:.95 !important; }
.project-screen strong { font-size:26px !important; }
.project-screen i:nth-of-type(1){background:rgba(var(--red-rgb),.78)!important;}
.lead-card { margin-top: 184px !important; background:rgba(29,29,29,.90)!important; border-color:rgba(255,255,255,.18)!important; }

/* Homepage service slider: stronger, compact, no clipped text */
.services-showcase { min-height: 650px !important; overflow:hidden !important; }
.showcase-media {
  min-height: 300px !important;
  margin: 28px 28px 0 !important;
  border-radius: 0 !important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:
    radial-gradient(circle at 17% 50%, rgba(var(--red-rgb),.32), transparent 30%),
    radial-gradient(circle at 78% 42%, rgba(255,255,255,.10), transparent 22%),
    linear-gradient(135deg, #08090a, #1d1e20 63%, #090909) !important;
}
.showcase-media .browser-frame { top:22px!important; left:26px!important; right:26px!important; height:42px!important; }
.visual-web .visual-panel { left:58px!important; top:100px!important; width:230px!important; }
.visual-web .visual-panel strong { font-size:clamp(32px,3.4vw,42px)!important; line-height:.93!important; letter-spacing:-.06em!important; }
.visual-web .visual-panel em { margin-top:24px!important; }
.visual-web::after {
  right:64px!important; top:90px!important; width:174px!important; height:174px!important; opacity:.95!important;
}
.visual-web::before {
  content:""!important; position:absolute!important; z-index:2!important; right:56px!important; top:78px!important; width:190px!important; height:190px!important; border-radius:50%!important;
  background:repeating-radial-gradient(circle, transparent 0 34px, rgba(255,255,255,.11) 35px 36px, transparent 37px 62px)!important;
  pointer-events:none!important;
}
.visual-seo .rank-card { left:58px!important; top:92px!important; width:130px!important; height:130px!important; }
.visual-seo .rank-lines { left:238px!important; top:96px!important; right:62px!important; gap:15px!important; }
.visual-care .pulse-shield { left:60px!important; top:92px!important; width:132px!important; height:132px!important; }
.visual-care .status-stack { top:100px!important; right:66px!important; left:auto!important; gap:15px!important; }
.showcase-copy { padding: 32px 44px 56px !important; }
.showcase-copy h2 { font-size:clamp(35px,3.45vw,48px)!important; max-width:690px!important; }
.showcase-copy p:last-child { max-width:740px!important; font-size:16px!important; }

/* FAQ helper card on homepage */
.faq-grid .answer-card {
  display:grid!important;
  grid-template-columns:1fr!important;
  padding:0!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid rgba(17,17,17,.10)!important;
  box-shadow:0 36px 90px rgba(0,0,0,.10)!important;
}
.faq-grid .answer-card .answer-visual {
  grid-column:1!important; grid-row:1!important;
  height:192px!important; min-height:0!important; width:100%!important; margin:0!important; border:0!important; border-bottom:1px solid rgba(17,17,17,.08)!important;
  background:
    radial-gradient(circle at 22% 58%, rgba(var(--red-rgb),.36), transparent 36%),
    linear-gradient(135deg, #101010, #272727)!important;
}
.faq-grid .answer-card .answer-visual::before {
  content:""!important; position:absolute!important; left:32px!important; right:32px!important; top:32px!important; bottom:32px!important; height:auto!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0 38px, transparent 38px),
    radial-gradient(circle at 22px 19px, rgba(255,255,255,.45) 0 4px, transparent 4.7px),
    radial-gradient(circle at 44px 19px, rgba(255,255,255,.32) 0 4px, transparent 4.7px),
    radial-gradient(circle at 66px 19px, rgba(255,255,255,.23) 0 4px, transparent 4.7px),
    linear-gradient(90deg, transparent 0 34%, rgba(255,255,255,.18) 34% 70%, transparent 70%) 0 68px/100% 12px no-repeat,
    linear-gradient(90deg, transparent 0 34%, rgba(var(--red-rgb),.72) 34% 86%, transparent 86%) 0 96px/100% 17px no-repeat,
    linear-gradient(90deg, transparent 0 34%, rgba(255,255,255,.12) 34% 62%, transparent 62%) 0 132px/100% 12px no-repeat!important;
}
.faq-grid .answer-card .answer-window { display:none!important; }
.faq-grid .answer-card .answer-bubble {
  z-index:3!important; left:62px!important; top:78px!important; width:70px!important; height:70px!important; font-size:40px!important; color:#fff!important; background:var(--red)!important; display:grid!important; place-items:center!important; font-weight:950!important;
}
.faq-grid .answer-card i { display:none!important; }
.faq-grid .answer-card > .icon-badge {
  grid-column:1!important; grid-row:2!important; margin:32px 0 0 34px!important; width:58px!important; height:58px!important; align-self:start!important;
}
.faq-grid .answer-card h3 {
  grid-column:1!important; grid-row:2!important; margin:38px 30px 0 110px!important; font-size:clamp(22px,2.2vw,30px)!important; line-height:1.02!important; max-width:260px!important;
}
.faq-grid .answer-card p { grid-column:1!important; margin:18px 34px 24px 110px!important; font-size:16px!important; line-height:1.58!important; }
.faq-grid .answer-card .btn { grid-column:1!important; margin:0 34px 36px 110px!important; justify-self:start!important; }

@media (max-width:1100px){
  .project-preview-stack.hero-dashboard{inset:12px -65px auto 0!important;height:385px!important;opacity:.74!important;}
  .project-window{width:360px!important;height:250px!important;}
  .project-window-one{right:130px!important}.project-window-two{right:56px!important}.project-window-three{right:0!important;}
}
@media (max-width:980px){
  .hero-bg::before{display:block!important;right:-34%!important;top:10%!important;opacity:.18!important;min-width:0!important;width:112vw!important;height:360px!important;}
  .hero-bg::after{display:none!important;}
  .project-preview-stack.hero-dashboard{height:280px!important;opacity:.42!important;}
  .lead-card{margin-top:190px!important;}
}
@media (max-width:720px){
  .project-preview-stack.hero-dashboard{height:230px!important;opacity:.26!important;}
  .project-window{width:300px!important;height:205px!important;}
  .project-window-one{right:70px!important;top:0!important}.project-window-two{right:24px!important;top:36px!important}.project-window-three{right:-18px!important;top:72px!important;}
  .lead-card{margin-top:150px!important;}
  .services-showcase{min-height:590px!important;}
  .showcase-media{min-height:258px!important;margin:16px 16px 0!important;}
  .visual-web .visual-panel{left:30px!important;top:84px!important;width:190px!important;}
  .visual-web .visual-panel strong{font-size:32px!important;}
  .visual-web::before{right:20px!important;top:92px!important;width:112px!important;height:112px!important;opacity:.8!important;}
  .visual-web::after{right:20px!important;top:92px!important;width:112px!important;height:112px!important;opacity:.72!important;}
  .visual-seo .rank-card{left:28px!important;top:86px!important;width:104px!important;height:104px!important;}
  .visual-seo .rank-lines{left:158px!important;right:24px!important;top:92px!important;gap:10px!important;}
  .visual-care .pulse-shield{left:28px!important;top:88px!important;width:104px!important;height:104px!important;}
  .visual-care .status-stack{left:158px!important;right:24px!important;top:92px!important;gap:10px!important;}
  .visual-care .status-stack span{font-size:12px!important;}
  .faq-grid .answer-card .answer-visual{height:160px!important;}
  .faq-grid .answer-card .answer-bubble{left:48px!important;top:68px!important;width:58px!important;height:58px!important;font-size:34px!important;}
  .faq-grid .answer-card > .icon-badge{margin-left:26px!important;}
  .faq-grid .answer-card h3{margin-left:94px!important;margin-right:22px!important;font-size:22px!important;}
  .faq-grid .answer-card p{margin-left:26px!important;margin-right:26px!important;}
  .faq-grid .answer-card .btn{margin-left:26px!important;}
}

/* === V25 home premium graphics rebuild === */
body.home-page .hero {
  background:
    radial-gradient(circle at 76% 25%, rgba(var(--red-rgb),.20), transparent 28%),
    radial-gradient(circle at 9% 52%, rgba(var(--red-rgb),.16), transparent 28%),
    linear-gradient(115deg, #101010 0%, #151515 48%, #242424 100%) !important;
}
body.home-page .hero-bg {
  background:
    radial-gradient(circle at 72% 28%, rgba(var(--red-rgb),.22), transparent 26%),
    radial-gradient(circle at 18% 62%, rgba(var(--red-rgb),.10), transparent 30%),
    linear-gradient(90deg, rgba(17,17,17,.98), rgba(17,17,17,.86) 48%, rgba(17,17,17,.66)) !important;
}
body.home-page .hero-bg::before {
  right: 4% !important;
  top: 12% !important;
  width: min(50vw, 820px) !important;
  height: min(35vw, 520px) !important;
  aspect-ratio: auto !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  transform: perspective(1100px) rotateY(-10deg) rotateZ(-2deg) !important;
  transform-origin: center !important;
  opacity: .62 !important;
  box-shadow: 0 80px 160px rgba(0,0,0,.50) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075) 0 42px, transparent 42px),
    radial-gradient(circle at 44px 22px, rgba(255,255,255,.42) 0 4px, transparent 5px),
    radial-gradient(circle at 66px 22px, rgba(255,255,255,.28) 0 4px, transparent 5px),
    radial-gradient(circle at 88px 22px, rgba(255,255,255,.22) 0 4px, transparent 5px),
    linear-gradient(90deg, transparent 0 12%, rgba(var(--red-rgb),.55) 12% 74%, transparent 74%) 0 92px / 100% 26px no-repeat,
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.13) 12% 58%, transparent 58%) 0 146px / 100% 14px no-repeat,
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.09) 12% 47%, transparent 47%) 0 184px / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 56px),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 38%, rgba(var(--red-rgb),.13) 72%, transparent),
    #181818 !important;
}
body.home-page .hero-bg::after {
  left: auto !important;
  right: -8% !important;
  bottom: -18% !important;
  width: 620px !important;
  height: 620px !important;
  opacity: .74 !important;
  background: radial-gradient(circle, rgba(var(--red-rgb),.34), transparent 62%) !important;
}
body.home-page .project-preview-stack.hero-dashboard {
  inset: 34px -38px auto 0 !important;
  height: 430px !important;
  opacity: .92 !important;
  pointer-events: none !important;
}
body.home-page .project-window {
  border: 1px solid rgba(255,255,255,.13) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)) !important;
  box-shadow: 0 48px 110px rgba(0,0,0,.36) !important;
  backdrop-filter: blur(8px) !important;
}
body.home-page .project-screen {
  background:
    radial-gradient(circle at 70% 20%, rgba(var(--red-rgb),.22), transparent 32%),
    linear-gradient(90deg, transparent 0 10%, rgba(var(--red-rgb),.55) 10% 68%, transparent 68%) 0 80px/100% 22px no-repeat,
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.12) 10% 54%, transparent 54%) 0 132px/100% 13px no-repeat,
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.08) 10% 44%, transparent 44%) 0 164px/100% 13px no-repeat,
    #141414 !important;
}

body.home-page .services-showcase {
  min-height: 680px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--red-rgb),.28), transparent 33%),
    radial-gradient(circle at 86% 26%, rgba(var(--red-rgb),.18), transparent 29%),
    linear-gradient(145deg, #101010, #1b1b1b 64%, #0e0e0e) !important;
}
body.home-page .services-showcase::before {
  opacity: .46 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.036) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.036) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
}
body.home-page .showcase-media {
  min-height: 360px !important;
  margin: 38px 54px 0 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background:
    radial-gradient(circle at 82% 54%, rgba(var(--red-rgb),.26), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.07) 0 54px, transparent 54px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 52px),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 45px 120px rgba(0,0,0,.36) !important;
}
body.home-page .showcase-media::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(114deg, transparent 0 52%, rgba(255,255,255,.055) 52% 54%, transparent 54%),
    radial-gradient(circle at 78% 54%, rgba(var(--red-rgb),.22), transparent 35%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
body.home-page .showcase-media::after {
  inset: auto 36px 28px auto !important;
  width: 160px !important;
  height: 128px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(var(--red-rgb),.65), rgba(var(--red-rgb),0) 64%) 28px 34px/82px 2px no-repeat,
    linear-gradient(135deg, rgba(var(--red-rgb),.25), rgba(255,255,255,.06)) !important;
  filter: none !important;
  opacity: .72 !important;
  z-index: 2 !important;
}
body.home-page .showcase-media .browser-frame {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 54px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.20) !important;
  padding-left: 30px !important;
  gap: 10px !important;
}
body.home-page .showcase-media .browser-frame span:first-child { background: var(--red) !important; }
body.home-page .visual-web .mini-alert {
  position: absolute !important;
  left: 34px !important;
  top: 112px !important;
  width: 38px !important;
  height: 92px !important;
  font-size: 0 !important;
  background:
    radial-gradient(circle at 9px 9px, var(--red) 0 4px, transparent 5px),
    radial-gradient(circle at 29px 9px, var(--red) 0 4px, transparent 5px),
    radial-gradient(circle at 9px 29px, var(--red) 0 4px, transparent 5px),
    radial-gradient(circle at 29px 29px, var(--red) 0 4px, transparent 5px) !important;
  box-shadow: none !important;
  border: 0 !important;
  opacity: .95 !important;
  z-index: 3 !important;
}
body.home-page .visual-web .mini-lines {
  position: absolute !important;
  right: 60px !important;
  top: 98px !important;
  width: 190px !important;
  height: 190px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--red-rgb),.8) 0 13px, rgba(var(--red-rgb),.22) 14px 34px, transparent 35px),
    radial-gradient(circle, transparent 0 52px, rgba(255,255,255,.12) 53px 54px, transparent 55px 90px, rgba(255,255,255,.10) 91px 92px, transparent 93px) !important;
  display: block !important;
  z-index: 2 !important;
}
body.home-page .visual-web .mini-lines i {
  position:absolute !important;
  display:block!important;
  width:10px!important;height:10px!important;border-radius:50%!important;border:0!important;background:var(--red)!important;
}
body.home-page .visual-web .mini-lines i:nth-child(1){left:24px!important;top:58px!important;background:var(--red)!important;}
body.home-page .visual-web .mini-lines i:nth-child(2){right:30px!important;top:78px!important;background:#3898ec!important;}
body.home-page .visual-web .mini-lines i:nth-child(3){left:70px!important;bottom:24px!important;background:#3898ec!important;}
body.home-page .visual-web .visual-panel {
  left: 116px !important;
  top: 110px !important;
  right: auto !important;
  bottom: auto !important;
  width: min(46%, 330px) !important;
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.home-page .visual-web .visual-panel strong {
  font-size: clamp(42px, 5.4vw, 68px) !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
  text-shadow: 0 24px 60px rgba(0,0,0,.48) !important;
}
body.home-page .visual-web .visual-panel strong::after {
  content:"";
  display:inline-block;
  width:.18em;height:.18em;margin-left:.06em;border-radius:50%;background:var(--red);
  transform: translateY(.08em);
}
body.home-page .visual-web .visual-panel em {
  width: fit-content !important;
  margin-top: 28px !important;
  padding: 17px 24px !important;
  color: var(--white) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 15px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: 0 0 0 1px rgba(var(--red-rgb),.18), 0 20px 48px rgba(var(--red-rgb),.13) !important;
}
body.home-page .visual-web .visual-panel em::before { content:"↗"; color:var(--red); margin-right:14px; font-size:20px; }

body.home-page .visual-seo { justify-content: flex-start !important; gap: 44px !important; padding-left: 64px !important; }
body.home-page .visual-seo .rank-card { width: 154px !important; height: 154px !important; border-radius: 0 !important; }
body.home-page .visual-seo .rank-card b { font-size: 49px !important; }
body.home-page .visual-seo .rank-lines { width: 48% !important; max-width: 320px !important; gap: 16px !important; }
body.home-page .visual-seo .rank-lines i { height: 14px !important; background: linear-gradient(90deg, var(--red), rgba(255,255,255,.32)) !important; }
body.home-page .visual-seo .rank-lines i:nth-child(1){width:100%!important;}
body.home-page .visual-seo .rank-lines i:nth-child(2){width:84%!important;}
body.home-page .visual-seo .rank-lines i:nth-child(3){width:66%!important;}
body.home-page .visual-seo .rank-lines i:nth-child(4){width:48%!important;}

body.home-page .visual-care { display:flex!important; align-items:center!important; justify-content:center!important; gap:52px!important; }
body.home-page .visual-care .pulse-shield { position:relative!important; left:auto!important; top:auto!important; width:150px!important; height:150px!important; }
body.home-page .visual-care .status-stack { position:relative!important; right:auto!important; bottom:auto!important; top:auto!important; left:auto!important; gap:16px!important; }
body.home-page .visual-care .status-stack span { position:relative!important; padding:0 0 0 38px!important; border:0!important; background:transparent!important; font-size:15px!important; color:#fff!important; }
body.home-page .visual-care .status-stack span::before { content:"✓"; position:absolute; left:0; top:50%; transform:translateY(-50%); width:24px; height:24px; display:grid; place-items:center; color:#34d399; border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.10); }

body.home-page .showcase-copy {
  padding: clamp(40px, 4.8vw, 64px) clamp(34px, 5.8vw, 76px) !important;
}
body.home-page .showcase-copy .eyebrow { letter-spacing:.18em!important; }
body.home-page .showcase-copy h2 {
  max-width: 760px !important;
  font-size: clamp(42px, 5.1vw, 72px) !important;
  line-height: .96 !important;
  letter-spacing: -.07em !important;
}
body.home-page .showcase-copy p:last-child { max-width: 720px !important; font-size: 17px !important; line-height: 1.65 !important; }
body.home-page .slider-controls { right: 54px !important; bottom: 44px !important; }

/* Homepage FAQ card rebuild */
body.home-page .faq-grid .answer-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(17,17,17,.11) !important;
  box-shadow: 0 42px 110px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
}
body.home-page .faq-grid .answer-card .answer-visual {
  height: 206px !important;
  min-height: 206px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(17,17,17,.08) !important;
  background:
    radial-gradient(circle at 20% 56%, rgba(var(--red-rgb),.38), transparent 34%),
    linear-gradient(135deg, #111, #292929) !important;
}
body.home-page .faq-grid .answer-card .answer-visual::before {
  left: 36px !important; right: 36px !important; top: 34px !important; bottom: 34px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0 42px, transparent 42px),
    radial-gradient(circle at 22px 21px, rgba(255,255,255,.50) 0 4px, transparent 5px),
    radial-gradient(circle at 45px 21px, rgba(255,255,255,.34) 0 4px, transparent 5px),
    radial-gradient(circle at 68px 21px, rgba(255,255,255,.25) 0 4px, transparent 5px),
    linear-gradient(90deg, transparent 0 33%, rgba(255,255,255,.14) 33% 60%, transparent 60%) 0 70px/100% 12px no-repeat,
    linear-gradient(90deg, transparent 0 33%, rgba(var(--red-rgb),.68) 33% 84%, transparent 84%) 0 100px/100% 17px no-repeat,
    linear-gradient(90deg, transparent 0 33%, rgba(255,255,255,.11) 33% 54%, transparent 54%) 0 136px/100% 12px no-repeat !important;
}
body.home-page .faq-grid .answer-card .answer-bubble { left: 66px !important; top: 86px !important; width: 76px !important; height: 76px !important; }
body.home-page .faq-grid .answer-card > .icon-badge { grid-row:2!important; grid-column:1!important; width:62px!important; height:62px!important; margin:34px 0 0 38px!important; }
body.home-page .faq-grid .answer-card h3 { grid-row:2!important; grid-column:1!important; margin:38px 36px 0 122px!important; max-width:none!important; font-size:clamp(24px,2.05vw,30px)!important; line-height:1.04!important; }
body.home-page .faq-grid .answer-card p { grid-column:1!important; margin:18px 38px 26px 122px!important; max-width:360px!important; font-size:16.5px!important; line-height:1.6!important; }
body.home-page .faq-grid .answer-card p strong { display:block!important; margin:0 0 4px!important; color:#111!important; font-weight:650!important; }
body.home-page .faq-grid .answer-card .btn { grid-column:1!important; margin:0 38px 38px 122px!important; }

@media (max-width: 980px) {
  body.home-page .showcase-media { margin: 24px 24px 0 !important; min-height: 320px !important; }
  body.home-page .visual-web .visual-panel { left: 86px !important; width: 48% !important; }
  body.home-page .visual-web .mini-lines { right: 34px !important; width: 150px !important; height:150px !important; }
  body.home-page .faq-grid .answer-card h3 { margin-left: 116px !important; }
  body.home-page .faq-grid .answer-card p, body.home-page .faq-grid .answer-card .btn { margin-left: 38px !important; }
}
@media (max-width: 720px) {
  body.home-page .services-showcase { min-height: 670px !important; }
  body.home-page .showcase-media { min-height: 290px !important; margin: 16px 16px 0 !important; border-radius: 14px !important; }
  body.home-page .visual-web .mini-alert { left: 24px !important; top: 92px !important; transform: scale(.82); transform-origin:left top; }
  body.home-page .visual-web .mini-lines { right: 20px !important; top: 92px !important; width: 112px !important; height: 112px !important; }
  body.home-page .visual-web .visual-panel { left: 70px !important; top: 94px !important; width: 54% !important; }
  body.home-page .visual-web .visual-panel strong { font-size: 35px !important; }
  body.home-page .visual-web .visual-panel em { padding: 12px 15px !important; font-size: 13px !important; margin-top: 18px !important; }
  body.home-page .visual-seo { padding-left: 26px !important; gap: 24px !important; }
  body.home-page .visual-seo .rank-card { width: 108px !important; height: 108px !important; }
  body.home-page .visual-seo .rank-card b { font-size: 34px !important; }
  body.home-page .visual-seo .rank-lines { width: calc(100% - 160px) !important; gap: 10px !important; }
  body.home-page .visual-care { gap: 22px !important; }
  body.home-page .visual-care .pulse-shield { width: 108px !important; height: 108px !important; }
  body.home-page .visual-care .pulse-shield svg { width: 54px!important; height:54px!important; }
  body.home-page .visual-care .status-stack span { font-size: 12px !important; padding-left: 30px !important; }
  body.home-page .showcase-copy { padding: 28px 26px 64px !important; }
  body.home-page .showcase-copy h2 { font-size: clamp(34px, 10vw, 48px) !important; }
  body.home-page .slider-controls { right: 26px !important; bottom: 28px !important; }
  body.home-page .faq-grid .answer-card .answer-visual { height: 170px !important; min-height: 170px !important; }
  body.home-page .faq-grid .answer-card .answer-bubble { left: 54px !important; top: 72px !important; width: 60px !important; height: 60px !important; font-size: 34px !important; }
  body.home-page .faq-grid .answer-card > .icon-badge { margin-left: 26px !important; }
  body.home-page .faq-grid .answer-card h3 { margin: 40px 24px 0 96px !important; font-size: 24px !important; }
  body.home-page .faq-grid .answer-card p, body.home-page .faq-grid .answer-card .btn { margin-left: 26px !important; margin-right: 26px !important; }
}