{"id":166,"date":"2026-07-29T11:40:55","date_gmt":"2026-07-29T11:40:55","guid":{"rendered":"https:\/\/themealvar.com\/?page_id=166"},"modified":"2026-08-18T14:12:02","modified_gmt":"2026-08-18T14:12:02","slug":"h","status":"publish","type":"page","link":"https:\/\/themealvar.com\/","title":{"rendered":"H"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"166\" class=\"elementor elementor-166\">\n\t\t\t\t<div class=\"elementor-element elementor-element-71febbb e-con e-atomic-element e-flexbox-base e-7822c0e \" data-id=\"71febbb\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"71febbb\">\n    \t\t<div class=\"elementor-element elementor-element-e36fd11 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"e36fd11\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"devseo-hero-host\"><\/div>\r\n\r\n<script>\r\n(function(){\r\n  var host = document.getElementById('devseo-hero-host');\r\n  if (!host) return;\r\n\r\n  var supportsShadow = !!host.attachShadow;\r\n  var root = supportsShadow ? host.attachShadow({ mode: 'open' }) : host;\r\n\r\n  root.innerHTML = `\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Unbounded:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');\r\n\r\n  :host{ all: initial; display:block; }\r\n\r\n  .devseo-hero{\r\n    --bg-0:#0B1220;\r\n    --bg-1:#101A2E;\r\n    --bg-2:#152343;\r\n    --line:#2A3B57;\r\n    --line-soft:rgba(94,234,212,.16);\r\n    --cyan:#7DF6E9;\r\n    --orange:#FFC98B;\r\n    --text-hi:#FFFFFF;\r\n    --text-mid:#E7EEF7;\r\n    --text-low:#B9C7D9;\r\n    --scroll: 0;\r\n\r\n    position:relative;\r\n    isolation:isolate;\r\n    overflow:hidden;\r\n    background:\r\n      radial-gradient(60% 55% at 82% 18%, rgba(94,234,212,.10), transparent 60%),\r\n      radial-gradient(50% 45% at 12% 85%, rgba(253,186,116,.08), transparent 60%),\r\n      var(--bg-0);\r\n    color:var(--text-hi);\r\n    font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n    min-height:100vh;\r\n    min-height:100svh;\r\n    padding: clamp(96px, 14vh, 140px) clamp(20px, 5vw, 64px) clamp(48px, 8vh, 96px);\r\n    box-sizing:border-box;\r\n  }\r\n  .devseo-hero *{ box-sizing:border-box; }\r\n\r\n  .devseo-hero__grid{\r\n    position:absolute; inset:-10% -10%;\r\n    background-image:\r\n      linear-gradient(var(--line-soft) 1px, transparent 1px),\r\n      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);\r\n    background-size: 56px 56px;\r\n    -webkit-mask-image: radial-gradient(65% 65% at 68% 30%, #000 30%, transparent 78%);\r\n            mask-image: radial-gradient(65% 65% at 68% 30%, #000 30%, transparent 78%);\r\n    transform: translateY(calc(var(--scroll) * -50px));\r\n    z-index:0;\r\n    pointer-events:none;\r\n  }\r\n\r\n  .devseo-hero__inner{\r\n    position:relative; z-index:1;\r\n    max-width:1280px; margin:0 auto;\r\n    display:grid;\r\n    grid-template-columns: 1.05fr 1fr;\r\n    align-items:center;\r\n    gap: clamp(40px, 6vw, 96px);\r\n  }\r\n\r\n  .devseo-hero__eyebrow{\r\n    display:inline-flex; align-items:center; gap:.6em;\r\n    font-family:'IBM Plex Mono', monospace;\r\n    font-size:.8125rem; font-weight:500;\r\n    letter-spacing:.14em; text-transform:uppercase;\r\n    color:var(--cyan);\r\n    margin:0 0 1.25em;\r\n  }\r\n  .devseo-hero__eyebrow::before{\r\n    content:''; width:8px; height:8px; border-radius:2px;\r\n    background:var(--orange);\r\n    box-shadow:0 0 12px 1px rgba(253,186,116,.7);\r\n    transform:rotate(45deg);\r\n    flex:none;\r\n  }\r\n  .devseo-hero__title{\r\n    font-family:'Unbounded', 'IBM Plex Sans', sans-serif;\r\n    font-weight:700;\r\n    font-size: clamp(2.1rem, 1.35rem + 3.4vw, 3.85rem);\r\n    line-height:1.06;\r\n    letter-spacing:-.01em;\r\n    margin:0 0 .5em;\r\n    text-wrap: balance;\r\n    color:var(--text-hi);\r\n  }\r\n  .devseo-hero__title em{ font-style:normal; color:var(--orange); }\r\n  .devseo-hero__lede{\r\n    font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem);\r\n    line-height:1.65;\r\n    color:var(--text-mid);\r\n    max-width:42ch;\r\n    margin:0 0 2.1em;\r\n  }\r\n\r\n  .devseo-hero__ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin:0 0 3rem; }\r\n  .devseo-hero__btn{\r\n    font-family:'IBM Plex Sans', sans-serif;\r\n    font-size:1rem; font-weight:600;\r\n    padding: .95em 1.7em;\r\n    border-radius:10px;\r\n    text-decoration:none;\r\n    display:inline-flex; align-items:center; gap:.6em;\r\n    min-height:44px;\r\n    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;\r\n  }\r\n  .devseo-hero__btn--primary{\r\n    background:var(--orange);\r\n    color:#241202;\r\n    box-shadow:0 8px 24px -8px rgba(253,186,116,.55);\r\n  }\r\n  .devseo-hero__btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(253,186,116,.7); }\r\n  .devseo-hero__btn--ghost{ background:transparent; color:var(--text-hi); border:1px solid var(--line); }\r\n  .devseo-hero__btn--ghost:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }\r\n  .devseo-hero__btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }\r\n  .devseo-hero__btn svg{ width:1em; height:1em; flex:none; }\r\n\r\n  .devseo-hero__stats{\r\n    display:flex; flex-wrap:wrap; gap: clamp(1.5rem, 3vw, 3rem);\r\n    border-top:1px solid var(--line);\r\n    padding-top:1.75rem;\r\n  }\r\n  .devseo-hero__stat-num{\r\n    display:block;\r\n    font-family:'IBM Plex Mono', monospace;\r\n    font-variant-numeric: tabular-nums;\r\n    font-weight:600; font-size:1.65rem;\r\n    color:var(--text-hi);\r\n  }\r\n  .devseo-hero__stat-num span{ color:var(--cyan); }\r\n  .devseo-hero__stat-label{\r\n    display:block; margin-top:.3em;\r\n    font-size:.8rem; color:var(--text-mid);\r\n    letter-spacing:.02em;\r\n  }\r\n\r\n  .devseo-hero__stage{ position:relative; height: clamp(360px, 44vw, 560px); perspective: 1300px; }\r\n  .devseo-hero__ring{\r\n    position:absolute; left:50%; top:54%;\r\n    width:88%; aspect-ratio:1\/1;\r\n    border:1px solid var(--line);\r\n    border-radius:50%;\r\n    transform: translate(-50%,-50%) rotateX(78deg);\r\n    box-shadow: 0 0 60px -10px var(--line-soft) inset;\r\n  }\r\n  .devseo-hero__ring--outer{ width:112%; opacity:.55; }\r\n\r\n  .devseo-hero__scene{\r\n    position:absolute; inset:0;\r\n    display:flex; align-items:center; justify-content:center;\r\n    transform-style:preserve-3d;\r\n    will-change:transform;\r\n    transform: rotateX(8deg) rotateY(-18deg);\r\n  }\r\n\r\n  .devseo-browser{\r\n    position:relative;\r\n    width:min(320px, 78%);\r\n    background:linear-gradient(160deg, var(--bg-1), var(--bg-2));\r\n    border:1px solid var(--line);\r\n    border-radius:16px;\r\n    box-shadow:\r\n      0 30px 70px -25px rgba(0,0,0,.65),\r\n      0 0 0 1px rgba(94,234,212,.06),\r\n      0 0 40px -8px rgba(94,234,212,.25);\r\n    transform: translate3d(-11%, -5%, 50px);\r\n    overflow:hidden;\r\n  }\r\n  .devseo-browser__bar{\r\n    display:flex; align-items:center; gap:.6rem;\r\n    padding:.7rem .8rem;\r\n    border-bottom:1px solid var(--line);\r\n    background:rgba(255,255,255,.02);\r\n  }\r\n  .devseo-browser__dot{ width:8px; height:8px; border-radius:50%; background:var(--line); flex:none; }\r\n  .devseo-browser__dot:nth-child(1){ background:var(--orange); opacity:.85; }\r\n  .devseo-browser__url{\r\n    flex:1;\r\n    font-family:'IBM Plex Mono', monospace;\r\n    font-size:.68rem; color:var(--text-low);\r\n    background:rgba(0,0,0,.25);\r\n    border:1px solid var(--line);\r\n    border-radius:6px;\r\n    padding:.3em .6em;\r\n    display:flex; align-items:center; gap:.4em;\r\n  }\r\n  .devseo-browser__url svg{ width:.8em; height:.8em; color:var(--cyan); flex:none; }\r\n\r\n  .devseo-browser__body{ display:grid; grid-template-columns:1.1fr .9fr; gap:1px; background:var(--line); }\r\n  .devseo-browser__code, .devseo-browser__seo{ background:var(--bg-1); padding:.9rem .85rem; }\r\n  .devseo-browser__code{ font-family:'IBM Plex Mono', monospace; font-size:.66rem; line-height:2; color:var(--text-low); }\r\n  .devseo-browser__code b{ color:var(--orange); font-weight:500; }\r\n  .devseo-browser__code i{ font-style:normal; color:var(--cyan); }\r\n  .devseo-browser__code .ln{ display:block; white-space:nowrap; overflow:hidden; }\r\n\r\n  .devseo-browser__seo{ display:flex; flex-direction:column; align-items:center; gap:.6rem; }\r\n  .devseo-browser__gauge{\r\n    --pct: 92%;\r\n    width:74px; height:74px; border-radius:50%;\r\n    display:flex; align-items:center; justify-content:center;\r\n    background: conic-gradient(var(--orange) var(--pct), var(--bg-2) 0);\r\n    position:relative;\r\n  }\r\n  .devseo-browser__gauge::before{ content:''; position:absolute; inset:6px; border-radius:50%; background:var(--bg-1); }\r\n  .devseo-browser__gauge span{\r\n    position:relative; font-family:'IBM Plex Mono', monospace;\r\n    font-size:.85rem; font-weight:600; color:var(--text-hi);\r\n  }\r\n  .devseo-browser__gauge-label{ font-size:.62rem; color:var(--text-low); letter-spacing:.06em; text-transform:uppercase; }\r\n  .devseo-browser__bars{ display:flex; align-items:flex-end; gap:3px; height:28px; margin-top:.2rem; }\r\n  .devseo-browser__bars i{ display:block; width:6px; border-radius:2px 2px 0 0; background:linear-gradient(var(--cyan), var(--orange)); opacity:.85; }\r\n\r\n  .devseo-phone{\r\n    position:absolute;\r\n    right:6%; bottom:2%;\r\n    width: clamp(92px, 17vw, 138px);\r\n    aspect-ratio: 9 \/ 19;\r\n    background:linear-gradient(165deg, var(--bg-2), var(--bg-1));\r\n    border:1px solid var(--line);\r\n    border-radius:20px;\r\n    padding:9px 7px;\r\n    box-shadow:\r\n      0 26px 55px -22px rgba(0,0,0,.7),\r\n      0 0 0 1px rgba(94,234,212,.06),\r\n      0 0 30px -10px rgba(94,234,212,.3);\r\n    transform: translate3d(0,0,105px) rotateY(11deg) rotateX(-5deg);\r\n  }\r\n  .devseo-phone__notch{ width:32%; height:5px; margin:0 auto 7px; background:var(--line); border-radius:4px; }\r\n  .devseo-phone__screen{\r\n    height:calc(100% - 12px);\r\n    background:var(--bg-1);\r\n    border-radius:13px;\r\n    padding:.5rem .45rem .6rem;\r\n    display:flex; flex-direction:column; gap:.4rem;\r\n  }\r\n  .devseo-phone__status{\r\n    display:flex; align-items:center; justify-content:space-between;\r\n    font-family:'IBM Plex Mono', monospace;\r\n    font-size:.5rem; color:var(--text-low);\r\n  }\r\n  .devseo-phone__signal{ width:12px; height:7px; border:1px solid var(--text-low); border-radius:2px; flex:none; }\r\n  .devseo-phone__nav{ display:flex; gap:3px; margin-top:.1rem; }\r\n  .devseo-phone__navdot{ width:5px; height:5px; border-radius:50%; background:var(--cyan); opacity:.85; }\r\n  .devseo-phone__lines{ display:flex; flex-direction:column; gap:.3rem; margin-top:.15rem; }\r\n  .devseo-phone__lines i{ display:block; height:5px; border-radius:3px; background:var(--line); }\r\n  .devseo-phone__lines i:first-child{ background:var(--orange); opacity:.75; width:60%; }\r\n  .devseo-phone__badge{\r\n    margin-top:auto; align-self:flex-start;\r\n    font-family:'IBM Plex Mono', monospace;\r\n    font-size:.52rem; font-weight:600; color:var(--text-hi);\r\n    background:rgba(94,234,212,.12);\r\n    border:1px solid var(--line);\r\n    border-radius:999px;\r\n    padding:.22em .55em;\r\n  }\r\n  .devseo-phone__badge span{ color:var(--cyan); font-weight:500; margin-left:.25em; }\r\n\r\n  .devseo-device-tag{\r\n    position:absolute;\r\n    font-family:'IBM Plex Mono', monospace;\r\n    font-size:.62rem; font-weight:500;\r\n    letter-spacing:.1em; text-transform:uppercase;\r\n    color:var(--cyan);\r\n    background:rgba(11,18,32,.75);\r\n    border:1px solid var(--line);\r\n    border-radius:6px;\r\n    padding:.2em .5em;\r\n    backdrop-filter: blur(4px);\r\n  }\r\n  .devseo-device-tag--desktop{ top:-6%; left:6%; transform:translateZ(58px); }\r\n  .devseo-device-tag--mobile{ bottom:-4%; right:9%; transform:translateZ(112px); }\r\n\r\n  .devseo-badge{\r\n    position:absolute;\r\n    display:flex; align-items:center; gap:.5em;\r\n    font-family:'IBM Plex Mono', monospace;\r\n    font-size:.72rem; font-weight:500;\r\n    color:var(--text-hi);\r\n    background:rgba(16,26,46,.85);\r\n    border:1px solid var(--line);\r\n    border-radius:999px;\r\n    padding:.5em .9em;\r\n    backdrop-filter: blur(6px);\r\n    box-shadow:0 12px 30px -14px rgba(0,0,0,.6);\r\n    animation: devseo-float 6s ease-in-out infinite;\r\n  }\r\n  .devseo-badge i{ width:14px; height:14px; flex:none; color:var(--cyan); }\r\n  .devseo-badge--fast{ top:2%; left:-2%; animation-duration:5.5s; }\r\n  .devseo-badge--seo{ top:8%; right:-4%; animation-duration:7s; animation-delay:-1.5s; }\r\n  .devseo-badge--responsive{ bottom:22%; left:-6%; animation-duration:6.5s; animation-delay:-3s; }\r\n  .devseo-badge--secure{ top:46%; right:-9%; animation-duration:6s; animation-delay:-4.2s; }\r\n\r\n  @keyframes devseo-float{\r\n    0%, 100%{ transform:translate3d(0,0,0); }\r\n    50%{ transform:translate3d(0,-10px,0); }\r\n  }\r\n\r\n  .devseo-hero__content{\r\n    opacity: calc(1 - var(--scroll) * 1.1);\r\n    transform: translateY(calc(var(--scroll) * -36px));\r\n  }\r\n\r\n  @media (max-width:980px){\r\n    .devseo-hero__inner{ grid-template-columns:1fr; }\r\n    .devseo-hero__stage{ order:-1; height:clamp(320px, 78vw, 460px); }\r\n    .devseo-hero__lede{ max-width:60ch; }\r\n    .devseo-hero__stats{ gap:1.5rem 2.2rem; }\r\n    .devseo-device-tag{ font-size:.56rem; }\r\n  }\r\n  @media (max-width:560px){\r\n    .devseo-hero{ padding-top:88px; }\r\n    .devseo-hero__ctas{ flex-direction:column; }\r\n    .devseo-hero__btn{ justify-content:center; width:100%; }\r\n    .devseo-badge{ font-size:.62rem; padding:.4em .7em; }\r\n    .devseo-badge--responsive{ display:none; }\r\n    .devseo-browser{ width:min(280px, 82%); transform: translate3d(-8%, -8%, 50px); }\r\n    .devseo-phone{ right:2%; bottom:0; width:clamp(78px, 26vw, 108px); }\r\n    .devseo-device-tag{ display:none; }\r\n    .devseo-hero__scene{ transform: rotateX(6deg) rotateY(-10deg); }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce){\r\n    .devseo-badge{ animation:none; }\r\n    .devseo-hero__content{ opacity:1; transform:none; }\r\n    .devseo-hero__grid{ transform:none; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"devseo-hero\" id=\"devseo-hero\" aria-label=\"Website development and SEO services introduction\">\r\n  <div class=\"devseo-hero__grid\" aria-hidden=\"true\"><\/div>\r\n\r\n  <div class=\"devseo-hero__inner\">\r\n    <div class=\"devseo-hero__content\">\r\n      <p class=\"devseo-hero__eyebrow\">Web Development &amp; SEO Studio<\/p>\r\n      <h1 class=\"devseo-hero__title\">Websites built to <em>rank<\/em>, load instantly, and turn visitors into customers.<\/h1>\r\n      <p class=\"devseo-hero__lede\">We design and develop fast, search-optimized WordPress sites, then keep them climbing the rankings with ongoing technical SEO &mdash; no bloated plugins, no guesswork.<\/p>\r\n\r\n      <div class=\"devseo-hero__ctas\">\r\n        <a class=\"devseo-hero__btn devseo-hero__btn--primary\" href=\"#contact\">\r\n          Get a Free SEO Audit\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n        <\/a>\r\n        <a class=\"devseo-hero__btn devseo-hero__btn--ghost\" href=\"#work\">See Our Work<\/a>\r\n      <\/div>\r\n\r\n      <dl class=\"devseo-hero__stats\">\r\n        <div>\r\n          <dt class=\"devseo-hero__stat-num\"><span>180+<\/span><\/dt>\r\n          <dd class=\"devseo-hero__stat-label\">Sites shipped<\/dd>\r\n        <\/div>\r\n        <div>\r\n          <dt class=\"devseo-hero__stat-num\">0.8<span>s<\/span><\/dt>\r\n          <dd class=\"devseo-hero__stat-label\">Avg. load time<\/dd>\r\n        <\/div>\r\n        <div>\r\n          <dt class=\"devseo-hero__stat-num\">92<span>+<\/span><\/dt>\r\n          <dd class=\"devseo-hero__stat-label\">Core Web Vitals score<\/dd>\r\n        <\/div>\r\n      <\/dl>\r\n    <\/div>\r\n\r\n    <div class=\"devseo-hero__stage\" aria-hidden=\"true\">\r\n      <div class=\"devseo-hero__ring devseo-hero__ring--outer\"><\/div>\r\n      <div class=\"devseo-hero__ring\"><\/div>\r\n\r\n      <div class=\"devseo-hero__scene\" id=\"devseo-scene\">\r\n        <div class=\"devseo-browser\">\r\n          <div class=\"devseo-browser__bar\">\r\n            <span class=\"devseo-browser__dot\"><\/span>\r\n            <span class=\"devseo-browser__dot\"><\/span>\r\n            <span class=\"devseo-browser__dot\"><\/span>\r\n            <span class=\"devseo-browser__url\">\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 10V8a6 6 0 1112 0v2M5 10h14v10H5V10z\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><\/svg>\r\n              yourbrand.com\r\n            <\/span>\r\n          <\/div>\r\n          <div class=\"devseo-browser__body\">\r\n            <div class=\"devseo-browser__code\">\r\n              <span class=\"ln\"><i>function<\/i> <b>rankFaster<\/b>() {<\/span>\r\n              <span class=\"ln\">&nbsp;&nbsp;optimize(images);<\/span>\r\n              <span class=\"ln\">&nbsp;&nbsp;minify(<i>css<\/i>, <i>js<\/i>);<\/span>\r\n              <span class=\"ln\">&nbsp;&nbsp;<b>return<\/b> <i>\"#1 SERP\"<\/i>;<\/span>\r\n              <span class=\"ln\">}<\/span>\r\n            <\/div>\r\n            <div class=\"devseo-browser__seo\">\r\n              <div class=\"devseo-browser__gauge\"><span>92<\/span><\/div>\r\n              <span class=\"devseo-browser__gauge-label\">SEO Score<\/span>\r\n              <div class=\"devseo-browser__bars\" aria-hidden=\"true\">\r\n                <i style=\"height:35%\"><\/i><i style=\"height:55%\"><\/i><i style=\"height:45%\"><\/i><i style=\"height:75%\"><\/i><i style=\"height:95%\"><\/i>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <span class=\"devseo-device-tag devseo-device-tag--desktop\">Desktop<\/span>\r\n\r\n        <div class=\"devseo-phone\">\r\n          <div class=\"devseo-phone__notch\"><\/div>\r\n          <div class=\"devseo-phone__screen\">\r\n            <div class=\"devseo-phone__status\">\r\n              <span>9:41<\/span>\r\n              <span class=\"devseo-phone__signal\"><\/span>\r\n            <\/div>\r\n            <div class=\"devseo-phone__nav\">\r\n              <span class=\"devseo-phone__navdot\"><\/span>\r\n              <span class=\"devseo-phone__navdot\"><\/span>\r\n              <span class=\"devseo-phone__navdot\"><\/span>\r\n            <\/div>\r\n            <div class=\"devseo-phone__lines\">\r\n              <i><\/i><i><\/i><i><\/i>\r\n            <\/div>\r\n            <div class=\"devseo-phone__badge\">92 <span>SEO<\/span><\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <span class=\"devseo-device-tag devseo-device-tag--mobile\">Mobile<\/span>\r\n      <\/div>\r\n\r\n      <span class=\"devseo-badge devseo-badge--fast\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13 2 4 14h6l-1 8 9-12h-6l1-8z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/><\/svg>Blazing Fast<\/span>\r\n      <span class=\"devseo-badge devseo-badge--seo\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 19V9M11 19V4M18 19v-6\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>SEO Optimized<\/span>\r\n      <span class=\"devseo-badge devseo-badge--responsive\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"7\" y=\"3\" width=\"7\" height=\"12\" rx=\"1.2\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><rect x=\"16\" y=\"8\" width=\"5\" height=\"9\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><\/svg>Mobile First<\/span>\r\n      <span class=\"devseo-badge devseo-badge--secure\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"\/><\/svg>Secure &amp; Scalable<\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n`;\r\n\r\n  var heroEl = root.querySelector('#devseo-hero');\r\n  var sceneEl = root.querySelector('#devseo-scene');\r\n  if (!heroEl || !sceneEl) return;\r\n\r\n  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n  var canHover = window.matchMedia('(hover: hover) and (pointer: fine)').matches;\r\n\r\n  var mx = 0, my = 0;\r\n  var targetMx = 0, targetMy = 0;\r\n  var scrollProgress = 0;\r\n  var running = true;\r\n  var rafId = null;\r\n\r\n  function updateScroll(){\r\n    var rect = heroEl.getBoundingClientRect();\r\n    var vh = window.innerHeight || document.documentElement.clientHeight;\r\n    var p = -rect.top \/ rect.height;\r\n    p = Math.max(0, Math.min(1, p));\r\n    scrollProgress = p;\r\n    heroEl.style.setProperty('--scroll', p.toFixed(3));\r\n  }\r\n\r\n  function onPointerMove(e){\r\n    var rect = heroEl.getBoundingClientRect();\r\n    targetMx = ((e.clientX - rect.left) \/ rect.width - 0.5) * 2;\r\n    targetMy = ((e.clientY - rect.top) \/ rect.height - 0.5) * 2;\r\n  }\r\n  function onPointerLeave(){ targetMx = 0; targetMy = 0; }\r\n\r\n  function tick(t){\r\n    if (!running) return;\r\n    mx += (targetMx - mx) * 0.06;\r\n    my += (targetMy - my) * 0.06;\r\n\r\n    var idle = reduceMotion ? 0 : Math.sin(t \/ 2200) * 3;\r\n    var baseRy = -18 + mx * 10 + idle;\r\n    var baseRx = 8 - my * 7 - scrollProgress * 10;\r\n    var lift = scrollProgress * 40;\r\n\r\n    sceneEl.style.transform =\r\n      'translateY(' + (-lift).toFixed(1) + 'px) ' +\r\n      'rotateX(' + baseRx.toFixed(2) + 'deg) ' +\r\n      'rotateY(' + baseRy.toFixed(2) + 'deg)';\r\n\r\n    rafId = requestAnimationFrame(tick);\r\n  }\r\n\r\n  var scrollScheduled = false;\r\n  function onScroll(){\r\n    if (scrollScheduled) return;\r\n    scrollScheduled = true;\r\n    requestAnimationFrame(function(){ updateScroll(); scrollScheduled = false; });\r\n  }\r\n\r\n  var io = ('IntersectionObserver' in window) ? new IntersectionObserver(function(entries){\r\n    entries.forEach(function(entry){\r\n      running = entry.isIntersecting;\r\n      if (running && rafId === null) rafId = requestAnimationFrame(tick);\r\n      if (!running && rafId !== null){ cancelAnimationFrame(rafId); rafId = null; }\r\n    });\r\n  }, { threshold: 0.01 }) : null;\r\n\r\n  updateScroll();\r\n  window.addEventListener('scroll', onScroll, { passive: true });\r\n  window.addEventListener('resize', updateScroll);\r\n  if (canHover){\r\n    heroEl.addEventListener('pointermove', onPointerMove);\r\n    heroEl.addEventListener('pointerleave', onPointerLeave);\r\n  }\r\n  if (io) io.observe(heroEl);\r\n\r\n  if (reduceMotion){\r\n    sceneEl.style.transform = 'rotateX(8deg) rotateY(-18deg)';\r\n  } else {\r\n    rafId = requestAnimationFrame(tick);\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-a8110a9 e-con e-atomic-element e-flexbox-base e-6908fb8 \" data-id=\"a8110a9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a8110a9\">\n    \t\t<div class=\"elementor-element elementor-element-a0c7e83 elementor-widget elementor-widget-html\" data-id=\"a0c7e83\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  SERVICES SECTION \u2014 paste into an Elementor \"HTML\" widget, directly below the Hero section.\r\n  Self-contained: scoped styles + vanilla JS, no external dependencies.\r\n  Bento grid: one feature card, four standard cards, one wide banner card.\r\n  Edit copy\/icons in the markup; colors\/timings are CSS variables at the top of the <style> block.\r\n-->\r\n<section class=\"nv-services\" id=\"services\">\r\n\r\n  <div class=\"nv-services__bg\" aria-hidden=\"true\">\r\n    <span class=\"nv-blob nv-blob--a\"><\/span>\r\n    <span class=\"nv-blob nv-blob--b\"><\/span>\r\n    <span class=\"nv-blob nv-blob--c\"><\/span>\r\n    <span class=\"nv-grid\"><\/span>\r\n    <span class=\"nv-noise\"><\/span>\r\n  <\/div>\r\n\r\n  <div class=\"nv-services__inner\">\r\n\r\n    <header class=\"nv-services__head\">\r\n      <span class=\"nv-eyebrow\"><i><\/i>Services<\/span>\r\n      <h2 class=\"nv-title\">Everything underone roof<\/h2>\r\n      <p class=\"nv-sub\">From first sketch to long-term support \u2014 a grid of what we ship, and how.<\/p>\r\n    <\/header>\r\n\r\n    <div class=\"nv-bento\">\r\n\r\n      <!-- FEATURE CARD -->\r\n      <article class=\"nv-card nv-card--feature\" style=\"--i:0; --ac:#7c5cff; --ac2:#5b8cff\">\r\n        <div class=\"nv-card__glass\">\r\n          <div class=\"nv-card__top\">\r\n            <span class=\"nv-card__icon nv-card__icon--lg\">\r\n              <svg viewBox=\"0 0 48 48\" fill=\"none\"><path d=\"M16 14 L6 24 L16 34\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M32 14 L42 24 L32 34\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M27 10 L21 38\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n            <\/span>\r\n            <span class=\"nv-card__tag\">Most requested<\/span>\r\n          <\/div>\r\n          <h3 class=\"nv-card__title--lg\">Web Development<\/h3>\r\n          <p>Fast, secure, scalable builds on the stack that fits your product \u2014 architected for performance and built to grow.<\/p>\r\n          <div class=\"nv-card__mock\" aria-hidden=\"true\">\r\n            <div class=\"nv-mock__chrome\">\r\n              <span class=\"nv-mock__dot\"><\/span><span class=\"nv-mock__dot\"><\/span><span class=\"nv-mock__dot\"><\/span>\r\n              <span class=\"nv-mock__url\"><\/span>\r\n            <\/div>\r\n            <div class=\"nv-mock__nav\">\r\n              <span class=\"nv-mock__logo\"><\/span>\r\n              <div class=\"nv-mock__navlinks\"><span><\/span><span><\/span><span><\/span><\/div>\r\n            <\/div>\r\n            <div class=\"nv-mock__hero\">\r\n              <span class=\"nv-mock__heroTitle\"><\/span>\r\n              <span class=\"nv-mock__heroLine\" style=\"--w:78%\"><\/span>\r\n              <span class=\"nv-mock__heroLine\" style=\"--w:52%\"><\/span>\r\n              <span class=\"nv-mock__heroBtn\"><\/span>\r\n            <\/div>\r\n            <div class=\"nv-mock__grid\">\r\n              <span class=\"nv-mock__card\"><\/span>\r\n              <span class=\"nv-mock__card\"><\/span>\r\n              <span class=\"nv-mock__card\"><\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <a href=\"#\" class=\"nv-card__link\">Explore the process <span>\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- STANDARD CARDS -->\r\n      <article class=\"nv-card nv-card--b\" style=\"--i:1; --ac:#ff6a88; --ac2:#ff9a76\">\r\n        <div class=\"nv-card__glass\">\r\n          <span class=\"nv-card__num\">02<\/span>\r\n          <span class=\"nv-card__icon\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\"><path d=\"M8 34 L30 12 L36 18 L14 40 L8 40 Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"\/><path d=\"M26 16 L32 22\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M8 40 L8 34\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg>\r\n          <\/span>\r\n          <h3>Web Design<\/h3>\r\n          <p>Modern, conversion-focused interfaces crafted around your brand and your users.<\/p>\r\n          <a href=\"#\" class=\"nv-card__link\">Explore <span>\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <article class=\"nv-card nv-card--c\" style=\"--i:2; --ac:#22d3a5; --ac2:#38bdf8\">\r\n        <div class=\"nv-card__glass\">\r\n          <span class=\"nv-card__num\">03<\/span>\r\n          <span class=\"nv-card__icon\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\"><circle cx=\"21\" cy=\"21\" r=\"12\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M30 30 L40 40\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><path d=\"M15 22 L19 26 L27 16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n          <\/span>\r\n          <h3>SEO &amp; Marketing<\/h3>\r\n          <p>Search, paid, and content strategies that turn visibility into revenue.<\/p>\r\n          <a href=\"#\" class=\"nv-card__link\">Explore <span>\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <article class=\"nv-card nv-card--d\" style=\"--i:3; --ac:#f5a623; --ac2:#ffd166\">\r\n        <div class=\"nv-card__glass\">\r\n          <span class=\"nv-card__num\">04<\/span>\r\n          <span class=\"nv-card__icon\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\"><rect x=\"7\" y=\"10\" width=\"34\" height=\"24\" rx=\"3\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M20 21 L28 24 L20 27 Z\" fill=\"currentColor\"\/><path d=\"M15 40 L33 40\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n          <\/span>\r\n          <h3>Content Creation<\/h3>\r\n          <p>Copy, video, and visuals that keep audiences engaged.<\/p>\r\n          <a href=\"#\" class=\"nv-card__link\">Explore <span>\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <article class=\"nv-card nv-card--e\" style=\"--i:4; --ac:#38bdf8; --ac2:#818cf8\">\r\n        <div class=\"nv-card__glass\">\r\n          <span class=\"nv-card__num\">05<\/span>\r\n          <span class=\"nv-card__icon\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\"><path d=\"M24 6 L40 12 L40 24 C40 34 33 40 24 42 C15 40 8 34 8 24 L8 12 Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"\/><path d=\"M17 23 L22 28 L32 17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n          <\/span>\r\n          <h3>Branding &amp; Identity<\/h3>\r\n          <p>Logos, systems, and guidelines that make your brand instantly recognizable.<\/p>\r\n          <a href=\"#\" class=\"nv-card__link\">Explore <span>\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- WIDE BANNER CARD -->\r\n      <article class=\"nv-card nv-card--wide\" style=\"--i:5; --ac:#a78bfa; --ac2:#f472b6\">\r\n        <div class=\"nv-card__glass nv-card__glass--row\">\r\n          <span class=\"nv-card__icon nv-card__icon--lg\">\r\n            <svg viewBox=\"0 0 48 48\" fill=\"none\"><circle cx=\"24\" cy=\"24\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\"\/><path d=\"M24 6 L24 12 M24 36 L24 42 M6 24 L12 24 M36 24 L42 24 M11 11 L15.5 15.5 M32.5 32.5 L37 37 M11 37 L15.5 32.5 M32.5 15.5 L37 11\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>\r\n          <\/span>\r\n          <div class=\"nv-card__row-body\">\r\n            <h3>Support &amp; Maintenance<\/h3>\r\n            <p>Ongoing care and updates so your site stays fast, secure, and always on \u2014 06<\/p>\r\n          <\/div>\r\n          <a href=\"#\" class=\"nv-card__link nv-card__link--pill\">Get support <span>\u2192<\/span><\/a>\r\n        <\/div>\r\n      <\/article>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n  .nv-services{\r\n    --nv-bg: #07070a;\r\n    --nv-ink: #f3f1ea;\r\n    --nv-muted: #a6a3ad;\r\n    --nv-accent: #d8a24a;\r\n    --nv-accent-2: #7c5cff;\r\n    --nv-line: rgba(255,255,255,.10);\r\n    --nv-glass: rgba(255,255,255,.05);\r\n    --nv-radius: 22px;\r\n    position: relative;\r\n    isolation: isolate;\r\n    background: var(--nv-bg);\r\n    color: var(--nv-ink);\r\n    padding: clamp(64px, 10vw, 140px) 20px;\r\n    overflow: clip;\r\n    font-family: \"Inter\", \"Helvetica Neue\", Arial, sans-serif;\r\n  }\r\n  .nv-services *{ box-sizing: border-box; }\r\n\r\n  \/* ---------- cinematic background ---------- *\/\r\n  .nv-services__bg{ position:absolute; inset:0; z-index:0; }\r\n  .nv-blob{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.5; will-change: transform; }\r\n  .nv-blob--a{ width:520px; height:520px; left:-160px; top:-120px; background: radial-gradient(circle at 30% 30%, #7c5cff, transparent 70%); animation: nvDrift1 18s ease-in-out infinite; }\r\n  .nv-blob--b{ width:460px; height:460px; right:-140px; bottom:-160px; background: radial-gradient(circle at 60% 60%, #22d3a5, transparent 70%); animation: nvDrift2 22s ease-in-out infinite; }\r\n  .nv-blob--c{ width:360px; height:360px; left:38%; top:20%; background: radial-gradient(circle at 50% 50%, rgba(255,106,136,.4), transparent 70%); opacity:.32; animation: nvDrift1 26s ease-in-out infinite reverse; }\r\n  @keyframes nvDrift1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(60px,40px) scale(1.15); } }\r\n  @keyframes nvDrift2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-50px,-30px) scale(1.1); } }\r\n  .nv-grid{\r\n    position:absolute; inset:0;\r\n    background-image: linear-gradient(var(--nv-line) 1px, transparent 1px), linear-gradient(90deg, var(--nv-line) 1px, transparent 1px);\r\n    background-size: 64px 64px;\r\n    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 75%);\r\n            mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 75%);\r\n    opacity:.5;\r\n  }\r\n  .nv-noise{\r\n    position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n  }\r\n\r\n  .nv-services__inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; }\r\n\r\n  \/* ---------- heading ---------- *\/\r\n  .nv-services__head{ text-align:center; max-width:640px; margin:0 auto clamp(40px,6vw,72px); }\r\n  .nv-eyebrow{\r\n    display:inline-flex; align-items:center; gap:8px;\r\n    font-size:12px; letter-spacing:.22em; text-transform:uppercase;\r\n    color: var(--nv-accent); font-weight:600;\r\n    padding:6px 14px; border:1px solid var(--nv-line); border-radius:999px;\r\n    background: var(--nv-glass); margin-bottom:20px;\r\n  }\r\n  .nv-eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--nv-accent); box-shadow:0 0 12px 2px var(--nv-accent); }\r\n  .nv-title{\r\n    font-size: clamp(32px, 5vw, 54px); line-height:1.08; font-weight:700; letter-spacing:-.02em; margin:0 0 16px;\r\n    background: linear-gradient(180deg, #ffffff 0%, #b9b5c4 100%);\r\n    -webkit-background-clip:text; background-clip:text; color:transparent;\r\n  }\r\n  .nv-sub{ color:var(--nv-muted); font-size:16px; line-height:1.6; margin:0; }\r\n\r\n  \/* ---------- bento grid ---------- *\/\r\n  .nv-bento{\r\n    display:grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    grid-template-areas:\r\n      \"a a b c\"\r\n      \"a a d e\"\r\n      \"f f f f\";\r\n    gap: 22px;\r\n    perspective: 1600px;\r\n  }\r\n  .nv-card--feature{ grid-area:a; }\r\n  .nv-card--b{ grid-area:b; }\r\n  .nv-card--c{ grid-area:c; }\r\n  .nv-card--d{ grid-area:d; }\r\n  .nv-card--e{ grid-area:e; }\r\n  .nv-card--wide{ grid-area:f; }\r\n\r\n  @media (max-width: 980px){\r\n    .nv-bento{ grid-template-columns: repeat(2, 1fr); grid-template-areas: \"a a\" \"b c\" \"d e\" \"f f\"; }\r\n  }\r\n  @media (max-width: 640px){\r\n    .nv-bento{ grid-template-columns: 1fr; grid-template-areas: \"a\" \"b\" \"c\" \"d\" \"e\" \"f\"; }\r\n  }\r\n\r\n  .nv-card{\r\n    opacity:0; transform: translateY(28px);\r\n    transition: opacity .7s ease, transform .7s ease;\r\n    transition-delay: calc(var(--i) * 90ms);\r\n    transform-style: preserve-3d;\r\n    min-height: 0;\r\n  }\r\n  .nv-card.is-visible{ opacity:1; transform: translateY(0); }\r\n\r\n  .nv-card__glass{\r\n    position:relative; height:100%;\r\n    padding: 30px 26px 26px;\r\n    border-radius: var(--nv-radius);\r\n    background: linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,.02));\r\n    border: 1px solid var(--nv-line);\r\n    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);\r\n    transform-style: preserve-3d;\r\n    transform: rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateZ(0);\r\n    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,.35);\r\n    overflow:hidden;\r\n    display:flex; flex-direction:column;\r\n  }\r\n  .nv-card__glass::before{\r\n    content:\"\"; position:absolute; inset:-1px; border-radius: inherit; padding:1px;\r\n    background: conic-gradient(from var(--angle,0deg), var(--ac, var(--nv-accent-2)), var(--ac2, var(--nv-accent)), var(--ac, var(--nv-accent-2)));\r\n    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);\r\n    -webkit-mask-composite: xor; mask-composite: exclude;\r\n    opacity:0; transition: opacity .35s ease;\r\n    animation: nvSpin 5s linear infinite paused;\r\n  }\r\n  .nv-card:hover .nv-card__glass::before{ opacity:1; animation-play-state: running; }\r\n  @property --angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }\r\n  @keyframes nvSpin{ to{ --angle: 360deg; } }\r\n\r\n  .nv-card__glass::after{\r\n    content:\"\"; position:absolute; inset:0;\r\n    background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), transparent 60%);\r\n    opacity:0; transition: opacity .3s ease; pointer-events:none;\r\n  }\r\n  .nv-card:hover .nv-card__glass::after{ opacity:1; }\r\n  .nv-card:hover .nv-card__glass{ box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }\r\n\r\n  .nv-card__num{ position:absolute; top:18px; right:22px; font-size:13px; font-weight:600; letter-spacing:.05em; color: rgba(255,255,255,.28); }\r\n\r\n  .nv-card__icon{\r\n    display:inline-flex; align-items:center; justify-content:center;\r\n    width:52px; height:52px; border-radius:15px; flex-shrink:0;\r\n    background: linear-gradient(155deg, color-mix(in srgb, var(--ac, var(--nv-accent)) 24%, transparent), color-mix(in srgb, var(--ac2, var(--nv-accent-2)) 16%, transparent));\r\n    color: var(--ac, var(--nv-accent)); margin-bottom:18px;\r\n    transform: translateZ(40px);\r\n    animation: nvFloat 4.5s ease-in-out infinite;\r\n    animation-delay: calc(var(--i) * .3s);\r\n  }\r\n  .nv-card__icon svg{ width:24px; height:24px; }\r\n  .nv-card__icon--lg{ width:64px; height:64px; border-radius:18px; margin-bottom:0; }\r\n  .nv-card__icon--lg svg{ width:30px; height:30px; }\r\n  @keyframes nvFloat{ 0%,100%{ transform: translateZ(40px) translateY(0); } 50%{ transform: translateZ(40px) translateY(-6px); } }\r\n\r\n  .nv-card__glass h3{ font-size:19px; font-weight:650; margin:0 0 10px; letter-spacing:-.01em; transform: translateZ(30px); }\r\n  .nv-card__glass p{ font-size:14.5px; line-height:1.65; color:var(--nv-muted); margin:0 0 18px; transform: translateZ(20px); }\r\n  .nv-card__link{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--nv-ink); text-decoration:none; transform: translateZ(20px); margin-top:auto; }\r\n  .nv-card__link span{ transition: transform .3s ease; }\r\n  .nv-card__link:hover span{ transform: translateX(4px); }\r\n\r\n  \/* ---------- feature card ---------- *\/\r\n  .nv-card--feature .nv-card__glass{ padding: 36px 34px 32px; justify-content:flex-start; }\r\n  .nv-card__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; transform: translateZ(30px); }\r\n  .nv-card__tag{\r\n    font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ac, var(--nv-accent));\r\n    background: color-mix(in srgb, var(--ac, var(--nv-accent)) 14%, transparent);\r\n    border:1px solid color-mix(in srgb, var(--ac, var(--nv-accent)) 32%, transparent);\r\n    padding:5px 11px; border-radius:999px;\r\n  }\r\n  .nv-card__title--lg{ font-size: clamp(24px, 2.4vw, 30px); font-weight:700; letter-spacing:-.01em; margin:0 0 12px; transform: translateZ(30px); }\r\n  .nv-card--feature p{ font-size:15.5px; max-width:34ch; }\r\n  .nv-card__mock{\r\n    position:relative; margin: 22px 0 24px; padding:14px 16px 16px;\r\n    background: rgba(0,0,0,.28); border:1px solid var(--nv-line); border-radius:14px;\r\n    transform: translateZ(15px);\r\n  }\r\n\r\n  \/* browser chrome *\/\r\n  .nv-mock__chrome{ display:flex; align-items:center; gap:6px; margin-bottom:14px; }\r\n  .nv-mock__dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,.16); }\r\n  .nv-mock__dot:first-child{ background: var(--ac, var(--nv-accent)); }\r\n  .nv-mock__url{ flex:1; height:12px; margin-left:8px; border-radius:5px; background: rgba(255,255,255,.05); }\r\n\r\n  \/* site nav *\/\r\n  .nv-mock__nav{\r\n    display:flex; align-items:center; justify-content:space-between;\r\n    padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--nv-line);\r\n  }\r\n  .nv-mock__logo{ width:20px; height:8px; border-radius:3px; background: linear-gradient(90deg, var(--ac, var(--nv-accent-2)), var(--ac2, var(--nv-accent))); }\r\n  .nv-mock__navlinks{ display:flex; gap:7px; }\r\n  .nv-mock__navlinks span{ width:16px; height:6px; border-radius:3px; background: rgba(255,255,255,.14); }\r\n\r\n  \/* hero block *\/\r\n  .nv-mock__hero{ margin-bottom:14px; }\r\n  .nv-mock__heroTitle{ display:block; width:62%; height:11px; border-radius:4px; margin-bottom:8px; background: linear-gradient(90deg, var(--ac, var(--nv-accent-2)), var(--ac2, var(--nv-accent))); opacity:.9; }\r\n  .nv-mock__heroLine{ display:block; height:6px; width:var(--w); border-radius:3px; margin-bottom:6px; background: rgba(255,255,255,.12); }\r\n  .nv-mock__heroBtn{ display:inline-block; width:52px; height:15px; margin-top:8px; border-radius:7px; background: linear-gradient(90deg, var(--ac, var(--nv-accent-2)), var(--ac2, var(--nv-accent))); }\r\n\r\n  \/* content grid *\/\r\n  .nv-mock__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }\r\n  .nv-mock__card{\r\n    position:relative; height:34px; border-radius:8px;\r\n    background: rgba(255,255,255,.04); border:1px solid var(--nv-line); overflow:hidden;\r\n  }\r\n  .nv-mock__card::before{\r\n    content:\"\"; position:absolute; left:6px; top:6px; width:9px; height:9px; border-radius:3px;\r\n    background: var(--ac, var(--nv-accent)); opacity:.75;\r\n  }\r\n  .nv-mock__card::after{\r\n    content:\"\"; position:absolute; left:6px; right:6px; bottom:7px; height:5px; border-radius:3px;\r\n    background: rgba(255,255,255,.12);\r\n  }\r\n\r\n  \/* ---------- wide banner card ---------- *\/\r\n  .nv-card__glass--row{ flex-direction:row; align-items:center; gap:24px; padding: 26px 32px; }\r\n  .nv-card__row-body{ flex:1; min-width:0; }\r\n  .nv-card__row-body h3{ margin-bottom:6px; }\r\n  .nv-card__row-body p{ margin:0; }\r\n  .nv-card__link--pill{\r\n    flex-shrink:0; background: var(--nv-ink); color:#0b0b0f; padding:12px 20px; border-radius:999px; font-weight:700;\r\n  }\r\n  .nv-card__link--pill:hover span{ transform: translateX(4px); }\r\n  @media (max-width: 560px){\r\n    .nv-card__glass--row{ flex-direction:column; align-items:flex-start; text-align:left; }\r\n    .nv-card__link--pill{ align-self:flex-start; }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce){\r\n    .nv-blob, .nv-card__icon, .nv-card__glass::before{ animation: none !important; }\r\n    .nv-card, .nv-card__glass{ transition: opacity .3s ease !important; }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  var root = document.getElementById('services');\r\n  if(!root) return;\r\n\r\n  var cards = root.querySelectorAll('.nv-card');\r\n  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n  var isTouch = window.matchMedia('(hover: none)').matches;\r\n\r\n  if('IntersectionObserver' in window){\r\n    var io = new IntersectionObserver(function(entries){\r\n      entries.forEach(function(entry){\r\n        if(entry.isIntersecting){\r\n          entry.target.classList.add('is-visible');\r\n          io.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, { threshold: .15 });\r\n    cards.forEach(function(c){ io.observe(c); });\r\n  } else {\r\n    cards.forEach(function(c){ c.classList.add('is-visible'); });\r\n  }\r\n\r\n  if(!isTouch && !reduceMotion){\r\n    cards.forEach(function(card){\r\n      var glass = card.querySelector('.nv-card__glass');\r\n      var isBig = card.classList.contains('nv-card--feature') || card.classList.contains('nv-card--wide');\r\n      var maxTilt = isBig ? 6 : 16;\r\n      var raf = null;\r\n\r\n      card.addEventListener('pointermove', function(e){\r\n        var rect = card.getBoundingClientRect();\r\n        var px = (e.clientX - rect.left) \/ rect.width;\r\n        var py = (e.clientY - rect.top) \/ rect.height;\r\n        var rx = (px - 0.5) * maxTilt * 2;\r\n        var ry = (0.5 - py) * maxTilt * 2;\r\n\r\n        if(raf) cancelAnimationFrame(raf);\r\n        raf = requestAnimationFrame(function(){\r\n          glass.style.setProperty('--rx', rx.toFixed(2) + 'deg');\r\n          glass.style.setProperty('--ry', ry.toFixed(2) + 'deg');\r\n          glass.style.setProperty('--mx', (px * 100).toFixed(1) + '%');\r\n          glass.style.setProperty('--my', (py * 100).toFixed(1) + '%');\r\n        });\r\n      });\r\n\r\n      card.addEventListener('pointerleave', function(){\r\n        if(raf) cancelAnimationFrame(raf);\r\n        glass.style.setProperty('--rx', '0deg');\r\n        glass.style.setProperty('--ry', '0deg');\r\n      });\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-c7f1190 e-con e-atomic-element e-flexbox-base e-2a4506c \" data-id=\"c7f1190\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c7f1190\">\n    \t\t<div class=\"elementor-element elementor-element-9d5609c elementor-widget elementor-widget-html\" data-id=\"9d5609c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ss-showcase * { box-sizing: border-box; }\r\n.ss-showcase {\r\n  font-family: \"Helvetica Neue\", Arial, sans-serif;\r\n  color: #f4f8fc;\r\n  --navy-deep: #04101f;\r\n  --navy: #0a2540;\r\n  --blue: #0f6fd1;\r\n  --text-dim: #b7c6d9;\r\n}\r\n.ss-showcase .page { padding: 40px 16px; background: #05070a; }\r\n.ss-showcase .showcase-card {\r\n  width: 100%; max-width: 1280px; margin: 0 auto;\r\n  display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px;\r\n  padding: 40px; border-radius: 28px;\r\n  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%);\r\n  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);\r\n}\r\n.ss-showcase .col { display: flex; flex-direction: column; }\r\n.ss-showcase .video-frame { position: relative; border-radius: 18px; overflow: hidden; background: #000; }\r\n.ss-showcase .video-el { width: 100%; height: 100%; display: block; object-fit: cover; }\r\n.ss-showcase .video-frame--main { aspect-ratio: 16 \/ 11; }\r\n.ss-showcase .video-overlay-text {\r\n  position: absolute; left: 24px; bottom: 24px;\r\n  font-weight: 800; font-size: clamp(18px, 3vw, 30px); line-height: 1.15;\r\n  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); pointer-events: none; margin: 0;\r\n}\r\n.ss-showcase .video-overlay-text p { margin: 0; }\r\n.ss-showcase .headline { margin: 26px 0 18px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.3; }\r\n.ss-showcase .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 26px; }\r\n.ss-showcase .tags li {\r\n  display: flex; align-items: center; gap: 6px; padding: 8px 14px;\r\n  border-radius: 20px; background: rgba(255, 255, 255, 0.08); font-size: 13px; color: var(--text-dim);\r\n}\r\n.ss-showcase .tag-icon { font-size: 13px; }\r\n.ss-showcase .cta-btn {\r\n  align-self: flex-start; padding: 14px 26px; border-radius: 10px;\r\n  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15);\r\n  color: #f4f8fc; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s ease;\r\n}\r\n.ss-showcase .cta-btn:hover { background: rgba(255, 255, 255, 0.14); color: #f4f8fc; }\r\n.ss-showcase .col-right { gap: 24px; }\r\n.ss-showcase .right-top { display: flex; align-items: center; gap: 18px; }\r\n.ss-showcase .video-frame--small { flex: 0 0 auto; width: 42%; aspect-ratio: 4 \/ 3; }\r\n.ss-showcase .testimonial-name { margin: 0 0 4px; font-weight: 700; font-size: 15px; }\r\n.ss-showcase .testimonial-role { margin: 0; font-size: 13px; color: var(--text-dim); }\r\n.ss-showcase .video-frame--mockup {\r\n  position: relative; flex: 1; min-height: 340px; border-radius: 22px;\r\n  background: var(--blue); padding: 0 26px; display: flex;\r\n}\r\n.ss-showcase .video-frame--mockup .video-el { border-radius: 4px; object-fit: cover; }\r\n.ss-showcase .mockup-bar { flex: 0 0 26px; }\r\n@media (max-width: 900px) {\r\n  .ss-showcase .showcase-card { grid-template-columns: 1fr; padding: 26px; }\r\n  .ss-showcase .right-top { flex-direction: column; align-items: stretch; }\r\n  .ss-showcase .video-frame--small { width: 100%; aspect-ratio: 16 \/ 10; }\r\n  .ss-showcase .video-frame--mockup { min-height: 260px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"ss-showcase\">\r\n<div class=\"page\">\r\n  <section class=\"showcase-card\">\r\n    <div class=\"col col-left\">\r\n      <div class=\"video-frame video-frame--main\">\r\n        <video class=\"video-el\" autoplay muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/videoplayback.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <div class=\"video-overlay-text\">\r\n          <p>WHERE BOLDNESS<\/p>\r\n          <p>MEETS TIMELESS CHARM<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <h1 class=\"headline\">Bold Style, Timeless Charm \u2014 A Video Story Worth Watching<\/h1>\r\n      <ul class=\"tags\">\r\n        <li><span class=\"tag-icon\">\u270e<\/span> Brand Story<\/li>\r\n        <li><span class=\"tag-icon\">\u27f3<\/span> New Collection<\/li>\r\n        <li><span class=\"tag-icon\">\u265b<\/span> Style is King<\/li>\r\n      <\/ul>\r\n      <a class=\"cta-btn\" href=\"#\">View the collection<\/a>\r\n    <\/div>\r\n    <div class=\"col col-right\">\r\n      <div class=\"right-top\">\r\n        <div class=\"video-frame video-frame--small\">\r\n          <video class=\"video-el\" autoplay muted loop playsinline preload=\"metadata\">\r\n            <source src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/videoplayback-2.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n        <\/div>\r\n        <div class=\"testimonial\">\r\n          <p class=\"testimonial-name\">Behind the Collection<\/p>\r\n          <p class=\"testimonial-role\">A closer look at what makes it timeless<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"video-frame video-frame--mockup\">\r\n        <div class=\"mockup-bar mockup-bar--left\"><\/div>\r\n        <video class=\"video-el\" autoplay muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/Laptop-Mockup-Bumper-Intro-3D-Scene-After-Effects-Template-Indra-Ibrahim-1080p-h264-youtube.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <div class=\"mockup-bar mockup-bar--right\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-a498db9 e-con e-atomic-element e-flexbox-base e-a498db9-0bda471 \" data-id=\"a498db9\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a498db9\">\n    \t\t<div class=\"elementor-element elementor-element-8764b30 elementor-widget elementor-widget-html\" data-id=\"8764b30\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ss-case * { box-sizing: border-box; }\r\n.ss-case { font-family: \"Helvetica Neue\", Arial, sans-serif; color: #ffffff; }\r\n.ss-case .page { padding: 40px 16px; background: #05070a; }\r\n.ss-case .showcase-card {\r\n  width: 100%; max-width: 1280px; margin: 0 auto;\r\n  display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px;\r\n  padding: 40px; border-radius: 28px;\r\n  background: radial-gradient(120% 160% at 15% 0%, #d21b34 0%, #93101f 45%, #4a0812 100%);\r\n  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);\r\n}\r\n.ss-case .col { display: flex; flex-direction: column; }\r\n.ss-case .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }\r\n.ss-case .brand-name { font-weight: 700; font-size: 16px; line-height: 1.1; }\r\n.ss-case .brand-divider { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.4); }\r\n.ss-case .brand-icon {\r\n  width: 30px; height: 30px; border-radius: 6px; background: #fff; color: #c81428;\r\n  font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 16px;\r\n}\r\n.ss-case .video-frame, .ss-case .mockup-frame, .ss-case .panel-frame {\r\n  position: relative; border-radius: 18px; overflow: hidden; background: #000;\r\n}\r\n.ss-case .video-el { width: 100%; height: 100%; display: block; object-fit: cover; }\r\n.ss-case .mockup-frame { aspect-ratio: 16 \/ 11; background: #fff; }\r\n.ss-case .mockup-badge {\r\n  position: absolute; left: 16px; bottom: 16px; width: 26px; height: 26px;\r\n  border-radius: 50%; background: rgba(0, 0, 0, 0.35);\r\n}\r\n.ss-case .mockup-nav {\r\n  position: absolute; left: 16px; bottom: 52px; display: flex; align-items: center;\r\n  gap: 14px; color: #1a1a1a; font-size: 13px; font-weight: 600;\r\n}\r\n.ss-case .mockup-nav button { border: none; background: none; color: inherit; font-size: 14px; cursor: pointer; padding: 4px; }\r\n.ss-case .headline { margin: 26px 0 18px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.3; }\r\n.ss-case .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 26px; }\r\n.ss-case .tags li {\r\n  display: flex; align-items: center; gap: 6px; padding: 8px 14px;\r\n  border-radius: 20px; background: rgba(255, 255, 255, 0.12); font-size: 13px; color: #f5dfe1;\r\n}\r\n.ss-case .tag-icon { font-size: 12px; }\r\n.ss-case .cta-btn {\r\n  align-self: flex-start; padding: 14px 26px; border-radius: 10px;\r\n  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25);\r\n  color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s ease;\r\n}\r\n.ss-case .cta-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }\r\n.ss-case .col-right { gap: 24px; }\r\n.ss-case .right-top { display: flex; align-items: center; gap: 18px; }\r\n.ss-case .video-frame--small { flex: 0 0 auto; width: 42%; aspect-ratio: 4 \/ 3; }\r\n.ss-case .testimonial-name { margin: 0 0 4px; font-weight: 700; font-size: 15px; }\r\n.ss-case .testimonial-role { margin: 0; font-size: 13px; color: #f5dfe1; }\r\n.ss-case .panel-frame { position: relative; flex: 1; min-height: 340px; border-radius: 22px; background: #eceeef; }\r\n.ss-case .panel-fold { position: absolute; width: 28px; height: 28px; background: #fff; }\r\n.ss-case .panel-fold--tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }\r\n.ss-case .panel-fold--br { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }\r\n@media (max-width: 900px) {\r\n  .ss-case .showcase-card { grid-template-columns: 1fr; padding: 26px; }\r\n  .ss-case .right-top { flex-direction: column; align-items: stretch; }\r\n  .ss-case .video-frame--small { width: 100%; aspect-ratio: 16 \/ 10; }\r\n  .ss-case .panel-frame { min-height: 260px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"ss-case\">\r\n<div class=\"page\">\r\n  <section class=\"showcase-card\">\r\n    <div class=\"col col-left\">\r\n      <div class=\"brand\">\r\n        <span class=\"brand-name\">Novara<\/span>\r\n        <span class=\"brand-divider\"><\/span>\r\n        <span class=\"brand-icon\">N<\/span>\r\n      <\/div>\r\n      <div class=\"mockup-frame\">\r\n        <video class=\"video-el\" autoplay muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/videoplayback-6.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <span class=\"mockup-badge\"><\/span>\r\n        <div class=\"mockup-nav\">\r\n          <button type=\"button\" aria-label=\"Previous\">\u2190<\/button>\r\n          <span>1\/5<\/span>\r\n          <button type=\"button\" aria-label=\"Next\">\u2192<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <h1 class=\"headline\">New Website Launch for the Home of Bold, Timeless Style<\/h1>\r\n      <ul class=\"tags\">\r\n        <li><span class=\"tag-icon\">\u25c6<\/span> Design System<\/li>\r\n        <li><span class=\"tag-icon\">\u27f3<\/span> Figma to WordPress<\/li>\r\n        <li><span class=\"tag-icon\">\u23fb<\/span> Relaunch<\/li>\r\n      <\/ul>\r\n      <a class=\"cta-btn\" href=\"#\">View case study<\/a>\r\n    <\/div>\r\n    <div class=\"col col-right\">\r\n      <div class=\"right-top\">\r\n        <div class=\"video-frame video-frame--small\">\r\n          <video class=\"video-el\" autoplay muted loop playsinline preload=\"metadata\">\r\n            <source src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/videoplayback-4-1.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n        <\/div>\r\n        <div class=\"testimonial\">\r\n          <p class=\"testimonial-name\">Inside the Relaunch<\/p>\r\n          <p class=\"testimonial-role\">How the new site came together<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"panel-frame\">\r\n        <video class=\"video-el\" autoplay muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/videoplayback-3-1.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <span class=\"panel-fold panel-fold--tl\"><\/span>\r\n        <span class=\"panel-fold panel-fold--br\"><\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-3245d84 e-con e-atomic-element e-flexbox-base e-ebc1ab7 \" data-id=\"3245d84\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3245d84\">\n    \t\t<div class=\"elementor-element elementor-element-1fd4c8d elementor-widget elementor-widget-html\" data-id=\"1fd4c8d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ss-case2 * { box-sizing: border-box; }\r\n.ss-case2 { font-family: \"Helvetica Neue\", Arial, sans-serif; color: #ffffff; }\r\n.ss-case2 .page { padding: 40px 16px; background: #05070a; }\r\n.ss-case2 .showcase-card {\r\n  width: 100%; max-width: 1280px; margin: 0 auto;\r\n  display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px;\r\n  padding: 40px; border-radius: 28px;\r\n  background: radial-gradient(120% 160% at 20% 0%, #e8391f 0%, #c11f0f 55%, #7a1006 100%);\r\n  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);\r\n}\r\n.ss-case2 .col { display: flex; flex-direction: column; }\r\n.ss-case2 .brand {\r\n  font-weight: 700; font-size: 14px; letter-spacing: 0.04em;\r\n  text-decoration: underline; text-underline-offset: 4px; margin-bottom: 22px;\r\n}\r\n.ss-case2 .video-frame, .ss-case2 .mockup-frame { position: relative; border-radius: 18px; overflow: hidden; background: #000; }\r\n.ss-case2 .video-el { width: 100%; height: 100%; display: block; object-fit: cover; }\r\n.ss-case2 .mockup-frame { aspect-ratio: 16 \/ 11; background: #fff; }\r\n.ss-case2 .mockup-img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n.ss-case2 .headline { margin: 26px 0 18px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.3; }\r\n.ss-case2 .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 26px; }\r\n.ss-case2 .tags li {\r\n  display: flex; align-items: center; gap: 6px; padding: 8px 14px;\r\n  border-radius: 20px; background: rgba(255, 255, 255, 0.14); font-size: 13px; color: #fde3df;\r\n}\r\n.ss-case2 .tag-icon { font-size: 12px; }\r\n.ss-case2 .cta-btn {\r\n  align-self: flex-start; padding: 14px 26px; border-radius: 10px;\r\n  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.3);\r\n  color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s ease;\r\n}\r\n.ss-case2 .cta-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }\r\n.ss-case2 .col-right { gap: 24px; }\r\n.ss-case2 .right-top { display: flex; align-items: center; gap: 18px; }\r\n.ss-case2 .video-frame--small { flex: 0 0 auto; width: 42%; aspect-ratio: 4 \/ 3; }\r\n.ss-case2 .sound-badge {\r\n  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;\r\n  background: rgba(15, 15, 15, 0.65); display: flex; align-items: center; justify-content: center; font-size: 13px;\r\n}\r\n.ss-case2 .video-caption {\r\n  position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; flex-direction: column;\r\n  gap: 1px; background: rgba(0, 0, 0, 0.55); padding: 4px 8px; border-radius: 4px;\r\n}\r\n.ss-case2 .caption-name { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; }\r\n.ss-case2 .caption-role { font-size: 8px; color: #d8d8d8; }\r\n.ss-case2 .testimonial-name { margin: 0 0 4px; font-weight: 700; font-size: 15px; }\r\n.ss-case2 .testimonial-role { margin: 0; font-size: 13px; color: #fde3df; }\r\n.ss-case2 .panel-frame {\r\n  position: relative; flex: 1; min-height: 340px; border-radius: 22px; background: #e8391f;\r\n  display: flex; align-items: center; justify-content: center; padding: 26px;\r\n}\r\n.ss-case2 .panel-inner {\r\n  width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #fff;\r\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);\r\n}\r\n@media (max-width: 900px) {\r\n  .ss-case2 .showcase-card { grid-template-columns: 1fr; padding: 26px; }\r\n  .ss-case2 .right-top { flex-direction: column; align-items: stretch; }\r\n  .ss-case2 .video-frame--small { width: 100%; aspect-ratio: 16 \/ 10; }\r\n  .ss-case2 .panel-frame { min-height: 260px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"ss-case2\">\r\n<div class=\"page\">\r\n  <section class=\"showcase-card\">\r\n    <div class=\"col col-left\">\r\n      <div class=\"brand\">NOVARA<sup>\u00ae<\/sup><\/div>\r\n      <div class=\"mockup-frame\">\r\n        <img decoding=\"async\" class=\"mockup-img\" src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/website-ui-design-best-practices-for-modern-user-experience.jpg\" alt=\"Product preview\">\r\n      <\/div>\r\n      <h1 class=\"headline\">Landing page for recruiting market leaders, released from internal blockages.<\/h1>\r\n      <ul class=\"tags\">\r\n        <li><span class=\"tag-icon\">\u25c6<\/span> Design System<\/li>\r\n        <li><span class=\"tag-icon\">\u27f3<\/span> Figma to Webflow<\/li>\r\n        <li><span class=\"tag-icon\">\u25b7<\/span> Dynamic Lotties<\/li>\r\n      <\/ul>\r\n      <a class=\"cta-btn\" href=\"#\">View case study<\/a>\r\n    <\/div>\r\n    <div class=\"col col-right\">\r\n      <div class=\"right-top\">\r\n        <div class=\"video-frame video-frame--small\">\r\n          <video class=\"video-el\" autoplay muted loop playsinline preload=\"metadata\">\r\n            <source src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/videoplayback-8.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n          <span class=\"sound-badge\">\ud83d\udd0a<\/span>\r\n          <div class=\"video-caption\">\r\n            <span class=\"caption-name\">BEHIND THE LAUNCH<\/span>\r\n            <span class=\"caption-role\">RECRUITING LANDING PAGE<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"testimonial\">\r\n          <p class=\"testimonial-name\">Hiring, Reimagined<\/p>\r\n          <p class=\"testimonial-role\">See the results behind the numbers<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"panel-frame\">\r\n        <div class=\"panel-inner\">\r\n          <video class=\"video-el\" autoplay muted loop playsinline preload=\"metadata\">\r\n            <source src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/videoplayback-9.mp4\" type=\"video\/mp4\">\r\n          <\/video>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8f449b0 e-con e-atomic-element e-flexbox-base e-a893c29 \" data-id=\"8f449b0\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8f449b0\">\n    \t\t<div class=\"elementor-element elementor-element-fe76d95 elementor-widget elementor-widget-html\" data-id=\"fe76d95\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ss-hero * { box-sizing: border-box; }\r\n\r\n.ss-hero {\r\n  font-family: \"Poppins\", \"Helvetica Neue\", Arial, sans-serif;\r\n  color: #ffffff;\r\n}\r\n\r\n.ss-hero .page {\r\n  padding: 56px 24px;\r\n  background: #0a0a0a;\r\n}\r\n\r\n.ss-hero .hero-top {\r\n  max-width: 1280px;\r\n  margin: 0 auto 48px;\r\n  display: grid;\r\n  grid-template-columns: 1.4fr 1fr;\r\n  gap: 40px;\r\n  align-items: start;\r\n}\r\n\r\n.ss-hero .hero-left h1 {\r\n  margin: 0;\r\n  font-size: clamp(28px, 3.6vw, 44px);\r\n  font-weight: 800;\r\n  line-height: 1.25;\r\n}\r\n\r\n.ss-hero .hero-right p {\r\n  margin: 0 0 20px;\r\n  font-size: 15px;\r\n  line-height: 1.6;\r\n  color: #cfd2d6;\r\n}\r\n\r\n.ss-hero .cta-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 14px 22px;\r\n  border-radius: 10px;\r\n  background: #29e6a6;\r\n  color: #06251c;\r\n  text-decoration: none;\r\n  font-weight: 700;\r\n  font-size: 14px;\r\n}\r\n\r\n.ss-hero .cta-btn:hover { background: #45edb6; color: #06251c; }\r\n\r\n.ss-hero .cards-grid {\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  gap: 24px;\r\n  align-items: stretch;\r\n}\r\n\r\n.ss-hero .card {\r\n  background: #131417;\r\n  border: 1px solid rgba(255, 255, 255, 0.08);\r\n  border-radius: 22px;\r\n  padding: 28px;\r\n}\r\n\r\n.ss-hero .card--tall {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.ss-hero .card h3 {\r\n  margin: 0 0 10px;\r\n  font-size: 19px;\r\n  font-weight: 700;\r\n}\r\n\r\n.ss-hero .card p {\r\n  margin: 0;\r\n  font-size: 14px;\r\n  line-height: 1.55;\r\n  color: #b9bcc1;\r\n}\r\n\r\n.ss-hero .card-preview {\r\n  margin-top: 24px;\r\n  flex: 1;\r\n  border-radius: 14px;\r\n  overflow: hidden;\r\n  background: #000;\r\n  min-height: 180px;\r\n}\r\n\r\n.ss-hero .card-preview img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  display: block;\r\n}\r\n\r\n.ss-hero .dev-list {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 26px 0 0;\r\n}\r\n\r\n.ss-hero .dev-list li {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  padding: 14px 0;\r\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n}\r\n\r\n.ss-hero .dev-icon {\r\n  width: 26px;\r\n  height: 26px;\r\n  border-radius: 7px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 12px;\r\n  font-weight: 800;\r\n  flex: 0 0 auto;\r\n  color: #fff;\r\n}\r\n\r\n.ss-hero .dev-icon--webflow { background: #2b6ce0; }\r\n.ss-hero .dev-icon--wp { background: #1e2a3a; color: #6ec1e4; }\r\n.ss-hero .dev-icon--api { background: #21c55d; font-size: 10px; }\r\n.ss-hero .dev-icon--auto { background: #8b5cf6; }\r\n\r\n.ss-hero .card-stack {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 24px;\r\n}\r\n\r\n.ss-hero .card--short { flex: 1; }\r\n\r\n@media (max-width: 900px) {\r\n  .ss-hero .hero-top { grid-template-columns: 1fr; }\r\n  .ss-hero .cards-grid { grid-template-columns: 1fr; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"ss-hero\">\r\n<div class=\"page\">\r\n\r\n  <section class=\"hero-top\">\r\n    <div class=\"hero-left\">\r\n      <h1>Transform your boring website into an incomparable online presence with premium character<\/h1>\r\n    <\/div>\r\n    <div class=\"hero-right\">\r\n      <p>In a world where getting a new website is easy and cheap, we stand out by offering unique service and top-notch quality.<\/p>\r\n      <a class=\"cta-btn\" href=\"#\">Get a quote now <span class=\"arrow\">\u2192<\/span><\/a>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"cards-grid\">\r\n\r\n    <div class=\"card card--tall\">\r\n      <h3>Web Design<\/h3>\r\n      <p>Excellent design ideas for digital experiences that inspire your customers.<\/p>\r\n      <div class=\"card-preview\">\r\n        <img decoding=\"async\" src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/Untitled-design-2026-07-22T174719.563.png\" alt=\"Web design preview\">\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"card card--tall\">\r\n      <h3>Web Development<\/h3>\r\n      <p>Targeted focus on technology, that your new website really needs.<\/p>\r\n      <ul class=\"dev-list\">\r\n        <li><span class=\"dev-icon dev-icon--webflow\">W<\/span> Webflow<\/li>\r\n        <li><span class=\"dev-icon dev-icon--wp\">W<\/span> WordPress<\/li>\r\n        <li><span class=\"dev-icon dev-icon--api\">&lt;\/&gt;<\/span> Integrations & API<\/li>\r\n        <li><span class=\"dev-icon dev-icon--auto\">\u2b21<\/span> Business automations<\/li>\r\n      <\/ul>\r\n    <\/div>\r\n\r\n    <div class=\"card-stack\">\r\n      <div class=\"card card--short\">\r\n        <h3>SEO & SEA<\/h3>\r\n        <p>Organic search engine optimization or paid Google Ads help you achieve more visibility and inquiries.<\/p>\r\n      <\/div>\r\n      <div class=\"card card--short\">\r\n        <h3>Content Creation<\/h3>\r\n        <p>New texts, photos and videos immediately guarantee you more trust and approval from your target group.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n<\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dea4c20 elementor-widget elementor-widget-html\" data-id=\"dea4c20\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n     VERTEX \u2014 Portfolio Grid (10 projects, 2 per row)\r\n     Paste this ENTIRE block into a single Elementor \"HTML\" widget.\r\n     Self-contained: styles, markup and scripts all included below.\r\n     Scoped under #vtxpf-root \/ .vtxpf-* \u2014 safe to use standalone, or\r\n     alongside the VERTEX hero (#vtx-root) and\/or the single Syltbrise\r\n     case study (#vtxcs-root) blocks on the same page. No collisions.\r\n\r\n     Behavior: a 2-column grid of thumbnails. Click any thumbnail to\r\n     open a shared modal showing all 3 of that project's images\r\n     together, plus an \"about\" blurb and a skills\/tools list.\r\n\r\n     NOTE on the copy: I could not view any of the 30 images or visit\r\n     any of the 10 domains (both the image host and every domain are\r\n     blocked from where I'm working). The \"category\" tag on each card\r\n     is a guess based only on the domain name (e.g. \"knifestore-yatagan\"\r\n     -> knife store). The about text and skills list are generic\r\n     placeholders. Please verify\/edit every project's category, about\r\n     text, and skills before publishing \u2014 especially if a domain name\r\n     is misleading.\r\n     ============================================================ -->\r\n\r\n<style>\r\n#vtxpf-root{\r\n  --vtxpf-bg: #05050a;\r\n  --vtxpf-border: rgba(255,255,255,0.1);\r\n  --vtxpf-text: #f5f5f8;\r\n  --vtxpf-text-dim: #9aa0ac;\r\n  --vtxpf-text-dimmer: #666c78;\r\n  --vtxpf-violet: #7c3aed;\r\n  --vtxpf-blue: #06b6d4;\r\n  --vtxpf-pink: #f472b6;\r\n  --vtxpf-grad: linear-gradient(120deg, var(--vtxpf-violet), var(--vtxpf-blue) 55%, var(--vtxpf-pink));\r\n  --vtxpf-ease: cubic-bezier(.16,.84,.44,1);\r\n\r\n  background: var(--vtxpf-bg);\r\n  color: var(--vtxpf-text);\r\n  font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n  line-height: 1.6;\r\n  -webkit-font-smoothing: antialiased;\r\n  overflow-x: hidden;\r\n  padding: 100px 0;\r\n  position: relative;\r\n}\r\n#vtxpf-root *, #vtxpf-root *::before, #vtxpf-root *::after{ box-sizing: border-box; }\r\n#vtxpf-root h1, #vtxpf-root h2, #vtxpf-root h3{\r\n  font-family: 'Space Grotesk', 'Inter', sans-serif;\r\n  font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -0.02em;\r\n}\r\n#vtxpf-root p{ margin: 0; color: var(--vtxpf-text-dim); }\r\n#vtxpf-root a{ color: inherit; text-decoration: none; }\r\n#vtxpf-root button{ font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }\r\n\r\n.vtxpf-container{ max-width: 1160px; margin: 0 auto; padding: 0 32px; }\r\n\r\n\/* ---- head ---- *\/\r\n.vtxpf-head{ text-align: center; margin-bottom: 56px; }\r\n.vtxpf-eyebrow{\r\n  display:inline-flex; align-items:center; gap:10px; justify-content:center;\r\n  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;\r\n  color: var(--vtxpf-text-dim); margin-bottom: 18px; font-weight: 600;\r\n}\r\n.vtxpf-eyebrow-dot{\r\n  width:7px; height:7px; border-radius:50%; background: var(--vtxpf-grad);\r\n  box-shadow: 0 0 12px 2px rgba(124,58,237,0.6);\r\n}\r\n.vtxpf-head h2{ font-size: clamp(2.1rem, 4.6vw, 3.2rem); }\r\n.vtxpf-head p{ margin: 14px auto 0; max-width: 520px; }\r\n\r\n\/* ---- grid, 2 per row ---- *\/\r\n.vtxpf-grid{\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  align-items: start;\r\n  gap: 26px;\r\n}\r\n.vtxpf-card{\r\n  display: block; width: 100%; text-align: left;\r\n  border-radius: 16px; overflow: hidden;\r\n  border: 1px solid var(--vtxpf-border);\r\n  background: #0a0a12;\r\n  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.7);\r\n  transition: transform .35s var(--vtxpf-ease), box-shadow .35s var(--vtxpf-ease), border-color .35s;\r\n}\r\n.vtxpf-card:hover{\r\n  transform: translateY(-5px);\r\n  box-shadow: 0 34px 60px -24px rgba(124,58,237,0.3);\r\n  border-color: rgba(255,255,255,0.22);\r\n}\r\n.vtxpf-card-chrome{\r\n  display:flex; align-items:center; gap: 6px;\r\n  padding: 11px 14px; background: #111117; border-bottom: 1px solid var(--vtxpf-border);\r\n}\r\n.vtxpf-card-chrome i{ width: 9px; height: 9px; border-radius: 50%; background: #3a3a44; display:block; }\r\n.vtxpf-card-frame{ display: block; position: relative; width: 100%; aspect-ratio: 16 \/ 10; overflow: hidden; background: #0a0a12; }\r\n.vtxpf-card-frame img{ position: absolute; inset: 0; display:block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }\r\n.vtxpf-card-overlay{\r\n  position: absolute; inset: 0;\r\n  background: linear-gradient(180deg, rgba(5,5,10,0) 45%, rgba(5,5,10,0.85) 100%);\r\n  opacity: 0; transition: opacity .3s var(--vtxpf-ease);\r\n}\r\n.vtxpf-card:hover .vtxpf-card-overlay{ opacity: 1; }\r\n.vtxpf-card-meta{ padding: 18px 20px 20px; display:flex; justify-content: space-between; align-items:center; gap: 12px; }\r\n.vtxpf-card-meta div{ min-width: 0; }\r\n.vtxpf-card-name{ font-family:'Space Grotesk',sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--vtxpf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\r\n.vtxpf-card-cat{ font-size: 0.8rem; color: var(--vtxpf-text-dimmer); margin-top: 3px; }\r\n.vtxpf-card-plus{\r\n  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;\r\n  border: 1px solid var(--vtxpf-border); display:flex; align-items:center; justify-content:center;\r\n  font-size: 1rem; color: var(--vtxpf-text); transition: background .25s, border-color .25s, transform .25s;\r\n}\r\n.vtxpf-card:hover .vtxpf-card-plus{ background: var(--vtxpf-grad); border-color: transparent; color: #08080c; transform: rotate(90deg); }\r\n\r\n.vtxpf-reveal{ opacity: 0; transform: translateY(28px); }\r\n\r\n\/* ---- shared modal (same pattern as the single case-study block) ---- *\/\r\n.vtxpf-modal{\r\n  position: fixed; inset: 0; z-index: 10000;\r\n  display: flex; align-items: center; justify-content: center;\r\n  padding: 24px;\r\n  visibility: hidden; opacity: 0;\r\n  transition: opacity .35s var(--vtxpf-ease), visibility .35s var(--vtxpf-ease);\r\n}\r\n.vtxpf-modal.vtxpf-open{ visibility: visible; opacity: 1; }\r\n.vtxpf-modal-backdrop{\r\n  position: absolute; inset: 0;\r\n  background: rgba(5,5,10,0.88);\r\n  backdrop-filter: blur(10px);\r\n  -webkit-backdrop-filter: blur(10px);\r\n}\r\n.vtxpf-modal-panel{\r\n  position: relative;\r\n  width: 100%; max-width: 980px; max-height: 88vh;\r\n  overflow-y: auto;\r\n  background: #0a0a12;\r\n  border: 1px solid var(--vtxpf-border);\r\n  border-radius: 22px;\r\n  padding: 48px;\r\n  transform: scale(0.94) translateY(14px);\r\n  transition: transform .4s var(--vtxpf-ease);\r\n  text-align: left;\r\n}\r\n.vtxpf-modal.vtxpf-open .vtxpf-modal-panel{ transform: scale(1) translateY(0); }\r\n.vtxpf-modal-close{\r\n  position: absolute; top: 20px; right: 20px; z-index: 2;\r\n  width: 40px; height: 40px; border-radius: 50%;\r\n  border: 1px solid var(--vtxpf-border); background: rgba(255,255,255,0.04);\r\n  display:flex; align-items:center; justify-content:center;\r\n  font-size: 1.3rem; color: var(--vtxpf-text);\r\n  transition: background .25s, transform .25s;\r\n}\r\n.vtxpf-modal-close:hover{ background: rgba(255,255,255,0.1); transform: rotate(90deg); }\r\n\r\n.vtxpf-modal-head{\r\n  display:flex; justify-content: space-between; align-items: flex-end;\r\n  gap: 30px; flex-wrap: wrap; margin-bottom: 36px;\r\n  padding-bottom: 30px; border-bottom: 1px solid var(--vtxpf-border);\r\n}\r\n.vtxpf-modal-head h2{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); }\r\n.vtxpf-modal-head p{ margin-top: 10px; }\r\n.vtxpf-visit{\r\n  display: inline-flex; align-items:center; gap: 10px;\r\n  padding: 14px 26px; border-radius: 999px;\r\n  font-size: 0.88rem; font-weight: 600;\r\n  background: var(--vtxpf-grad); color: #08080c;\r\n  box-shadow: 0 10px 30px -8px rgba(124,58,237,0.5);\r\n  transition: transform .3s var(--vtxpf-ease);\r\n  white-space: nowrap;\r\n}\r\n.vtxpf-visit:hover{ transform: translateY(-2px); }\r\n\r\n.vtxpf-meta{\r\n  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;\r\n  background: var(--vtxpf-border);\r\n  border: 1px solid var(--vtxpf-border);\r\n  border-radius: 14px; overflow: hidden;\r\n  margin-bottom: 36px;\r\n}\r\n.vtxpf-meta div{ background: #0a0a12; padding: 18px 22px; display:flex; flex-direction: column; gap: 6px; }\r\n.vtxpf-meta span{ font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vtxpf-text-dimmer); }\r\n.vtxpf-meta strong{ font-family:'Space Grotesk',sans-serif; font-size: 1rem; font-weight: 600; color: var(--vtxpf-text); }\r\n.vtxpf-meta a strong{ color: var(--vtxpf-blue); }\r\n\r\n.vtxpf-gallery{\r\n  display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto;\r\n  gap: 16px; margin-bottom: 40px;\r\n}\r\n.vtxpf-shot{ border-radius: 14px; overflow: hidden; border: 1px solid var(--vtxpf-border); background: #0d0d16; }\r\n.vtxpf-shot-chrome{ display:flex; align-items:center; gap: 6px; padding: 9px 12px; background: #111117; border-bottom: 1px solid var(--vtxpf-border); }\r\n.vtxpf-shot-chrome i{ width: 8px; height: 8px; border-radius: 50%; background: #3a3a44; display:block; }\r\n.vtxpf-shot-frame{ position: relative; width: 100%; overflow: hidden; }\r\n.vtxpf-shot-frame img{ position: absolute; inset: 0; display:block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }\r\n.vtxpf-shot-1{ grid-column: 1; grid-row: 1 \/ span 2; }\r\n.vtxpf-shot-1 .vtxpf-shot-frame{ aspect-ratio: 4 \/ 5; }\r\n.vtxpf-shot-2{ grid-column: 2; grid-row: 1; }\r\n.vtxpf-shot-2 .vtxpf-shot-frame{ aspect-ratio: 16 \/ 11; }\r\n.vtxpf-shot-3{ grid-column: 2; grid-row: 2; }\r\n.vtxpf-shot-3 .vtxpf-shot-frame{ aspect-ratio: 16 \/ 11; }\r\n\r\n.vtxpf-block{ margin-bottom: 34px; }\r\n.vtxpf-block:last-child{ margin-bottom: 0; }\r\n.vtxpf-block h3{\r\n  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;\r\n  color: var(--vtxpf-text-dimmer); margin-bottom: 14px; font-weight: 600;\r\n}\r\n.vtxpf-block p{ font-size: 1.02rem; color: var(--vtxpf-text-dim); max-width: 640px; }\r\n\r\n.vtxpf-skills{ display:flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }\r\n.vtxpf-skills li{\r\n  list-style: none; padding: 9px 18px; border-radius: 999px;\r\n  border: 1px solid var(--vtxpf-border); background: rgba(255,255,255,0.03);\r\n  font-size: 0.85rem; color: var(--vtxpf-text);\r\n}\r\n\r\n@media (max-width: 900px){\r\n  .vtxpf-grid{ grid-template-columns: 1fr; }\r\n  .vtxpf-modal-panel{ padding: 32px 24px; }\r\n  .vtxpf-gallery{ grid-template-columns: 1fr; grid-template-rows: none; }\r\n  .vtxpf-shot-1{ grid-column: 1; grid-row: auto; }\r\n  .vtxpf-shot-1 .vtxpf-shot-frame{ aspect-ratio: 16 \/ 11; }\r\n  .vtxpf-shot-2, .vtxpf-shot-3{ grid-column: 1; grid-row: auto; }\r\n  .vtxpf-meta{ grid-template-columns: 1fr; }\r\n}\r\n@media (max-width: 640px){\r\n  #vtxpf-root{ padding: 70px 0; }\r\n  .vtxpf-container{ padding: 0 20px; }\r\n  .vtxpf-modal{ padding: 0; }\r\n  .vtxpf-modal-panel{ max-height: 100vh; height: 100%; border-radius: 0; }\r\n}\r\n@media (prefers-reduced-motion: reduce){\r\n  #vtxpf-root *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }\r\n}\r\n<\/style>\r\n\r\n<div id=\"vtxpf-root\">\r\n  <div class=\"vtxpf-container\">\r\n\r\n    <div class=\"vtxpf-head\">\r\n      <p class=\"vtxpf-eyebrow vtxpf-reveal\"><span class=\"vtxpf-eyebrow-dot\"><\/span>Selected Work<\/p>\r\n      <h2 class=\"vtxpf-reveal\">Recent Projects<\/h2>\r\n      <p class=\"vtxpf-reveal\">Click any project to see the full case study &mdash; more screenshots, what it's built with, and a link to the live site.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"vtxpf-grid\" id=\"vtxpfGrid\"><\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- ============ SHARED MODAL (content filled in by JS on click) ============ -->\r\n  <div class=\"vtxpf-modal\" id=\"vtxpfModal\" role=\"dialog\" aria-modal=\"true\" aria-hidden=\"true\" aria-labelledby=\"vtxpfModalTitle\">\r\n    <div class=\"vtxpf-modal-backdrop\" data-vtxpf-close><\/div>\r\n    <div class=\"vtxpf-modal-panel\">\r\n      <button type=\"button\" class=\"vtxpf-modal-close\" data-vtxpf-close aria-label=\"Close\">&times;<\/button>\r\n\r\n      <div class=\"vtxpf-modal-head\">\r\n        <div>\r\n          <p class=\"vtxpf-eyebrow\" style=\"justify-content:flex-start;\"><span class=\"vtxpf-eyebrow-dot\"><\/span><span id=\"vtxpfModalCat\">Category<\/span><\/p>\r\n          <h2 id=\"vtxpfModalTitle\">Project<\/h2>\r\n          <p>Website Design &amp; Development<\/p>\r\n        <\/div>\r\n        <a href=\"#\" target=\"_blank\" rel=\"noopener\" class=\"vtxpf-visit\" id=\"vtxpfModalVisit\">Visit Live Site &#8599;<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"vtxpf-meta\">\r\n        <div>\r\n          <span>Client<\/span>\r\n          <strong id=\"vtxpfModalClient\">&mdash;<\/strong>\r\n        <\/div>\r\n        <div>\r\n          <span>Service<\/span>\r\n          <strong>Web Design &amp; Development<\/strong>\r\n        <\/div>\r\n        <div>\r\n          <span>Live Site<\/span>\r\n          <a href=\"#\" target=\"_blank\" rel=\"noopener\" id=\"vtxpfModalDomainLink\"><strong id=\"vtxpfModalDomain\">&mdash;<\/strong><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"vtxpf-gallery\">\r\n        <figure class=\"vtxpf-shot vtxpf-shot-1\">\r\n          <div class=\"vtxpf-shot-chrome\"><i><\/i><i><\/i><i><\/i><\/div>\r\n          <div class=\"vtxpf-shot-frame\"><img decoding=\"async\" id=\"vtxpfModalImg1\" src=\"\" alt=\"\" loading=\"lazy\" \/><\/div>\r\n        <\/figure>\r\n        <figure class=\"vtxpf-shot vtxpf-shot-2\">\r\n          <div class=\"vtxpf-shot-chrome\"><i><\/i><i><\/i><i><\/i><\/div>\r\n          <div class=\"vtxpf-shot-frame\"><img decoding=\"async\" id=\"vtxpfModalImg2\" src=\"\" alt=\"\" loading=\"lazy\" \/><\/div>\r\n        <\/figure>\r\n        <figure class=\"vtxpf-shot vtxpf-shot-3\">\r\n          <div class=\"vtxpf-shot-chrome\"><i><\/i><i><\/i><i><\/i><\/div>\r\n          <div class=\"vtxpf-shot-frame\"><img decoding=\"async\" id=\"vtxpfModalImg3\" src=\"\" alt=\"\" loading=\"lazy\" \/><\/div>\r\n        <\/figure>\r\n      <\/div>\r\n\r\n      <div class=\"vtxpf-block\">\r\n        <h3>About the Website<\/h3>\r\n        <p id=\"vtxpfModalAbout\">&mdash;<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"vtxpf-block\">\r\n        <h3>Skills &amp; Tools<\/h3>\r\n        <ul class=\"vtxpf-skills\" id=\"vtxpfModalSkills\"><\/ul>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\r\n<script>\r\n(function () {\r\n  var BASE_SKILLS = ['Website Design', 'Responsive Development', 'WordPress \/ Elementor', 'Custom CSS & JavaScript', 'UI \/ UX Design', 'On-Page SEO', 'Performance Optimization'];\r\n\r\n  var PROJECTS = [\r\n    {\r\n      name: 'Pferdeliebe Healthy',\r\n      domain: 'pferdeliebehealthy.de',\r\n      category: 'Equestrian Health & Lifestyle',\r\n      images: [\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0005.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0011.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0027.jpg'\r\n      ],\r\n      about: 'A custom equestrian health & lifestyle website for Pferdeliebe Healthy \\u2014 built responsive and fast, with a clean layout designed to make information easy to find and easy to trust.',\r\n      skills: ['Equestrian \/ Health Content'].concat(BASE_SKILLS)\r\n    },\r\n    {\r\n      name: 'Yatagan Knife Store',\r\n      domain: 'knifestore-yatagan.de',\r\n      category: 'Knife & Cutlery E-Commerce',\r\n      images: [\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0008.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0014.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0022.jpg'\r\n      ],\r\n      about: 'A custom online store for Yatagan Knife Store \\u2014 product-first layout, clean category browsing, and a checkout flow built to convert on both desktop and mobile.',\r\n      skills: ['E-Commerce (WooCommerce)'].concat(BASE_SKILLS)\r\n    },\r\n    {\r\n      name: 'The 3D Solution',\r\n      domain: 'the3dsolution.com',\r\n      category: '3D Design & Visualization',\r\n      images: [\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0006.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0013.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0026.jpg'\r\n      ],\r\n      about: 'A portfolio-driven website for The 3D Solution \\u2014 built to showcase visual work clearly, with fast-loading galleries and a layout that keeps the imagery front and center.',\r\n      skills: ['3D Visualization'].concat(BASE_SKILLS)\r\n    },\r\n    {\r\n      name: 'Amara Falafel',\r\n      domain: 'amarafalafel.de',\r\n      category: 'Restaurant \/ Food Service',\r\n      images: [\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0009.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0012.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0029.jpg'\r\n      ],\r\n      about: 'A warm, appetite-driven website for Amara Falafel \\u2014 built around an easy-to-browse menu, clear location & hours, and a mobile-first experience for hungry visitors.',\r\n      skills: ['Restaurant \/ Menu Design'].concat(BASE_SKILLS)\r\n    },\r\n    {\r\n      name: 'Room4Me',\r\n      domain: 'room4me.eu',\r\n      category: 'Room Rental Platform',\r\n      images: [\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0001.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0015.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0025.jpg'\r\n      ],\r\n      about: 'A listings-focused website for Room4Me \\u2014 designed around clear browsing and inquiry flows, built responsive so listings look sharp on any device.',\r\n      skills: ['Listings \/ Booking UX'].concat(BASE_SKILLS)\r\n    },\r\n    {\r\n      name: 'Athena Visual',\r\n      domain: 'athenavisual.de',\r\n      category: 'Creative \/ Visual Studio',\r\n      images: [\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0000.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0018.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0028.jpg'\r\n      ],\r\n      about: 'A portfolio website for Athena Visual \\u2014 a gallery-first layout that lets the creative work do the talking, with a fast, distraction-free browsing experience.',\r\n      skills: ['Portfolio \/ Gallery Design'].concat(BASE_SKILLS)\r\n    },\r\n    {\r\n      name: 'Syltbrise',\r\n      domain: 'syltbrise.com',\r\n      category: 'Lifestyle Brand',\r\n      images: [\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0004.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0016.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0023.jpg'\r\n      ],\r\n      about: 'A ground-up website build for Syltbrise \\u2014 from structure and UI design through to a fully responsive, production-ready site. The result is a clean, modern online presence designed to load fast and work seamlessly across every device.',\r\n      skills: ['Brand Storytelling'].concat(BASE_SKILLS)\r\n    },\r\n    {\r\n      name: 'Nibas Bedachungen',\r\n      domain: 'nibas-bedachungen.de',\r\n      category: 'Roofing & Construction',\r\n      images: [\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0007.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0017.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0021.jpg'\r\n      ],\r\n      about: 'A trust-building website for Nibas Bedachungen \\u2014 clear service pages, an easy way to get a quote, and a fast, mobile-friendly build for customers searching on the go.',\r\n      skills: ['Local Business \/ Lead Gen'].concat(BASE_SKILLS)\r\n    },\r\n    {\r\n      name: 'EB Elektrotechnik',\r\n      domain: 'ebelektrotechnik.de',\r\n      category: 'Electrical Services',\r\n      images: [\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0003.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0019.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0020.jpg'\r\n      ],\r\n      about: 'A clear, credible website for EB Elektrotechnik \\u2014 built to make services and contact info easy to find, with a fast, responsive layout for on-the-go customers.',\r\n      skills: ['Local Business \/ Lead Gen'].concat(BASE_SKILLS)\r\n    },\r\n    {\r\n      name: 'FT Audio',\r\n      domain: 'ft-audio.de',\r\n      category: 'Audio & Sound Equipment',\r\n      images: [\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0002.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0010.jpg',\r\n        'https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/IMG-20260725-WA0024.jpg'\r\n      ],\r\n      about: 'A product-focused website for FT Audio \\u2014 built to showcase equipment clearly, with fast-loading pages and a layout that keeps specs and imagery easy to scan.',\r\n      skills: ['Product Showcase'].concat(BASE_SKILLS)\r\n    }\r\n  ];\r\n\r\n  \/* ---- build the grid ---- *\/\r\n  var grid = document.getElementById('vtxpfGrid');\r\n  PROJECTS.forEach(function (project, i) {\r\n    var card = document.createElement('button');\r\n    card.type = 'button';\r\n    card.className = 'vtxpf-card vtxpf-reveal';\r\n    card.setAttribute('data-vtxpf-index', i);\r\n    card.setAttribute('aria-haspopup', 'dialog');\r\n    card.innerHTML =\r\n      '<span class=\"vtxpf-card-chrome\"><i><\/i><i><\/i><i><\/i><\/span>' +\r\n      '<span class=\"vtxpf-card-frame\">' +\r\n        '<img decoding=\"async\" src=\"' + project.images[0] + '\" alt=\"' + project.name + ' website preview\" loading=\"lazy\" \/>' +\r\n        '<span class=\"vtxpf-card-overlay\"><\/span>' +\r\n      '<\/span>' +\r\n      '<span class=\"vtxpf-card-meta\">' +\r\n        '<span><span class=\"vtxpf-card-name\">' + project.name + '<\/span><span class=\"vtxpf-card-cat\">' + project.category + '<\/span><\/span>' +\r\n        '<span class=\"vtxpf-card-plus\">+<\/span>' +\r\n      '<\/span>';\r\n    grid.appendChild(card);\r\n  });\r\n\r\n  \/* ---- reveal on scroll ---- *\/\r\n  if (typeof gsap === 'undefined') {\r\n    document.querySelectorAll('#vtxpf-root .vtxpf-reveal').forEach(function (el) {\r\n      el.style.opacity = '1';\r\n      el.style.transform = 'none';\r\n    });\r\n  } else {\r\n    gsap.registerPlugin(ScrollTrigger);\r\n    document.querySelectorAll('#vtxpf-root .vtxpf-reveal').forEach(function (el, i) {\r\n      gsap.to(el, {\r\n        opacity: 1, y: 0, duration: 0.8, ease: 'power3.out',\r\n        delay: (i % 6) * 0.06,\r\n        scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none reverse' },\r\n      });\r\n    });\r\n  }\r\n\r\n  \/* ---- modal ---- *\/\r\n  var modal = document.getElementById('vtxpfModal');\r\n  var lastFocused = null;\r\n\r\n  var els = {\r\n    cat: document.getElementById('vtxpfModalCat'),\r\n    title: document.getElementById('vtxpfModalTitle'),\r\n    visit: document.getElementById('vtxpfModalVisit'),\r\n    client: document.getElementById('vtxpfModalClient'),\r\n    domain: document.getElementById('vtxpfModalDomain'),\r\n    domainLink: document.getElementById('vtxpfModalDomainLink'),\r\n    img1: document.getElementById('vtxpfModalImg1'),\r\n    img2: document.getElementById('vtxpfModalImg2'),\r\n    img3: document.getElementById('vtxpfModalImg3'),\r\n    about: document.getElementById('vtxpfModalAbout'),\r\n    skills: document.getElementById('vtxpfModalSkills'),\r\n  };\r\n\r\n  function fillModal(project) {\r\n    var url = 'https:\/\/' + project.domain;\r\n    els.cat.textContent = project.category;\r\n    els.title.textContent = project.name;\r\n    els.visit.href = url;\r\n    els.client.textContent = project.name;\r\n    els.domain.textContent = project.domain;\r\n    els.domainLink.href = url;\r\n    els.img1.src = project.images[0];\r\n    els.img1.alt = project.name + ' website screenshot 1';\r\n    els.img2.src = project.images[1];\r\n    els.img2.alt = project.name + ' website screenshot 2';\r\n    els.img3.src = project.images[2];\r\n    els.img3.alt = project.name + ' website screenshot 3';\r\n    els.about.textContent = project.about;\r\n    els.skills.innerHTML = project.skills.map(function (s) { return '<li>' + s + '<\/li>'; }).join('');\r\n  }\r\n\r\n  function openModal(project) {\r\n    fillModal(project);\r\n    lastFocused = document.activeElement;\r\n    modal.classList.add('vtxpf-open');\r\n    modal.setAttribute('aria-hidden', 'false');\r\n    document.body.style.overflow = 'hidden';\r\n    modal.querySelector('.vtxpf-modal-panel').scrollTop = 0;\r\n    var closeBtn = modal.querySelector('.vtxpf-modal-close');\r\n    if (closeBtn) closeBtn.focus();\r\n  }\r\n\r\n  function closeModal() {\r\n    modal.classList.remove('vtxpf-open');\r\n    modal.setAttribute('aria-hidden', 'true');\r\n    document.body.style.overflow = '';\r\n    if (lastFocused) lastFocused.focus();\r\n  }\r\n\r\n  grid.addEventListener('click', function (e) {\r\n    var card = e.target.closest('[data-vtxpf-index]');\r\n    if (!card) return;\r\n    var project = PROJECTS[parseInt(card.getAttribute('data-vtxpf-index'), 10)];\r\n    if (project) openModal(project);\r\n  });\r\n\r\n  modal.querySelectorAll('[data-vtxpf-close]').forEach(function (el) {\r\n    el.addEventListener('click', closeModal);\r\n  });\r\n\r\n  document.addEventListener('keydown', function (e) {\r\n    if (e.key === 'Escape' && modal.classList.contains('vtxpf-open')) closeModal();\r\n  });\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-dcebbb1 e-con e-atomic-element e-flexbox-base e-2bc271e \" data-id=\"dcebbb1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"dcebbb1\">\n    \t\t<div class=\"elementor-element elementor-element-9f5ac05 elementor-widget elementor-widget-html\" data-id=\"9f5ac05\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ss-testi * { box-sizing: border-box; }\r\n\r\n.ss-testi {\r\n  font-family: \"Helvetica Neue\", Arial, sans-serif;\r\n  color: #ffffff;\r\n}\r\n\r\n.ss-testi .page {\r\n  padding: 56px 24px;\r\n  background: #0a0a0a;\r\n}\r\n\r\n.ss-testi .testi-head {\r\n  max-width: 900px;\r\n  margin: 0 auto 36px;\r\n  text-align: center;\r\n}\r\n\r\n.ss-testi .eyebrow {\r\n  margin: 0 0 10px;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.1em;\r\n  color: #29e6a6;\r\n}\r\n\r\n.ss-testi .testi-head h2 {\r\n  margin: 0;\r\n  font-size: clamp(26px, 3.4vw, 38px);\r\n  font-weight: 800;\r\n}\r\n\r\n.ss-testi .highlight-grid {\r\n  max-width: 1280px;\r\n  margin: 0 auto 32px;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 24px;\r\n}\r\n\r\n.ss-testi .highlight-card {\r\n  border-radius: 20px;\r\n  overflow: hidden;\r\n  border: 1px solid rgba(255, 255, 255, 0.08);\r\n}\r\n\r\n.ss-testi .highlight-media {\r\n  position: relative;\r\n  min-height: 200px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.ss-testi .highlight-card--award .highlight-media {\r\n  background: linear-gradient(135deg, #8a6a3a 0%, #4a3a1e 55%, #2a2010 100%);\r\n}\r\n\r\n.ss-testi .media-badge {\r\n  position: absolute;\r\n  top: 16px;\r\n  right: 20px;\r\n  font-size: 20px;\r\n  opacity: 0.8;\r\n}\r\n\r\n.ss-testi .award-plaque {\r\n  background: linear-gradient(135deg, #e8d9a8, #c9a94f);\r\n  color: #2a2010;\r\n  padding: 18px 32px;\r\n  border-radius: 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 4px;\r\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);\r\n}\r\n\r\n.ss-testi .plaque-label {\r\n  font-weight: 800;\r\n  font-size: 15px;\r\n  letter-spacing: 0.02em;\r\n}\r\n\r\n.ss-testi .plaque-sub {\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.05em;\r\n}\r\n\r\n.ss-testi .highlight-card--reviews .highlight-media {\r\n  background: linear-gradient(135deg, #0f3d2e 0%, #0a2a20 100%);\r\n}\r\n\r\n.ss-testi .review-widget {\r\n  background: #ffffff;\r\n  color: #111;\r\n  border-radius: 12px;\r\n  padding: 16px 22px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 6px;\r\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);\r\n  z-index: 2;\r\n}\r\n\r\n.ss-testi .widget-star { color: #29e6a6; font-size: 18px; }\r\n.ss-testi .widget-title { font-weight: 700; font-size: 14px; }\r\n\r\n.ss-testi .widget-stars {\r\n  display: flex;\r\n  gap: 3px;\r\n}\r\n\r\n.ss-testi .widget-stars span {\r\n  width: 18px;\r\n  height: 18px;\r\n  border-radius: 3px;\r\n  background: #29e6a6;\r\n}\r\n\r\n.ss-testi .widget-score { font-size: 11px; color: #555; }\r\n\r\n.ss-testi .chip {\r\n  position: absolute;\r\n  background: rgba(255, 255, 255, 0.9);\r\n  color: #111;\r\n  font-size: 11px;\r\n  font-weight: 700;\r\n  padding: 8px 12px;\r\n  border-radius: 8px;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  opacity: 0.65;\r\n}\r\n\r\n.ss-testi .chip--left { top: 24px; left: 24px; }\r\n.ss-testi .chip--right { bottom: 24px; right: 20px; }\r\n.ss-testi .chip-star { color: #f5b400; }\r\n\r\n.ss-testi .highlight-body {\r\n  background: #131417;\r\n  padding: 22px 26px 26px;\r\n}\r\n\r\n.ss-testi .highlight-body h3 {\r\n  margin: 0 0 8px;\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n}\r\n\r\n.ss-testi .highlight-body p {\r\n  margin: 0;\r\n  font-size: 13px;\r\n  line-height: 1.6;\r\n  color: #b9bcc1;\r\n}\r\n\r\n.ss-testi .testimonial-grid {\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n  column-count: 3;\r\n  column-gap: 24px;\r\n}\r\n\r\n.ss-testi .t-card {\r\n  break-inside: avoid;\r\n  margin-bottom: 24px;\r\n  background: #131417;\r\n  border: 1px solid rgba(255, 255, 255, 0.08);\r\n  border-radius: 18px;\r\n  padding: 22px;\r\n}\r\n\r\n.ss-testi .t-head {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.ss-testi .avatar {\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 50%;\r\n  flex: 0 0 auto;\r\n  object-fit: cover;\r\n  display: block;\r\n  overflow: hidden;\r\n  background: #2a2a2a;\r\n}\r\n\r\n.ss-testi .t-who { flex: 1; min-width: 0; }\r\n.ss-testi .t-name { margin: 0; font-size: 14px; font-weight: 700; }\r\n.ss-testi .t-role { margin: 2px 0 0; font-size: 12px; color: #9a9da2; }\r\n.ss-testi .t-flag { font-size: 11px; color: #cfd2d6; white-space: nowrap; }\r\n\r\n.ss-testi .t-stars {\r\n  color: #29e6a6;\r\n  font-size: 13px;\r\n  letter-spacing: 2px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.ss-testi .t-text {\r\n  margin: 0;\r\n  font-size: 13px;\r\n  line-height: 1.6;\r\n  color: #b9bcc1;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n  .ss-testi .highlight-grid { grid-template-columns: 1fr; }\r\n  .ss-testi .testimonial-grid { column-count: 1; }\r\n}\r\n\r\n@media (min-width: 901px) and (max-width: 1150px) {\r\n  .ss-testi .testimonial-grid { column-count: 2; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"ss-testi\">\r\n<div class=\"page\">\r\n\r\n  <div class=\"testi-head\">\r\n    <p class=\"eyebrow\">WITH NOVARA IN GOOD HANDS<\/p>\r\n    <h2>That we are proud of<\/h2>\r\n  <\/div>\r\n\r\n  <div class=\"highlight-grid\">\r\n\r\n    <div class=\"highlight-card highlight-card--award\">\r\n      <div class=\"highlight-media\">\r\n        <span class=\"media-badge\">\ud83c\udfc6<\/span>\r\n        <div class=\"award-plaque\">\r\n          <span class=\"plaque-label\">DIGITAL EXCELLENCE AWARDS<\/span>\r\n          <span class=\"plaque-sub\">WINNER \u00b7 BEST DESIGN AGENCY<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"highlight-body\">\r\n        <h3>Results that speak for themselves.<\/h3>\r\n        <p>Novara is winner of the Digital Excellence Awards 2021 & 2022 and was named Agency of the Year 2021.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"highlight-card highlight-card--reviews\">\r\n      <div class=\"highlight-media highlight-media--reviews\">\r\n        <div class=\"chip chip--left\">\r\n          <span class=\"chip-star\">\u2726<\/span>\r\n          <span>5.0 \u2605\u2605\u2605\u2605\u2605 Reviews<\/span>\r\n        <\/div>\r\n        <div class=\"review-widget\">\r\n          <span class=\"widget-star\">\u2605<\/span>\r\n          <span class=\"widget-title\">Verified Reviews<\/span>\r\n          <div class=\"widget-stars\">\r\n            <span><\/span><span><\/span><span><\/span><span><\/span><span><\/span>\r\n          <\/div>\r\n          <span class=\"widget-score\">4.9 rating \u00b7 120+ reviews<\/span>\r\n        <\/div>\r\n        <div class=\"chip chip--right\">Top Agency 2024 Shortlist<\/div>\r\n      <\/div>\r\n      <div class=\"highlight-body\">\r\n        <h3>Top reviews from all customers.<\/h3>\r\n        <p>Discover numerous customer reviews with 5 stars across review platforms for completed projects.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"testimonial-grid\">\r\n\r\n    <div class=\"t-card\">\r\n      <div class=\"t-head\">\r\n        <img decoding=\"async\" class=\"avatar\" src=\"https:\/\/i.pravatar.cc\/80?img=12\" alt=\"Patrick Reiser\">\r\n        <div class=\"t-who\">\r\n          <p class=\"t-name\">Patrick Reiser<\/p>\r\n          <p class=\"t-role\">CEO, Alpine Ventures AG<\/p>\r\n        <\/div>\r\n        <span class=\"t-flag\">CH \ud83c\udde8\ud83c\udded<\/span>\r\n      <\/div>\r\n      <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n      <p class=\"t-text\">Novara helped us make it even easier for our potential customers to recognize who we are and what exactly we do. Thanks to Novara, the entire presence of our company and brand now looks much more professional and reputable. The collaboration was very effective and efficient, and we always had the same contact person. Great! Thank you so much.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"t-card\">\r\n      <div class=\"t-head\">\r\n        <img decoding=\"async\" class=\"avatar\" src=\"https:\/\/i.pravatar.cc\/80?img=33\" alt=\"Philipp Epping\">\r\n        <div class=\"t-who\">\r\n          <p class=\"t-name\">Philipp Epping<\/p>\r\n          <p class=\"t-role\">CEO, Brightpath Solutions<\/p>\r\n        <\/div>\r\n        <span class=\"t-flag\">DE \ud83c\udde9\ud83c\uddea<\/span>\r\n      <\/div>\r\n      <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n      <p class=\"t-text\">We came to Novara because we wanted to finally complete an ongoing project. The team does a really good job and really understands what it means to build a page that stays easy to maintain afterward. We were very satisfied and would do it again and again!<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"t-card\">\r\n      <div class=\"t-head\">\r\n        <img decoding=\"async\" class=\"avatar\" src=\"https:\/\/i.pravatar.cc\/80?img=47\" alt=\"Mandy Windt\">\r\n        <div class=\"t-who\">\r\n          <p class=\"t-name\">Mandy Windt<\/p>\r\n          <p class=\"t-role\">Director of Marketing, Sternberg Interiors<\/p>\r\n        <\/div>\r\n        <span class=\"t-flag\">DE \ud83c\udde9\ud83c\uddea<\/span>\r\n      <\/div>\r\n      <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n      <p class=\"t-text\">The development and QA before the website went live was carried out competently and cooperatively. In particular, I want to highlight the customer-oriented, harmonious communication with the team and their deep expertise. Questions on our end were handled quickly, usually within a few hours. All in all, a very good implementation of the website and services provided by the whole team.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"t-card\">\r\n      <div class=\"t-head\">\r\n        <img decoding=\"async\" class=\"avatar\" src=\"https:\/\/i.pravatar.cc\/80?img=14\" alt=\"Jannis Rettig\">\r\n        <div class=\"t-who\">\r\n          <p class=\"t-name\">Jannis Rettig<\/p>\r\n          <p class=\"t-role\">CEO, Nordlicht Media<\/p>\r\n        <\/div>\r\n        <span class=\"t-flag\">DE \ud83c\udde9\ud83c\uddea<\/span>\r\n      <\/div>\r\n      <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n      <p class=\"t-text\">We are 100% satisfied with our new website. The result is modern, reputable, easy to use but still special. Many thanks to Novara for the solution-oriented and tireless effort, even under time pressure. Top collaboration. Absolute recommendation.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"t-card\">\r\n      <div class=\"t-head\">\r\n        <img decoding=\"async\" class=\"avatar\" src=\"https:\/\/i.pravatar.cc\/80?img=15\" alt=\"Gian-Marco Blum\">\r\n        <div class=\"t-who\">\r\n          <p class=\"t-name\">Gian-Marco Blum<\/p>\r\n          <p class=\"t-role\">CEO, TalentBridge GmbH<\/p>\r\n        <\/div>\r\n        <span class=\"t-flag\">DE \ud83c\udde9\ud83c\uddea<\/span>\r\n      <\/div>\r\n      <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n      <p class=\"t-text\">I have never experienced such quality at this speed of execution before!<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"t-card\">\r\n      <div class=\"t-head\">\r\n        <img decoding=\"async\" class=\"avatar\" src=\"https:\/\/i.pravatar.cc\/80?img=52\" alt=\"Dr. Frank Thiede\">\r\n        <div class=\"t-who\">\r\n          <p class=\"t-name\">Dr. Frank Thiede<\/p>\r\n          <p class=\"t-role\">CEO, Thiede & Cole Consulting<\/p>\r\n        <\/div>\r\n        <span class=\"t-flag\">DE \ud83c\udde9\ud83c\uddea<\/span>\r\n      <\/div>\r\n      <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n      <p class=\"t-text\">Great team, great performance. Novara delivered exactly what we needed, on time and on budget.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"t-card\">\r\n      <div class=\"t-head\">\r\n        <img decoding=\"async\" class=\"avatar\" src=\"https:\/\/i.pravatar.cc\/80?img=18\" alt=\"Jan Steinmetz\">\r\n        <div class=\"t-who\">\r\n          <p class=\"t-name\">Jan Steinmetz<\/p>\r\n          <p class=\"t-role\">Technical Director, Alderbrook Group<\/p>\r\n        <\/div>\r\n        <span class=\"t-flag\">DE \ud83c\udde9\ud83c\uddea<\/span>\r\n      <\/div>\r\n      <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n      <p class=\"t-text\">The young team came up with great ideas and did amazing work. Straight to the point! I'm already looking forward to the next project.<\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-6543ace e-con e-atomic-element e-flexbox-base e-505cede \" data-id=\"6543ace\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6543ace\">\n    \t\t<div class=\"elementor-element elementor-element-06af4db elementor-widget elementor-widget-html\" data-id=\"06af4db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ss-results * { box-sizing: border-box; }\r\n\r\n.ss-results {\r\n  font-family: \"Helvetica Neue\", Arial, sans-serif;\r\n  color: #ffffff;\r\n}\r\n\r\n.ss-results .page {\r\n  padding: 40px 24px;\r\n  background: #0a0a0a;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 24px;\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.ss-results .card,\r\n.ss-results .top-card,\r\n.ss-results .mini-card {\r\n  background: #131417;\r\n  border: 1px solid rgba(255, 255, 255, 0.08);\r\n  border-radius: 22px;\r\n}\r\n\r\n.ss-results .top-card {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 40px;\r\n  padding: 36px;\r\n}\r\n\r\n.ss-results .chart-panel { position: relative; }\r\n\r\n.ss-results .chart-svg {\r\n  width: 100%;\r\n  height: 220px;\r\n  display: block;\r\n}\r\n\r\n.ss-results .chart-line { fill: none; stroke: #29e6a6; stroke-width: 2; }\r\n.ss-results .chart-dot { fill: #29e6a6; stroke: #0a0a0a; stroke-width: 2; }\r\n.ss-results .chart-dash { stroke: rgba(255, 255, 255, 0.15); stroke-width: 1; stroke-dasharray: 3 3; }\r\n\r\n.ss-results .chart-tooltip {\r\n  position: absolute;\r\n  top: 6px;\r\n  left: 34%;\r\n  background: #1c1e22;\r\n  border: 1px solid rgba(255, 255, 255, 0.1);\r\n  border-radius: 10px;\r\n  padding: 12px 16px;\r\n  min-width: 190px;\r\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);\r\n}\r\n\r\n.ss-results .tooltip-date { margin: 0 0 8px; font-size: 12px; color: #9a9da2; }\r\n.ss-results .tooltip-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; }\r\n.ss-results .tooltip-label { flex: 1; color: #cfd2d6; }\r\n.ss-results .tooltip-value { font-weight: 700; }\r\n.ss-results .dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }\r\n.ss-results .dot--green { background: #29e6a6; }\r\n.ss-results .dot--grey { background: #565a60; }\r\n\r\n.ss-results .text-panel h2 {\r\n  margin: 0 0 28px;\r\n  font-size: clamp(24px, 2.8vw, 32px);\r\n  font-weight: 800;\r\n  line-height: 1.25;\r\n}\r\n\r\n.ss-results .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }\r\n.ss-results .feature-item h4 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }\r\n.ss-results .feature-item p { margin: 0; font-size: 13px; line-height: 1.55; color: #b9bcc1; }\r\n\r\n.ss-results .mid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }\r\n.ss-results .mid-left { display: flex; flex-direction: column; gap: 24px; }\r\n\r\n.ss-results .card { position: relative; padding: 26px; overflow: hidden; }\r\n.ss-results .card h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }\r\n.ss-results .card p { margin: 0; font-size: 13px; color: #b9bcc1; }\r\n\r\n.ss-results .card--support {\r\n  min-height: 150px;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.ss-results .tag-cloud {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 8px;\r\n  margin-top: 14px;\r\n}\r\n\r\n.ss-results .tag {\r\n  display: inline-block;\r\n  background: rgba(255, 255, 255, 0.06);\r\n  border: 1px solid rgba(255, 255, 255, 0.08);\r\n  color: #cfd2d6;\r\n  font-size: 12px;\r\n  line-height: 1.2;\r\n  padding: 6px 12px;\r\n  border-radius: 8px;\r\n  white-space: nowrap;\r\n}\r\n\r\n.ss-results .card--speed { display: flex; align-items: center; justify-content: space-between; min-height: 150px; }\r\n.ss-results .gauge-stack { position: relative; width: 130px; height: 100px; flex: 0 0 auto; }\r\n.ss-results .gauge { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }\r\n.ss-results .gauge--lg {\r\n  width: 92px; height: 92px; left: 0; top: 4px;\r\n  background: conic-gradient(#29e6a6 360deg, #1c1e22 0deg);\r\n  font-size: 22px;\r\n}\r\n.ss-results .gauge--lg::before { content: \"\"; position: absolute; inset: 8px; border-radius: 50%; background: #131417; }\r\n.ss-results .gauge--lg span { position: relative; z-index: 1; color: #29e6a6; }\r\n.ss-results .gauge--sm {\r\n  width: 56px; height: 56px; font-size: 12px; color: #7a7d82;\r\n  background: #1c1e22; border: 3px solid #33373d; opacity: 0.8;\r\n}\r\n.ss-results .gauge--97 { right: 10px; top: -6px; }\r\n.ss-results .gauge--94 { right: -6px; top: 40px; }\r\n\r\n.ss-results .card--concept { display: flex; flex-direction: column; }\r\n.ss-results .concept-media { margin-top: 18px; flex: 1; border-radius: 14px; overflow: hidden; background: #000; min-height: 220px; }\r\n.ss-results .concept-media video { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n\r\n.ss-results .bottom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }\r\n.ss-results .mini-card { padding: 20px; text-align: center; }\r\n.ss-results .mini-card h5 { margin: 14px 0 0; font-size: 14px; font-weight: 700; }\r\n.ss-results .mini-media {\r\n  height: 130px; border-radius: 14px; background: #0d0e10;\r\n  border: 1px solid rgba(255, 255, 255, 0.06); position: relative;\r\n  display: flex; align-items: center; justify-content: center; overflow: hidden;\r\n}\r\n\r\n.ss-results .mini-media--integrated { gap: 10px; }\r\n.ss-results .icon-box { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; z-index: 2; }\r\n.ss-results .icon-box--a { background: #4a154b; }\r\n.ss-results .icon-box--b { background: #ff4a00; }\r\n.ss-results .icon-line { position: absolute; left: 50%; top: 30%; width: 40px; height: 1px; background: rgba(255, 255, 255, 0.2); z-index: 1; }\r\n.ss-results .icon-plus {\r\n  position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #29e6a6; color: #06251c;\r\n  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; z-index: 2;\r\n}\r\n\r\n.ss-results .mini-media--scale {\r\n  background: repeating-linear-gradient(90deg, rgba(41, 230, 166, 0.15) 0 2px, transparent 2px 10px), #0d0e10;\r\n}\r\n.ss-results .scale-rocket { font-size: 30px; filter: drop-shadow(0 0 10px rgba(41, 230, 166, 0.6)); }\r\n\r\n.ss-results .mini-media--edit { background: linear-gradient(100deg, #063a2c, #0d5c44, #063a2c); flex-direction: column; gap: 8px; }\r\n.ss-results .edit-chip { background: #0d0e10; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700; }\r\n.ss-results .edit-cursor { font-size: 10px; color: #cfd2d6; }\r\n\r\n.ss-results .star-ring {\r\n  position: relative; width: 96px; height: 96px; border-radius: 50%;\r\n  border: 1px dashed rgba(255, 255, 255, 0.15);\r\n  display: flex; align-items: center; justify-content: center; flex-direction: column;\r\n}\r\n.ss-results .ring-star {\r\n  position: absolute; top: 50%; left: 50%; margin: -6px; font-size: 10px; color: #f5d76e;\r\n  width: 12px; height: 12px; display: flex; align-items: center; justify-content: center;\r\n}\r\n.ss-results .ring-label { font-size: 12px; font-weight: 800; }\r\n.ss-results .ring-sub { font-size: 8px; color: #9a9da2; letter-spacing: 0.05em; }\r\n\r\n@media (max-width: 900px) {\r\n  .ss-results .top-card { grid-template-columns: 1fr; }\r\n  .ss-results .mid-grid { grid-template-columns: 1fr; }\r\n  .ss-results .bottom-grid { grid-template-columns: 1fr 1fr; }\r\n  .ss-results .chart-tooltip { position: static; margin-top: 12px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"ss-results\">\r\n<div class=\"page\">\r\n\r\n  <div class=\"top-card\">\r\n    <div class=\"chart-panel\">\r\n      <svg class=\"chart-svg\" viewBox=\"0 0 400 220\" preserveAspectRatio=\"none\">\r\n        <polyline class=\"chart-line\"\r\n          points=\"0,170 30,150 60,175 90,120 110,60 140,100 170,140 195,110 215,150 245,90 270,130 300,70 330,150 360,110 400,160\" \/>\r\n        <circle class=\"chart-dot\" cx=\"110\" cy=\"60\" r=\"4\"><\/circle>\r\n        <circle class=\"chart-dot\" cx=\"140\" cy=\"100\" r=\"4\"><\/circle>\r\n        <line class=\"chart-dash\" x1=\"140\" y1=\"100\" x2=\"140\" y2=\"220\"><\/line>\r\n      <\/svg>\r\n      <div class=\"chart-tooltip\">\r\n        <p class=\"tooltip-date\">July 28, 2023<\/p>\r\n        <div class=\"tooltip-row\">\r\n          <span class=\"dot dot--green\"><\/span>\r\n          <span class=\"tooltip-label\">Unique Users<\/span>\r\n          <span class=\"tooltip-value\">9,128<\/span>\r\n        <\/div>\r\n        <div class=\"tooltip-row\">\r\n          <span class=\"dot dot--grey\"><\/span>\r\n          <span class=\"tooltip-label\">Page Views<\/span>\r\n          <span class=\"tooltip-value\">14,647<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"text-panel\">\r\n      <h2>Websites optimized for real results<\/h2>\r\n      <div class=\"feature-grid\">\r\n        <div class=\"feature-item\">\r\n          <h4>On-page SEO<\/h4>\r\n          <p>Ready to go to Google to be found.<\/p>\r\n        <\/div>\r\n        <div class=\"feature-item\">\r\n          <h4>Tracking & analysis<\/h4>\r\n          <p>Collect user statistics, marketing cookies, and more.<\/p>\r\n        <\/div>\r\n        <div class=\"feature-item\">\r\n          <h4>100% responsive<\/h4>\r\n          <p>Optimized for desktop, tablet, cell phones, and everything in between.<\/p>\r\n        <\/div>\r\n        <div class=\"feature-item\">\r\n          <h4>ROI-first<\/h4>\r\n          <p>So that you get the most out of your advertising budget.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"mid-grid\">\r\n\r\n    <div class=\"mid-left\">\r\n\r\n      <div class=\"card card--support\">\r\n        <h4>Support from A-Z<\/h4>\r\n        <p>Benefit from top-notch service and convenient comfort right from the start.<\/p>\r\n        <div class=\"tag-cloud\">\r\n          <span class=\"tag\">Content<\/span>\r\n          <span class=\"tag\">Development<\/span>\r\n          <span class=\"tag\">Support<\/span>\r\n          <span class=\"tag\">Google<\/span>\r\n          <span class=\"tag\">Hosting<\/span>\r\n          <span class=\"tag\">SEO<\/span>\r\n          <span class=\"tag\">Concept<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"card card--speed\">\r\n        <div class=\"speed-content\">\r\n          <h4>Lightning-fast load times<\/h4>\r\n          <p>Because no one likes to wait.<\/p>\r\n        <\/div>\r\n        <div class=\"gauge-stack\">\r\n          <div class=\"gauge gauge--sm gauge--97\"><span>97<\/span><\/div>\r\n          <div class=\"gauge gauge--sm gauge--94\"><span>94<\/span><\/div>\r\n          <div class=\"gauge gauge--lg\"><span>100<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"card card--concept\">\r\n      <h4>Individual concept<\/h4>\r\n      <p>Just as unique as your brand.<\/p>\r\n      <div class=\"concept-media\">\r\n        <video autoplay muted loop playsinline preload=\"metadata\">\r\n          <source src=\"https:\/\/themealvar.com\/wp-content\/uploads\/2026\/07\/videoplayback-10.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"bottom-grid\">\r\n\r\n    <div class=\"mini-card\">\r\n      <div class=\"mini-media mini-media--integrated\">\r\n        <span class=\"icon-box icon-box--a\">\u25a6<\/span>\r\n        <span class=\"icon-line\"><\/span>\r\n        <span class=\"icon-plus\">+<\/span>\r\n        <span class=\"icon-box icon-box--b\">\u26a1<\/span>\r\n      <\/div>\r\n      <h5>Perfectly integrated<\/h5>\r\n    <\/div>\r\n\r\n    <div class=\"mini-card\">\r\n      <div class=\"mini-media mini-media--scale\">\r\n        <span class=\"scale-rocket\">\ud83d\ude80<\/span>\r\n      <\/div>\r\n      <h5>Build to scale<\/h5>\r\n    <\/div>\r\n\r\n    <div class=\"mini-card\">\r\n      <div class=\"mini-media mini-media--edit\">\r\n        <span class=\"edit-chip\">Mon - Fri: 8 - 16<\/span>\r\n        <span class=\"edit-cursor\">\u25b2<\/span>\r\n      <\/div>\r\n      <h5>Easy editing<\/h5>\r\n    <\/div>\r\n\r\n    <div class=\"mini-card\">\r\n      <div class=\"mini-media mini-media--safe\">\r\n        <div class=\"star-ring\">\r\n          <span class=\"ring-star\" style=\"transform:rotate(0deg) translate(38px) rotate(0deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(30deg) translate(38px) rotate(-30deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(60deg) translate(38px) rotate(-60deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(90deg) translate(38px) rotate(-90deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(120deg) translate(38px) rotate(-120deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(150deg) translate(38px) rotate(-150deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(180deg) translate(38px) rotate(-180deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(210deg) translate(38px) rotate(-210deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(240deg) translate(38px) rotate(-240deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(270deg) translate(38px) rotate(-270deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(300deg) translate(38px) rotate(-300deg);\">\u2605<\/span>\r\n          <span class=\"ring-star\" style=\"transform:rotate(330deg) translate(38px) rotate(-330deg);\">\u2605<\/span>\r\n          <span class=\"ring-label\">GDPR<\/span>\r\n          <span class=\"ring-sub\">Compliant<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <h5>Safe & compliant<\/h5>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Selected Work Recent Projects Click any project to see the full case study &mdash; more screenshots, what it&#8217;s built with, and a link to the live site. &times; Category Project Website Design &amp; Development Visit Live Site &#8599; Client &mdash; Service Web Design &amp; Development Live Site &mdash; About the Website &mdash; Skills &amp; Tools [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-166","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themealvar.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=166"}],"version-history":[{"count":5,"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages\/166\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/themealvar.com\/index.php?rest_route=\/wp\/v2\/pages\/166\/revisions\/214"}],"wp:attachment":[{"href":"https:\/\/themealvar.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}