{"id":4002,"date":"2025-07-14T13:09:13","date_gmt":"2025-07-14T13:09:13","guid":{"rendered":"https:\/\/bscwebdesign.at\/services\/"},"modified":"2026-07-16T10:19:50","modified_gmt":"2026-07-16T10:19:50","slug":"services","status":"publish","type":"page","link":"https:\/\/bscwebdesign.at\/en\/services\/","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4002\" class=\"elementor elementor-4002 elementor-59\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9fffb7c e-con-full e-flex e-con e-parent\" data-id=\"9fffb7c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4767c04 elementor-widget elementor-widget-html\" data-id=\"4767c04\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n* {\n  font-family: 'Sora', sans-serif !important;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8567799 elementor-widget elementor-widget-html\" data-id=\"8567799\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- HERO SECTION -->\n<section class=\"hero-section\">\n\n  <!-- Dot grid background -->\n  <div class=\"hero-grid-bg\"><\/div>\n\n  <div class=\"hero-inner\">\n\n    <!-- Heading -->\n    <h1 class=\"hero-heading\">\n      Your digital presence<br>\n      <span class=\"hero-heading-accent\">makes the difference<\/span>\n    <\/h1>\n\n    <!-- Subline -->\n    <p class=\"hero-sub\">\n      It shapes whether people trust you, buy from you or get in touch.\n    <\/p>\n\n    <!-- Service anchor cards -->\n    <div class=\"hero-cards\">\n\n      <!-- Websites -->\n      <a href=\"#websites\" class=\"hero-card hero-card--first\">\n\n        <div class=\"hero-card-icon\">\n          <svg\n            width=\"36\"\n            height=\"36\"\n            viewBox=\"0 0 36 36\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.6\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"3\" y=\"5\" width=\"30\" height=\"24\" rx=\"3\"\/>\n            <line x1=\"3\" y1=\"12\" x2=\"33\" y2=\"12\"\/>\n            <circle cx=\"24\" cy=\"22\" r=\"5\"\/>\n            <line x1=\"27.5\" y1=\"25.5\" x2=\"31\" y2=\"29\"\/>\n            <line x1=\"7\" y1=\"9\" x2=\"7.01\" y2=\"9\"\/>\n            <line x1=\"11\" y1=\"9\" x2=\"11.01\" y2=\"9\"\/>\n            <line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"\/>\n          <\/svg>\n        <\/div>\n\n        <div class=\"hero-card-content\">\n          <div class=\"hero-card-title\">Websites<\/div>\n          <div class=\"hero-card-sub\">Build trust<\/div>\n        <\/div>\n\n        <div class=\"hero-card-arrow\">\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M3 8h10M9 4l4 4-4 4\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            \/>\n          <\/svg>\n        <\/div>\n\n        <div class=\"hero-card-shine\"><\/div>\n\n      <\/a>\n\n\n      <!-- Online Shop -->\n      <a href=\"#webshop\" class=\"hero-card hero-card--mid\">\n\n        <div class=\"hero-card-icon\">\n          <svg\n            width=\"36\"\n            height=\"36\"\n            viewBox=\"0 0 36 36\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.6\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"3\" y=\"5\" width=\"30\" height=\"24\" rx=\"3\"\/>\n            <line x1=\"3\" y1=\"12\" x2=\"33\" y2=\"12\"\/>\n            <line x1=\"7\" y1=\"9\" x2=\"7.01\" y2=\"9\"\/>\n            <line x1=\"11\" y1=\"9\" x2=\"11.01\" y2=\"9\"\/>\n            <line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"\/>\n            <path d=\"M11 20h2l1 6h8l1.5-4H12\"\/>\n            <circle cx=\"15\" cy=\"27.5\" r=\"1\"\/>\n            <circle cx=\"21\" cy=\"27.5\" r=\"1\"\/>\n          <\/svg>\n        <\/div>\n\n        <div class=\"hero-card-content\">\n          <div class=\"hero-card-title\">Online Shop<\/div>\n          <div class=\"hero-card-sub\">Drive more sales<\/div>\n        <\/div>\n\n        <div class=\"hero-card-arrow\">\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M3 8h10M9 4l4 4-4 4\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            \/>\n          <\/svg>\n        <\/div>\n\n        <div class=\"hero-card-shine\"><\/div>\n\n      <\/a>\n\n\n      <!-- Additional Services -->\n      <a href=\"#additional-services\" class=\"hero-card\">\n\n        <div class=\"hero-card-icon\">\n          <svg\n            width=\"36\"\n            height=\"36\"\n            viewBox=\"0 0 36 36\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.6\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"4\" y=\"4\" width=\"20\" height=\"20\" rx=\"3\"\/>\n            <rect x=\"10\" y=\"10\" width=\"20\" height=\"20\" rx=\"3\"\/>\n            <line x1=\"20\" y1=\"17\" x2=\"20\" y2=\"25\"\/>\n            <line x1=\"16\" y1=\"21\" x2=\"24\" y2=\"21\"\/>\n          <\/svg>\n        <\/div>\n\n        <div class=\"hero-card-content\">\n          <div class=\"hero-card-title\">More Services<\/div>\n          <div class=\"hero-card-sub\">Go further online<\/div>\n        <\/div>\n\n        <div class=\"hero-card-arrow\">\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M3 8h10M9 4l4 4-4 4\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            \/>\n          <\/svg>\n        <\/div>\n\n        <div class=\"hero-card-shine\"><\/div>\n\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SECTION\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-section {\n  position: relative;\n  background: #FDFDFD;\n  padding: 120px 0 80px;\n  overflow: hidden;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   DOT GRID\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-grid-bg {\n  position: absolute;\n  inset: 0;\n\n  background-image: radial-gradient(\n    circle,\n    #c8cbdc 1px,\n    transparent 1px\n  );\n\n  background-size: 28px 28px;\n  opacity: 0.38;\n  pointer-events: none;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   INNER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-inner {\n  position: relative;\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 0 40px;\n  width: 100%;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   HEADING\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-heading {\n  font-size: 60px;\n  font-weight: 900;\n  color: #0d0d0d;\n  line-height: 1.1;\n  margin: 0 0 10px;\n  letter-spacing: -0.02em;\n}\n\n.hero-heading-accent {\n  color: #151DA5 !important;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SUBLINE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-sub {\n  font-size: 18px;\n  color: #666;\n  margin: 0 0 40px;\n  line-height: 1.6;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CARDS GRID\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-cards {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n  text-align: left;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CARD\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-card {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n\n  background: #ffffff;\n\n  border:\n    0.5px solid\n    rgba(21, 29, 165, 0.45);\n\n  border-radius: 16px;\n\n  padding: 22px 20px;\n\n  text-decoration: none;\n  overflow: hidden;\n\n  transition:\n    border-color 0.25s,\n    box-shadow 0.25s,\n    transform 0.25s;\n\n  box-shadow:\n    0 2px 12px\n    rgba(21, 29, 165, 0.05);\n}\n\n.hero-card:hover {\n  border-color:\n    rgba(21, 29, 165, 0.45);\n\n  box-shadow:\n    0 2px 12px\n    rgba(21, 29, 165, 0.05);\n\n  transform: scale(1.05);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   ICON\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-card-icon {\n  width: 64px;\n  height: 64px;\n\n  background: rgba(21, 29, 165, 0.07);\n\n  border-radius: 14px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  flex-shrink: 0;\n\n  color: #151DA5;\n\n  transition:\n    background 0.25s;\n}\n\n.hero-card:hover .hero-card-icon {\n  background: rgba(21, 29, 165, 0.12);\n  transform: none;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CONTENT\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-card-content {\n  flex: 1;\n}\n\n.hero-card-title {\n  font-size: 18px;\n  font-weight: 800;\n  color: #0d0d0d;\n  margin-bottom: 3px;\n}\n\n.hero-card-sub {\n  font-size: 16px;\n  color: #888;\n  font-weight: 500;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   ARROW\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-card-arrow {\n  color: rgba(21, 29, 165, 0.38);\n  flex-shrink: 0;\n\n  transition:\n    color 0.2s,\n    transform 0.2s;\n}\n\n.hero-card:hover .hero-card-arrow {\n  color: #151DA5;\n  transform: translateX(3px);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SHINE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.hero-card-shine {\n  position: absolute;\n  inset: 0;\n\n  background: linear-gradient(\n    105deg,\n    transparent 35%,\n    rgba(255, 255, 255, 0.45) 50%,\n    transparent 65%\n  );\n\n  transform: translateX(-100%);\n  pointer-events: none;\n}\n\n.hero-card:hover .hero-card-shine {\n  transform: translateX(200%);\n  transition: transform 0.55s ease;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   TABLET\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 900px) {\n\n  .hero-section {\n    padding: 120px 0 80px;\n  }\n\n  .hero-heading {\n    font-size: 40px;\n  }\n\n  .hero-cards {\n    grid-template-columns: 1fr;\n  }\n\n  .hero-card--first {\n    order: -1;\n  }\n\n}\n\n\n@media (max-width: 768px) {\n\n  .hero-section {\n    padding: 120px 0 80px;\n  }\n\n  .hero-heading {\n    font-size: 40px;\n  }\n\n  .hero-cards {\n    grid-template-columns: 1fr;\n  }\n\n  .hero-card--first {\n    order: -1;\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MOBILE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 480px) {\n\n  .hero-section {\n    padding: 120px 0 60px;\n  }\n\n  .hero-heading {\n    font-size: 32px;\n  }\n\n  .hero-sub {\n    font-size: 16px;\n    margin-bottom: 40px;\n  }\n\n  .hero-inner {\n    padding: 0 20px;\n  }\n\n  .hero-card-icon {\n    width: 52px;\n    height: 52px;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a21cb7 elementor-widget elementor-widget-html\" data-id=\"5a21cb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- WEBSITES SECTION -->\n<section class=\"service-section\" id=\"websites\">\n\n  <div class=\"service-inner\">\n\n    <div class=\"service-grid\">\n\n      <!-- LEFT: Content -->\n      <div class=\"service-content\">\n\n        <div class=\"service-icon\">\n          <svg\n            width=\"40\"\n            height=\"40\"\n            viewBox=\"0 0 40 40\"\n            fill=\"none\"\n            stroke=\"#151DA5\"\n            stroke-width=\"1.8\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <rect x=\"4\" y=\"6\" width=\"32\" height=\"26\" rx=\"3\"\/>\n            <line x1=\"4\" y1=\"13\" x2=\"36\" y2=\"13\"\/>\n            <circle cx=\"27\" cy=\"24\" r=\"5\"\/>\n            <line x1=\"30.5\" y1=\"27.5\" x2=\"34\" y2=\"31\"\/>\n            <line x1=\"8\" y1=\"10\" x2=\"8.01\" y2=\"10\"\/>\n            <line x1=\"12\" y1=\"10\" x2=\"12.01\" y2=\"10\"\/>\n            <line x1=\"16\" y1=\"10\" x2=\"16.01\" y2=\"10\"\/>\n          <\/svg>\n        <\/div>\n\n        <h2 class=\"service-heading\">\n          Websites\n        <\/h2>\n\n        <p class=\"service-desc\">\n          We build websites that communicate your offer clearly and guide visitors towards becoming customers.\n          No templates. No gimmicks. Just websites designed to work for your business.\n        <\/p>\n\n        <ul class=\"service-list\">\n\n          <li>\n            <span class=\"list-check\">\u2713<\/span>\n            Visitors immediately understand what you offer\n          <\/li>\n\n          <li>\n            <span class=\"list-check\">\u2713<\/span>\n            Your business looks clear, credible and professional\n          <\/li>\n\n          <li>\n            <span class=\"list-check\">\u2713<\/span>\n            You stand out from the competition\n          <\/li>\n\n          <li>\n            <span class=\"list-check\">\u2713<\/span>\n            You attract more qualified enquiries\n          <\/li>\n\n          <li>\n            <span class=\"list-check\">\u2713<\/span>\n            Your website works for you, not against you\n          <\/li>\n\n        <\/ul>\n\n        <div class=\"service-price\">\n          <span class=\"service-price-amount\">\n            from \u20ac2,500\n          <\/span>\n        <\/div>\n\n        <div class=\"service-actions\">\n\n          <a href=\"\/en\/contact\/\" class=\"btn-primary\">\n            <span class=\"btn-primary__text\">\n              Start your project\n            <\/span>\n\n            <span class=\"btn-primary__shine\"><\/span>\n          <\/a>\n\n          <a href=\"\/en\/references\/\" class=\"btn-ghost\">\n\n            <span>View our work<\/span>\n\n            <svg\n              class=\"btn-ghost__arrow\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M3 8h10M9 4l4 4-4 4\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.6\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              \/>\n            <\/svg>\n\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- RIGHT: Animated browser mockup -->\n      <div class=\"service-visual\">\n\n        <div class=\"visual-card visual-card--main\">\n\n          <div class=\"card-browser-bar\">\n\n            <div class=\"dots-row\">\n              <span class=\"dot dot--red\"><\/span>\n              <span class=\"dot dot--yellow\"><\/span>\n              <span class=\"dot dot--green\"><\/span>\n            <\/div>\n\n            <div class=\"card-url\">\n\n              <svg\n                width=\"10\"\n                height=\"10\"\n                viewBox=\"0 0 10 10\"\n                fill=\"none\"\n                style=\"flex-shrink:0\"\n              >\n                <path\n                  d=\"M5 1a4 4 0 100 8A4 4 0 005 1zm0 0v8M1 5h8M1.5 2.5C2.5 4 3.7 5 5 5s2.5-1 3.5-2.5M1.5 7.5C2.5 6 3.7 5 5 5s2.5 1 3.5 2.5\"\n                  stroke=\"#9099b5\"\n                  stroke-width=\"0.8\"\n                  stroke-linecap=\"round\"\n                \/>\n              <\/svg>\n\n              bscwebdesign.at\n\n            <\/div>\n\n            <div class=\"bar-spacer\"><\/div>\n\n          <\/div>\n\n\n          <div class=\"card-viewport\">\n\n            <div class=\"card-scroll-track\">\n\n              <!-- Screen 1: Hero -->\n              <div class=\"mock-screen\">\n\n                <div class=\"mock-nav\">\n\n                  <div class=\"mock-logo\"><\/div>\n\n                  <div class=\"mock-nav-links\">\n                    <div class=\"mock-navlink\"><\/div>\n                    <div class=\"mock-navlink\"><\/div>\n                    <div class=\"mock-navlink mock-navlink--active\"><\/div>\n                  <\/div>\n\n                  <div class=\"mock-btn-sm\"><\/div>\n\n                <\/div>\n\n                <div class=\"mock-hero\">\n\n                  <div class=\"mock-hero-text\">\n\n                    <div class=\"mock-h1 mock-h1--wide\"><\/div>\n                    <div class=\"mock-h1 mock-h1--med\"><\/div>\n\n                    <div class=\"mock-body\"><\/div>\n                    <div class=\"mock-body mock-body--short\"><\/div>\n\n                    <div class=\"mock-cta-row\">\n                      <div class=\"mock-cta mock-cta--filled\"><\/div>\n                      <div class=\"mock-cta mock-cta--outline\"><\/div>\n                    <\/div>\n\n                  <\/div>\n\n                  <div class=\"mock-hero-img\"><\/div>\n\n                <\/div>\n\n              <\/div>\n\n\n              <!-- Screen 2: Features -->\n              <div class=\"mock-screen mock-screen--light\">\n\n                <div class=\"mock-section-label\"><\/div>\n                <div class=\"mock-section-heading\"><\/div>\n\n                <div class=\"mock-cards-row\">\n\n                  <div class=\"mock-card\">\n                    <div class=\"mock-card-icon\"><\/div>\n                    <div class=\"mock-card-line\"><\/div>\n                    <div class=\"mock-card-line mock-card-line--short\"><\/div>\n                  <\/div>\n\n                  <div class=\"mock-card mock-card--mid\">\n                    <div class=\"mock-card-icon\"><\/div>\n                    <div class=\"mock-card-line\"><\/div>\n                    <div class=\"mock-card-line mock-card-line--short\"><\/div>\n                  <\/div>\n\n                  <div class=\"mock-card\">\n                    <div class=\"mock-card-icon\"><\/div>\n                    <div class=\"mock-card-line\"><\/div>\n                    <div class=\"mock-card-line mock-card-line--short\"><\/div>\n                  <\/div>\n\n                <\/div>\n\n              <\/div>\n\n\n              <!-- Screen 3: Text + image -->\n              <div class=\"mock-screen\">\n\n                <div class=\"mock-split\">\n\n                  <div class=\"mock-split-text\">\n\n                    <div class=\"mock-label-sm\"><\/div>\n\n                    <div class=\"mock-h2\"><\/div>\n                    <div class=\"mock-h2 mock-h2--short\"><\/div>\n\n                    <div class=\"mock-body\"><\/div>\n                    <div class=\"mock-body\"><\/div>\n                    <div class=\"mock-body mock-body--short\"><\/div>\n\n                    <div class=\"mock-cta mock-cta--filled mock-cta--sm\"><\/div>\n\n                  <\/div>\n\n                  <div class=\"mock-split-img\"><\/div>\n\n                <\/div>\n\n              <\/div>\n\n\n              <!-- Screen 4: Testimonials -->\n              <div class=\"mock-screen mock-screen--light\">\n\n                <div class=\"mock-section-heading mock-section-heading--center\"><\/div>\n\n                <div class=\"mock-testimonials\">\n\n                  <div class=\"mock-testi\">\n\n                    <div class=\"mock-stars\"><\/div>\n\n                    <div class=\"mock-testi-text\"><\/div>\n                    <div class=\"mock-testi-text mock-testi-text--short\"><\/div>\n\n                    <div class=\"mock-testi-author\">\n\n                      <div class=\"mock-avatar\"><\/div>\n\n                      <div class=\"mock-author-info\">\n                        <div class=\"mock-author-name\"><\/div>\n                        <div class=\"mock-author-role\"><\/div>\n                      <\/div>\n\n                    <\/div>\n\n                  <\/div>\n\n\n                  <div class=\"mock-testi mock-testi--alt\">\n\n                    <div class=\"mock-stars\"><\/div>\n\n                    <div class=\"mock-testi-text\"><\/div>\n                    <div class=\"mock-testi-text mock-testi-text--short\"><\/div>\n\n                    <div class=\"mock-testi-author\">\n\n                      <div class=\"mock-avatar\"><\/div>\n\n                      <div class=\"mock-author-info\">\n                        <div class=\"mock-author-name\"><\/div>\n                        <div class=\"mock-author-role\"><\/div>\n                      <\/div>\n\n                    <\/div>\n\n                  <\/div>\n\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"scroll-progress-bar\">\n            <div class=\"scroll-progress-fill\"><\/div>\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"stat-badge stat-badge--top\">\n          <div class=\"stat-text\">\n            <strong>98<\/strong>\n            <span>Performance Score<\/span>\n          <\/div>\n        <\/div>\n\n\n        <div class=\"stat-badge stat-badge--bottom\">\n          <div class=\"stat-text\">\n            <strong>&lt; 2s<\/strong>\n            <span>Load time<\/span>\n          <\/div>\n        <\/div>\n\n\n        <div class=\"visual-ring\"><\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <div class=\"service-includes\">\n\n      <div class=\"includes-label\">\n        Included\n      <\/div>\n\n      <div class=\"includes-divider\"><\/div>\n\n      <div class=\"includes-tags\">\n\n        <span>Strategy &amp; Concept<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>UX &amp; Design<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>Development<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>Copy &amp; Content<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>SEO Foundations<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>Mobile Optimisation<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>Launch &amp; Support<\/span>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SECTION VARIABLES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-section {\n  --brand: #151DA5;\n  --text: #0d0d0d;\n  --muted: #4a4a4a;\n  --border: #eaecf2;\n  --bg-soft: #f4f5f9;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SECTION\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-section {\n  position: relative;\n  background: #FDFDFD;\n  padding: 88px 0 72px;\n  overflow: hidden;\n}\n\n.service-section::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n\n  background-image: radial-gradient(\n    circle,\n    #c8cbdc 1px,\n    transparent 1px\n  );\n\n  background-size: 28px 28px;\n  opacity: 0.38;\n  pointer-events: none;\n}\n\n.service-inner {\n  position: relative;\n  z-index: 1;\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 40px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   GRID\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 80px;\n  align-items: center;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   ICON\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-icon {\n  width: 64px;\n  height: 64px;\n  background: rgba(21, 29, 165, 0.07);\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 28px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   TEXT\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-heading {\n  font-size: clamp(2rem, 3.5vw, 3rem);\n  font-weight: 900;\n  color: var(--text);\n  line-height: 1.1;\n  margin: 0 0 20px;\n  letter-spacing: -0.02em;\n}\n\n.service-desc {\n  font-size: 16px;\n  line-height: 1.75;\n  color: var(--muted);\n  margin: 0 0 28px;\n  max-width: 440px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   BENEFIT LIST\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-list {\n  list-style: none;\n  margin: 0 0 24px;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.service-list li {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 16px;\n  color: #2a2a2a;\n}\n\n.list-check {\n  width: 22px;\n  height: 22px;\n  background: #151DA5;\n  color: #fff;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  font-weight: 800;\n  flex-shrink: 0;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PRICE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-price {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  background: transparent;\n  border: none;\n  border-radius: 0;\n}\n\n\n\/* Only this Websites section *\/\n\n#websites .service-price {\n  margin-bottom: 0 !important;\n}\n\n.service-price-amount {\n  font-size: 24px;\n  font-weight: 800;\n  color: #151DA5;\n  letter-spacing: -0.01em;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   ACTIONS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-actions {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n\n\/*\n  Only between price and buttons\n  in the Websites section: 20px\n*\/\n\n#websites .service-actions {\n  margin-top: 20px !important;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PRIMARY BUTTON\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-section .btn-primary,\n.service-section .btn-primary__text {\n  font-size: 16px !important;\n}\n\n#websites .btn-primary {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n\n  padding: 14px 28px;\n\n  border-radius: 6px;\n\n  background: #151DA5;\n  color: #fff !important;\n\n  font-size: 16px;\n  font-weight: 600;\n\n  text-decoration: none;\n  overflow: hidden;\n\n  margin: 0 !important;\n  align-self: center;\n\n  transition:\n    transform 0.2s ease,\n    box-shadow 0.2s ease;\n\n  box-shadow:\n    0 4px 18px rgba(21, 29, 165, 0.28);\n}\n\n#websites .btn-primary__text,\n#websites .btn-primary__icon {\n  color: #fff !important;\n  position: relative;\n  z-index: 1;\n}\n\n#websites .btn-primary__shine {\n  position: absolute;\n  inset: 0;\n\n  background: linear-gradient(\n    105deg,\n    transparent 30%,\n    rgba(255,255,255,0.22) 50%,\n    transparent 70%\n  );\n\n  transform: translateX(-100%);\n  transition: transform 0s;\n}\n\n#websites .btn-primary:hover {\n  background: #151DA5;\n\n  transform: translateY(-2px);\n\n  box-shadow:\n    0 8px 28px rgba(21, 29, 165, 0.40);\n\n  color: #fff !important;\n}\n\n#websites .btn-primary:hover .btn-primary__shine {\n  transform: translateX(200%);\n  transition: transform 0.55s ease;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   GHOST BUTTON\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#websites .btn-ghost {\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n\n  gap: 6px;\n\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 1;\n\n  color: var(--text);\n\n  text-decoration: none;\n\n  padding: 14px 4px;\n\n  margin: 0 !important;\n  align-self: center;\n}\n\n#websites .btn-ghost__arrow {\n  transition: transform 0.25s ease;\n}\n\n#websites .btn-ghost:hover .btn-ghost__arrow {\n  transform: translateX(4px);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   VISUAL\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-visual {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.visual-card--main {\n  width: 100%;\n  max-width: 380px;\n  background: #fff;\n  border-radius: 14px;\n\n  box-shadow:\n    0 8px 48px rgba(21, 29, 165, 0.10),\n    0 2px 12px rgba(0, 0, 0, 0.06);\n\n  overflow: hidden;\n  border: 1px solid var(--border);\n  position: relative;\n  z-index: 2;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   BROWSER BAR\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.card-browser-bar {\n  background: #f4f5f9;\n  padding: 9px 14px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  border-bottom: 1px solid var(--border);\n}\n\n.dots-row {\n  display: flex;\n  gap: 5px;\n}\n\n.dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n\n.dot--red {\n  background: #ff6059;\n}\n\n.dot--yellow {\n  background: #ffbd2e;\n}\n\n.dot--green {\n  background: #28c840;\n}\n\n.card-url {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  color: #7a82a0;\n  background: #fff;\n  border: 1px solid var(--border);\n  padding: 4px 10px;\n  border-radius: 20px;\n  max-width: 200px;\n  margin: 0 auto;\n}\n\n.bar-spacer {\n  width: 42px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   VIEWPORT\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.card-viewport {\n  height: 240px;\n  overflow: hidden;\n  position: relative;\n}\n\n.card-scroll-track {\n  display: flex;\n  flex-direction: column;\n  animation: auto-scroll 14s ease-in-out infinite;\n}\n\n\n\/* ANIMATION UNCHANGED *\/\n\n@keyframes auto-scroll {\n\n  0% {\n    transform: translateY(0);\n  }\n\n  20% {\n    transform: translateY(0);\n  }\n\n  30% {\n    transform: translateY(-240px);\n  }\n\n  48% {\n    transform: translateY(-240px);\n  }\n\n  58% {\n    transform: translateY(-480px);\n  }\n\n  76% {\n    transform: translateY(-480px);\n  }\n\n  86% {\n    transform: translateY(-720px);\n  }\n\n  96% {\n    transform: translateY(-720px);\n  }\n\n  100% {\n    transform: translateY(0);\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MOCK SCREENS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.mock-screen {\n  min-height: 240px;\n  flex-shrink: 0;\n  padding: 14px;\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.mock-screen--light {\n  background: #f8f9fc;\n}\n\n\n\/* MOCK NAV *\/\n\n.mock-nav {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--border);\n}\n\n.mock-logo {\n  width: 60px;\n  height: 10px;\n  background: #151DA5;\n  border-radius: 3px;\n  opacity: 0.7;\n}\n\n.mock-nav-links {\n  display: flex;\n  gap: 6px;\n  flex: 1;\n  justify-content: center;\n}\n\n.mock-navlink {\n  width: 32px;\n  height: 7px;\n  background: #dde0ec;\n  border-radius: 3px;\n}\n\n.mock-navlink--active {\n  background: #151DA5;\n  opacity: 0.6;\n}\n\n.mock-btn-sm {\n  width: 44px;\n  height: 16px;\n  background: #151DA5;\n  border-radius: 4px;\n  opacity: 0.8;\n}\n\n\n\/* MOCK HERO *\/\n\n.mock-hero {\n  display: flex;\n  gap: 10px;\n  flex: 1;\n  align-items: center;\n}\n\n.mock-hero-text {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.mock-h1 {\n  height: 11px;\n  background: #0d0d0d;\n  border-radius: 3px;\n}\n\n.mock-h1--wide {\n  width: 90%;\n}\n\n.mock-h1--med {\n  width: 70%;\n}\n\n.mock-body {\n  height: 7px;\n  background: #d8dae8;\n  border-radius: 3px;\n  margin-top: 2px;\n}\n\n.mock-body--short {\n  width: 65%;\n}\n\n.mock-cta-row {\n  display: flex;\n  gap: 6px;\n  margin-top: 6px;\n}\n\n.mock-cta {\n  height: 16px;\n  border-radius: 4px;\n}\n\n.mock-cta--filled {\n  width: 64px;\n  background: #151DA5;\n  opacity: 0.85;\n}\n\n.mock-cta--outline {\n  width: 54px;\n  border: 1.5px solid #d0d3de;\n  background: transparent;\n}\n\n.mock-cta--sm {\n  width: 52px;\n  height: 12px;\n  margin-top: 6px;\n}\n\n\n\/* MOCK IMAGES *\/\n\n.mock-hero-img {\n  width: 90px;\n  height: 90px;\n\n  background: linear-gradient(\n    135deg,\n    rgba(21, 29, 165, 0.08),\n    rgba(21, 29, 165, 0.16)\n  );\n\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n\n\/* MOCK FEATURES *\/\n\n.mock-section-label {\n  width: 50px;\n  height: 6px;\n  background: #151DA5;\n  border-radius: 3px;\n  opacity: 0.5;\n  margin: 4px auto 0;\n}\n\n.mock-section-heading {\n  width: 70%;\n  height: 10px;\n  background: #0d0d0d;\n  border-radius: 3px;\n}\n\n.mock-section-heading--center {\n  margin: 6px auto 2px;\n}\n\n.mock-cards-row {\n  display: flex;\n  gap: 8px;\n  flex: 1;\n}\n\n.mock-card {\n  flex: 1;\n  background: #fff;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  padding: 10px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.mock-card--mid {\n  border-color: #151DA5;\n  border-width: 1.5px;\n}\n\n.mock-card-icon {\n  width: 22px;\n  height: 22px;\n  background: rgba(21, 29, 165, 0.08);\n  border-radius: 6px;\n}\n\n.mock-card-line {\n  height: 6px;\n  background: #dde0ec;\n  border-radius: 3px;\n}\n\n.mock-card-line--short {\n  width: 65%;\n}\n\n\n\/* MOCK SPLIT *\/\n\n.mock-split {\n  display: flex;\n  gap: 10px;\n  flex: 1;\n  align-items: center;\n}\n\n.mock-split-text {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.mock-label-sm {\n  width: 44px;\n  height: 6px;\n  background: #151DA5;\n  border-radius: 3px;\n  opacity: 0.5;\n}\n\n.mock-h2 {\n  height: 9px;\n  background: #0d0d0d;\n  border-radius: 3px;\n  width: 85%;\n}\n\n.mock-h2--short {\n  width: 60%;\n}\n\n.mock-split-img {\n  width: 100px;\n  height: 110px;\n\n  background: linear-gradient(\n    135deg,\n    rgba(21, 29, 165, 0.10),\n    rgba(21, 29, 165, 0.18)\n  );\n\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n\n\/* MOCK TESTIMONIALS *\/\n\n.mock-testimonials {\n  display: flex;\n  gap: 8px;\n  flex: 1;\n}\n\n.mock-testi {\n  flex: 1;\n  background: #fff;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  padding: 10px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n\n.mock-testi--alt {\n  background: var(--bg-soft);\n}\n\n.mock-stars {\n  width: 44px;\n  height: 6px;\n  background: #f5a623;\n  border-radius: 3px;\n  opacity: 0.7;\n}\n\n.mock-testi-text {\n  height: 6px;\n  background: #dde0ec;\n  border-radius: 3px;\n}\n\n.mock-testi-text--short {\n  width: 70%;\n}\n\n.mock-testi-author {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  margin-top: 4px;\n}\n\n.mock-avatar {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n\n  background: linear-gradient(\n    135deg,\n    rgba(21, 29, 165, 0.18),\n    rgba(21, 29, 165, 0.30)\n  );\n\n  flex-shrink: 0;\n}\n\n.mock-author-info {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n.mock-author-name {\n  width: 44px;\n  height: 5px;\n  background: #bbc0d8;\n  border-radius: 3px;\n}\n\n.mock-author-role {\n  width: 32px;\n  height: 4px;\n  background: #d0d3e4;\n  border-radius: 3px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PROGRESS BAR\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.scroll-progress-bar {\n  height: 3px;\n  background: var(--border);\n}\n\n.scroll-progress-fill {\n  height: 100%;\n  background: #151DA5;\n  animation: progress-anim 14s ease-in-out infinite;\n  border-radius: 0 2px 2px 0;\n}\n\n\n\/* ANIMATION UNCHANGED *\/\n\n@keyframes progress-anim {\n\n  0% {\n    width: 0%;\n  }\n\n  20% {\n    width: 25%;\n  }\n\n  30% {\n    width: 25%;\n  }\n\n  48% {\n    width: 50%;\n  }\n\n  58% {\n    width: 50%;\n  }\n\n  76% {\n    width: 75%;\n  }\n\n  86% {\n    width: 75%;\n  }\n\n  96% {\n    width: 100%;\n  }\n\n  100% {\n    width: 0%;\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   STAT BADGES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.stat-badge {\n  position: absolute;\n  background: #fff;\n  border: 1px solid #e0e3f0;\n  border-radius: 12px;\n  padding: 10px 16px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  box-shadow:\n    0 4px 20px rgba(21, 29, 165, 0.10);\n\n  z-index: 3;\n  white-space: nowrap;\n}\n\n.stat-badge--top {\n  top: 10px;\n  right: 0;\n}\n\n.stat-badge--bottom {\n  bottom: 10px;\n  left: 0;\n}\n\n.stat-text {\n  display: flex;\n  flex-direction: column;\n  line-height: 1.2;\n}\n\n.stat-text strong {\n  font-size: 16px;\n  font-weight: 800;\n  color: var(--text);\n}\n\n.stat-text span {\n  font-size: 11px;\n  color: #888;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   VISUAL RING\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.visual-ring {\n  position: absolute;\n  width: 280px;\n  height: 280px;\n  border-radius: 50%;\n  border: 1px solid rgba(21, 29, 165, 0.12);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 1;\n  pointer-events: none;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   INCLUDES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.service-includes {\n  margin-top: 56px;\n  padding-top: 28px;\n  border-top: 1px solid rgba(21, 29, 165, 0.45);\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  flex-wrap: wrap;\n}\n\n.includes-label {\n  font-size: 14px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  color: #999;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n.includes-divider {\n  width: 1px;\n  height: 16px;\n  background: rgba(21, 29, 165, 0.18);\n  flex-shrink: 0;\n}\n\n.includes-tags {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0;\n}\n\n.includes-tags span {\n  font-size: 12px;\n  font-weight: 500;\n  color: #3a3a3a;\n}\n\n.includes-sep {\n  color: #ccc;\n  padding: 0 10px;\n  font-weight: 400;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   TABLET\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 900px) {\n\n  .service-grid {\n    grid-template-columns: 1fr;\n    gap: 48px;\n  }\n\n  .service-visual {\n    order: -1;\n  }\n\n  .includes-tags {\n    gap: 0;\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MOBILE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 640px) {\n\n  .service-section {\n    padding: 64px 0 56px;\n  }\n\n  .service-inner {\n    padding: 0 20px;\n  }\n\n  #websites .service-price {\n    justify-content: center;\n    margin-bottom: 0 !important;\n  }\n\n  #websites .service-actions {\n    justify-content: center;\n    align-items: center;\n\n    \/* Exactly 20px on mobile as well *\/\n    margin-top: 20px !important;\n  }\n\n  #websites .btn-primary,\n  #websites .btn-ghost {\n    margin: 0 !important;\n  }\n\n  .includes-divider {\n    display: none;\n  }\n\n  .includes-tags span:not(.includes-sep) {\n    font-size: 12px;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bacf17 elementor-widget elementor-widget-html\" data-id=\"0bacf17\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ONLINE SHOP SECTION -->\n<section class=\"service-section service-section--alt\" id=\"webshop\">\n\n  <div class=\"service-inner\">\n\n    <div class=\"service-grid service-grid--flipped\">\n\n      <!-- LEFT: Animated shop mockup -->\n      <div class=\"service-visual\">\n\n        <div class=\"visual-card visual-card--main\">\n\n          <div class=\"card-browser-bar\">\n\n            <div class=\"dots-row\">\n              <span class=\"dot dot--red\"><\/span>\n              <span class=\"dot dot--yellow\"><\/span>\n              <span class=\"dot dot--green\"><\/span>\n            <\/div>\n\n            <div class=\"card-url\">\n\n              <svg\n                width=\"10\"\n                height=\"10\"\n                viewBox=\"0 0 10 10\"\n                fill=\"none\"\n                style=\"flex-shrink:0\"\n              >\n                <path\n                  d=\"M5 1a4 4 0 100 8A4 4 0 005 1zm0 0v8M1 5h8M1.5 2.5C2.5 4 3.7 5 5 5s2.5-1 3.5-2.5M1.5 7.5C2.5 6 3.7 5 5 5s2.5 1 3.5 2.5\"\n                  stroke=\"#9099b5\"\n                  stroke-width=\"0.8\"\n                  stroke-linecap=\"round\"\n                \/>\n              <\/svg>\n\n              shop.bscwebdesign.at\n\n            <\/div>\n\n            <div class=\"bar-spacer\"><\/div>\n\n          <\/div>\n\n\n          <div class=\"shop-ui\">\n\n            <!-- Shop navigation -->\n            <div class=\"shop-nav\">\n\n              <div class=\"shop-logo\"><\/div>\n\n              <div class=\"shop-search\">\n\n                <div class=\"shop-search-icon\">\n                  <svg\n                    width=\"9\"\n                    height=\"9\"\n                    viewBox=\"0 0 9 9\"\n                    fill=\"none\"\n                  >\n                    <circle\n                      cx=\"4\"\n                      cy=\"4\"\n                      r=\"2.5\"\n                      stroke=\"#9099b5\"\n                      stroke-width=\"1\"\n                    \/>\n\n                    <line\n                      x1=\"6.5\"\n                      y1=\"6.5\"\n                      x2=\"8\"\n                      y2=\"8\"\n                      stroke=\"#9099b5\"\n                      stroke-width=\"1\"\n                      stroke-linecap=\"round\"\n                    \/>\n                  <\/svg>\n                <\/div>\n\n                <div class=\"shop-search-bar\"><\/div>\n\n              <\/div>\n\n\n              <div class=\"shop-cart-icon\">\n\n                <svg\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 14 14\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M1 1h2l1.5 7h6l1.5-5H4\"\n                    stroke=\"#151DA5\"\n                    stroke-width=\"1.2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  \/>\n\n                  <circle\n                    cx=\"6\"\n                    cy=\"12\"\n                    r=\"1\"\n                    fill=\"#151DA5\"\n                  \/>\n\n                  <circle\n                    cx=\"10\"\n                    cy=\"12\"\n                    r=\"1\"\n                    fill=\"#151DA5\"\n                  \/>\n                <\/svg>\n\n                <div class=\"shop-cart-badge ws-cart-count\">\n                  2\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n\n            <!-- Products -->\n            <div class=\"shop-grid\">\n\n              <!-- Product 1 -->\n              <div class=\"shop-product ws-product-1\">\n\n                <div class=\"product-img product-img--a\">\n                  <div class=\"product-emoji\">\ud83d\udc55<\/div>\n                <\/div>\n\n                <div class=\"product-info\">\n                  <div class=\"product-name-text\">\n                    Blue T-Shirt\n                  <\/div>\n\n                  <div class=\"product-price-text\">\n                    \u20ac29.90\n                  <\/div>\n                <\/div>\n\n                <button class=\"product-add-btn ws-add-btn-1\">\n\n                  <svg\n                    width=\"8\"\n                    height=\"8\"\n                    viewBox=\"0 0 10 10\"\n                  >\n                    <line\n                      x1=\"5\"\n                      y1=\"1\"\n                      x2=\"5\"\n                      y2=\"9\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-linecap=\"round\"\n                    \/>\n\n                    <line\n                      x1=\"1\"\n                      y1=\"5\"\n                      x2=\"9\"\n                      y2=\"5\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-linecap=\"round\"\n                    \/>\n                  <\/svg>\n\n                  Add to cart\n\n                <\/button>\n\n              <\/div>\n\n\n              <!-- Product 2 -->\n              <div class=\"shop-product ws-product-2\">\n\n                <div class=\"product-img product-img--b\">\n\n                  <div class=\"product-badge\">\n                    New\n                  <\/div>\n\n                  <div class=\"product-emoji\">\n                    \ud83e\udde5\n                  <\/div>\n\n                <\/div>\n\n                <div class=\"product-info\">\n\n                  <div class=\"product-name-text\">\n                    Oversized Sweater\n                  <\/div>\n\n                  <div class=\"product-price-text\">\n                    \u20ac59.90\n                  <\/div>\n\n                <\/div>\n\n                <button class=\"product-add-btn ws-add-btn-2\">\n\n                  <svg\n                    width=\"8\"\n                    height=\"8\"\n                    viewBox=\"0 0 10 10\"\n                  >\n                    <line\n                      x1=\"5\"\n                      y1=\"1\"\n                      x2=\"5\"\n                      y2=\"9\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-linecap=\"round\"\n                    \/>\n\n                    <line\n                      x1=\"1\"\n                      y1=\"5\"\n                      x2=\"9\"\n                      y2=\"5\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-linecap=\"round\"\n                    \/>\n                  <\/svg>\n\n                  Add to cart\n\n                <\/button>\n\n              <\/div>\n\n            <\/div>\n\n\n            <!-- Mini cart drawer -->\n            <div class=\"mini-cart ws-mini-cart\">\n\n              <div class=\"mini-cart-header\">\n\n                <span class=\"mini-cart-title\">\n                  Cart (3)\n                <\/span>\n\n                <span class=\"mini-cart-close\">\n                  \u2715\n                <\/span>\n\n              <\/div>\n\n\n              <div class=\"mini-cart-item\">\n\n                <div class=\"mini-item-img mini-item-img--a\">\n                  <span style=\"font-size:12px;\">\ud83d\udc55<\/span>\n                <\/div>\n\n                <div class=\"mini-item-info\">\n\n                  <div class=\"mini-item-name-text\">\n                    Blue T-Shirt\n                  <\/div>\n\n                  <div class=\"mini-item-price-text\">\n                    \u20ac29.90\n                  <\/div>\n\n                <\/div>\n\n                <div class=\"mini-item-qty\">\n                  1\u00d7\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"mini-cart-item ws-new-item\">\n\n                <div class=\"mini-item-img mini-item-img--b\">\n                  <span style=\"font-size:12px;\">\ud83e\udde5<\/span>\n                <\/div>\n\n                <div class=\"mini-item-info\">\n\n                  <div class=\"mini-item-name-text\">\n                    Oversized Sweater\n                  <\/div>\n\n                  <div class=\"mini-item-price-text\">\n                    \u20ac59.90\n                  <\/div>\n\n                <\/div>\n\n                <div class=\"mini-item-qty\">\n                  1\u00d7\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"mini-cart-footer\">\n\n                <div class=\"mini-total-row\">\n\n                  <span class=\"mini-total-label-text\">\n                    Total\n                  <\/span>\n\n                  <span class=\"mini-total-amount-text\">\n                    \u20ac89.80\n                  <\/span>\n\n                <\/div>\n\n                <div class=\"mini-checkout-btn\">\n                  Go to checkout \u2192\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"stat-badge stat-badge--top\">\n\n          <div class=\"stat-text\">\n            <strong>100%<\/strong>\n            <span>Mobile optimised<\/span>\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"stat-badge stat-badge--bottom\">\n\n          <div class=\"stat-text\">\n            <strong>1-click<\/strong>\n            <span>Checkout<\/span>\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"visual-ring\"><\/div>\n\n      <\/div>\n\n\n      <!-- RIGHT: Content -->\n      <div class=\"service-content\">\n\n        <div class=\"service-icon\">\n\n          <svg\n            width=\"40\"\n            height=\"40\"\n            viewBox=\"0 0 40 40\"\n            fill=\"none\"\n            stroke=\"#151DA5\"\n            stroke-width=\"1.8\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M6 6h4l5 18h14l4-12H11\"\/>\n            <circle cx=\"16\" cy=\"34\" r=\"2\"\/>\n            <circle cx=\"28\" cy=\"34\" r=\"2\"\/>\n          <\/svg>\n\n        <\/div>\n\n\n        <h2 class=\"service-heading\">\n          Online Shops\n        <\/h2>\n\n\n        <p class=\"service-desc\">\n          We build online shops that are easy to navigate and designed to sell.\n          From the first click to checkout, every step is focused on making\n          the buying experience simple, intuitive and effective.\n        <\/p>\n\n\n        <ul class=\"service-list\">\n\n          <li>\n            <span class=\"list-check\">\u2713<\/span>\n            Products are presented clearly and professionally\n          <\/li>\n\n          <li>\n            <span class=\"list-check\">\u2713<\/span>\n            Customers quickly find what they are looking for\n          <\/li>\n\n          <li>\n            <span class=\"list-check\">\u2713<\/span>\n            The buying process is simple and seamless\n          <\/li>\n\n          <li>\n            <span class=\"list-check\">\u2713<\/span>\n            Your shop works smoothly on every device\n          <\/li>\n\n          <li>\n            <span class=\"list-check\">\u2713<\/span>\n            Your online shop sells around the clock\n          <\/li>\n\n        <\/ul>\n\n\n        <div class=\"service-price\">\n\n          <span class=\"service-price-amount\">\n            from \u20ac3,000\n          <\/span>\n\n        <\/div>\n\n\n        <div class=\"service-actions\">\n\n          <a href=\"\/en\/contact\/\" class=\"btn-primary\">\n\n            <span class=\"btn-primary__text\">\n              Start your project\n            <\/span>\n\n            <span class=\"btn-primary__shine\"><\/span>\n\n          <\/a>\n\n\n          <a href=\"\/en\/references\/\" class=\"btn-ghost\">\n\n            <span>\n              View our work\n            <\/span>\n\n            <svg\n              class=\"btn-ghost__arrow\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M3 8h10M9 4l4 4-4 4\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.6\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              \/>\n            <\/svg>\n\n          <\/a>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- Includes -->\n    <div class=\"service-includes\">\n\n      <div class=\"includes-label\">\n        Included\n      <\/div>\n\n      <div class=\"includes-divider\"><\/div>\n\n      <div class=\"includes-tags\">\n\n        <span>Shop Strategy<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>Product Structure<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>Design &amp; UX<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>Payment Integration<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>Mobile Optimisation<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>SEO Foundations<\/span>\n        <span class=\"includes-sep\">|<\/span>\n\n        <span>Launch &amp; Support<\/span>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   ONLINE SHOP VARIABLES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop {\n  --brand: #151DA5;\n  --text: #0d0d0d;\n  --muted: #4a4a4a;\n  --border: #eaecf2;\n  --bg-soft: #f4f5f9;\n\n  background: #FDFDFD;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   FLIPPED GRID\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .service-grid--flipped {\n  direction: rtl;\n}\n\n#webshop .service-grid--flipped > * {\n  direction: ltr;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PRICE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .service-price {\n  display: flex;\n  align-items: center;\n  margin: 0 !important;\n  padding: 0;\n  background: transparent;\n  border: none;\n  border-radius: 0;\n}\n\n#webshop .service-price-amount {\n  font-size: 24px;\n  font-weight: 800;\n  color: #151DA5;\n  letter-spacing: -0.01em;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   ACTIONS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .service-actions {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  flex-wrap: wrap;\n\n  \/* Space between price and buttons *\/\n  margin-top: 20px !important;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PRIMARY BUTTON\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .btn-primary,\n#webshop .btn-primary__text {\n  font-size: 16px !important;\n}\n\n#webshop .btn-primary {\n  position: relative;\n\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n\n  gap: 8px;\n\n  padding: 14px 28px;\n\n  border-radius: 6px;\n\n  background: #151DA5 !important;\n  border: none;\n\n  color: #fff !important;\n\n  font-size: 16px;\n  font-weight: 600;\n\n  line-height: 1;\n\n  text-decoration: none !important;\n\n  overflow: hidden;\n\n  visibility: visible !important;\n  opacity: 1 !important;\n\n  margin: 0 !important;\n\n  align-self: center;\n\n  transition:\n    transform 0.2s ease,\n    box-shadow 0.2s ease;\n\n  box-shadow:\n    0 4px 18px rgba(21, 29, 165, 0.28);\n}\n\n#webshop .btn-primary__text {\n  position: relative;\n  z-index: 1;\n  color: #fff !important;\n}\n\n#webshop .btn-primary__shine {\n  position: absolute;\n  inset: 0;\n\n  background: linear-gradient(\n    105deg,\n    transparent 30%,\n    rgba(255,255,255,0.22) 50%,\n    transparent 70%\n  );\n\n  transform: translateX(-100%);\n  transition: transform 0s;\n}\n\n#webshop .btn-primary:hover {\n  background: #151DA5 !important;\n\n  transform: translateY(-2px);\n\n  box-shadow:\n    0 8px 28px rgba(21, 29, 165, 0.40);\n\n  color: #fff !important;\n}\n\n#webshop .btn-primary:hover .btn-primary__shine {\n  transform: translateX(200%);\n  transition: transform 0.55s ease;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   GHOST BUTTON\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .btn-ghost {\n  position: relative;\n\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n\n  gap: 6px;\n\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 1;\n\n  color: var(--text) !important;\n\n  text-decoration: none !important;\n\n  padding: 14px 4px;\n\n  visibility: visible !important;\n  opacity: 1 !important;\n\n  margin: 0 !important;\n\n  align-self: center;\n}\n\n#webshop .btn-ghost__arrow {\n  transition: transform 0.25s ease;\n}\n\n#webshop .btn-ghost:hover .btn-ghost__arrow {\n  transform: translateX(4px);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SHOP UI\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .shop-ui {\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-height: 280px;\n  position: relative;\n  overflow: hidden;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SHOP NAV\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .shop-nav {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--border);\n}\n\n#webshop .shop-logo {\n  width: 52px;\n  height: 9px;\n  background: #151DA5;\n  border-radius: 3px;\n  opacity: 0.7;\n}\n\n#webshop .shop-search {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  background: var(--bg-soft);\n  border: 1px solid var(--border);\n  border-radius: 5px;\n  padding: 4px 8px;\n}\n\n#webshop .shop-search-bar {\n  flex: 1;\n  height: 6px;\n  background: #dde0ec;\n  border-radius: 3px;\n}\n\n\n\/* CART ICON *\/\n\n#webshop .shop-cart-icon {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  background: rgba(21, 29, 165, 0.07);\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n#webshop .shop-cart-badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  width: 14px;\n  height: 14px;\n  background: #151DA5;\n  color: #fff;\n  font-size: 7px;\n  font-weight: 800;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PRODUCT GRID\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .shop-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 8px;\n}\n\n#webshop .shop-product {\n  background: #fff;\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n\n\/* PRODUCT IMAGES *\/\n\n#webshop .product-img {\n  height: 64px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n#webshop .product-img--a {\n  background: linear-gradient(\n    135deg,\n    rgba(21, 29, 165, 0.08),\n    rgba(21, 29, 165, 0.18)\n  );\n}\n\n#webshop .product-img--b {\n  background: linear-gradient(\n    135deg,\n    #e8f5ee,\n    #c8e8d5\n  );\n}\n\n#webshop .product-img--c {\n  background: linear-gradient(\n    135deg,\n    #f7e8e8,\n    #f0cccc\n  );\n}\n\n#webshop .product-emoji {\n  font-size: 24px;\n  line-height: 1;\n}\n\n\n\/* PRODUCT BADGE *\/\n\n#webshop .product-badge {\n  position: absolute;\n  top: 5px;\n  left: 5px;\n  background: #151DA5;\n  color: #fff;\n  font-size: 7px;\n  font-weight: 700;\n  padding: 2px 5px;\n  border-radius: 3px;\n}\n\n\n\/* PRODUCT INFO *\/\n\n#webshop .product-info {\n  padding: 6px 7px 4px;\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  flex: 1;\n}\n\n#webshop .product-name-text {\n  font-size: 8px;\n  font-weight: 700;\n  color: #2a2a2a;\n  line-height: 1.2;\n}\n\n#webshop .product-price-text {\n  font-size: 8px;\n  font-weight: 700;\n  color: #151DA5;\n}\n\n#webshop .product-price-sale {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n\n\/* PRODUCT SALE PRICE *\/\n\n#webshop .price-old-text {\n  font-size: 7px;\n  color: #999;\n  text-decoration: line-through;\n}\n\n#webshop .price-new-text {\n  font-size: 8px;\n  font-weight: 700;\n  color: #e53e3e;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   ADD TO CART BUTTON\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .product-add-btn {\n  margin: 0 6px 6px;\n  background: #151DA5;\n  color: #fff;\n  border: none;\n  border-radius: 4px;\n  font-size: 7px;\n  font-weight: 700;\n  padding: 5px 6px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n\n  transition:\n    opacity 0.15s,\n    transform 0.15s;\n}\n\n#webshop .product-add-btn.ws-adding {\n  animation: btn-pulse 0.35s ease;\n}\n\n@keyframes btn-pulse {\n\n  0% {\n    transform: scale(1);\n  }\n\n  40% {\n    transform: scale(0.93);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MINI CART\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .mini-cart {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  width: 150px;\n\n  background: #fff;\n  border-left: 1px solid var(--border);\n\n  box-shadow:\n    -4px 0 18px rgba(21, 29, 165, 0.08);\n\n  display: flex;\n  flex-direction: column;\n\n  transform: translateX(100%);\n\n  transition:\n    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n\n  border-radius: 0 0 14px 0;\n}\n\n#webshop .mini-cart.ws-cart-open {\n  transform: translateX(0);\n}\n\n\n\/* MINI CART HEADER *\/\n\n#webshop .mini-cart-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  padding: 10px 10px 8px;\n\n  border-bottom: 1px solid var(--border);\n}\n\n#webshop .mini-cart-title {\n  font-size: 9px;\n  font-weight: 800;\n  color: var(--text);\n}\n\n#webshop .mini-cart-close {\n  font-size: 8px;\n  color: #999;\n}\n\n\n\/* MINI CART ITEMS *\/\n\n#webshop .mini-cart-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n\n  padding: 8px 10px;\n\n  border-bottom: 1px solid #f0f2f8;\n}\n\n#webshop .ws-new-item {\n  opacity: 0;\n  transform: translateX(10px);\n\n  transition:\n    opacity 0.35s ease,\n    transform 0.35s ease;\n}\n\n#webshop .ws-new-item.ws-item-visible {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n#webshop .mini-item-img {\n  width: 26px;\n  height: 26px;\n\n  border-radius: 5px;\n\n  flex-shrink: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n#webshop .mini-item-img--a {\n  background: linear-gradient(\n    135deg,\n    rgba(21, 29, 165, 0.08),\n    rgba(21, 29, 165, 0.18)\n  );\n}\n\n#webshop .mini-item-img--b {\n  background: linear-gradient(\n    135deg,\n    #e8f5ee,\n    #c8e8d5\n  );\n}\n\n#webshop .mini-item-info {\n  flex: 1;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 2px;\n}\n\n#webshop .mini-item-name-text {\n  font-size: 8px;\n  font-weight: 700;\n  color: #2a2a2a;\n}\n\n#webshop .mini-item-price-text {\n  font-size: 7px;\n  font-weight: 600;\n  color: #151DA5;\n}\n\n#webshop .mini-item-qty {\n  font-size: 8px;\n  font-weight: 700;\n  color: #888;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MINI CART FOOTER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#webshop .mini-cart-footer {\n  padding: 8px 10px;\n\n  margin-top: auto;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 6px;\n\n  border-top: 1px solid var(--border);\n}\n\n#webshop .mini-total-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n#webshop .mini-total-label-text {\n  font-size: 8px;\n  color: #888;\n  font-weight: 600;\n}\n\n#webshop .mini-total-amount-text {\n  font-size: 9px;\n  font-weight: 800;\n  color: var(--text);\n}\n\n#webshop .mini-checkout-btn {\n  height: 20px;\n  background: #151DA5;\n  border-radius: 4px;\n\n  font-size: 7px;\n  font-weight: 700;\n  color: #fff;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CART BADGE ANIMATION\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@keyframes badge-bump {\n\n  0% {\n    transform: scale(1);\n  }\n\n  40% {\n    transform: scale(1.5);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n\n}\n\n#webshop .ws-cart-count.ws-bump {\n  animation:\n    badge-bump 0.4s\n    cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MOBILE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 767px) {\n\n  #webshop .stat-badge--bottom {\n    left: 24px !important;\n    right: auto !important;\n    bottom: 12px !important;\n  }\n\n  #webshop .service-content {\n    padding: 0 20px;\n  }\n\n  #webshop .service-price {\n    justify-content: center !important;\n    margin: 0 !important;\n  }\n\n  #webshop .service-actions {\n    justify-content: center;\n    align-items: center;\n\n    \/* 20px between price and buttons on mobile as well *\/\n    margin-top: 20px !important;\n    padding-top: 0 !important;\n  }\n\n  #webshop .btn-primary,\n  #webshop .btn-ghost {\n    margin: 0 !important;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function() {\n\n  function runCartSequence() {\n\n    const addBtn =\n      document.querySelector('.ws-add-btn-2');\n\n    const cartCount =\n      document.querySelector('.ws-cart-count');\n\n    const miniCart =\n      document.querySelector('.ws-mini-cart');\n\n    const newItem =\n      document.querySelector('.ws-new-item');\n\n    const title =\n      miniCart?.querySelector('.mini-cart-title');\n\n\n    if (\n      !addBtn ||\n      !cartCount ||\n      !miniCart ||\n      !newItem\n    ) {\n      return;\n    }\n\n\n    setTimeout(() => {\n\n      addBtn.classList.add('ws-adding');\n\n      setTimeout(() => {\n        addBtn.classList.remove('ws-adding');\n      }, 400);\n\n\n      cartCount.textContent = '3';\n\n      cartCount.classList.add('ws-bump');\n\n      setTimeout(() => {\n        cartCount.classList.remove('ws-bump');\n      }, 450);\n\n\n      if (title) {\n        title.textContent = 'Cart (3)';\n      }\n\n\n      miniCart.classList.add('ws-cart-open');\n\n    }, 1500);\n\n\n    setTimeout(() => {\n\n      newItem.classList.add('ws-item-visible');\n\n    }, 2200);\n\n\n    setTimeout(() => {\n\n      miniCart.classList.remove('ws-cart-open');\n\n\n      setTimeout(() => {\n\n        newItem.classList.remove('ws-item-visible');\n\n        cartCount.textContent = '2';\n\n\n        if (title) {\n          title.textContent = 'Cart (2)';\n        }\n\n      }, 500);\n\n    }, 6000);\n\n  }\n\n\n  if (document.readyState === 'loading') {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      function() {\n\n        runCartSequence();\n\n        setInterval(\n          runCartSequence,\n          8500\n        );\n\n      }\n    );\n\n  } else {\n\n    runCartSequence();\n\n    setInterval(\n      runCartSequence,\n      8500\n    );\n\n  }\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ea4c067 elementor-widget elementor-widget-html\" data-id=\"ea4c067\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ADDITIONAL SERVICES SECTION -->\n<section class=\"service-section\" id=\"additional-services\">\n  <div class=\"service-inner\">\n\n    <div class=\"service-grid\" id=\"zl-grid\">\n\n      <!-- LEFT: Content -->\n      <div class=\"service-content\">\n\n        <div class=\"service-icon\">\n          <svg\n            width=\"40\"\n            height=\"40\"\n            viewBox=\"0 0 40 40\"\n            fill=\"none\"\n            stroke=\"#151DA5\"\n            stroke-width=\"1.8\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M20 6l3 9h9l-7 5 3 9-8-6-8 6 3-9-7-5h9z\"\/>\n          <\/svg>\n        <\/div>\n\n        <h2 class=\"service-heading\">\n          Additional Services\n        <\/h2>\n\n        <p class=\"service-desc\">\n          We create brand identities that look professional and stay memorable.\n          From your logo to print materials, everything works together to create a clear and consistent presence across every channel.\n        <\/p>\n\n        <ul class=\"service-list\">\n          <li><span class=\"list-check\">\u2713<\/span>A logo that truly fits your business<\/li>\n          <li><span class=\"list-check\">\u2713<\/span>Business cards people remember<\/li>\n          <li><span class=\"list-check\">\u2713<\/span>Print materials that look professional<\/li>\n          <li><span class=\"list-check\">\u2713<\/span>A consistent brand across every channel<\/li>\n          <li><span class=\"list-check\">\u2713<\/span>Clear positioning instead of generic design<\/li>\n        <\/ul>\n\n        <div class=\"service-actions\">\n\n          <a href=\"\/en\/contact\/\" class=\"btn-primary\">\n            <span class=\"btn-primary__text\">Start your project<\/span>\n            <span class=\"btn-primary__shine\"><\/span>\n          <\/a>\n\n          <a href=\"\/en\/references\/\" class=\"btn-ghost\">\n            <span>View our work<\/span>\n\n            <svg\n              class=\"btn-ghost__arrow\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M3 8h10M9 4l4 4-4 4\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.6\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              \/>\n            <\/svg>\n          <\/a>\n\n        <\/div>\n      <\/div>\n\n\n      <!-- RIGHT: Rotating panels -->\n      <div class=\"service-visual\">\n\n        <div class=\"zl-rotator\">\n\n          <!-- Dots navigation -->\n          <div class=\"zl-dots\">\n            <button class=\"zl-dot zl-dot--active\" data-panel=\"0\"><\/button>\n            <button class=\"zl-dot\" data-panel=\"1\"><\/button>\n            <button class=\"zl-dot\" data-panel=\"2\"><\/button>\n          <\/div>\n\n\n          <!-- Panel 1: Corporate Identity -->\n          <div class=\"zl-panel zl-panel--active\" data-index=\"0\">\n\n            <div class=\"zl-panel-header\">\n\n              <div class=\"zl-panel-icon\">\n                <svg\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <path d=\"M12 2l2.5 7h7L16 13l2.5 7L12 16l-6.5 4L8 13 2.5 9h7z\"\/>\n                <\/svg>\n              <\/div>\n\n              <span>Corporate Identity<\/span>\n\n              <div class=\"zl-panel-dot\"><\/div>\n\n            <\/div>\n\n\n            <div class=\"zl-panel-body\">\n\n              <div class=\"zl-p-row\">\n\n                <div class=\"zl-p-label\">\n                  Logo\n                <\/div>\n\n                <div class=\"zl-p-logo-preview\">\n\n                  <div class=\"zl-p-logo-mark\"><\/div>\n\n                  <div class=\"zl-p-logo-wordmark\"><\/div>\n\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"zl-p-row\">\n\n                <div class=\"zl-p-label\">\n                  Colours\n                <\/div>\n\n                <div class=\"zl-p-swatches\">\n\n                  <div\n                    class=\"zl-p-swatch\"\n                    style=\"background:#151DA5\"\n                  ><\/div>\n\n                  <div\n                    class=\"zl-p-swatch\"\n                    style=\"background:rgba(21,29,165,0.75)\"\n                  ><\/div>\n\n                  <div\n                    class=\"zl-p-swatch\"\n                    style=\"background:rgba(21,29,165,0.50)\"\n                  ><\/div>\n\n                  <div\n                    class=\"zl-p-swatch\"\n                    style=\"background:rgba(21,29,165,0.10);border:1px solid rgba(21,29,165,0.16)\"\n                  ><\/div>\n\n                  <div\n                    class=\"zl-p-swatch\"\n                    style=\"background:#0D0D0D\"\n                  ><\/div>\n\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"zl-p-row\">\n\n                <div class=\"zl-p-label\">\n                  Business Card\n                <\/div>\n\n                <div class=\"zl-p-bizcard\">\n\n                  <div class=\"zl-p-bc-front\">\n\n                    <div class=\"zl-p-bc-logo\">\n\n                      <div class=\"zl-p-bc-mark\"><\/div>\n\n                      <div class=\"zl-p-bc-name\"><\/div>\n\n                    <\/div>\n\n                    <div class=\"zl-p-bc-lines\">\n\n                      <div class=\"zl-p-bc-line\"><\/div>\n\n                      <div\n                        class=\"zl-p-bc-line\"\n                        style=\"width:65%\"\n                      ><\/div>\n\n                    <\/div>\n\n                  <\/div>\n\n                  <div class=\"zl-p-bc-back\"><\/div>\n\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n          <!-- Panel 2: SEO & Visibility -->\n          <div class=\"zl-panel\" data-index=\"1\">\n\n            <div class=\"zl-panel-header\">\n\n              <div class=\"zl-panel-icon\">\n\n                <svg\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n                  <path d=\"M21 21l-4.35-4.35\"\/>\n                <\/svg>\n\n              <\/div>\n\n              <span>SEO &amp; Visibility<\/span>\n\n              <div class=\"zl-panel-dot\"><\/div>\n\n            <\/div>\n\n\n            <div class=\"zl-panel-body\">\n\n              <div class=\"zl-p-row\">\n\n                <div class=\"zl-p-label\">\n                  Google\n                <\/div>\n\n                <div class=\"zl-p-serp\">\n\n                  <div class=\"zl-p-serp-item zl-p-serp-item--top\">\n\n                    <div class=\"zl-p-serp-url\"><\/div>\n\n                    <div class=\"zl-p-serp-title\"><\/div>\n\n                    <div class=\"zl-p-serp-desc\"><\/div>\n\n                  <\/div>\n\n                  <div class=\"zl-p-serp-item\">\n\n                    <div\n                      class=\"zl-p-serp-url\"\n                      style=\"opacity:.4\"\n                    ><\/div>\n\n                    <div\n                      class=\"zl-p-serp-title\"\n                      style=\"opacity:.4\"\n                    ><\/div>\n\n                    <div\n                      class=\"zl-p-serp-desc\"\n                      style=\"opacity:.4\"\n                    ><\/div>\n\n                  <\/div>\n\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"zl-p-row\">\n\n                <div class=\"zl-p-label\">\n                  Maps\n                <\/div>\n\n                <div class=\"zl-p-map\">\n\n                  <div class=\"zl-p-map-bg\"><\/div>\n\n                  <div class=\"zl-p-map-pin\">\n\n                    <svg\n                      width=\"20\"\n                      height=\"24\"\n                      viewBox=\"0 0 20 24\"\n                      fill=\"none\"\n                    >\n                      <path\n                        d=\"M10 0C4.5 0 0 4.5 0 10c0 7.5 10 14 10 14s10-6.5 10-14C20 4.5 15.5 0 10 0z\"\n                        fill=\"#151DA5\"\n                      \/>\n\n                      <circle\n                        cx=\"10\"\n                        cy=\"10\"\n                        r=\"4\"\n                        fill=\"white\"\n                      \/>\n                    <\/svg>\n\n                  <\/div>\n\n\n                  <div class=\"zl-p-map-card\">\n\n                    <div class=\"zl-p-map-name\"><\/div>\n\n                    <div class=\"zl-p-map-stars\">\n                      \u2605\u2605\u2605\u2605\u2605\n                    <\/div>\n\n                  <\/div>\n\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n\n          <!-- Panel 3: Strategy & Performance -->\n          <div class=\"zl-panel\" data-index=\"2\">\n\n            <div class=\"zl-panel-header\">\n\n              <div class=\"zl-panel-icon\">\n\n                <svg\n                  width=\"14\"\n                  height=\"14\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"white\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                >\n                  <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/>\n                <\/svg>\n\n              <\/div>\n\n              <span>Strategy &amp; Performance<\/span>\n\n              <div class=\"zl-panel-dot\"><\/div>\n\n            <\/div>\n\n\n            <div class=\"zl-panel-body\">\n\n              <div class=\"zl-p-row\">\n\n                <div class=\"zl-p-label\">\n                  Performance\n                <\/div>\n\n                <div class=\"zl-p-chart\">\n\n                  <div class=\"zl-p-chart-bars\">\n\n                    <div\n                      class=\"zl-p-bar\"\n                      style=\"--h:40%\"\n                    ><\/div>\n\n                    <div\n                      class=\"zl-p-bar\"\n                      style=\"--h:65%\"\n                    ><\/div>\n\n                    <div\n                      class=\"zl-p-bar\"\n                      style=\"--h:50%\"\n                    ><\/div>\n\n                    <div\n                      class=\"zl-p-bar\"\n                      style=\"--h:80%\"\n                    ><\/div>\n\n                    <div\n                      class=\"zl-p-bar zl-p-bar--active\"\n                      style=\"--h:95%\"\n                    ><\/div>\n\n                  <\/div>\n\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"zl-p-row\">\n\n                <div class=\"zl-p-label\">\n                  Analysis\n                <\/div>\n\n                <div class=\"zl-p-checklist\">\n\n                  <div class=\"zl-p-check zl-p-check--done\">\n\n                    <svg\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 12 12\"\n                      fill=\"none\"\n                    >\n                      <path\n                        d=\"M2 6l3 3 5-5\"\n                        stroke=\"#151DA5\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      \/>\n                    <\/svg>\n\n                    <span>Target audience defined<\/span>\n\n                  <\/div>\n\n\n                  <div class=\"zl-p-check zl-p-check--done\">\n\n                    <svg\n                      width=\"10\"\n                      height=\"10\"\n                      viewBox=\"0 0 12 12\"\n                      fill=\"none\"\n                    >\n                      <path\n                        d=\"M2 6l3 3 5-5\"\n                        stroke=\"#151DA5\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      \/>\n                    <\/svg>\n\n                    <span>Competitors analysed<\/span>\n\n                  <\/div>\n\n\n                  <div class=\"zl-p-check zl-p-check--active\">\n\n                    <div class=\"zl-p-check-dot\"><\/div>\n\n                    <span>Developing strategy<\/span>\n\n                  <\/div>\n\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n\n        <!-- Floating badges -->\n        <div class=\"stat-badge stat-badge--top\">\n\n          <div class=\"stat-text\">\n            <strong>100%<\/strong>\n            <span>custom<\/span>\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"stat-badge stat-badge--bottom\">\n\n          <div class=\"stat-text\">\n            <strong>Print<\/strong>\n            <span>&amp; Digital<\/span>\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"visual-ring\"><\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- SERVICE CARDS GRID -->\n    <div class=\"zl-cards-section\">\n\n      <div class=\"zl-cards-heading\">\n        What\u2019s included\n      <\/div>\n\n      <div class=\"zl-cards-grid\">\n\n\n        <!-- Monthly Support -->\n        <div class=\"zl-card\">\n\n          <div class=\"zl-card-icon\">\n\n            <svg\n              width=\"22\"\n              height=\"22\"\n              viewBox=\"0 0 22 22\"\n              fill=\"none\"\n              stroke=\"#151DA5\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <circle cx=\"11\" cy=\"8\" r=\"4\"\/>\n              <path d=\"M3 19c0-4 3.6-7 8-7s8 3 8 7\"\/>\n            <\/svg>\n\n          <\/div>\n\n          <div class=\"zl-card-title\">\n            Monthly Support\n          <\/div>\n\n          <div class=\"zl-card-desc\">\n            We stay by your side with updates, changes and support whenever you need them.\n          <\/div>\n\n        <\/div>\n\n\n        <!-- SEO -->\n        <div class=\"zl-card\">\n\n          <div class=\"zl-card-icon\">\n\n            <svg\n              width=\"22\"\n              height=\"22\"\n              viewBox=\"0 0 22 22\"\n              fill=\"none\"\n              stroke=\"#151DA5\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M12 2C8 2 4 5.5 4 10c0 3 1.5 5.5 4 7v2h6v-2c2.5-1.5 4-4 4-7 0-4.5-4-8-6-8z\"\/>\n              <line x1=\"9\" y1=\"17\" x2=\"13\" y2=\"17\"\/>\n            <\/svg>\n\n          <\/div>\n\n          <div class=\"zl-card-title\">\n            SEO &amp; Visibility\n          <\/div>\n\n          <div class=\"zl-card-desc\">\n            Get found on Google with a technically sound, well structured website built with visibility in mind.\n          <\/div>\n\n        <\/div>\n\n\n        <!-- Maps -->\n        <div class=\"zl-card\">\n\n          <div class=\"zl-card-icon\">\n\n            <svg\n              width=\"22\"\n              height=\"22\"\n              viewBox=\"0 0 22 22\"\n              fill=\"none\"\n              stroke=\"#151DA5\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/>\n              <rect x=\"12\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/>\n              <rect x=\"3\" y=\"12\" width=\"7\" height=\"7\" rx=\"1\"\/>\n              <rect x=\"12\" y=\"12\" width=\"7\" height=\"7\" rx=\"1\"\/>\n            <\/svg>\n\n          <\/div>\n\n          <div class=\"zl-card-title\">\n            Google Maps \n          <\/div>\n\n          <div class=\"zl-card-desc\">\n            Get found locally with an optimised Google Business Profile and greater visibility nearby.\n          <\/div>\n\n        <\/div>\n\n\n        <!-- Branding -->\n        <div class=\"zl-card\">\n\n          <div class=\"zl-card-icon\">\n\n            <svg\n              width=\"22\"\n              height=\"22\"\n              viewBox=\"0 0 22 22\"\n              fill=\"none\"\n              stroke=\"#151DA5\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M12 2l2.5 7h7L16 13l2.5 7L12 16l-6.5 4L8 13 2.5 9h7z\"\/>\n            <\/svg>\n\n          <\/div>\n\n          <div class=\"zl-card-title\">\n            Logo &amp; Branding\n          <\/div>\n\n          <div class=\"zl-card-desc\">\n            A logo that fits your business and a brand identity people remember.\n          <\/div>\n\n        <\/div>\n\n\n        <!-- Print -->\n        <div class=\"zl-card\">\n\n          <div class=\"zl-card-icon\">\n\n            <svg\n              width=\"22\"\n              height=\"22\"\n              viewBox=\"0 0 22 22\"\n              fill=\"none\"\n              stroke=\"#151DA5\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <rect x=\"2\" y=\"4\" width=\"18\" height=\"14\" rx=\"2\"\/>\n              <path d=\"M7 9h8M7 13h5\"\/>\n            <\/svg>\n\n          <\/div>\n\n          <div class=\"zl-card-title\">\n            Flyers &amp; Print Materials\n          <\/div>\n\n          <div class=\"zl-card-desc\">\n            Business cards, flyers and more, professionally designed and ready for print.\n          <\/div>\n\n        <\/div>\n\n\n        <!-- Funding -->\n        <div class=\"zl-card\">\n\n          <div class=\"zl-card-icon\">\n\n            <svg\n              width=\"22\"\n              height=\"22\"\n              viewBox=\"0 0 22 22\"\n              fill=\"none\"\n              stroke=\"#151DA5\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M3 3h7v7H3zM12 3h7v7h-7zM3 12h7v7H3z\"\/>\n              <path d=\"M12 15.5h7M15.5 12v7\"\/>\n            <\/svg>\n\n          <\/div>\n\n          <div class=\"zl-card-title\">\n            Funding Advice\n          <\/div>\n\n          <div class=\"zl-card-desc\">\n            We show you which funding options may be available and help you make the most of them.\n          <\/div>\n\n        <\/div>\n\n\n        <!-- Strategy -->\n        <div class=\"zl-card\">\n\n          <div class=\"zl-card-icon\">\n\n            <svg\n              width=\"22\"\n              height=\"22\"\n              viewBox=\"0 0 22 22\"\n              fill=\"none\"\n              stroke=\"#151DA5\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M2 8l10-5 10 5-10 5z\"\/>\n              <path d=\"M6 10.5V16c0 1.5 2 3 5 3s5-1.5 5-3v-5.5\"\/>\n            <\/svg>\n\n          <\/div>\n\n          <div class=\"zl-card-title\">\n            Strategy Session\n          <\/div>\n\n          <div class=\"zl-card-desc\">\n            We look at where you are, where you want to go and how your website can help you get there.\n          <\/div>\n\n        <\/div>\n\n\n        <!-- Performance -->\n        <div class=\"zl-card\">\n\n          <div class=\"zl-card-icon\">\n\n            <svg\n              width=\"22\"\n              height=\"22\"\n              viewBox=\"0 0 22 22\"\n              fill=\"none\"\n              stroke=\"#151DA5\"\n              stroke-width=\"1.6\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <polyline points=\"2,16 7,10 11,13 16,7 20,9\"\/>\n              <rect x=\"2\" y=\"17\" width=\"3\" height=\"3\" rx=\"0.5\"\/>\n              <rect x=\"9\" y=\"13\" width=\"3\" height=\"7\" rx=\"0.5\"\/>\n              <rect x=\"16\" y=\"8\" width=\"3\" height=\"12\" rx=\"0.5\"\/>\n            <\/svg>\n\n          <\/div>\n\n          <div class=\"zl-card-title\">\n            Performance Analysis\n          <\/div>\n\n          <div class=\"zl-card-desc\">\n            We show you what\u2019s working, what isn\u2019t and how to get more from your website.\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n<style>\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   BUTTONS FOR ADDITIONAL SERVICES ONLY\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#additional-services .service-actions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-wrap: wrap;\n  margin-top: 0 !important;\n}\n\n\n\/* PRIMARY BUTTON *\/\n\n#additional-services .btn-primary,\n#additional-services .btn-primary__text {\n  font-size: 16px !important;\n}\n\n#additional-services .btn-primary {\n  position: relative;\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n\n  gap: 8px;\n\n  padding: 14px 28px;\n\n  border: none;\n  border-radius: 6px;\n\n  background: #151DA5 !important;\n  color: #fff !important;\n\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 1;\n\n  text-decoration: none !important;\n\n  overflow: hidden;\n\n  visibility: visible !important;\n  opacity: 1 !important;\n\n  margin: 0 !important;\n  align-self: center;\n\n  transition:\n    transform 0.2s ease,\n    box-shadow 0.2s ease;\n\n  box-shadow:\n    0 4px 18px rgba(21, 29, 165, 0.28);\n}\n\n#additional-services .btn-primary__text {\n  position: relative;\n  z-index: 1;\n  color: #fff !important;\n}\n\n#additional-services .btn-primary__shine {\n  position: absolute;\n  inset: 0;\n\n  background: linear-gradient(\n    105deg,\n    transparent 30%,\n    rgba(255,255,255,0.22) 50%,\n    transparent 70%\n  );\n\n  transform: translateX(-100%);\n  transition: transform 0s;\n}\n\n#additional-services .btn-primary:hover {\n  background: #151DA5 !important;\n  color: #fff !important;\n\n  transform: translateY(-2px);\n\n  box-shadow:\n    0 8px 28px rgba(21, 29, 165, 0.40);\n}\n\n#additional-services .btn-primary:hover .btn-primary__shine {\n  transform: translateX(200%);\n  transition: transform 0.55s ease;\n}\n\n\n\/* GHOST BUTTON *\/\n\n#additional-services .btn-ghost {\n  position: relative;\n\n  display: inline-flex !important;\n  align-items: center;\n  justify-content: center;\n\n  gap: 6px;\n\n  padding: 14px 4px;\n\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 1;\n\n  color: var(--text) !important;\n\n  text-decoration: none !important;\n\n  visibility: visible !important;\n  opacity: 1 !important;\n\n  margin: 0 !important;\n  align-self: center;\n}\n\n#additional-services .btn-ghost__arrow {\n  transition: transform 0.25s ease;\n}\n\n#additional-services .btn-ghost:hover .btn-ghost__arrow {\n  transform: translateX(4px);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   ROTATOR\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#additional-services .zl-rotator {\n  position: relative;\n  width: 100%;\n  max-width: 380px;\n  z-index: 2;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   DOTS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#additional-services .zl-dots {\n  display: flex;\n  justify-content: center;\n  gap: 8px;\n  margin-bottom: 14px;\n}\n\n#additional-services .zl-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  border: none;\n  background: rgba(21, 29, 165, 0.20);\n  cursor: pointer;\n  padding: 0;\n\n  transition:\n    background 0.2s,\n    transform 0.2s;\n}\n\n#additional-services .zl-dot--active {\n  background: #151DA5;\n  transform: scale(1.25);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PANEL\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#additional-services .zl-panel {\n  display: none;\n  background: #fff;\n  border: 1px solid #e4e6f2;\n  border-radius: 14px;\n  overflow: hidden;\n\n  box-shadow:\n    0 4px 24px rgba(21, 29, 165, 0.08),\n    0 1px 4px rgba(0, 0, 0, 0.04);\n\n  animation: zl-fade-in 0.4s ease;\n}\n\n#additional-services .zl-panel--active {\n  display: block;\n}\n\n@keyframes zl-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PANEL HEADER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#additional-services .zl-panel-header {\n  background: #151DA5;\n  padding: 12px 16px;\n\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  font-size: 11px;\n  font-weight: 700;\n  color: white;\n  letter-spacing: 0.05em;\n}\n\n#additional-services .zl-panel-icon {\n  width: 26px;\n  height: 26px;\n\n  background: rgba(255, 255, 255, 0.15);\n\n  border-radius: 6px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  flex-shrink: 0;\n}\n\n#additional-services .zl-panel-dot {\n  width: 7px;\n  height: 7px;\n\n  background: #4ade80;\n  border-radius: 50%;\n\n  margin-left: auto;\n\n  box-shadow:\n    0 0 6px #4ade80;\n\n  animation:\n    pulse-zl 2s ease-in-out infinite;\n}\n\n@keyframes pulse-zl {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.4;\n  }\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PANEL BODY\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#additional-services .zl-panel-body {\n  padding: 16px;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 14px;\n}\n\n#additional-services .zl-p-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n#additional-services .zl-p-label {\n  font-size: 9px;\n  font-weight: 700;\n\n  letter-spacing: 0.08em;\n\n  color: #9099b5;\n\n  min-width: 68px;\n  flex-shrink: 0;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PANEL 1\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#additional-services .zl-p-logo-preview {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  background: #f4f5f9;\n\n  border-radius: 6px;\n\n  padding: 8px 12px;\n\n  flex: 1;\n}\n\n#additional-services .zl-p-logo-mark {\n  width: 22px;\n  height: 22px;\n\n  background: #151DA5;\n\n  border-radius: 5px;\n\n  flex-shrink: 0;\n}\n\n#additional-services .zl-p-logo-wordmark {\n  height: 8px;\n  flex: 1;\n\n  background: #0d0d0d;\n\n  border-radius: 3px;\n\n  max-width: 80px;\n}\n\n#additional-services .zl-p-swatches {\n  display: flex;\n  gap: 6px;\n}\n\n#additional-services .zl-p-swatch {\n  width: 26px;\n  height: 26px;\n  border-radius: 6px;\n}\n\n\n\/* BUSINESS CARD *\/\n\n#additional-services .zl-p-bizcard {\n  display: flex;\n  gap: 8px;\n}\n\n#additional-services .zl-p-bc-front {\n  width: 110px;\n  height: 62px;\n\n  background: #fff;\n\n  border: 1px solid #e4e6f2;\n\n  border-radius: 5px;\n\n  padding: 8px;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  box-shadow:\n    0 2px 8px rgba(21, 29, 165, 0.08);\n}\n\n#additional-services .zl-p-bc-logo {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n#additional-services .zl-p-bc-mark {\n  width: 16px;\n  height: 16px;\n\n  background: #151DA5;\n\n  border-radius: 3px;\n}\n\n#additional-services .zl-p-bc-name {\n  height: 6px;\n  width: 44px;\n\n  background: #0d0d0d;\n\n  border-radius: 2px;\n}\n\n#additional-services .zl-p-bc-lines {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n#additional-services .zl-p-bc-line {\n  height: 4px;\n\n  background: rgba(21, 29, 165, 0.16);\n\n  border-radius: 2px;\n}\n\n#additional-services .zl-p-bc-back {\n  width: 110px;\n  height: 62px;\n\n  background: #151DA5;\n\n  border-radius: 5px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PANEL 2\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#additional-services .zl-p-serp {\n  flex: 1;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 6px;\n}\n\n#additional-services .zl-p-serp-item {\n  background: rgba(21, 29, 165, 0.03);\n\n  border-radius: 5px;\n\n  padding: 5px 8px;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 3px;\n}\n\n#additional-services .zl-p-serp-item--top {\n  border-left: 2px solid #151DA5;\n  background: #fff;\n}\n\n#additional-services .zl-p-serp-url {\n  height: 5px;\n  width: 60px;\n\n  background: #4ade80;\n\n  border-radius: 2px;\n\n  opacity: 0.7;\n}\n\n#additional-services .zl-p-serp-title {\n  height: 7px;\n  width: 90%;\n\n  background: #151DA5;\n\n  border-radius: 2px;\n\n  opacity: 0.7;\n}\n\n#additional-services .zl-p-serp-desc {\n  height: 5px;\n  width: 80%;\n\n  background: #d0d4e8;\n\n  border-radius: 2px;\n}\n\n\n\/* MAP *\/\n\n#additional-services .zl-p-map {\n  flex: 1;\n  height: 60px;\n\n  background: rgba(21, 29, 165, 0.06);\n\n  border-radius: 6px;\n\n  position: relative;\n  overflow: hidden;\n}\n\n#additional-services .zl-p-map-bg {\n  position: absolute;\n  inset: 0;\n\n  background-image:\n    linear-gradient(\n      rgba(21, 29, 165, 0.08) 1px,\n      transparent 1px\n    ),\n    linear-gradient(\n      90deg,\n      rgba(21, 29, 165, 0.08) 1px,\n      transparent 1px\n    );\n\n  background-size: 12px 12px;\n}\n\n#additional-services .zl-p-map-pin {\n  position: absolute;\n\n  top: 4px;\n  left: 50%;\n\n  transform: translateX(-50%);\n\n  animation:\n    map-bounce 2s ease-in-out infinite;\n}\n\n@keyframes map-bounce {\n  0%,\n  100% {\n    transform:\n      translateX(-50%)\n      translateY(0);\n  }\n\n  50% {\n    transform:\n      translateX(-50%)\n      translateY(-4px);\n  }\n}\n\n#additional-services .zl-p-map-card {\n  position: absolute;\n\n  bottom: 5px;\n  left: 8px;\n\n  background: white;\n\n  border-radius: 4px;\n\n  padding: 3px 6px;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  box-shadow:\n    0 1px 4px rgba(0, 0, 0, 0.1);\n}\n\n#additional-services .zl-p-map-name {\n  height: 5px;\n  width: 50px;\n\n  background: #0d0d0d;\n\n  border-radius: 2px;\n}\n\n#additional-services .zl-p-map-stars {\n  font-size: 8px;\n  color: #f5a623;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PANEL 3\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#additional-services .zl-p-chart {\n  flex: 1;\n  height: 52px;\n\n  display: flex;\n  align-items: flex-end;\n}\n\n#additional-services .zl-p-chart-bars {\n  display: flex;\n  align-items: flex-end;\n\n  gap: 4px;\n\n  height: 100%;\n  flex: 1;\n}\n\n#additional-services .zl-p-bar {\n  flex: 1;\n\n  height: var(--h);\n\n  background: rgba(21, 29, 165, 0.12);\n\n  border-radius: 3px 3px 0 0;\n}\n\n#additional-services .zl-p-bar--active {\n  background: #151DA5;\n}\n\n\n\/* CHECKLIST *\/\n\n#additional-services .zl-p-checklist {\n  flex: 1;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 5px;\n}\n\n#additional-services .zl-p-check {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n\n  font-size: 10px;\n\n  color: #444;\n\n  font-weight: 500;\n}\n\n#additional-services .zl-p-check--done {\n  background: rgba(21, 29, 165, 0.05);\n\n  border-radius: 4px;\n\n  padding: 4px 8px;\n}\n\n#additional-services .zl-p-check--active {\n  padding: 4px 8px;\n\n  background: #fff8e1;\n\n  border-radius: 4px;\n\n  color: #b45309;\n}\n\n#additional-services .zl-p-check-dot {\n  width: 8px;\n  height: 8px;\n\n  border-radius: 50%;\n\n  border: 2px solid #f59e0b;\n\n  flex-shrink: 0;\n\n  animation:\n    pulse-zl 1.2s ease-in-out infinite;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SERVICE CARDS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n#additional-services .zl-cards-section {\n  margin-top: 64px;\n}\n\n#additional-services .zl-cards-heading {\n  font-size: 16px;\n  font-weight: 700;\n\n  letter-spacing: 0.1em;\n\n  color: #999;\n\n  margin-bottom: 24px;\n}\n\n#additional-services .zl-cards-grid {\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, 1fr);\n\n  gap: 16px;\n}\n\n\n\/* CARD *\/\n\n#additional-services .zl-card {\n  background: #fff;\n\n  border:\n    0.5px solid\n    rgba(21, 29, 165, 0.55);\n\n  border-radius: 12px;\n\n  padding: 20px 18px;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 8px;\n\n  transition:\n    border-color 0.2s,\n    box-shadow 0.2s,\n    transform 0.2s;\n}\n\n#additional-services .zl-card:hover {\n  border-color: #151DA5;\n  box-shadow: none;\n  transform: scale(1.05);\n}\n\n\n\/* CARD ICON *\/\n\n#additional-services .zl-card-icon {\n  width: 40px;\n  height: 40px;\n\n  background:\n    rgba(21, 29, 165, 0.07);\n\n  border-radius: 10px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  margin-bottom: 4px;\n\n  transition:\n    background 0.2s;\n}\n\n#additional-services .zl-card:hover .zl-card-icon {\n  background:\n    rgba(21, 29, 165, 0.12);\n}\n\n\n\/* CARD TEXT *\/\n\n#additional-services .zl-card-title {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--text);\n}\n\n#additional-services .zl-card-desc {\n  font-size: 16px;\n  line-height: 1.6;\n  color: #666;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   RESPONSIVE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 1100px) {\n\n  #additional-services .zl-cards-grid {\n    grid-template-columns:\n      repeat(2, 1fr);\n  }\n\n}\n\n\n@media (max-width: 900px) {\n\n  #additional-services .zl-cards-grid {\n    grid-template-columns:\n      repeat(2, 1fr);\n  }\n\n}\n\n\n@media (max-width: 600px) {\n\n  #additional-services .zl-cards-grid {\n    grid-template-columns: 1fr;\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MOBILE FIX\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 767px) {\n\n  #additional-services {\n    overflow: hidden;\n  }\n\n  #additional-services .service-inner,\n  #additional-services .service-grid,\n  #additional-services .service-content,\n  #additional-services .service-visual,\n  #additional-services .zl-rotator,\n  #additional-services .zl-panel {\n    width: 100%;\n    max-width: 100%;\n    min-width: 0;\n  }\n\n  #additional-services .service-grid {\n    overflow: hidden;\n  }\n\n  #additional-services .service-visual {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n  }\n\n  #additional-services .zl-rotator {\n    max-width: 100%;\n  }\n\n  #additional-services .zl-panel-body {\n    padding: 14px;\n  }\n\n  #additional-services .zl-p-row {\n    gap: 10px;\n    align-items: flex-start;\n  }\n\n  #additional-services .zl-p-label {\n    min-width: 56px;\n  }\n\n  #additional-services .zl-p-bizcard {\n    flex-wrap: wrap;\n    gap: 6px;\n  }\n\n  #additional-services .zl-p-bc-front,\n  #additional-services .zl-p-bc-back {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  #additional-services .zl-p-swatches {\n    flex-wrap: wrap;\n  }\n\n  #additional-services .stat-badge,\n  #additional-services .visual-ring {\n    display: none;\n  }\n\n  #additional-services .service-actions {\n    justify-content: center;\n    align-items: center;\n    margin-top: 0 !important;\n  }\n\n  #additional-services .btn-primary,\n  #additional-services .btn-ghost {\n    margin: 0 !important;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function() {\n\n  const section =\n    document.querySelector('#additional-services');\n\n  if (!section) {\n    return;\n  }\n\n  const panels =\n    section.querySelectorAll('.zl-panel');\n\n  const dots =\n    section.querySelectorAll('.zl-dot');\n\n  let current = 0;\n  let timer;\n\n\n  function showPanel(index) {\n\n    panels.forEach(panel => {\n      panel.classList.remove(\n        'zl-panel--active'\n      );\n    });\n\n    dots.forEach(dot => {\n      dot.classList.remove(\n        'zl-dot--active'\n      );\n    });\n\n    panels[index].classList.add(\n      'zl-panel--active'\n    );\n\n    dots[index].classList.add(\n      'zl-dot--active'\n    );\n\n    current = index;\n\n  }\n\n\n  function next() {\n\n    showPanel(\n      (current + 1) %\n      panels.length\n    );\n\n  }\n\n\n  function startTimer() {\n\n    timer =\n      setInterval(\n        next,\n        3500\n      );\n\n  }\n\n\n  dots.forEach((dot, i) => {\n\n    dot.addEventListener(\n      'click',\n      () => {\n\n        clearInterval(timer);\n\n        showPanel(i);\n\n        startTimer();\n\n      }\n    );\n\n  });\n\n\n  startTimer();\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b236a2 elementor-widget elementor-widget-html\" data-id=\"9b236a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \"WHY WE THINK DIFFERENTLY\" SECTION -->\n<section class=\"warum-section\">\n  <div class=\"warum-inner\">\n    \n    <h2 class=\"warum-heading\">\n      Why we <span>think differently<\/span>\n    <\/h2>\n\n    <div class=\"warum-grid\">\n      \n      <div class=\"warum-text\">\n\n        <p>\n          Many agencies start with colours, layouts and trends.\n          We start with your business.\n\n          We want to understand how your business works.\n          Who your customers are. And what your website actually needs to achieve.\n        <\/p>\n\n        <p>\n          Because a website is more than just good design.\n          It shapes whether people trust you.\n          Whether they feel understood.\n          And whether a visitor becomes a customer.\n        <\/p>\n\n        <p>\n          That is why we do not just think like designers. We think like business owners.\n          We create clear structures, focus on what matters\n          and build solutions designed to work for the long term.\n        <\/p>\n\n        <p class=\"warum-closing\">\n          Not loud. Not overloaded. <strong>Just thoughtfully designed.<\/strong>\n        <\/p>\n\n        <a href=\"\/en\/contact\/\" class=\"btn-primary\">\n          <span class=\"btn-primary__text\">Start your project<\/span>\n          <span class=\"btn-primary__shine\"><\/span>\n        <\/a>\n\n      <\/div>\n\n\n      <div class=\"warum-pillars\">\n\n        <div class=\"pillar\">\n\n          <div class=\"pillar-number\">\n            1\n          <\/div>\n\n          <div class=\"pillar-content\">\n            <h3>Understand first. Design second.<\/h3>\n\n            <p>\n              We get to know your business before we start designing anything.\n            <\/p>\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pillar\">\n\n          <div class=\"pillar-number\">\n            2\n          <\/div>\n\n          <div class=\"pillar-content\">\n            <h3>Think like a business<\/h3>\n\n            <p>\n              Every decision serves a purpose, from generating more enquiries to supporting growth.\n            <\/p>\n          <\/div>\n\n        <\/div>\n\n\n        <div class=\"pillar\">\n\n          <div class=\"pillar-number\">\n            3\n          <\/div>\n\n          <div class=\"pillar-content\">\n            <h3>Built for the long term<\/h3>\n\n            <p>\n              Websites designed to grow with your business, not hold it back.\n            <\/p>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n<style>\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SECTION\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.warum-section {\n  background: #FDFDFD;\n  padding: 96px 0;\n  position: relative;\n  overflow: hidden;\n}\n\n.warum-section::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n\n  background-image:\n    radial-gradient(\n      circle,\n      #d1d5e0 1px,\n      transparent 1px\n    );\n\n  background-size: 28px 28px;\n  opacity: 0.35;\n  pointer-events: none;\n}\n\n.warum-inner {\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 40px;\n  position: relative;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   HEADING\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.warum-heading {\n  font-size: 40px;\n  font-weight: 800;\n  color: #0d0d0d;\n  margin: 0 0 56px 0;\n  line-height: 1.1;\n}\n\n.warum-heading span {\n  color: #151DA5;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   GRID\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.warum-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 72px;\n  align-items: start;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   TEXT\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.warum-text p {\n  font-size: 16px;\n  line-height: 1.75;\n  color: #3a3a3a;\n  margin: 0 0 20px 0;\n}\n\n.warum-closing {\n  font-size: 16px !important;\n  color: #0d0d0d !important;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PRIMARY BUTTON\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.warum-section .btn-primary {\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n\n  padding: 14px 28px;\n\n  border-radius: 6px;\n\n  background: #151DA5;\n\n  color: #fff !important;\n\n  font-size: 16px;\n  font-weight: 600;\n\n  text-decoration: none;\n\n  overflow: hidden;\n\n  transition:\n    transform 0.2s ease,\n    box-shadow 0.2s ease;\n\n  box-shadow:\n    0 4px 18px rgba(21, 29, 165, 0.28);\n\n  margin-top: 28px;\n}\n\n.warum-section .btn-primary__text,\n.warum-section .btn-primary__icon {\n  color: #fff !important;\n  position: relative;\n  z-index: 1;\n}\n\n.warum-section .btn-primary__shine {\n  position: absolute;\n  inset: 0;\n\n  background:\n    linear-gradient(\n      105deg,\n      transparent 30%,\n      rgba(255, 255, 255, 0.22) 50%,\n      transparent 70%\n    );\n\n  transform: translateX(-100%);\n  z-index: 0;\n}\n\n.warum-section .btn-primary:hover {\n  background: #151DA5;\n\n  transform: translateY(-2px);\n\n  box-shadow:\n    0 8px 28px rgba(21, 29, 165, 0.40);\n\n  color: #fff !important;\n}\n\n.warum-section .btn-primary:hover .btn-primary__shine {\n  transform: translateX(200%);\n  transition: transform 0.55s ease;\n}\n\n.warum-section .btn-primary:hover .btn-primary__icon {\n  animation: nudge-right 0.4s ease forwards;\n}\n\n@keyframes nudge-right {\n\n  0% {\n    transform: translateX(0);\n  }\n\n  50% {\n    transform: translateX(5px);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PILLARS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.warum-pillars {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n}\n\n.pillar {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n\n  padding: 28px 0;\n\n  border-bottom:\n    0.5px solid\n    rgba(21, 29, 165, 0.45);\n\n  transition: background 0.2s;\n}\n\n.pillar-number {\n  width: 28px;\n  height: 28px;\n\n  border-radius: 8px;\n\n  background: #151DA5;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  flex-shrink: 0;\n\n  font-size: 11px;\n  font-weight: 800;\n\n  color: #ffffff;\n\n  line-height: 1;\n\n  font-variant-numeric: tabular-nums;\n\n  transform: translateY(-2px);\n\n  transition: transform 0.2s ease;\n}\n\n.pillar:hover .pillar-number {\n  transform:\n    translateY(-2px)\n    scale(1.05);\n}\n\n.pillar-content h3 {\n  font-size: 16px;\n  font-weight: 700;\n\n  color: #0d0d0d;\n\n  margin: 0 0 8px 0;\n}\n\n.pillar-content p {\n  font-size: 16px;\n  line-height: 1.65;\n\n  color: #666;\n\n  margin: 0;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   TABLET\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 1024px) {\n\n  .warum-heading {\n    font-size: 36px;\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MOBILE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 768px) {\n\n  .warum-section {\n    padding: 72px 0;\n  }\n\n  .warum-inner {\n    padding: 0 20px;\n  }\n\n  .warum-grid {\n    grid-template-columns: 1fr;\n    gap: 48px;\n  }\n\n  .warum-heading {\n    font-size: 24px;\n    margin-bottom: 36px;\n  }\n\n  .warum-text .btn-primary {\n    width: fit-content;\n\n    margin-left: auto;\n    margin-right: auto;\n\n    display: flex;\n  }\n\n  .warum-pillars {\n    display: none;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Your digital presence makes the difference It shapes whether people trust you, buy from you or get in touch. Websites Build trust Online Shop Drive more sales More Services Go further online Websites We build websites that communicate your offer clearly and guide visitors towards becoming customers. No templates. No gimmicks. Just websites designed to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3967,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4002","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Our services | BSC Webdesign Vienna<\/title>\n<meta name=\"description\" content=\"Discover our services: Websites, webshops, logos &amp; Google Maps optimization. Simple, professional &amp; affordable.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bscwebdesign.at\/en\/services\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Our services | BSC Webdesign Vienna\" \/>\n<meta property=\"og:description\" content=\"Discover our services: Websites, webshops, logos &amp; Google Maps optimization. Simple, professional &amp; affordable.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bscwebdesign.at\/en\/services\/\" \/>\n<meta property=\"og:site_name\" content=\"bscwebdesign.at\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-16T10:19:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/logo-klein.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"24 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/services\\\/\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/services\\\/\",\"name\":\"Our services | BSC Webdesign Vienna\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/services\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/services\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/cropped-logo-klein.webp\",\"datePublished\":\"2025-07-14T13:09:13+00:00\",\"dateModified\":\"2026-07-16T10:19:50+00:00\",\"description\":\"Discover our services: Websites, webshops, logos & Google Maps optimization. Simple, professional & affordable.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/services\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/services\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/services\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/cropped-logo-klein.webp\",\"contentUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/cropped-logo-klein.webp\",\"width\":512,\"height\":512,\"caption\":\"BSC Webdesign Logo \u2013 Professionelle Websites und Webshops aus \u00d6sterreich.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/services\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Services\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#website\",\"url\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/\",\"name\":\"bscwebdesign.at\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#organization\",\"name\":\"bscwebdesign.at\",\"url\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/bsc-logo-next.webp\",\"contentUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/bsc-logo-next.webp\",\"width\":2500,\"height\":1000,\"caption\":\"bscwebdesign.at\"},\"image\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Our services | BSC Webdesign Vienna","description":"Discover our services: Websites, webshops, logos & Google Maps optimization. Simple, professional & affordable.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bscwebdesign.at\/en\/services\/","og_locale":"en_US","og_type":"article","og_title":"Our services | BSC Webdesign Vienna","og_description":"Discover our services: Websites, webshops, logos & Google Maps optimization. Simple, professional & affordable.","og_url":"https:\/\/bscwebdesign.at\/en\/services\/","og_site_name":"bscwebdesign.at","article_modified_time":"2026-07-16T10:19:50+00:00","og_image":[{"url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/logo-klein.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bscwebdesign.at\/en\/services\/","url":"https:\/\/bscwebdesign.at\/en\/services\/","name":"Our services | BSC Webdesign Vienna","isPartOf":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bscwebdesign.at\/en\/services\/#primaryimage"},"image":{"@id":"https:\/\/bscwebdesign.at\/en\/services\/#primaryimage"},"thumbnailUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/cropped-logo-klein.webp","datePublished":"2025-07-14T13:09:13+00:00","dateModified":"2026-07-16T10:19:50+00:00","description":"Discover our services: Websites, webshops, logos & Google Maps optimization. Simple, professional & affordable.","breadcrumb":{"@id":"https:\/\/bscwebdesign.at\/en\/services\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bscwebdesign.at\/en\/services\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bscwebdesign.at\/en\/services\/#primaryimage","url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/cropped-logo-klein.webp","contentUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/cropped-logo-klein.webp","width":512,"height":512,"caption":"BSC Webdesign Logo \u2013 Professionelle Websites und Webshops aus \u00d6sterreich."},{"@type":"BreadcrumbList","@id":"https:\/\/bscwebdesign.at\/en\/services\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bscwebdesign.at\/en\/"},{"@type":"ListItem","position":2,"name":"Services"}]},{"@type":"WebSite","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#website","url":"https:\/\/plum-ibex-319890.hostingersite.com\/","name":"bscwebdesign.at","description":"","publisher":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plum-ibex-319890.hostingersite.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#organization","name":"bscwebdesign.at","url":"https:\/\/plum-ibex-319890.hostingersite.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/logo\/image\/","url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/07\/bsc-logo-next.webp","contentUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/07\/bsc-logo-next.webp","width":2500,"height":1000,"caption":"bscwebdesign.at"},"image":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/pages\/4002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/comments?post=4002"}],"version-history":[{"count":58,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/pages\/4002\/revisions"}],"predecessor-version":[{"id":15588,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/pages\/4002\/revisions\/15588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/media\/3967"}],"wp:attachment":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/media?parent=4002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}