{"id":2,"date":"2025-10-11T22:50:13","date_gmt":"2025-10-11T22:50:13","guid":{"rendered":"http:\/\/nordyn.se\/?page_id=2"},"modified":"2026-05-28T20:00:33","modified_gmt":"2026-05-28T20:00:33","slug":"start","status":"publish","type":"page","link":"https:\/\/nordyn.se\/en\/","title":{"rendered":"Start"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\nNordyn \u2014 Modern webbdesign<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* --- GRUNDL\u00c4GGANDE VARIABLER --- *\/\n:root{\n --accent:#8A74FF;\n --muted:rgba(255,255,255,.82);\n --line:rgba(255,255,255,.12);\n --pad: clamp(24px, 3vw, 40px);\n}\n\n\/* SUPER-FIX F\u00d6R BL\u00c5 MARKERINGAR (ELEMENTOR OVERRIDE) *\/\n#menuToggle, \n#menuToggle:focus, \n#menuToggle:active,\n#menuToggle:focus-visible,\n#menuToggle:visited,\n#menuClose,\n#menuClose:focus,\n#menuClose:active,\n#menuClose:hover,\nbutton.submenu-toggle-btn,\nbutton.submenu-toggle-btn:focus,\nbutton.submenu-toggle-btn:active {\n outline: none !important;\n box-shadow: none !important;\n background-color: transparent !important;\n -webkit-tap-highlight-color: transparent !important;\n -webkit-focus-ring-color: transparent !important;\n -webkit-user-select: none !important;\n user-select: none !important;\n border-top: none !important;\n border-left: none !important;\n border-right: none !important;\n}\n\n\/* Global reset som hj\u00e4lper i WP-milj\u00f6 *\/\nbutton:focus, a:focus {\n outline: none !important;\n box-shadow: none !important;\n}\n\n*{box-sizing:border-box}\n\nhtml, body {\n background-color: #000000;\n margin: 0;\n padding: 0;\n width: 100%;\n overscroll-behavior-y: none;\n}\n\nbody{\n font-family:Inter,system-ui,sans-serif;\n color:#fff;\n overflow-x:hidden;\n}\n\n\/* -----------------------------------------------------------\n HEADER\n ----------------------------------------------------------- *\/\n.header {\n position:fixed;\n top:0; \n left:0;\n right:0;\n z-index:9999;\n padding: 22px 40px;\n display:flex;\n align-items: flex-start;\n justify-content:space-between;\n gap:16px;\n background: transparent;\n mix-blend-mode: difference; \n color: #fff;\n transition: opacity 0.3s ease;\n}\n\n.header.hidden { opacity: 0; pointer-events: none; }\n\n.brand { \n display:flex; \n align-items: center; \n gap: 16px; \n min-width:0; \n}\n\n.logoMark { \n width:145px; \n height:auto; \n display:flex; \n align-items:center; \n flex:0 0 auto; \n color: #fff; \n margin-left: -20px;\n}\n.logoMark svg { width:100%; height:auto; display:block; }\n\n.tagline {\n font-size:13px;\n line-height:1.3;\n color: #fff !important;\n opacity: 0.9;\n font-weight: 500;\n max-width: 200px;\n}\n.tagline.fade-out { opacity: 0; transform: translateX(-10px); transition: 0.4s ease; pointer-events: none; }\n\n.nav { display:flex; align-items:center; gap:22px; flex:0 0 auto; color: #fff; }\n.nav a.contact {\n color:inherit; text-decoration:none; font-size:14px; font-weight:600;\n opacity:.92; padding-top:2px; position:relative; padding-bottom:6px;\n}\n.nav a.contact::after {\n content:\"\"; position:absolute; left:0; bottom:0; height:1px; width:100%;\n background: currentColor; transform: scaleX(0); transform-origin: left;\n transition: transform .3s ease; opacity:.95;\n}\n.nav a.contact:hover::after { transform: scaleX(1); }\n\n\/* --- MENY KNAPP --- *\/\n.menuToggle, \n.menuToggleOverlay, \n.submenu-toggle-btn {\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n background: transparent;\n -webkit-tap-highlight-color: transparent !important; \n outline: none !important;\n}\n\n.menuToggle:focus, .menuToggle:active,\n.menuToggleOverlay:focus, .menuToggleOverlay:active,\n.submenu-toggle-btn:focus, .submenu-toggle-btn:active {\n background: transparent !important;\n outline: none !important;\n}\n\n.menuToggle, .menuToggleOverlay {\n all:unset; \n cursor:pointer; \n display:inline-flex; \n align-items:center; \n gap:12px;\n font-size:15px; \n font-weight:600; \n color: #fff; \n position:relative;\n padding-bottom: 4px; \n border-bottom: 1px solid rgba(255,255,255,0.6); \n transition: border-color 0.3s ease;\n}\n\n.menuToggle:hover, .menuToggleOverlay:hover { border-color: #fff; }\n.menuIcon { font-size:18px; line-height:1; transform: translateY(-1px); }\n\n\/* -----------------------------------------------------------\n FULLSK\u00c4RMSMENY OVERLAY\n ----------------------------------------------------------- *\/\n.menuOverlay {\n position:fixed; inset:0; background:#000; z-index:9990;\n transform: translateY(-100%);\n opacity: 1;\n visibility:hidden;\n transition: transform .6s cubic-bezier(0.77, 0, 0.175, 1), visibility .6s ease;\n}\n.menuOverlay.opening, .menuOverlay.open { \n visibility:visible;\n transform: translateY(0);\n}\n.menuOverlay.closing { \n transform: translateY(-100%);\n visibility:hidden;\n}\n\n.menuInner {\n min-height: 100svh; height: 100svh; \n padding: 0; \n display:flex; flex-direction:column; overflow:hidden;\n overflow-y: auto;\n}\n\n.menuTop { \n display:flex; \n align-items: flex-start;\n justify-content:space-between; \n gap:16px; \n flex:0 0 auto; \n padding: 22px 40px;\n color: #fff; \n z-index: 10;\n}\n.menuTop .brand, .menuTop .logoMark { color: #fff; }\n.menuTop .logoMark svg { fill: #fff; }\n.menuTop .tagline { color: rgba(255,255,255,0.7); }\n.menuToggleOverlay { color: #fff; border-color: rgba(255,255,255,0.6); }\n\n@media (max-width:720px){\n .menuToggleOverlay { margin-top: 5px; }\n}\n\n.menuContent { flex:1 1 auto; display:flex; align-items:center; padding: 18px 40px; }\n.menuList { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:24px; width:100%; }\n.menuItem { opacity:0; transform: translateY(14px); }\n.menuOverlay.open .menuItem {\n animation: menuIn .5s cubic-bezier(.2,.8,.2,1) forwards;\n animation-delay: calc(300ms + var(--d, 0ms));\n}\n@keyframes menuIn{ to { opacity:1; transform: translateY(0); } }\n\n.menuRow { display:flex; align-items:center; justify-content:space-between; gap:18px; position: relative; }\n.menuLink {\n color: rgba(255,255,255,0.5); \n text-decoration:none;\n font-size: clamp(32px, 5vw, 48px); font-weight:700; letter-spacing:-0.02em;\n position:relative; display:inline-block; padding:0; line-height:1.1;\n transition: color 0.3s ease;\n}\n.menuLink:hover, .menuLink:focus, .menuLink:active { color: #fff; }\n\n\/* PIL LOGIK & SUBMENU STYLING *\/\n.submenu-toggle-btn {\n background: none; border: none; padding: 10px; cursor: pointer; color: var(--accent);\n display: flex; align-items: center; justify-content: center;\n -webkit-appearance: none; -moz-appearance: none; appearance: none;\n}\n.bigArrow { \n flex:0 0 auto; color: var(--accent); opacity:1; \n transform: translateY(4px); transition: transform 0.4s ease;\n pointer-events: none;\n}\n.bigArrow svg { width:40px; height:24px; }\n.submenu {\n list-style: none; padding: 0; margin: 0; display: grid;\n grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1);\n}\n.submenu-inner {\n overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding-left: 4px;\n}\n.submenu-item {\n opacity: 0; transform: translateX(40px); transition: opacity 0.4s ease, transform 0.4s ease;\n}\n.submenu-link {\n font-size: clamp(20px, 3vw, 28px); font-weight: 600; color: rgba(255,255,255,0.6);\n text-decoration: none; display: block; transition: color 0.2s;\n}\n.submenu-link:hover { color: #fff; }\n\n.menuItem.has-expanded .submenu { grid-template-rows: 1fr; margin-top: 16px; }\n.menuItem.has-expanded .bigArrow { transform: translateY(4px) rotate(90deg); }\n.menuItem.has-expanded .submenu-item { opacity: 1; transform: translateX(0); }\n.menuItem.has-expanded .submenu-item:nth-child(1) { transition-delay: 0.1s; }\n.menuItem.has-expanded .submenu-item:nth-child(2) { transition-delay: 0.15s; }\n.menuItem.has-expanded .submenu-item:nth-child(3) { transition-delay: 0.2s; }\n.menuItem.has-expanded .submenu-item:nth-child(4) { transition-delay: 0.25s; }\n\n.menuBottom {\n flex:0 0 auto; display:grid; grid-template-columns: 1fr auto; gap:18px;\n align-items:end; padding: 20px 40px 40px 40px; border-top: 1px solid var(--line);\n}\n.bottomLeft { display: flex; flex-direction: column; gap: 24px; }\n.socials { display:flex; gap: 32px; flex-wrap:wrap; color: #fff; font-weight: 600; font-size: 18px; }\n.socials a { color:inherit; text-decoration:none; display:inline-flex; gap: 10px; align-items:center; transition: opacity 0.2s; }\n.socials a:hover { opacity: 0.7; }\n.extIcon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; fill:none; margin-bottom: 2px; }\n.menuCTA { text-align: right; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.8); line-height: 1.4; }\n.menuCTA a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }\n.menuCTA-text { display: inline; } \n\n\/* -----------------------------------------------------------\n \u00d6VRIGT INNEH\u00c5LL & HERO\n ----------------------------------------------------------- *\/\n.hero{position:relative;height:100svh;width:100%;overflow:hidden;background:#000}\n.stage{position:absolute;inset:0;isolation:isolate;background:#000}\n.bgVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#000}\n.bgOverlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.8) 90%,rgba(0,0,0,1) 100%)}\n.wrap{position:relative;z-index:2;margin:0;padding:0;height:100%;display:flex;align-items:flex-end;width:100%}\n.heroMain{\n display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;\n text-align:left; padding:0 40px clamp(44px,8vh,88px) 40px; gap:18px; width:100%; padding-left:40px;\n}\n.headline{margin:0 0 7px 0;margin-left:-5px;font-weight:800;letter-spacing:-0.06em;line-height:.92;max-width:100%;color:#fff!important;mix-blend-mode:difference!important}\n.headlineRow{display:inline-flex;align-items:baseline;white-space:nowrap;gap:0}\n.prefixDesktop{display:inline-block;font-size:125px;line-height:.92}\n.wordSlot{display:inline-block;width:16ch;vertical-align:baseline}\n.word{display:inline;font-size:125px;line-height:.92;white-space:nowrap;vertical-align:baseline}\n.word::after{content:\"\";display:inline-block;width:.10em;height:0.92em;background:currentColor;margin-left:.12em;transform:translateY(.06em);animation:blink 900ms infinite;vertical-align:baseline}\n@keyframes blink{0%,45%{opacity:1}46%,100%{opacity:0}}\n.sub{margin:0;font-size:clamp(16px,1.6vw,20px);max-width:56ch;color:rgba(255,255,255,0.9);line-height:1.55}\n.links{display:flex;gap:28px;margin-top:6px;flex-wrap:wrap}\n.heroLink{color:rgba(255,255,255,.75);text-decoration:none;display:inline-flex;gap:10px;align-items:center;font-weight:600;letter-spacing:.01em;padding:10px 0;position:relative;transition:color .22s ease}\n.heroLink.case{color:var(--accent)!important}\n.heroLink::after{content:\"\";position:absolute;left:0;bottom:2px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease;opacity:.95}\n.heroLink:hover::after{transform:scaleX(1)}\n.arrow{transform:translateY(1px)}\n\n\/* -----------------------------------------------------------\n SERVICES SECTION - NY DESIGN (Kort-design fr\u00e5n tj\u00e4nster-sidan)\n ----------------------------------------------------------- *\/\n.services-section {\n background: #000;\n padding: clamp(80px, 12vh, 140px) clamp(24px, 3vw, 40px);\n position: relative;\n z-index: 10;\n}\n.services-container { max-width: 1200px; margin: 0 auto; }\n\n.services-header { margin-bottom: clamp(60px, 8vh, 100px); }\n.services-header h2 {\n font-size: clamp(34px, 4.5vw, 56px);\n font-weight: 800;\n letter-spacing: -0.04em;\n line-height: 1.1;\n margin: 0 0 28px 0;\n color: #fff;\n}\n.services-intro {\n font-size: clamp(16px, 1.6vw, 18px);\n line-height: 1.6;\n color: var(--muted);\n max-width: 800px;\n margin-bottom: 40px;\n}\n\n\/* TJ\u00c4NSTE-GRID DETALJERAT (Importerad fr\u00e5n Tj\u00e4nster-sidan) *\/\n.services-detailed-grid {\n display: grid;\n \/* Anpassad f\u00f6r startsidan: fyller ut 4 kolumner snyggt *\/\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); \n gap: 30px;\n margin-top: 60px;\n}\n\n\/* KORT STYLING *\/\n.service-detail-card {\n background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 16px;\n padding: clamp(32px, 4vw, 48px); \/* N\u00e5got tajtare padding \u00e4n tj\u00e4nstersidan f\u00f6r att passa startsidan *\/\n transition: transform 0.4s ease, border-color 0.3s ease, background-color 0.3s ease;\n display: flex;\n flex-direction: column;\n height: 100%;\n text-decoration: none;\n color: #ffffff;\n position: relative;\n overflow: hidden;\n}\n\n.service-detail-card:hover {\n transform: translateY(-8px);\n border-color: var(--accent);\n background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);\n}\n\n.service-header {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.service-icon-wrap {\n width: 48px;\n height: 48px;\n color: var(--accent);\n background: rgba(138,116,255,0.1);\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px;\n flex-shrink: 0;\n}\n\n.service-icon-wrap svg {\n width: 100%;\n height: 100%;\n stroke: currentColor;\n stroke-width: 1.5;\n fill: none;\n}\n\n.service-detail-card h3 {\n font-size: 22px;\n font-weight: 700;\n margin: 0;\n line-height: 1.2;\n color: #fff;\n letter-spacing: -0.01em;\n}\n\n.service-intro-text {\n font-size: 16px;\n line-height: 1.6;\n color: rgba(255,255,255,0.8);\n margin: 0 0 28px 0;\n flex-grow: 1;\n}\n\n\/* Liten pil\/l\u00e4s mer indikator *\/\n.read-more-arrow {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n font-size: 14px;\n color: var(--accent);\n margin-top: auto;\n opacity: 0.8;\n transition: opacity 0.3s ease, transform 0.3s ease;\n}\n\n.service-detail-card:hover .read-more-arrow {\n opacity: 1;\n transform: translateX(4px);\n}\n\n.read-more-arrow svg {\n width: 18px;\n height: 18px;\n}\n\n\/* =================================================================\n NY DESIGN F\u00d6R CASE (SCROLL + F\u00c4RG\u00c4NDRING)\n ================================================================= *\/\n.case-section-outer-black-bg {\n background-color: #000;\n width: 100%;\n margin: 0;\n padding: 0;\n}\n.dynamic-bg-wrapper {\n background-color: #b8a380; \n transition: background-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n padding: 80px 0 120px 0;\n overflow: hidden;\n position: relative;\n z-index: 5;\n width: 100%;\n margin: 0; \n border-radius: 32px;\n}\n.case-item {\n min-height: 100vh;\n display: flex; align-items: center; justify-content: center;\n padding: 40px 24px; position: relative;\n}\n.case-inner {\n max-width: 900px; width: 100%; display: flex; flex-direction: column; gap: 40px;\n}\n.case-media {\n width: 100%; border-radius: 12px; overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);\n background: #fff; transform: translateY(0); transition: transform 0.5s ease;\n}\n.case-item:hover .case-media { transform: translateY(-5px); }\n.browser-header {\n height: 36px; background: #f1f1f1; display: flex; align-items: center; justify-content: space-between;\n padding: 0 16px; border-bottom: 1px solid #e5e5e5;\n}\n.browser-dots { display: flex; gap: 6px; }\n.dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; }\n.dot:nth-child(1) { background: #ff5f57; }\n.dot:nth-child(2) { background: #febc2e; }\n.dot:nth-child(3) { background: #28c840; }\n.browser-address { background: #fff; height: 20px; border-radius: 4px; flex: 1; margin: 0 12px; opacity: 0.5; }\n.case-img { width: 100%; height: auto; display: block; aspect-ratio: 16\/10; object-fit: cover; }\n.case-info { color: #fff; padding: 0 4px; }\n.case-counter { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; opacity: 0.9; display: block; margin-bottom: 16px; }\n.counter-fade { opacity: 0.5; }\n.case-title { font-size: clamp(32px, 5vw, 48px); font-weight: 700; margin: 0 0 20px 0; line-height: 1.1; color: #fff !important; }\n.case-desc { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; max-width: 600px; opacity: 0.9; margin-bottom: 32px; color: rgba(255,255,255,0.9); }\n.case-btn { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; color: #fff; text-decoration: none; transition: opacity 0.3s; }\n.case-btn:hover { opacity: 0.8; }\n.case-btn .arrow { transition: transform 0.3s ease; }\n.case-btn:hover .arrow { transform: translateX(5px); }\n\n.all-cases-section{background:#000;padding:60px clamp(24px,3vw,40px);text-align:center}\n.btn-all-cases{display:inline-flex;align-items:center;gap:12px;padding:18px 36px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;border-radius:6px;transition:transform .2s ease}\n.btn-all-cases:hover{transform:translateY(-2px)}\n\n.testimonials-section{background:#000;padding:clamp(80px,12vh,140px) clamp(24px,3vw,40px)}\n.testimonials-container{max-width:1200px;margin:0 auto}\n.testimonials-header{text-align:center;margin-bottom:80px}\n.testimonials-header h2{font-size:clamp(34px,4.5vw,56px);font-weight:800;letter-spacing:-0.04em;line-height:1.1;margin:0;color:#fff}\n.testimonial-card{background:rgba(138,116,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:clamp(40px,5vw,60px);max-width:800px;margin:0 auto}\n.testimonial-quote{font-size:clamp(22px,2.5vw,32px);font-weight:600;line-height:1.4;color:#8A74FF;margin:0 0 32px 0;font-style:italic}\n.testimonial-text{font-size:clamp(15px,1.4vw,17px);line-height:1.65;color:rgba(255,255,255,0.85);margin:0 0 40px 0}\n.testimonial-rating{display:flex;gap:8px;margin-bottom:24px;font-size:28px}\n.testimonial-author{font-size:18px;font-weight:700;color:#fff;margin:0 0 4px 0}\n.testimonial-company{font-size:15px;color:rgba(255,255,255,0.6);margin:0}\n\n\/* CONTACT SECTION *\/\n.contact-section{background:#000;padding:clamp(80px,12vh,140px) clamp(24px,3vw,40px)}\n.contact-container{max-width:900px;margin:0 auto;text-align:center}\n.contact-container h2{font-size:clamp(38px,5vw,64px);font-weight:800;letter-spacing:-0.04em;line-height:1.1;margin:0 0 24px 0;color:#fff}\n.contact-container p{font-size:clamp(16px,1.6vw,18px);line-height:1.65;color:rgba(255,255,255,0.8);margin:0 0 48px 0}\n.contact-options{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}\n.contact-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 36px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;border-radius:6px;border:none;cursor:pointer;transition:transform .2s ease, background-color .2s ease}\n.contact-btn:hover{transform:translateY(-2px)}\n.contact-btn:active { background-color: #5e4ad1; transform: translateY(0); }\n.contact-btn.secondary{background:transparent;border:2px solid var(--accent);color:var(--accent)}\n.contact-info{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:48px}\n.contact-item{display:flex;flex-direction:column;gap:8px}\n.contact-label{font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:rgba(255,255,255,0.5)}\n.contact-value{font-size:18px;font-weight:600;color:#fff}\n.contact-value a{color:var(--accent);text-decoration:none}\n\n.footer{background:#000;border-top:1px solid var(--line);padding:clamp(60px,8vh,100px) clamp(24px,3vw,40px) 40px}\n.footer-container{max-width:1200px;margin:0 auto}\n.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:60px}\n.footer-brand{display:flex;flex-direction:column;gap:20px}\n.footer-logo{width:140px;height:auto}\n.footer-logo svg { width: 100%; height: 100%; fill: #fff; margin-left: -21px; display: block; }\n.footer-tagline{font-size:16px;font-weight:600;color:#fff;margin:0}\n.footer-contact{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.8}\n.footer-contact a{color:var(--accent);text-decoration:none}\n.footer-column h4{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#fff;margin:0 0 20px 0}\n.footer-links{display:flex;flex-direction:column;gap:12px}\n.footer-links a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:14px;transition:color .2s ease}\n.footer-links a:hover{color:#fff}\n.footer-bottom{padding-top:40px;border-top:1px solid var(--line);display:flex;gap:24px;flex-wrap:wrap;justify-content:center}\n.footer-bottom a{color:rgba(255,255,255,0.4);text-decoration:none;font-size:12px}\n\n@media (max-width:1024px){\n .case-container{grid-template-columns:1fr;gap:40px}\n .footer-main{grid-template-columns:1fr 1fr;gap:40px}\n}\n\n\/* --- MOBIL ANPASSNING --- *\/\n@media (max-width:720px){\n .nav a.contact{display:none}\n .header{ padding:22px 24px; align-items:center; }\n .brand { flex-direction: column; gap: 4px; align-items: flex-start; }\n .logoMark{width:130px;}\n .tagline { font-size: 14px; line-height: 1.2; white-space: normal; max-width: 100%; margin-top: 4px; opacity: 0.8; }\n .heroMain{ padding-left: 24px !important; padding-right: 24px !important; }\n .headlineRow { display: flex; flex-direction: column; align-items: flex-start; }\n .headline { margin-bottom: 0; margin-left: 0; }\n .prefixDesktop { display: block; margin-bottom: 0px; font-size: 50px; }\n .word { font-size: 50px; }\n .menuToggle { margin-top: -12px; }\n .menuTop { padding: 22px 24px; }\n .menuContent { padding: 10px 24px; }\n .menuBottom { display: flex; flex-direction: column; gap: 16px; padding: 0 24px 60px 24px; border-top: none; }\n .bottomLeft { display: contents; }\n .custom-lang-switch { order: 1; margin-bottom: 0; }\n .socials { order: 2; display: flex; flex-direction: row; justify-content: flex-start; gap: 20px; font-size: 23px; margin-bottom: 10px; }\n .menuCTA { order: 3; text-align: right; max-width: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0; }\n .menuCTA br { display: none; }\n .menuCTA-text { display: block; margin-bottom: 0px; color: rgba(255,255,255,0.6); font-weight: 400; font-size: 14px; line-height: 1.2; }\n .menuCTA a { font-size: 18px; font-weight: 600; margin-top: 4px; }\n .ctaArrow svg { width: 22px; height: 22px; }\n .dynamic-bg-wrapper { padding: 60px 0; }\n .case-inner { gap: 30px; }\n .case-item { min-height: auto; padding-bottom: 100px; }\n \n \/* Mobil grid f\u00f6r tj\u00e4nster *\/\n .services-detailed-grid { grid-template-columns: 1fr; }\n}\n<\/style>\n<\/head>\n<body>\n\n<header class=\"header invert\" id=\"mainHeader\">\n <div class=\"brand\">\n <div class=\"logoMark\" aria-label=\"Nordyn logga\">\n <svg version=\"1.0\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"600pt\" height=\"167pt\" viewbox=\"0 0 600 167\" preserveaspectratio=\"xMidYMid meet\" role=\"img\" aria-label=\"Nordyn\">\n <g transform=\"translate(0,167) scale(0.1,-0.1)\" fill=\"currentColor\" stroke=\"none\">\n <path d=\"M4905 1460 c-59 -24 -91 -101 -69 -165 16 -48 31 -63 79 -79 147 -51 244 154 112 234 -33 21 -87 25 -122 10z\"\/>\n <path d=\"M3335 1261 l-50 -6 -3 -133 -3 -132 -42 7 c-122 22 -219 1 -282 -62 -52 -51 -65 -92 -65 -201 0 -133 34 -210 110 -249 56 -29 169 -40 277 -26 54 8 107 12 118 11 11 -1 34 -3 50 -4 l30 -1 3 403 2 402 -47 -2 c-27 0 -70 -4 -98 -7z m-77 -462 c19 -7 22 -16 22 -63 0 -30 -4 -57 -9 -60 -22 -14 -127 -16 -151 -4 -47 25 -52 119 -7 138 23 10 106 3 145 -11z\"\/>\n <path d=\"M1135 1000 c-85 -14 -154 -39 -165 -61 -6 -11 -9 -107 -8 -246 l3 -228 98 -3 97 -3 0 154 c0 124 3 157 15 167 8 6 43 13 79 13 50 2 68 -2 85 -17 20 -18 21 -29 21 -168 l0 -149 98 3 97 3 -1 180 c0 171 -1 183 -26 236 -41 89 -96 117 -243 124 -49 2 -117 0 -150 -5z\"\/>\n <path d=\"M1825 986 c-212 -98 -212 -412 0 -512 72 -34 208 -34 281 0 205 96 205 416 0 512 -73 34 -209 34 -281 0z m218 -195 c15 -14 22 -34 22 -61 0 -55 -29 -81 -94 -88 -46 -4 -53 -2 -81 26 -21 21 -30 40 -30 62 0 22 9 41 30 62 28 28 35 30 81 26 34 -4 58 -12 72 -27z\"\/>\n <path d=\"M2465 1003 c-27 -2 -60 -6 -72 -8 l-23 -5 0 -266 0 -265 98 3 97 3 -3 125 -4 125 30 28 c32 30 70 37 134 24 l37 -8 15 53 c26 90 38 180 27 191 -5 5 -37 8 -70 5 -45 -3 -72 -12 -111 -36 -28 -18 -54 -32 -56 -32 -3 0 -5 10 -4 23 4 40 0 47 -22 45 -13 -1 -45 -3 -73 -5z\"\/>\n <path d=\"M4485 999 c-84 -12 -153 -37 -165 -60 -6 -11 -9 -107 -8 -246 l3 -228 95 0 95 0 5 160 5 160 50 7 c28 5 64 6 82 3 56 -10 63 -32 63 -193 l0 -143 98 3 97 3 3 130 c5 225 -26 333 -106 374 -74 38 -189 48 -317 30z\"\/>\n <path d=\"M3574 985 c-16 -41 139 -430 193 -487 l26 -27 -37 -88 c-20 -48 -36 -93 -36 -99 0 -6 37 -27 83 -46 61 -27 85 -33 94 -24 6 6 40 83 76 171 86 213 128 315 193 467 30 70 54 132 54 137 0 16 -195 15 -207 -1 -6 -7 -34 -72 -63 -145 -58 -143 -66 -160 -75 -152 -3 3 -19 69 -37 145 -17 76 -35 145 -41 152 -15 19 -216 17 -223 -3z\"\/>\n <\/g>\n <\/svg>\n <\/div>\n <div class=\"tagline\" id=\"headerTagline\">Digital Agency \/ Web Agency Stockholm<\/div>\n <\/div>\n\n <nav class=\"nav\" aria-label=\"Toppmeny\">\n <a class=\"contact\" href=\"\/en\/kontakt\/\">Get in touch<\/a>\n <button class=\"menuToggle\" id=\"menuToggle\" type=\"button\" onclick=\"this.blur()\" onfocus=\"this.blur()\" style=\"-webkit-tap-highlight-color: rgba(0,0,0,0) !important; outline: none !important; background: none !important; box-shadow: none !important; user-select: none !important; border: none !important;\">\n Menu <span class=\"menuIcon\" id=\"menuIcon\">+<\/span>\n <\/button>\n <\/nav>\n<\/header>\n\n<section class=\"hero\">\n<div class=\"stage\">\n<video id=\"heroVideo\" class=\"bgVideo\" autoplay muted playsinline preload=\"auto\" loop webkit-playsinline poster=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=\">\n<source src=\"https:\/\/nordyn.se\/wp-content\/uploads\/2026\/01\/Bakgrund_nordyn_optimerad2.mp4\" type=\"video\/mp4\">\n<\/video>\n<div class=\"bgOverlay\"><\/div>\n<div class=\"wrap\">\n<div class=\"heroMain\">\n<h1 class=\"headline\"><span class=\"headlineRow\"><span class=\"prefixDesktop\">Become <\/span><span class=\"wordSlot\"><span class=\"word\" id=\"wordTarget\">Nordyn!<\/span><\/span><\/span><\/h1>\n<p class=\"sub\">We deliver digital innovation, creativity, and growth \u2014 with modern design that actually converts.<\/p>\n<div class=\"links\">\n<a class=\"heroLink case nav-animate\" href=\"\/en\/case\/\">Our work <span class=\"arrow\">\u2192<\/span><\/a>\n<a class=\"heroLink nav-animate\" href=\"\/en\/tjanster\/\">Our services <span class=\"arrow\">\u2192<\/span><\/a>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n\n<div class=\"menuOverlay\" id=\"menuOverlay\" aria-hidden=\"true\">\n <div class=\"menuInner\">\n \n <div class=\"menuTop\">\n <div class=\"brand\">\n <div class=\"logoMark\">\n <svg version=\"1.0\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"600pt\" height=\"167pt\" viewbox=\"0 0 600 167\" preserveaspectratio=\"xMidYMid meet\" role=\"img\" aria-label=\"Nordyn\">\n <g transform=\"translate(0,167) scale(0.1,-0.1)\" fill=\"currentColor\" stroke=\"none\">\n <path d=\"M4905 1460 c-59 -24 -91 -101 -69 -165 16 -48 31 -63 79 -79 147 -51 244 154 112 234 -33 21 -87 25 -122 10z\"\/>\n <path d=\"M3335 1261 l-50 -6 -3 -133 -3 -132 -42 7 c-122 22 -219 1 -282 -62 -52 -51 -65 -92 -65 -201 0 -133 34 -210 110 -249 56 -29 169 -40 277 -26 54 8 107 12 118 11 11 -1 34 -3 50 -4 l30 -1 3 403 2 402 -47 -2 c-27 0 -70 -4 -98 -7z m-77 -462 c19 -7 22 -16 22 -63 0 -30 -4 -57 -9 -60 -22 -14 -127 -16 -151 -4 -47 25 -52 119 -7 138 23 10 106 3 145 -11z\"\/>\n <path d=\"M1135 1000 c-85 -14 -154 -39 -165 -61 -6 -11 -9 -107 -8 -246 l3 -228 98 -3 97 -3 0 154 c0 124 3 157 15 167 8 6 43 13 79 13 50 2 68 -2 85 -17 20 -18 21 -29 21 -168 l0 -149 98 3 97 3 -1 180 c0 171 -1 183 -26 236 -41 89 -96 117 -243 124 -49 2 -117 0 -150 -5z\"\/>\n <path d=\"M1825 986 c-212 -98 -212 -412 0 -512 72 -34 208 -34 281 0 205 96 205 416 0 512 -73 34 -209 34 -281 0z m218 -195 c15 -14 22 -34 22 -61 0 -55 -29 -81 -94 -88 -46 -4 -53 -2 -81 26 -21 21 -30 40 -30 62 0 22 9 41 30 62 28 28 35 30 81 26 34 -4 58 -12 72 -27z\"\/>\n <path d=\"M2465 1003 c-27 -2 -60 -6 -72 -8 l-23 -5 0 -266 0 -265 98 3 97 3 -3 125 -4 125 30 28 c32 30 70 37 134 24 l37 -8 15 53 c26 90 38 180 27 191 -5 5 -37 8 -70 5 -45 -3 -72 -12 -111 -36 -28 -18 -54 -32 -56 -32 -3 0 -5 10 -4 23 4 40 0 47 -22 45 -13 -1 -45 -3 -73 -5z\"\/>\n <path d=\"M4485 999 c-84 -12 -153 -37 -165 -60 -6 -11 -9 -107 -8 -246 l3 -228 95 0 95 0 5 160 5 160 50 7 c28 5 64 6 82 3 56 -10 63 -32 63 -193 l0 -143 98 3 97 3 3 130 c5 225 -26 333 -106 374 -74 38 -189 48 -317 30z\"\/>\n <path d=\"M3574 985 c-16 -41 139 -430 193 -487 l26 -27 -37 -88 c-20 -48 -36 -93 -36 -99 0 -6 37 -27 83 -46 61 -27 85 -33 94 -24 6 6 40 83 76 171 86 213 128 315 193 467 30 70 54 132 54 137 0 16 -195 15 -207 -1 -6 -7 -34 -72 -63 -145 -58 -143 -66 -160 -75 -152 -3 3 -19 69 -37 145 -17 76 -35 145 -41 152 -15 19 -216 17 -223 -3z\"\/>\n <\/g>\n <\/svg>\n <\/div>\n <div class=\"tagline\" style=\"color: rgba(255,255,255,.7); mix-blend-mode:normal;\">Digital Agency \/ Web Agency Stockholm<\/div>\n <\/div>\n\n <button class=\"menuToggleOverlay\" id=\"menuClose\" type=\"button\" onclick=\"this.blur()\" onfocus=\"this.blur()\" style=\"-webkit-tap-highlight-color: rgba(0,0,0,0) !important; outline: none !important; background: none !important; box-shadow: none !important; user-select: none !important; border-top:none !important; border-left:none !important; border-right:none !important;\">\n Menu <span class=\"menuIcon\">\u00d7<\/span>\n <\/button>\n <\/div>\n\n <div class=\"menuContent\">\n <ul class=\"menuList\" aria-label=\"Menu\">\n <li class=\"menuItem\" style=\"--d: 80ms;\">\n <div class=\"menuRow\">\n <a class=\"menuLink nav-animate\" href=\"\/en\/\" style=\"color: #fff;\">Startpage<\/a>\n <\/div>\n <\/li>\n <li class=\"menuItem\" style=\"--d: 160ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/en\/case\/\">Our work<\/a><\/div><\/li>\n \n <li class=\"menuItem\" style=\"--d: 240ms;\" id=\"servicesMenuItem\">\n <div class=\"menuRow\">\n <a class=\"menuLink nav-animate\" href=\"\/en\/tjanster\/\">Services<\/a>\n <button class=\"submenu-toggle-btn\" aria-label=\"Visa undertj\u00e4nster\" onclick=\"toggleSubmenu(event)\" style=\"-webkit-tap-highlight-color: rgba(0,0,0,0) !important; outline: none !important; background: none !important; box-shadow: none !important; border: none !important;\">\n <span class=\"bigArrow\" aria-hidden=\"true\">\n <svg viewbox=\"0 0 64 40\">\n <path d=\"M6 20H46\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\"\/>\n <path d=\"M36 8L50 20L36 32\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/span>\n <\/button>\n <\/div>\n \n <ul class=\"submenu\">\n <div class=\"submenu-inner\">\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/en\/webbdesign\/\">Web Design<\/a><\/li>\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/en\/e-handel\/\">E-commerce<\/a><\/li>\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/en\/seo\/\">SEO<\/a><\/li>\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/en\/branding\/\">Branding<\/a><\/li>\n <\/div>\n <\/ul>\n <\/li>\n\n <li class=\"menuItem\" style=\"--d: 320ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/en\/vart-lofte\/\">Our Promise<\/a><\/div><\/li>\n <li class=\"menuItem\" style=\"--d: 400ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/en\/om-nordyn\/\">About nordyn<\/a><\/div><\/li>\n <li class=\"menuItem\" style=\"--d: 480ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/en\/kontakt\/\">Contact<\/a><\/div><\/li>\n <\/ul>\n <\/div>\n\n <div class=\"menuBottom\">\n <div class=\"bottomLeft\">\n \n <div class=\"lang-container custom-lang-switch\">\n <div class=\"trp-shortcode-switcher__wrapper\"\r\n style=\"--bg:#ffffffb2;--bg-hover:#ffffffb2;--text:#ffffff;--text-hover:#000000;--border:1px solid transparent;--border-width:1px;--border-color:transparent;--border-radius:5px;--flag-radius:2px;--flag-size:18px;--aspect-ratio:4\/3;--font-size:14px;--transition-duration:0.2s\"\r\n role=\"group\"\r\n data-open-mode=\"hover\">\r\n\r\n \r\n <!-- ANCHOR (in-flow only; sizing\/borders; inert) -->\r\n <div class=\"trp-language-switcher trp-ls-dropdown trp-shortcode-switcher trp-shortcode-anchor trp-open-on-hover\"\r\n aria-hidden=\"true\"\r\n inert\r\n data-no-translation>\r\n <div class=\"trp-current-language-item__wrapper\">\r\n <a class=\"trp-language-item trp-language-item__default trp-language-item__current\" data-no-translation href=\"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/2\" title=\"English\"><img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/plugins\/translatepress-multilingual\/assets\/flags\/4x3\/en_US.svg\" class=\"trp-flag-image\" alt=\"\" role=\"presentation\" loading=\"lazy\" \/><span class=\"trp-language-item-name\">English<\/span><\/a> <svg class=\"trp-shortcode-arrow\" width=\"20\" height=\"20\" viewbox=\"0 0 20 21\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M5 8L10 13L15 8\" stroke=\"var(--text)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- OVERLAY (positioned; interactive surface) -->\r\n <div class=\"trp-language-switcher trp-ls-dropdown trp-shortcode-switcher trp-shortcode-overlay trp-open-on-hover\"\r\n role=\"navigation\"\r\n aria-label=\"Website language selector\"\r\n data-no-translation\r\n>\r\n <div class=\"trp-current-language-item__wrapper\">\r\n <div class=\"trp-language-item trp-language-item__default trp-language-item__current\" data-no-translation role=\"button\" aria-expanded=\"false\" tabindex=\"0\" aria-label=\"Change language\" aria-controls=\"trp-shortcode-dropdown-6a1bcc08999f0\"><img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/plugins\/translatepress-multilingual\/assets\/flags\/4x3\/en_US.svg\" class=\"trp-flag-image\" alt=\"\" role=\"presentation\" loading=\"lazy\" \/><span class=\"trp-language-item-name\">English<\/span><\/div> <svg class=\"trp-shortcode-arrow\" width=\"20\" height=\"20\" viewbox=\"0 0 20 21\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M5 8L10 13L15 8\" stroke=\"var(--text)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n \r\n <div class=\"trp-switcher-dropdown-list\"\r\n id=\"trp-shortcode-dropdown-6a1bcc08999f0\"\r\n role=\"group\"\r\n aria-label=\"Available languages\"\r\n hidden\r\n inert\r\n>\r\n <a class=\"trp-language-item\" href=\"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/2\" title=\"Swedish\">\r\n <img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/plugins\/translatepress-multilingual\/assets\/flags\/4x3\/sv_SE.svg\" class=\"trp-flag-image\" alt=\"\" role=\"presentation\" loading=\"lazy\" \/> <span class=\"trp-language-item-name\" data-no-translation>Swedish<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<style id=\"trp-language-switcher-shortcode-custom-css\">.trp-language-switcher-container, .trp-language-switcher { background: none !important; border: medium !important; box-shadow: none !important; margin: 0px !important; padding: 0px !important; width: auto !important; }\n.trp-language-switcher .trp-ls-shortcode-current-language { display: none !important; }\n.trp-language-switcher .trp-ls-shortcode-language { display: flex !important; flex-direction: row !important; gap: 20px !important; position: static !important; visibility: visible !important; opacity: 1 !important; background: none !important; border: medium !important; width: auto !important; padding: 0px !important; margin: 0px !important; transform: none !important; }\n.trp-language-switcher .trp-ls-shortcode-language a { display: inline-block !important; text-decoration: none !important; font-size: 0px !important; color: transparent !important; padding: 4px !important; margin: 0px !important; border-bottom-width: 2px !important; border-bottom-style: solid !important; border-bottom-color: transparent !important; cursor: pointer !important; opacity: 0.5 !important; transition: opacity 0.3s !important; background: none !important; }\n.trp-language-switcher .trp-ls-shortcode-language a:hover { transform: translateY(-1px); opacity: 1 !important; }\n.trp-language-switcher .trp-ls-shortcode-language a::after { font-size: 26px !important; line-height: 1 !important; display: block !important; font-style: normal !important; visibility: visible !important; color: rgb(255, 255, 255) !important; text-indent: 0px !important; }\n.trp-language-switcher .trp-ls-shortcode-language a:not([href*=\"\/en\/\"])::after { content: \"\ud83c\uddf8\ud83c\uddea\" !important; }\n.trp-language-switcher .trp-ls-shortcode-language a[href*=\"\/en\/\"]::after { content: \"\ud83c\uddfa\ud83c\uddf8\" !important; }\n.trp-language-switcher .trp-ls-shortcode-language a.trp-ls-active-language { opacity: 1 !important; border-bottom-color: rgb(255, 255, 255) !important; }<\/style>\n <\/div>\n\n <div class=\"socials\">\n <a class=\"nav-animate\" href=\"https:\/\/www.facebook.com\/share\/18A482YcY7\/?mibextid=wwXIfr\" target=\"_blank\" rel=\"noopener nofollow\">\n Facebook\n <span class=\"extIcon\" aria-hidden=\"true\">\n <svg viewbox=\"0 0 24 24\"><path d=\"M7 17L17 7\"\/><path d=\"M10 7h7v7\"\/><\/svg>\n <\/span>\n <\/a>\n\n <a class=\"nav-animate\" href=\"#\" target=\"_blank\" rel=\"noopener\">\n LinkedIn\n <span class=\"extIcon\" aria-hidden=\"true\">\n <svg viewbox=\"0 0 24 24\"><path d=\"M7 17L17 7\"\/><path d=\"M10 7h7v7\"\/><\/svg>\n <\/span>\n <\/a>\n\n <a class=\"nav-animate\" href=\"https:\/\/www.instagram.com\/nordyn.se?igsh=bzVwdHhudTRlOW9s&utm_source=qr\" target=\"_blank\" rel=\"noopener\">\n Instagram\n <span class=\"extIcon\" aria-hidden=\"true\">\n <svg viewbox=\"0 0 24 24\"><path d=\"M7 17L17 7\"\/><path d=\"M10 7h7v7\"\/><\/svg>\n <\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"menuCTA\">\n <span class=\"menuCTA-text\">Interested in a partnership<\/span>\n <br>\n <a class=\"nav-animate\" href=\"\/en\/kontakt\/\">\n Get in touch\n <span class=\"ctaArrow\" aria-hidden=\"true\">\n <svg viewbox=\"0 0 24 24\"><path d=\"M5 12h12\"\/><path d=\"M13 6l6 6-6 6\"\/><\/svg>\n <\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n<section id=\"tjanster\" class=\"services-section\">\n <div class=\"services-container\">\n <!-- UPPDATERAD RUBRIK & TEXT -->\n <div class=\"services-header\">\n <h2>Our Services \u2013 Complete digital presence with Nordyn<\/h2>\n <p class=\"services-intro\">At Nordyn, we help businesses build, improve, and scale their digital presence. We are a modern web agency that combines strategy, design, and technology to create websites and digital solutions that don\u2019t just look great \u2013 they actually drive business results.<\/p>\n <p class=\"services-intro\" style=\"margin-top:-20px;\">We work with everyone from emerging brands to established companies, always tailoring our solutions to your goals, target audience, and growth ambitions.<\/p>\n <\/div>\n\n <!-- NY GRID & DESIGN (samma som tj\u00e4nster-sidan, men fyller ut) -->\n <div class=\"services-detailed-grid\">\n \n <!-- Service 1: Webbdesign -->\n <a href=\"\/en\/webbdesign\/\" class=\"service-detail-card\">\n <div class=\"service-header\">\n <div class=\"service-icon-wrap\">\n <svg viewbox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/><\/svg>\n <\/div>\n <h3>Web Design<\/h3>\n <\/div>\n <p class=\"service-intro-text\">We design websites with a focus on user experience (UX), clarity, and conversion. Every design is uniquely tailored to reflect the brand's identity and resonate with the target audience.<\/p>\n <div class=\"read-more-arrow\">\n Read more <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"M12 5l7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n <!-- Service 2: E-handel -->\n <a href=\"\/en\/e-handel\/\" class=\"service-detail-card\">\n <div class=\"service-header\">\n <div class=\"service-icon-wrap\">\n <svg viewbox=\"0 0 24 24\"><circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/><path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"\/><\/svg>\n <\/div>\n <h3>E-commerce<\/h3>\n <\/div>\n <p class=\"service-intro-text\">For businesses selling products or services online, we create scalable and user-friendly e-commerce solutions designed to maximize conversions.<\/p>\n <div class=\"read-more-arrow\">\n Read more <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"M12 5l7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n <!-- Service 3: SEO -->\n <a href=\"\/en\/SEO\/\" class=\"service-detail-card\">\n <div class=\"service-header\">\n <div class=\"service-icon-wrap\">\n <svg viewbox=\"0 0 24 24\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"\/><polyline points=\"3.27 6.96 12 12.01 20.73 6.96\"\/><line x1=\"12\" y1=\"22.08\" x2=\"12\" y2=\"12\"\/><\/svg>\n <\/div>\n <h3>SEO<\/h3>\n <\/div>\n <p class=\"service-intro-text\">A beautiful website is useless if it can\u2019t be found. We always build our solutions with a \"SEO-first\" foundation to ensure the best possible visibility and search engine rankings.<\/p>\n <div class=\"read-more-arrow\">\n Read more <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"M12 5l7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n <!-- Service 4: Branding -->\n <a href=\"\/en\/branding\/\" class=\"service-detail-card\">\n <div class=\"service-header\">\n <div class=\"service-icon-wrap\">\n <svg viewbox=\"0 0 24 24\"><path d=\"M6 3h12l4 6-10 10L2 9l4-6z\"\/><\/svg>\n <\/div>\n <h3>Branding<\/h3>\n <\/div>\n <p class=\"service-intro-text\">We help you build a strong visual identity and strategy that communicates your brand\u2019s values and creates lasting recognition.<\/p>\n <div class=\"read-more-arrow\">\n Read more <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"\/><path d=\"M12 5l7 7-7 7\"\/><\/svg>\n <\/div>\n <\/a>\n\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"case-section-outer-black-bg\">\n <div id=\"case-scroll-container\" class=\"dynamic-bg-wrapper\">\n \n <section class=\"case-item\" data-bg=\"#b8a380\" id=\"case\">\n <div class=\"case-inner\">\n <div class=\"case-media\">\n <div class=\"browser-header\">\n <div class=\"browser-dots\"><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n <div class=\"browser-address\"><\/div>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/uploads\/2026\/01\/Skarmavbild-2026-01-14-kl.-23.47.47.png\" alt=\"Rama 2 Thai\" class=\"case-img\">\n <\/div>\n \n <div class=\"case-info\">\n <span class=\"case-counter\">01<span class=\"counter-fade\">\/03<\/span><\/span>\n <h2 class=\"case-title\">Rama 2 Thai<\/h2>\n <p class=\"case-desc\">\n An elegant restaurant website for one of Stockholm's most beloved Thai establishments. We created a user-friendly platform that reflects the restaurant's authentic atmosphere.\n <\/p>\n <a href=\"\/en\/case\/\" class=\"case-btn nav-animate\">\n View project <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-item\" data-bg=\"#38583d\">\n <div class=\"case-inner\">\n <div class=\"case-media\">\n <div class=\"browser-header\">\n <div class=\"browser-dots\"><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n <div class=\"browser-address\"><\/div>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/uploads\/2026\/01\/Skarmavbild-2026-01-14-kl.-23.58.22.png\" alt=\"MindNote\" class=\"case-img\">\n <\/div>\n \n <div class=\"case-info\">\n <span class=\"case-counter\">02<span class=\"counter-fade\">\/03<\/span><\/span>\n <h2 class=\"case-title\">MindNote<\/h2>\n <p class=\"case-desc\">\n A modern e-commerce solution for book sales. We delivered an elegant WooCommerce platform with a focus on design, performance, and a frictionless checkout experience.\n <\/p>\n <a href=\"\/en\/case\/\" class=\"case-btn nav-animate\">\n View project <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"case-item\" data-bg=\"#0b2344\">\n <div class=\"case-inner\">\n <div class=\"case-media\">\n <div class=\"browser-header\">\n <div class=\"browser-dots\"><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n <div class=\"browser-address\"><\/div>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/uploads\/2026\/01\/Skarmavbild-2026-01-15-kl.-00.01.05.png\" alt=\"Nordisk Rekond\" class=\"case-img\">\n <\/div>\n \n <div class=\"case-info\">\n <span class=\"case-counter\">03<span class=\"counter-fade\">\/03<\/span><\/span>\n <h2 class=\"case-title\">Nordisk Rekond<\/h2>\n <p class=\"case-desc\">\n A complete digital solution for service bookings. We delivered a minimalist design with clear navigation, an integrated booking flow, and an optimized experience across all devices.\n <\/p>\n <a href=\"\/en\/case\/\" class=\"case-btn nav-animate\">\n View project <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n<\/div>\n<div class=\"all-cases-section\">\n<a href=\"#alla-case\" class=\"btn-all-cases nav-animate\">View all projects <span class=\"arrow\">\u2192<\/span><\/a>\n<\/div>\n\n<section class=\"testimonials-section\">\n<div class=\"testimonials-container\">\n<div class=\"testimonials-header\"><h2>What our clients say about us<\/h2><\/div>\n<div class=\"testimonial-card\">\n<div class=\"testimonial-quote\">\"Couldn't be happier!\"<\/div>\n<p class=\"testimonial-text\">A sleek, modern, and elegant website. Everything is well-thought-out and built with genuine care. Highly recommended!!<\/p>\n<div class=\"testimonial-rating\">\u2b50\u2b50\u2b50\u2b50\u2b50<\/div>\n<h4 class=\"testimonial-author\">G\u00f6ran Holmlund<\/h4>\n<p class=\"testimonial-company\">VD, Rama 2 Thai AB<\/p>\n<\/div>\n<\/div>\n<\/section>\n\n<section id=\"kontakt\" class=\"contact-section\">\n<div class=\"contact-container\">\n<h2>Looking for a web agency in Stockholm?<\/h2>\n<p>We help you build a modern website that converts. Fill out the form and we\u2019ll get back to you within 24 hours.<\/p>\n<div class=\"contact-options\">\n<a href=\"https:\/\/nordyn.se\/en\/kontakt\/\" class=\"contact-btn\">Fill out the form <span class=\"arrow\">\u2192<\/span><\/a>\n<a href=\"tel:0722075505\" class=\"contact-btn secondary\">Call us<\/a>\n<\/div>\n<div class=\"contact-info\">\n<div class=\"contact-item\"><div class=\"contact-label\">Phone<\/div><div class=\"contact-value\"><a href=\"tel:0722075505\">072-207 55 05<\/a><\/div><\/div>\n<div class=\"contact-item\"><div class=\"contact-label\">E-mail<\/div><div class=\"contact-value\"><a href=\"mailto:info@nordyn.se\">info@nordyn.se<\/a><\/div><\/div>\n<div class=\"contact-item\"><div class=\"contact-label\">Location<\/div><div class=\"contact-value\">Stockholm<\/div><\/div>\n<\/div>\n<\/div>\n<\/section>\n\n<footer class=\"footer\">\n<div class=\"footer-container\">\n<div class=\"footer-main\">\n<div class=\"footer-brand\">\n<div class=\"footer-logo\"><svg version=\"1.0\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"600pt\" height=\"167pt\" viewbox=\"0 0 600 167\" preserveaspectratio=\"xMidYMid meet\"><g transform=\"translate(0,167) scale(0.1,-0.1)\" fill=\"currentColor\" stroke=\"none\"><path d=\"M4905 1460 c-59 -24 -91 -101 -69 -165 16 -48 31 -63 79 -79 147 -51 244 154 112 234 -33 21 -87 25 -122 10z\"\/><path d=\"M3335 1261 l-50 -6 -3 -133 -3 -132 -42 7 c-122 22 -219 1 -282 -62 -52 -51 -65 -92 -65 -201 0 -133 34 -210 110 -249 56 -29 169 -40 277 -26 54 8 107 12 118 11 11 -1 34 -3 50 -4 l30 -1 3 403 2 402 -47 -2 c-27 0 -70 -4 -98 -7z m-77 -462 c19 -7 22 -16 22 -63 0 -30 -4 -57 -9 -60 -22 -14 -127 -16 -151 -4 -47 25 -52 119 -7 138 23 10 106 3 145 -11z\"\/><path d=\"M1135 1000 c-85 -14 -154 -39 -165 -61 -6 -11 -9 -107 -8 -246 l3 -228 98 -3 97 -3 0 154 c0 124 3 157 15 167 8 6 43 13 79 13 50 2 68 -2 85 -17 20 -18 21 -29 21 -168 l0 -149 98 3 97 3 -1 180 c0 171 -1 183 -26 236 -41 89 -96 117 -243 124 -49 2 -117 0 -150 -5z\"\/><path d=\"M1825 986 c-212 -98 -212 -412 0 -512 72 -34 208 -34 281 0 205 96 205 416 0 512 -73 34 -209 34 -281 0z m218 -195 c15 -14 22 -34 22 -61 0 -55 -29 -81 -94 -88 -46 -4 -53 -2 -81 26 -21 21 -30 40 -30 62 0 22 9 41 30 62 28 28 35 30 81 26 34 -4 58 -12 72 -27z\"\/><path d=\"M2465 1003 c-27 -2 -60 -6 -72 -8 l-23 -5 0 -266 0 -265 98 3 97 3 -3 125 -4 125 30 28 c32 30 70 37 134 24 l37 -8 15 53 c26 90 38 180 27 191 -5 5 -37 8 -70 5 -45 -3 -72 -12 -111 -36 -28 -18 -54 -32 -56 -32 -3 0 -5 10 -4 23 4 40 0 47 -22 45 -13 -1 -45 -3 -73 -5z\"\/><path d=\"M4485 999 c-84 -12 -153 -37 -165 -60 -6 -11 -9 -107 -8 -246 l3 -228 95 0 95 0 5 160 5 160 50 7 c28 5 64 6 82 3 56 -10 63 -32 63 -193 l0 -143 98 3 97 3 3 130 c5 225 -26 333 -106 374 -74 38 -189 48 -317 30z\"\/><path d=\"M3574 985 c-16 -41 139 -430 193 -487 l26 -27 -37 -88 c-20 -48 -36 -93 -36 -99 0 -6 37 -27 83 -46 61 -27 85 -33 94 -24 6 6 40 83 76 171 86 213 128 315 193 467 30 70 54 132 54 137 0 16 -195 15 -207 -1 -6 -7 -34 -72 -63 -145 -58 -143 -66 -160 -75 -152 -3 3 -19 69 -37 145 -17 76 -35 145 -41 152 -15 19 -216 17 -223 -3z\"\/><\/g><\/svg><\/div>\n<p class=\"footer-tagline\">Nordyn Web Agency Stockholm<\/p>\n<div class=\"footer-contact\"><a href=\"mailto:info@nordyn.se\">info@nordyn.se<\/a><br><a href=\"tel:+46722075505\">+46 72-207 55 05<\/a><br>Stockholm, Sweden<\/div>\n<\/div>\n<div class=\"footer-column\">\n<h4>Services<\/h4>\n<div class=\"footer-links\"><a href=\"\/en\/webbdesign\/\">Web Design<\/a><a href=\"\/en\/E-handel\/\">E-commerce<\/a><a href=\"\/en\/SEO\/\">SEO<\/a><a href=\"\/en\/Branding\/\">Branding<\/a><\/div>\n<\/div>\n<div class=\"footer-column\">\n<h4>Company<\/h4>\n<div class=\"footer-links\"><a href=\"\/en\/om-nordyn\/\">About Nordyn<\/a><a href=\"\/en\/Lediga-tjanster\/\">Open Positions<\/a><a href=\"\/en\/Blogg\/\">Blog<\/a><\/div>\n<\/div>\n<div class=\"footer-column\">\n<h4>Socials<\/h4>\n<div class=\"footer-links\"><a href=\"https:\/\/www.facebook.com\/share\/18A482YcY7\/?mibextid=wwXIfr\" rel=\"nofollow noopener\" target=\"_blank\">Facebook<\/a><a href=\"#\">LinkedIn<\/a><a href=\"https:\/\/www.instagram.com\/nordyn.se?igsh=bzVwdHhudTRlOW9s&utm_source=qr\">Instagram<\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"footer-bottom\">\n<a href=\"\/en\/Integritetspolicy\/\">Privacy Policy<\/a><a href=\"\/en\/cookiepolicy\/\">Cookiepolicy<\/a><a href=\"\/en\/Anvandarvillkor\/\">Terms of Service<\/a><a href=\"\/en\/GDPR\/\">GDPR<\/a>\n<\/div>\n<\/div>\n<\/footer>\n\n<script>\n\/\/ HEADER FADE\ndocument.addEventListener('DOMContentLoaded', (event) => {\n const headerTagline = document.getElementById('headerTagline');\n if (headerTagline) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 10) { headerTagline.classList.add('fade-out'); } \n else { headerTagline.classList.remove('fade-out'); }\n });\n }\n});\n\n\/\/ VIDEO - F\u00f6rb\u00e4ttrad f\u00f6r smidig looping och iPhone\nconst heroVideo = document.getElementById(\"heroVideo\");\n\nfunction safePlay(){\n if (!heroVideo) return;\n const p = heroVideo.play();\n if (p && typeof p.catch === \"function\") {\n p.catch((error) => {\n \/\/ Om autoplay blockeras, f\u00f6rs\u00f6k igen vid anv\u00e4ndarinteraktion\n console.log('Autoplay blockerad, v\u00e4ntar p\u00e5 interaktion');\n document.body.addEventListener('touchstart', function playOnTouch() {\n heroVideo.play();\n document.body.removeEventListener('touchstart', playOnTouch);\n }, { once: true });\n });\n }\n}\n\nfunction setupSmoothLoop(){\n if (!heroVideo) return;\n \n \/\/ F\u00f6r smidigare loop, b\u00f6rja om lite innan slutet\n heroVideo.addEventListener('timeupdate', function() {\n if (heroVideo.currentTime >= heroVideo.duration - 0.1) {\n heroVideo.currentTime = 0;\n }\n });\n}\n\nif(heroVideo){\n \/\/ Ladda videon f\u00f6rst\n heroVideo.load();\n \n \/\/ Setup smooth looping\n setupSmoothLoop();\n \n \/\/ Starta playback n\u00e4r videon \u00e4r redo\n heroVideo.addEventListener(\"loadeddata\", safePlay);\n heroVideo.addEventListener(\"canplay\", safePlay);\n \n \/\/ Hantera visibility changes\n document.addEventListener(\"visibilitychange\", () => {\n if (document.visibilityState === \"visible\" && heroVideo.paused) {\n setTimeout(safePlay, 150);\n }\n });\n \n \/\/ Hantera page show (back\/forward cache)\n window.addEventListener(\"pageshow\", (event) => {\n if (event.persisted && heroVideo.paused) {\n setTimeout(safePlay, 150);\n }\n });\n \n \/\/ Backup check f\u00f6r pausad video\n setInterval(() => {\n if (heroVideo.paused && document.visibilityState === \"visible\") {\n safePlay();\n }\n }, 2000);\n \n \/\/ iOS specifik fix - tvinga load vid first touch\n let firstTouch = true;\n document.addEventListener('touchstart', function() {\n if (firstTouch) {\n heroVideo.load();\n safePlay();\n firstTouch = false;\n }\n }, { once: true });\n}\n\n\/\/ TYPEWRITER\nconst wordTarget = document.getElementById(\"wordTarget\");\nconst words = [\"Nordyn!\", \"framtidss\u00e4ker!\"];\nlet wIndex = 0;\nlet charIndex = words[0].length;\nlet deleting = false;\nconst TYPE_SPEED = 170;\nconst DELETE_SPEED = 135;\nconst HOLD_TIME = 2400;\n\nfunction setWordText(txt){\n if (!wordTarget) return;\n wordTarget.textContent = (txt && txt.length) ? txt : \"\\u00A0\";\n}\n\nfunction tick(){\n const current = words[wIndex];\n if (!deleting){\n charIndex++;\n setWordText(current.slice(0, charIndex));\n if (charIndex >= current.length){\n setTimeout(() => { deleting = true; tick(); }, HOLD_TIME);\n return;\n }\n setTimeout(tick, TYPE_SPEED);\n } else {\n charIndex--;\n setWordText(current.slice(0, Math.max(0, charIndex)));\n if (charIndex <= 0){\n wIndex = (wIndex + 1) % words.length;\n deleting = false;\n charIndex = 0;\n setTimeout(tick, 180);\n return;\n }\n setTimeout(tick, DELETE_SPEED);\n }\n}\n\nif (wordTarget) {\n setWordText(words[0]);\n charIndex = words[0].length;\n setTimeout(() => { deleting = true; tick(); }, HOLD_TIME);\n}\n\n\/\/ FULLSCREEN MENU LOGIC\nconst menuToggle = document.getElementById(\"menuToggle\");\nconst menuIcon = document.getElementById(\"menuIcon\");\nconst menuOverlay = document.getElementById(\"menuOverlay\");\nconst menuClose = document.getElementById(\"menuClose\");\nconst mainHeader = document.getElementById(\"mainHeader\"); \n\nfunction openMenu(){\n mainHeader.classList.add('hidden');\n menuOverlay.classList.remove(\"closing\");\n menuOverlay.classList.add(\"opening\");\n \n menuOverlay.setAttribute(\"aria-hidden\",\"false\");\n menuToggle.setAttribute(\"aria-expanded\",\"true\");\n document.body.style.overflow = \"hidden\";\n \n setTimeout(() => {\n menuOverlay.classList.remove(\"opening\");\n menuOverlay.classList.add(\"open\");\n }, 400);\n}\n\nfunction closeMenu(){\n mainHeader.classList.remove('hidden');\n menuOverlay.classList.remove(\"open\");\n menuOverlay.classList.add(\"closing\");\n \n setTimeout(() => {\n menuOverlay.classList.remove(\"closing\");\n menuOverlay.setAttribute(\"aria-hidden\",\"true\");\n menuToggle.setAttribute(\"aria-expanded\",\"false\");\n document.body.style.overflow = \"\";\n }, 400);\n}\n\nif(menuToggle){\n menuToggle.addEventListener(\"click\", function(e) {\n if(e) e.preventDefault();\n this.blur(); \n \n if (menuOverlay.classList.contains(\"open\") || menuOverlay.classList.contains(\"opening\")) {\n closeMenu();\n } else {\n openMenu();\n }\n });\n}\nif(menuClose) menuClose.addEventListener(\"click\", closeMenu);\n\nwindow.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Escape\" && menuOverlay.classList.contains(\"open\")) closeMenu();\n});\n\n\/\/ LINK ANIMATION\nfunction isHashLink(href){ return href && href.startsWith(\"#\"); }\nfunction smoothScrollToHash(hash){\n const el = document.querySelector(hash);\n if (!el) return;\n el.scrollIntoView({ behavior:\"smooth\", block:\"start\" });\n}\n\ndocument.querySelectorAll(\".nav-animate\").forEach(a => {\n a.addEventListener(\"click\", (e) => {\n const href = a.getAttribute(\"href\");\n if (!href) return;\n if (a.target === \"_blank\") return;\n\n e.preventDefault();\n a.classList.add(\"arming\");\n\n if (menuOverlay.classList.contains(\"open\")) setTimeout(closeMenu, 120);\n\n setTimeout(() => {\n a.classList.remove(\"arming\");\n if (isHashLink(href)) {\n history.pushState(null, \"\", href);\n smoothScrollToHash(href);\n } else {\n window.location.href = href;\n }\n }, 220);\n });\n});\n\n\/* --- NY CASE LOGIK (F\u00e4rgbyte vid scroll) --- *\/\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const container = document.getElementById(\"case-scroll-container\");\n const cases = document.querySelectorAll(\".case-item\");\n\n const observerOptions = {\n root: null,\n rootMargin: \"-45% 0px -45% 0px\", \/\/ Triggar n\u00e4r elementet \u00e4r ungef\u00e4r i mitten\n threshold: 0\n };\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n \/\/ H\u00e4mta f\u00e4rgen fr\u00e5n data-bg attributet\n const newColor = entry.target.getAttribute(\"data-bg\");\n if (newColor && container) {\n container.style.backgroundColor = newColor;\n }\n }\n });\n }, observerOptions);\n\n cases.forEach((section) => {\n observer.observe(section);\n });\n});\n\n\/\/ HIGHLIGHT ACTIVE LANGUAGE (Fix f\u00f6r caching)\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n const currentPath = window.location.pathname;\n const langLinks = document.querySelectorAll('.custom-lang-switch a');\n \n langLinks.forEach(link => {\n const linkHref = link.getAttribute('href');\n if (!linkHref) return;\n\n \/\/ Logik: Om vi \u00e4r p\u00e5 \/en\/ och l\u00e4nken inneh\u00e5ller \/en\/ -> Aktiv\n const isEngLink = linkHref.includes('\/en\/');\n const isEngPage = currentPath.includes('\/en\/');\n\n if (isEngPage && isEngLink) {\n link.classList.add('active-js-state');\n } else if (!isEngPage && !isEngLink) {\n \/\/ Om vi inte \u00e4r p\u00e5 \/en\/ (dvs svenska) och l\u00e4nken inte \u00e4r \/en\/ -> Aktiv\n link.classList.add('active-js-state');\n }\n });\n});\n\n\/\/ FUNKTION F\u00d6R ATT \u00d6PPNA\/ST\u00c4NGA TJ\u00c4NSTER MENYN\nfunction toggleSubmenu(event) {\n event.preventDefault();\n event.stopPropagation();\n \n \/\/ JS-hack: Ta bort fokus omedelbart f\u00f6r att f\u00f6rhindra bl\u00e5 markering\n if (event.currentTarget) {\n event.currentTarget.blur();\n }\n \n const menuItem = document.getElementById('servicesMenuItem');\n menuItem.classList.toggle('has-expanded');\n}\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Nordyn \u2014 Modern webbdesign Digitalbyr\u00e5 \/ Webbbyr\u00e5 Stockholm Kontakta oss Meny + Bli Nordyn! Vi levererar digital innovation, kreativitet och tillv\u00e4xt \u2014 […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":15,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":1997,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/2\/revisions\/1997"}],"wp:attachment":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}