Nordyn \u2014 Branding & Varum\u00e4rkesstrategi<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;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 --bg-dark: #050505;\n --card-bg: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);\n}\n\n\/* SUPER-FIX F\u00d6R BL\u00c5 MARKERINGAR *\/\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\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\/* S\u00c4KERST\u00c4LL ATT ALLA RUBRIKER \u00c4R VITA *\/\nh1, h2, h3, h4, h5, h6 {\n color: #ffffff !important;\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; \/* Transparent initialt *\/\n mix-blend-mode: normal; \/* \u00c4ndrat fr\u00e5n difference f\u00f6r branding-sidan f\u00f6r b\u00e4ttre kontroll *\/\n color: #fff;\n transition: opacity 0.3s ease, background-color 0.3s ease, padding 0.3s ease;\n}\n\n\/* L\u00e4gg till bakgrund vid scroll *\/\n.header.scrolled {\n background: rgba(0,0,0,0.85);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n padding-top: 15px;\n padding-bottom: 15px;\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\/* SUBMENU *\/\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 BRANDING PAGE SPECIFIC STYLES\n ================================================================= *\/\n.page-container {\n padding-top: 140px; \/* Space for fixed header *\/\n}\n\n\/* Common Section *\/\n.content-section {\n padding: clamp(80px, 12vh, 140px) var(--pad);\n position: relative;\n}\n.content-section.darker { background-color: var(--bg-dark); }\n.container { max-width: 1200px; margin: 0 auto; width: 100%; }\n.container-narrow { max-width: 800px; margin: 0 auto; width: 100%; }\n\n\/* Typography *\/\nh1.hero-title {\n font-size: clamp(48px, 6vw, 90px);\n line-height: 0.95;\n font-weight: 800;\n letter-spacing: -0.04em;\n margin-bottom: 30px;\n max-width: 18ch;\n color: #ffffff; \/* F\u00f6r s\u00e4kerhets skull *\/\n}\n.hero-ingress {\n font-size: clamp(18px, 2vw, 22px);\n line-height: 1.6;\n color: var(--muted);\n max-width: 650px;\n margin-bottom: 50px;\n font-weight: 300;\n}\n\nh2.section-title {\n font-size: clamp(32px, 4vw, 56px);\n font-weight: 700;\n letter-spacing: -0.03em;\n margin-bottom: 24px;\n line-height: 1.1;\n color: #ffffff; \/* F\u00f6r s\u00e4kerhets skull *\/\n}\n\np.section-text {\n font-size: clamp(16px, 1.5vw, 18px);\n line-height: 1.7;\n color: rgba(255,255,255,0.75);\n margin-bottom: 30px;\n}\n\n\/* Hero Specifics *\/\n.branding-hero {\n min-height: 90vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n padding-top: 160px; \/* Mer space f\u00f6r header *\/\n padding-bottom: 80px;\n background: #000;\n overflow: hidden;\n}\n\n\/* Abstract Hero Visual *\/\n.hero-visual-abstract {\n position: absolute;\n right: -10%;\n top: 50%;\n transform: translateY(-50%);\n width: 50vw;\n height: 50vw;\n opacity: 0.4;\n pointer-events: none;\n background: radial-gradient(circle, rgba(138,116,255,0.15) 0%, rgba(0,0,0,0) 70%);\n z-index: 0;\n}\n.hero-visual-abstract::after {\n content: '';\n position: absolute;\n inset: 20%;\n border: 1px solid rgba(255,255,255,0.05);\n border-radius: 50%;\n}\n\n\/* Split Layouts *\/\n.split-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: clamp(40px, 5vw, 100px);\n align-items: center;\n}\n.split-layout.reversed { direction: rtl; }\n.split-layout.reversed > * { direction: ltr; }\n\n\/* Abstract Placeholders *\/\n.visual-block {\n width: 100%;\n aspect-ratio: 4\/3;\n background: var(--bg-dark);\n border-radius: 4px;\n position: relative;\n overflow: hidden;\n border: 1px solid var(--line);\n}\n\n\/* Visual 1: Identity *\/\n.visual-identity-art {\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #0a0a0a 0%, #111 100%);\n}\n.visual-circle {\n width: 40%;\n height: 40%;\n border: 1px solid var(--accent);\n border-radius: 50%;\n position: relative;\n}\n.visual-circle::before {\n content:''; position:absolute; inset: -20px; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%;\n}\n.visual-type {\n position: absolute;\n bottom: 20px; left: 20px;\n font-family: monospace;\n font-size: 10px; color: var(--accent);\n}\n\n\/* Visual 2: Strategy *\/\n.visual-strategy-art {\n background: #080808;\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 1px;\n}\n.grid-cell { background: rgba(255,255,255,0.02); }\n.grid-highlight { background: var(--accent); grid-column: span 2; grid-row: span 2; opacity: 0.1; }\n\n\/* Visual 3: Digital *\/\n.visual-digital-art {\n background: #000;\n padding: 40px;\n}\n.ui-frame {\n width: 100%; height: 100%;\n border: 1px solid var(--line);\n border-top-width: 12px;\n border-radius: 6px;\n background: rgba(255,255,255,0.02);\n position: relative;\n}\n.ui-element {\n height: 12px; background: rgba(255,255,255,0.1); margin: 20px; width: 60%;\n}\n.ui-btn-mock {\n height: 30px; width: 100px; background: var(--accent); opacity: 0.8; margin: 20px; border-radius: 4px;\n}\n\n\/* Process Steps *\/\n.process-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 40px;\n margin-top: 60px;\n position: relative;\n}\n.process-grid::before {\n content:'';\n position: absolute;\n top: 25px; left: 0; right: 0;\n height: 1px;\n background: var(--line);\n z-index: 0;\n display: none; \/* Hide on mobile default *\/\n}\n@media(min-width: 900px) { .process-grid::before { display: block; } }\n\n.process-step {\n position: relative;\n z-index: 1;\n}\n.step-number {\n font-size: 14px;\n font-family: monospace;\n color: var(--accent);\n margin-bottom: 16px;\n background: #000;\n display: inline-block;\n padding-right: 10px;\n}\n.step-title {\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 12px;\n color: #fff;\n}\n.step-desc {\n font-size: 15px;\n color: rgba(255,255,255,0.6);\n line-height: 1.5;\n}\n\n\/* Target Audience *\/\n.audience-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n margin-top: 40px;\n}\n.audience-card {\n padding: 30px;\n border: 1px solid var(--line);\n border-radius: 8px;\n transition: 0.3s;\n}\n.audience-card:hover { border-color: var(--accent); background: rgba(255,255,255,0.02); }\n.audience-card h3 { font-size: 18px; margin: 0 0 10px 0; font-weight: 600; color: #fff; }\n.audience-card p { font-size: 15px; margin: 0; color: var(--muted); }\n\n\/* Why Nordyn List *\/\n.why-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n.why-item {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n margin-bottom: 24px;\n font-size: 18px;\n color: #fff;\n}\n.check-icon {\n color: var(--accent);\n flex-shrink: 0;\n margin-top: 4px;\n}\n\n\/* Footer & Other copied styles *\/\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\/* Knappar *\/\n.btn-primary {\n display:inline-flex; align-items:center; gap:12px;\n padding:18px 36px; background:var(--accent); color:#fff;\n text-decoration:none; font-weight:700; font-size:16px;\n border-radius:6px; transition:transform .2s ease;\n border: none; cursor: pointer;\n}\n.btn-primary:hover { transform:translateY(-2px); }\n.btn-text {\n display: inline-flex; align-items: center; gap: 8px;\n color: #fff; text-decoration: none; font-weight: 600;\n padding-bottom: 2px; border-bottom: 1px solid var(--line);\n transition: 0.3s;\n}\n.btn-text:hover { border-color: var(--accent); color: var(--accent); }\n\n\/* Responsive Branding *\/\n@media (max-width:1024px){\n .footer-main{grid-template-columns:1fr 1fr;gap:40px}\n .split-layout { grid-template-columns: 1fr; gap: 60px; }\n .split-layout.reversed { direction: ltr; }\n .split-layout.reversed > * { direction: ltr; }\n}\n\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 .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 .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 \n .hero-title { font-size: 42px; }\n .content-section { padding: 80px 24px; }\n .process-grid::before { display: none; }\n}\n<\/style>\n<\/head>\n<body>\n\n<header class=\"header\" 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()\">\n Menu <span class=\"menuIcon\" id=\"menuIcon\">+<\/span>\n <\/button>\n <\/nav>\n<\/header>\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()\">\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: rgba(255,255,255,0.5);\">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\/\" style=\"color: #fff;\">Services<\/a>\n <button class=\"submenu-toggle-btn\" aria-label=\"Visa undertj\u00e4nster\" onclick=\"toggleSubmenu(event)\">\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\/\" style=\"color: #fff;\">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=\"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\n<section class=\"branding-hero\">\n <div class=\"container\" style=\"padding: 0 var(--pad);\">\n <h1 class=\"hero-title\">Branding som bygger igenk\u00e4nning och f\u00f6rtroende<\/h1>\n <p class=\"hero-ingress\">Vi hj\u00e4lper f\u00f6retag att skapa tydliga, konsekventa och h\u00e5llbara varum\u00e4rken \u2013 d\u00e4r strategi, design och digital n\u00e4rvaro samspelar f\u00f6r att driva aff\u00e4ren fram\u00e5t.<\/p>\n <a href=\"#intro\" class=\"btn-primary nav-animate\">L\u00e4s mer om branding<\/a>\n <\/div>\n \n <div class=\"hero-visual-abstract\"><\/div>\n<\/section>\n\n\n<section id=\"intro\" class=\"content-section\">\n <div class=\"container\">\n <div class=\"split-layout\">\n <div class=\"text-col\">\n <h2 class=\"section-title\">Mer \u00e4n en logotyp<\/h2>\n <p class=\"section-text\">M\u00e5nga s\u00e4tter likhetstecken mellan branding och en logotyp. F\u00f6r oss p\u00e5 Nordyn handlar det om mycket mer. Det \u00e4r helhetsk\u00e4nslan, er identitet, hur ni kommunicerar och hur ni upplevs i varje digital interaktion.<\/p>\n <p class=\"section-text\">Ett starkt varum\u00e4rke skapar inte bara igenk\u00e4nning, det bygger f\u00f6rtroende. Det \u00e4r fundamentet som all er marknadsf\u00f6ring och webbdesign ska vila p\u00e5 f\u00f6r att bli framg\u00e5ngsrik.<\/p>\n <\/div>\n <div class=\"visual-col\">\n <div class=\"visual-block visual-identity-art\">\n <div class=\"visual-circle\"><\/div>\n <span class=\"visual-type\">NORDYN.BRAND.SYS<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section darker\">\n <div class=\"container\">\n <div class=\"split-layout reversed\">\n <div class=\"text-col\">\n <h2 class=\"section-title\">En tydlig grund att bygga p\u00e5<\/h2>\n <p class=\"section-text\">Utan en strategi blir design bara dekoration. Vi arbetar djupt med att definiera er position p\u00e5 marknaden, er m\u00e5lgrupp och er unika tonalitet. Vi skapar visuella riktlinjer som h\u00e5ller \u00f6ver tid.<\/p>\n <p class=\"section-text\">Branding hos Nordyn utg\u00e5r alltid fr\u00e5n aff\u00e4rsm\u00e5l, inte kortlivade designtrender. Vi bygger varum\u00e4rken som \u00e4r redo att v\u00e4xa.<\/p>\n <\/div>\n <div class=\"visual-col\">\n <div class=\"visual-block visual-strategy-art\">\n <div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div>\n <div class=\"grid-cell\"><\/div><div class=\"grid-highlight\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div>\n <div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div>\n <div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div>\n <div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section\">\n <div class=\"container-narrow\" style=\"text-align: center;\">\n <h2 class=\"section-title\">Ett konsekvent och genomt\u00e4nkt uttryck<\/h2>\n <p class=\"section-text\">Vi tar fram kompletta grafiska profiler d\u00e4r f\u00e4rgpalett, typografi, layoutprinciper och bildspr\u00e5k samverkar. M\u00e5let \u00e4r att vem som helst ska k\u00e4nna igen ert f\u00f6retag, oavsett om de m\u00f6ter er p\u00e5 en faktura, i ett Instagram-inl\u00e4gg eller p\u00e5 er hemsida. Vi s\u00e4kerst\u00e4ller att designen \u00e4r flexibel och fungerar lika bra p\u00e5 webben som i tryck.<\/p>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section darker\">\n <div class=\"container\">\n <div class=\"split-layout\">\n <div class=\"text-col\">\n <h2 class=\"section-title\">Anpassat f\u00f6r webb och digital n\u00e4rvaro<\/h2>\n <p class=\"section-text\">Traditionella varum\u00e4rkesbyr\u00e5er gl\u00f6mmer ofta det digitala. Vi lever i det. Vi ser till att ert varum\u00e4rke implementeras s\u00f6ml\u00f6st i webbdesign, e-handel, gr\u00e4nssnitt och anv\u00e4ndarupplevelser.<\/p>\n <p class=\"section-text\">Det handlar inte bara om att loggan ska \"synas\" \u2013 det handlar om hur varum\u00e4rket \"k\u00e4nns\" n\u00e4r man klickar sig runt p\u00e5 sajten.<\/p>\n <\/div>\n <div class=\"visual-col\">\n <div class=\"visual-block visual-digital-art\">\n <div class=\"ui-frame\">\n <div class=\"ui-element\"><\/div>\n <div class=\"ui-btn-mock\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section\">\n <div class=\"container\">\n <h2 class=\"section-title\" style=\"margin-bottom: 50px;\">En strukturerad och kreativ process<\/h2>\n \n <div class=\"process-grid\">\n <div class=\"process-step\">\n <span class=\"step-number\">01<\/span>\n <h3 class=\"step-title\">Analys & F\u00f6rst\u00e5else<\/h3>\n <p class=\"step-desc\">Vi b\u00f6rjar med att lyssna. Vi kartl\u00e4gger nul\u00e4get, konkurrenter och era visioner.<\/p>\n <\/div>\n <div class=\"process-step\">\n <span class=\"step-number\">02<\/span>\n <h3 class=\"step-title\">Positionering<\/h3>\n <p class=\"step-desc\">Vi s\u00e4tter riktningen. Vad \u00e4r er unika f\u00f6rdel och vem pratar vi med?<\/p>\n <\/div>\n <div class=\"process-step\">\n <span class=\"step-number\">03<\/span>\n <h3 class=\"step-title\">Visuell Identitet<\/h3>\n <p class=\"step-desc\">Kreativt arbete d\u00e4r f\u00e4rg, form och typografi tar plats och bildar en helhet.<\/p>\n <\/div>\n <div class=\"process-step\">\n <span class=\"step-number\">04<\/span>\n <h3 class=\"step-title\">Implementering<\/h3>\n <p class=\"step-desc\">Vi applicerar identiteten digitalt. Webb, sociala medier och presentationer.<\/p>\n <\/div>\n <div class=\"process-step\">\n <span class=\"step-number\">05<\/span>\n <h3 class=\"step-title\">Leverans<\/h3>\n <p class=\"step-desc\">Dokumentation och riktlinjer s\u00e5 att ni enkelt kan arbeta vidare med ert varum\u00e4rke.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section darker\">\n <div class=\"container\">\n <h2 class=\"section-title\">F\u00f6r f\u00f6retag som vill sticka ut<\/h2>\n <div class=\"audience-grid\">\n <div class=\"audience-card\">\n <h3>Nya f\u00f6retag<\/h3>\n <p>F\u00f6r startups som beh\u00f6ver s\u00e4tta en professionell grund fr\u00e5n dag ett f\u00f6r att attrahera investerare och kunder.<\/p>\n <\/div>\n <div class=\"audience-card\">\n <h3>Rebranding<\/h3>\n <p>F\u00f6r etablerade bolag som vuxit ur sin kostym och beh\u00f6ver modernisera sitt uttryck f\u00f6r att spegla sin nuvarande kvalitet.<\/p>\n <\/div>\n <div class=\"audience-card\">\n <h3>Digitala varum\u00e4rken<\/h3>\n <p>F\u00f6r e-handel och tech-bolag d\u00e4r den digitala upplevelsen \u00e4r hela aff\u00e4ren.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section\">\n <div class=\"container\">\n <div class=\"split-layout\">\n <div class=\"text-col\">\n <h2 class=\"section-title\">Branding med l\u00e5ngsiktigt fokus<\/h2>\n <ul class=\"why-list\">\n <li class=\"why-item\">\n <svg class=\"check-icon\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n Strategi och design i balans\n <\/li>\n <li class=\"why-item\">\n <svg class=\"check-icon\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n Optimerat f\u00f6r digitala milj\u00f6er\n <\/li>\n <li class=\"why-item\">\n <svg class=\"check-icon\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n Konsekvent uttryck \u00f6ver alla kanaler\n <\/li>\n <li class=\"why-item\">\n <svg class=\"check-icon\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n Integrerat med webb & SEO\n <\/li>\n <\/ul>\n <\/div>\n <div class=\"visual-col\">\n \n <div class=\"visual-block\" style=\"background: linear-gradient(180deg, #111 0%, #000 100%); display:flex; align-items:center; justify-content:center;\">\n <div style=\"width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.1); transform: rotate(45deg);\"><\/div>\n <div style=\"width: 60%; height: 60%; border: 1px solid rgba(138,116,255,0.3); transform: rotate(45deg); position:absolute;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section darker\" style=\"text-align: center; padding: 140px var(--pad);\">\n <div class=\"container-narrow\">\n <h2 class=\"section-title\">Redo att bygga ett varum\u00e4rke som h\u00e5ller \u00f6ver tid?<\/h2>\n <p class=\"section-text\">L\u00e5t oss ta ett f\u00f6ruts\u00e4ttningsl\u00f6st m\u00f6te om hur vi kan lyfta er visuella identitet.<\/p>\n <div style=\"margin-top: 40px;\">\n <a href=\"\/en\/kontakt\/\" class=\"btn-primary nav-animate\">Kontakta Nordyn <span class=\"arrow\">\u2192<\/span><\/a>\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 SCROLL EFFECT (Anpassad f\u00f6r content pages)\ndocument.addEventListener('DOMContentLoaded', (event) => {\n const header = document.getElementById('mainHeader');\n const headerTagline = document.getElementById('headerTagline');\n \n if (header) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) { \n header.classList.add('scrolled');\n if(headerTagline) headerTagline.classList.add('fade-out');\n } \n else { \n header.classList.remove('scrolled');\n if(headerTagline) headerTagline.classList.remove('fade-out');\n }\n });\n }\n});\n\n\/\/ FULLSCREEN MENU LOGIC\nconst menuToggle = document.getElementById(\"menuToggle\");\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\/\/ SUBMENU TOGGLE\nfunction toggleSubmenu(event) {\n event.preventDefault();\n event.stopPropagation();\n if (event.currentTarget) { event.currentTarget.blur(); }\n const menuItem = document.getElementById('servicesMenuItem');\n menuItem.classList.toggle('has-expanded');\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<\/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 Branding & Varum\u00e4rkesstrategi Digitalbyr\u00e5 \/ Webbbyr\u00e5 Stockholm Kontakta oss Meny + Digitalbyr\u00e5 \/ Webbbyr\u00e5 Stockholm Meny \u00d7 Startsida Case Tj\u00e4nster […]<\/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":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","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":"","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-1458","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1458","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=1458"}],"version-history":[{"count":13,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1458\/revisions"}],"predecessor-version":[{"id":1886,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1458\/revisions\/1886"}],"wp:attachment":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/media?parent=1458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\n\nNordyn \u2014 Branding & Varum\u00e4rkesstrategi<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;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 --bg-dark: #050505;\n --card-bg: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);\n}\n\n\/* SUPER-FIX F\u00d6R BL\u00c5 MARKERINGAR *\/\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\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\/* S\u00c4KERST\u00c4LL ATT ALLA RUBRIKER \u00c4R VITA *\/\nh1, h2, h3, h4, h5, h6 {\n color: #ffffff !important;\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; \/* Transparent initialt *\/\n mix-blend-mode: normal; \/* \u00c4ndrat fr\u00e5n difference f\u00f6r branding-sidan f\u00f6r b\u00e4ttre kontroll *\/\n color: #fff;\n transition: opacity 0.3s ease, background-color 0.3s ease, padding 0.3s ease;\n}\n\n\/* L\u00e4gg till bakgrund vid scroll *\/\n.header.scrolled {\n background: rgba(0,0,0,0.85);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n padding-top: 15px;\n padding-bottom: 15px;\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\/* SUBMENU *\/\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 BRANDING PAGE SPECIFIC STYLES\n ================================================================= *\/\n.page-container {\n padding-top: 140px; \/* Space for fixed header *\/\n}\n\n\/* Common Section *\/\n.content-section {\n padding: clamp(80px, 12vh, 140px) var(--pad);\n position: relative;\n}\n.content-section.darker { background-color: var(--bg-dark); }\n.container { max-width: 1200px; margin: 0 auto; width: 100%; }\n.container-narrow { max-width: 800px; margin: 0 auto; width: 100%; }\n\n\/* Typography *\/\nh1.hero-title {\n font-size: clamp(48px, 6vw, 90px);\n line-height: 0.95;\n font-weight: 800;\n letter-spacing: -0.04em;\n margin-bottom: 30px;\n max-width: 18ch;\n color: #ffffff; \/* F\u00f6r s\u00e4kerhets skull *\/\n}\n.hero-ingress {\n font-size: clamp(18px, 2vw, 22px);\n line-height: 1.6;\n color: var(--muted);\n max-width: 650px;\n margin-bottom: 50px;\n font-weight: 300;\n}\n\nh2.section-title {\n font-size: clamp(32px, 4vw, 56px);\n font-weight: 700;\n letter-spacing: -0.03em;\n margin-bottom: 24px;\n line-height: 1.1;\n color: #ffffff; \/* F\u00f6r s\u00e4kerhets skull *\/\n}\n\np.section-text {\n font-size: clamp(16px, 1.5vw, 18px);\n line-height: 1.7;\n color: rgba(255,255,255,0.75);\n margin-bottom: 30px;\n}\n\n\/* Hero Specifics *\/\n.branding-hero {\n min-height: 90vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n padding-top: 160px; \/* Mer space f\u00f6r header *\/\n padding-bottom: 80px;\n background: #000;\n overflow: hidden;\n}\n\n\/* Abstract Hero Visual *\/\n.hero-visual-abstract {\n position: absolute;\n right: -10%;\n top: 50%;\n transform: translateY(-50%);\n width: 50vw;\n height: 50vw;\n opacity: 0.4;\n pointer-events: none;\n background: radial-gradient(circle, rgba(138,116,255,0.15) 0%, rgba(0,0,0,0) 70%);\n z-index: 0;\n}\n.hero-visual-abstract::after {\n content: '';\n position: absolute;\n inset: 20%;\n border: 1px solid rgba(255,255,255,0.05);\n border-radius: 50%;\n}\n\n\/* Split Layouts *\/\n.split-layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: clamp(40px, 5vw, 100px);\n align-items: center;\n}\n.split-layout.reversed { direction: rtl; }\n.split-layout.reversed > * { direction: ltr; }\n\n\/* Abstract Placeholders *\/\n.visual-block {\n width: 100%;\n aspect-ratio: 4\/3;\n background: var(--bg-dark);\n border-radius: 4px;\n position: relative;\n overflow: hidden;\n border: 1px solid var(--line);\n}\n\n\/* Visual 1: Identity *\/\n.visual-identity-art {\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #0a0a0a 0%, #111 100%);\n}\n.visual-circle {\n width: 40%;\n height: 40%;\n border: 1px solid var(--accent);\n border-radius: 50%;\n position: relative;\n}\n.visual-circle::before {\n content:''; position:absolute; inset: -20px; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%;\n}\n.visual-type {\n position: absolute;\n bottom: 20px; left: 20px;\n font-family: monospace;\n font-size: 10px; color: var(--accent);\n}\n\n\/* Visual 2: Strategy *\/\n.visual-strategy-art {\n background: #080808;\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 1px;\n}\n.grid-cell { background: rgba(255,255,255,0.02); }\n.grid-highlight { background: var(--accent); grid-column: span 2; grid-row: span 2; opacity: 0.1; }\n\n\/* Visual 3: Digital *\/\n.visual-digital-art {\n background: #000;\n padding: 40px;\n}\n.ui-frame {\n width: 100%; height: 100%;\n border: 1px solid var(--line);\n border-top-width: 12px;\n border-radius: 6px;\n background: rgba(255,255,255,0.02);\n position: relative;\n}\n.ui-element {\n height: 12px; background: rgba(255,255,255,0.1); margin: 20px; width: 60%;\n}\n.ui-btn-mock {\n height: 30px; width: 100px; background: var(--accent); opacity: 0.8; margin: 20px; border-radius: 4px;\n}\n\n\/* Process Steps *\/\n.process-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 40px;\n margin-top: 60px;\n position: relative;\n}\n.process-grid::before {\n content:'';\n position: absolute;\n top: 25px; left: 0; right: 0;\n height: 1px;\n background: var(--line);\n z-index: 0;\n display: none; \/* Hide on mobile default *\/\n}\n@media(min-width: 900px) { .process-grid::before { display: block; } }\n\n.process-step {\n position: relative;\n z-index: 1;\n}\n.step-number {\n font-size: 14px;\n font-family: monospace;\n color: var(--accent);\n margin-bottom: 16px;\n background: #000;\n display: inline-block;\n padding-right: 10px;\n}\n.step-title {\n font-size: 20px;\n font-weight: 600;\n margin-bottom: 12px;\n color: #fff;\n}\n.step-desc {\n font-size: 15px;\n color: rgba(255,255,255,0.6);\n line-height: 1.5;\n}\n\n\/* Target Audience *\/\n.audience-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n margin-top: 40px;\n}\n.audience-card {\n padding: 30px;\n border: 1px solid var(--line);\n border-radius: 8px;\n transition: 0.3s;\n}\n.audience-card:hover { border-color: var(--accent); background: rgba(255,255,255,0.02); }\n.audience-card h3 { font-size: 18px; margin: 0 0 10px 0; font-weight: 600; color: #fff; }\n.audience-card p { font-size: 15px; margin: 0; color: var(--muted); }\n\n\/* Why Nordyn List *\/\n.why-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n.why-item {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n margin-bottom: 24px;\n font-size: 18px;\n color: #fff;\n}\n.check-icon {\n color: var(--accent);\n flex-shrink: 0;\n margin-top: 4px;\n}\n\n\/* Footer & Other copied styles *\/\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\/* Knappar *\/\n.btn-primary {\n display:inline-flex; align-items:center; gap:12px;\n padding:18px 36px; background:var(--accent); color:#fff;\n text-decoration:none; font-weight:700; font-size:16px;\n border-radius:6px; transition:transform .2s ease;\n border: none; cursor: pointer;\n}\n.btn-primary:hover { transform:translateY(-2px); }\n.btn-text {\n display: inline-flex; align-items: center; gap: 8px;\n color: #fff; text-decoration: none; font-weight: 600;\n padding-bottom: 2px; border-bottom: 1px solid var(--line);\n transition: 0.3s;\n}\n.btn-text:hover { border-color: var(--accent); color: var(--accent); }\n\n\/* Responsive Branding *\/\n@media (max-width:1024px){\n .footer-main{grid-template-columns:1fr 1fr;gap:40px}\n .split-layout { grid-template-columns: 1fr; gap: 60px; }\n .split-layout.reversed { direction: ltr; }\n .split-layout.reversed > * { direction: ltr; }\n}\n\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 .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 .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 \n .hero-title { font-size: 42px; }\n .content-section { padding: 80px 24px; }\n .process-grid::before { display: none; }\n}\n<\/style>\n<\/head>\n<body>\n\n<header class=\"header\" 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()\">\n Menu <span class=\"menuIcon\" id=\"menuIcon\">+<\/span>\n <\/button>\n <\/nav>\n<\/header>\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()\">\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: rgba(255,255,255,0.5);\">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\/\" style=\"color: #fff;\">Services<\/a>\n <button class=\"submenu-toggle-btn\" aria-label=\"Visa undertj\u00e4nster\" onclick=\"toggleSubmenu(event)\">\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\/\" style=\"color: #fff;\">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=\"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\n<section class=\"branding-hero\">\n <div class=\"container\" style=\"padding: 0 var(--pad);\">\n <h1 class=\"hero-title\">Branding som bygger igenk\u00e4nning och f\u00f6rtroende<\/h1>\n <p class=\"hero-ingress\">Vi hj\u00e4lper f\u00f6retag att skapa tydliga, konsekventa och h\u00e5llbara varum\u00e4rken \u2013 d\u00e4r strategi, design och digital n\u00e4rvaro samspelar f\u00f6r att driva aff\u00e4ren fram\u00e5t.<\/p>\n <a href=\"#intro\" class=\"btn-primary nav-animate\">L\u00e4s mer om branding<\/a>\n <\/div>\n \n <div class=\"hero-visual-abstract\"><\/div>\n<\/section>\n\n\n<section id=\"intro\" class=\"content-section\">\n <div class=\"container\">\n <div class=\"split-layout\">\n <div class=\"text-col\">\n <h2 class=\"section-title\">Mer \u00e4n en logotyp<\/h2>\n <p class=\"section-text\">M\u00e5nga s\u00e4tter likhetstecken mellan branding och en logotyp. F\u00f6r oss p\u00e5 Nordyn handlar det om mycket mer. Det \u00e4r helhetsk\u00e4nslan, er identitet, hur ni kommunicerar och hur ni upplevs i varje digital interaktion.<\/p>\n <p class=\"section-text\">Ett starkt varum\u00e4rke skapar inte bara igenk\u00e4nning, det bygger f\u00f6rtroende. Det \u00e4r fundamentet som all er marknadsf\u00f6ring och webbdesign ska vila p\u00e5 f\u00f6r att bli framg\u00e5ngsrik.<\/p>\n <\/div>\n <div class=\"visual-col\">\n <div class=\"visual-block visual-identity-art\">\n <div class=\"visual-circle\"><\/div>\n <span class=\"visual-type\">NORDYN.BRAND.SYS<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section darker\">\n <div class=\"container\">\n <div class=\"split-layout reversed\">\n <div class=\"text-col\">\n <h2 class=\"section-title\">En tydlig grund att bygga p\u00e5<\/h2>\n <p class=\"section-text\">Utan en strategi blir design bara dekoration. Vi arbetar djupt med att definiera er position p\u00e5 marknaden, er m\u00e5lgrupp och er unika tonalitet. Vi skapar visuella riktlinjer som h\u00e5ller \u00f6ver tid.<\/p>\n <p class=\"section-text\">Branding hos Nordyn utg\u00e5r alltid fr\u00e5n aff\u00e4rsm\u00e5l, inte kortlivade designtrender. Vi bygger varum\u00e4rken som \u00e4r redo att v\u00e4xa.<\/p>\n <\/div>\n <div class=\"visual-col\">\n <div class=\"visual-block visual-strategy-art\">\n <div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div>\n <div class=\"grid-cell\"><\/div><div class=\"grid-highlight\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div>\n <div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div>\n <div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div>\n <div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div><div class=\"grid-cell\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section\">\n <div class=\"container-narrow\" style=\"text-align: center;\">\n <h2 class=\"section-title\">Ett konsekvent och genomt\u00e4nkt uttryck<\/h2>\n <p class=\"section-text\">Vi tar fram kompletta grafiska profiler d\u00e4r f\u00e4rgpalett, typografi, layoutprinciper och bildspr\u00e5k samverkar. M\u00e5let \u00e4r att vem som helst ska k\u00e4nna igen ert f\u00f6retag, oavsett om de m\u00f6ter er p\u00e5 en faktura, i ett Instagram-inl\u00e4gg eller p\u00e5 er hemsida. Vi s\u00e4kerst\u00e4ller att designen \u00e4r flexibel och fungerar lika bra p\u00e5 webben som i tryck.<\/p>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section darker\">\n <div class=\"container\">\n <div class=\"split-layout\">\n <div class=\"text-col\">\n <h2 class=\"section-title\">Anpassat f\u00f6r webb och digital n\u00e4rvaro<\/h2>\n <p class=\"section-text\">Traditionella varum\u00e4rkesbyr\u00e5er gl\u00f6mmer ofta det digitala. Vi lever i det. Vi ser till att ert varum\u00e4rke implementeras s\u00f6ml\u00f6st i webbdesign, e-handel, gr\u00e4nssnitt och anv\u00e4ndarupplevelser.<\/p>\n <p class=\"section-text\">Det handlar inte bara om att loggan ska \"synas\" \u2013 det handlar om hur varum\u00e4rket \"k\u00e4nns\" n\u00e4r man klickar sig runt p\u00e5 sajten.<\/p>\n <\/div>\n <div class=\"visual-col\">\n <div class=\"visual-block visual-digital-art\">\n <div class=\"ui-frame\">\n <div class=\"ui-element\"><\/div>\n <div class=\"ui-btn-mock\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section\">\n <div class=\"container\">\n <h2 class=\"section-title\" style=\"margin-bottom: 50px;\">En strukturerad och kreativ process<\/h2>\n \n <div class=\"process-grid\">\n <div class=\"process-step\">\n <span class=\"step-number\">01<\/span>\n <h3 class=\"step-title\">Analys & F\u00f6rst\u00e5else<\/h3>\n <p class=\"step-desc\">Vi b\u00f6rjar med att lyssna. Vi kartl\u00e4gger nul\u00e4get, konkurrenter och era visioner.<\/p>\n <\/div>\n <div class=\"process-step\">\n <span class=\"step-number\">02<\/span>\n <h3 class=\"step-title\">Positionering<\/h3>\n <p class=\"step-desc\">Vi s\u00e4tter riktningen. Vad \u00e4r er unika f\u00f6rdel och vem pratar vi med?<\/p>\n <\/div>\n <div class=\"process-step\">\n <span class=\"step-number\">03<\/span>\n <h3 class=\"step-title\">Visuell Identitet<\/h3>\n <p class=\"step-desc\">Kreativt arbete d\u00e4r f\u00e4rg, form och typografi tar plats och bildar en helhet.<\/p>\n <\/div>\n <div class=\"process-step\">\n <span class=\"step-number\">04<\/span>\n <h3 class=\"step-title\">Implementering<\/h3>\n <p class=\"step-desc\">Vi applicerar identiteten digitalt. Webb, sociala medier och presentationer.<\/p>\n <\/div>\n <div class=\"process-step\">\n <span class=\"step-number\">05<\/span>\n <h3 class=\"step-title\">Leverans<\/h3>\n <p class=\"step-desc\">Dokumentation och riktlinjer s\u00e5 att ni enkelt kan arbeta vidare med ert varum\u00e4rke.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section darker\">\n <div class=\"container\">\n <h2 class=\"section-title\">F\u00f6r f\u00f6retag som vill sticka ut<\/h2>\n <div class=\"audience-grid\">\n <div class=\"audience-card\">\n <h3>Nya f\u00f6retag<\/h3>\n <p>F\u00f6r startups som beh\u00f6ver s\u00e4tta en professionell grund fr\u00e5n dag ett f\u00f6r att attrahera investerare och kunder.<\/p>\n <\/div>\n <div class=\"audience-card\">\n <h3>Rebranding<\/h3>\n <p>F\u00f6r etablerade bolag som vuxit ur sin kostym och beh\u00f6ver modernisera sitt uttryck f\u00f6r att spegla sin nuvarande kvalitet.<\/p>\n <\/div>\n <div class=\"audience-card\">\n <h3>Digitala varum\u00e4rken<\/h3>\n <p>F\u00f6r e-handel och tech-bolag d\u00e4r den digitala upplevelsen \u00e4r hela aff\u00e4ren.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section\">\n <div class=\"container\">\n <div class=\"split-layout\">\n <div class=\"text-col\">\n <h2 class=\"section-title\">Branding med l\u00e5ngsiktigt fokus<\/h2>\n <ul class=\"why-list\">\n <li class=\"why-item\">\n <svg class=\"check-icon\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n Strategi och design i balans\n <\/li>\n <li class=\"why-item\">\n <svg class=\"check-icon\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n Optimerat f\u00f6r digitala milj\u00f6er\n <\/li>\n <li class=\"why-item\">\n <svg class=\"check-icon\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n Konsekvent uttryck \u00f6ver alla kanaler\n <\/li>\n <li class=\"why-item\">\n <svg class=\"check-icon\" width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>\n Integrerat med webb & SEO\n <\/li>\n <\/ul>\n <\/div>\n <div class=\"visual-col\">\n \n <div class=\"visual-block\" style=\"background: linear-gradient(180deg, #111 0%, #000 100%); display:flex; align-items:center; justify-content:center;\">\n <div style=\"width: 60%; height: 60%; border: 1px solid rgba(255,255,255,0.1); transform: rotate(45deg);\"><\/div>\n <div style=\"width: 60%; height: 60%; border: 1px solid rgba(138,116,255,0.3); transform: rotate(45deg); position:absolute;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"content-section darker\" style=\"text-align: center; padding: 140px var(--pad);\">\n <div class=\"container-narrow\">\n <h2 class=\"section-title\">Redo att bygga ett varum\u00e4rke som h\u00e5ller \u00f6ver tid?<\/h2>\n <p class=\"section-text\">L\u00e5t oss ta ett f\u00f6ruts\u00e4ttningsl\u00f6st m\u00f6te om hur vi kan lyfta er visuella identitet.<\/p>\n <div style=\"margin-top: 40px;\">\n <a href=\"\/en\/kontakt\/\" class=\"btn-primary nav-animate\">Kontakta Nordyn <span class=\"arrow\">\u2192<\/span><\/a>\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 SCROLL EFFECT (Anpassad f\u00f6r content pages)\ndocument.addEventListener('DOMContentLoaded', (event) => {\n const header = document.getElementById('mainHeader');\n const headerTagline = document.getElementById('headerTagline');\n \n if (header) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) { \n header.classList.add('scrolled');\n if(headerTagline) headerTagline.classList.add('fade-out');\n } \n else { \n header.classList.remove('scrolled');\n if(headerTagline) headerTagline.classList.remove('fade-out');\n }\n });\n }\n});\n\n\/\/ FULLSCREEN MENU LOGIC\nconst menuToggle = document.getElementById(\"menuToggle\");\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\/\/ SUBMENU TOGGLE\nfunction toggleSubmenu(event) {\n event.preventDefault();\n event.stopPropagation();\n if (event.currentTarget) { event.currentTarget.blur(); }\n const menuItem = document.getElementById('servicesMenuItem');\n menuItem.classList.toggle('has-expanded');\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<\/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 Branding & Varum\u00e4rkesstrategi Digitalbyr\u00e5 \/ Webbbyr\u00e5 Stockholm Kontakta oss Meny + Digitalbyr\u00e5 \/ Webbbyr\u00e5 Stockholm Meny \u00d7 Startsida Case Tj\u00e4nster […]<\/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":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","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":"","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-1458","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1458","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=1458"}],"version-history":[{"count":13,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1458\/revisions"}],"predecessor-version":[{"id":1886,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1458\/revisions\/1886"}],"wp:attachment":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/media?parent=1458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}