{"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":"\t\t
\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\">Digitalbyr\u00e5 \/ Webbbyr\u00e5 Stockholm<\/div>\n <\/div>\n\n <nav class=\"nav\" aria-label=\"Toppmeny\">\n <a class=\"contact\" href=\"\/kontakt\">Kontakta oss<\/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 Meny <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\">Bli <\/span><span class=\"wordSlot\"><span class=\"word\" id=\"wordTarget\">Nordyn!<\/span><\/span><\/span><\/h1>\n<p class=\"sub\">Vi levererar digital innovation, kreativitet och tillv\u00e4xt \u2014 med modern design som faktiskt konverterar.<\/p>\n<div class=\"links\">\n<a class=\"heroLink case nav-animate\" href=\"\/case\">V\u00e5ra case <span class=\"arrow\">\u2192<\/span><\/a>\n<a class=\"heroLink nav-animate\" href=\"\/tjanster\">V\u00e5ra tj\u00e4nster <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;\">Digitalbyr\u00e5 \/ Webbbyr\u00e5 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 Meny <span class=\"menuIcon\">\u00d7<\/span>\n <\/button>\n <\/div>\n\n <div class=\"menuContent\">\n <ul class=\"menuList\" aria-label=\"Meny\">\n <li class=\"menuItem\" style=\"--d: 80ms;\">\n <div class=\"menuRow\">\n <a class=\"menuLink nav-animate\" href=\"\/\" style=\"color: #fff;\">Startsida<\/a>\n <\/div>\n <\/li>\n <li class=\"menuItem\" style=\"--d: 160ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/case\">Case<\/a><\/div><\/li>\n \n <li class=\"menuItem\" style=\"--d: 240ms;\" id=\"servicesMenuItem\">\n <div class=\"menuRow\">\n <a class=\"menuLink nav-animate\" href=\"\/tjanster\">Tj\u00e4nster<\/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=\"\/webbdesign\">Webbdesign<\/a><\/li>\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/e-handel\">E-handel<\/a><\/li>\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/seo\">SEO<\/a><\/li>\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/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=\"\/vart-lofte\">V\u00e5rt l\u00f6fte<\/a><\/div><\/li>\n <li class=\"menuItem\" style=\"--d: 400ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/om-nordyn\">Om nordyn<\/a><\/div><\/li>\n <li class=\"menuItem\" style=\"--d: 480ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/kontakt\">Kontakt<\/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#TRPLINKPROCESSED\" 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-6a8b964c33d14\"><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-6a8b964c33d14\"\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#TRPLINKPROCESSED\" 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\">Intresserad av ett samarbete<\/span>\n <br>\n <a class=\"nav-animate\" href=\"\/kontakt\">\n Kontakta oss\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>V\u00e5ra tj\u00e4nster \u2013 komplett digital n\u00e4rvaro med Nordyn<\/h2>\n <p class=\"services-intro\">P\u00e5 Nordyn hj\u00e4lper vi f\u00f6retag att bygga, f\u00f6rb\u00e4ttra och skala sin digitala n\u00e4rvaro. Vi \u00e4r en modern webbyr\u00e5 som kombinerar strategi, design och teknik f\u00f6r att skapa webbplatser och digitala l\u00f6sningar som inte bara ser bra ut \u2013 utan faktiskt driver aff\u00e4r.<\/p>\n <p class=\"services-intro\" style=\"margin-top:-20px;\">Vi arbetar med allt fr\u00e5n nystartade varum\u00e4rken till etablerade f\u00f6retag och anpassar alltid l\u00f6sningen efter m\u00e5l, m\u00e5lgrupp och tillv\u00e4xtambition.<\/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=\"\/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>Webbdesign<\/h3>\n <\/div>\n <p class=\"service-intro-text\">Vi designar webbplatser med fokus p\u00e5 anv\u00e4ndarupplevelse, tydlighet och konvertering. Designen \u00e4r alltid anpassad efter varum\u00e4rkets identitet och m\u00e5lgrupp.<\/p>\n <div class=\"read-more-arrow\">\n L\u00e4s mer <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=\"\/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-handel<\/h3>\n <\/div>\n <p class=\"service-intro-text\">F\u00f6r f\u00f6retag som s\u00e4ljer produkter eller tj\u00e4nster online skapar vi skalbara och anv\u00e4ndarv\u00e4nliga e-handelsl\u00f6sningar som maximerar konvertering.<\/p>\n <div class=\"read-more-arrow\">\n L\u00e4s mer <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=\"\/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\">En snygg webbplats \u00e4r v\u00e4rdel\u00f6s om den inte hittas. Vi bygger alltid v\u00e5ra l\u00f6sningar med SEO i grunden f\u00f6r b\u00e4sta m\u00f6jliga synlighet och ranking.<\/p>\n <div class=\"read-more-arrow\">\n L\u00e4s mer <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=\"\/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\">Vi hj\u00e4lper er att bygga en stark visuell identitet och strategi som kommunicerar ert varum\u00e4rkes v\u00e4rderingar och skapar igenk\u00e4nning.<\/p>\n <div class=\"read-more-arrow\">\n L\u00e4s mer <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 En elegant restaurangwebbplats f\u00f6r en av Stockholms mest \u00e4lskade thail\u00e4ndska restauranger. Vi skapade en anv\u00e4ndarv\u00e4nlig plattform som speglar restaurangens autentiska atmosf\u00e4r.\n <\/p>\n <a href=\"\/case\" class=\"case-btn nav-animate\">\n Se case <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 En modern e-handelsl\u00f6sning f\u00f6r bokf\u00f6rs\u00e4ljning. Vi levererade en elegant WooCommerce-plattform med fokus p\u00e5 design, prestanda och friktionsfri checkout.\n <\/p>\n <a href=\"\/case\" class=\"case-btn nav-animate\">\n Se case <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 En komplett digital l\u00f6sning f\u00f6r servicebokningar. Vi levererade en minimalistisk design med tydlig navigation, integrerat bokningsfl\u00f6de och optimerad upplevelse p\u00e5 alla enheter.\n <\/p>\n <a href=\"\/case\" class=\"case-btn nav-animate\">\n Se case <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\">Visa alla case <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>Vad s\u00e4ger v\u00e5ra kunder om oss<\/h2><\/div>\n<div class=\"testimonial-card\">\n<div class=\"testimonial-quote\">\"Kunde inte vara n\u00f6jdare!\"<\/div>\n<p class=\"testimonial-text\">Stilren, modern och elegant hemsida. Allt \u00e4r genomt\u00e4nkt, byggd med tydlig omsorg. Rekommenderas varmt!!<\/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>S\u00f6ker ni en webbyr\u00e5 i Stockholm?<\/h2>\n<p>Vi hj\u00e4lper er att bygga en modern webbplats som konverterar. Fyll i formul\u00e4ret s\u00e5 \u00e5terkommer vi inom 24 timmar.<\/p>\n<div class=\"contact-options\">\n<a href=\"https:\/\/nordyn.se\/kontakt\" class=\"contact-btn\">Fyll i formul\u00e4r <span class=\"arrow\">\u2192<\/span><\/a>\n<a href=\"tel:0722075505\" class=\"contact-btn secondary\">Ring oss<\/a>\n<\/div>\n<div class=\"contact-info\">\n<div class=\"contact-item\"><div class=\"contact-label\">Telefon<\/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-post<\/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\">Plats<\/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 Webbyr\u00e5 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, Sverige<\/div>\n<\/div>\n<div class=\"footer-column\">\n<h4>Tj\u00e4nster<\/h4>\n<div class=\"footer-links\"><a href=\"\/webbdesign\">Webbdesign<\/a><a href=\"\/E-handel\">E-handel<\/a><a href=\"\/SEO\">SEO<\/a><a href=\"\/Branding\">Branding<\/a><\/div>\n<\/div>\n<div class=\"footer-column\">\n<h4>F\u00f6retag<\/h4>\n<div class=\"footer-links\"><a href=\"\/om-nordyn\">Om Nordyn<\/a><a href=\"\/Lediga-tjanster\">Lediga tj\u00e4nster<\/a><a href=\"\/Blogg\">Blogg<\/a><\/div>\n<\/div>\n<div class=\"footer-column\">\n<h4>Sociala medier<\/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=\"\/Integritetspolicy\">Integritetspolicy<\/a><a href=\"\/cookiepolicy\">Cookiepolicy<\/a><a href=\"\/Anvandarvillkor\">Anv\u00e4ndarvillkor<\/a><a href=\"\/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>\n\t\t","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>\n","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}]}}