designwebsite.ch \u2014 Premium Websites for Switzerland<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\n:root{\n --black:#0a0a0a;\n --white:#ffffff;\n --g50:#f9f9f9;\n --g100:#f2f2f2;\n --g200:#e4e4e4;\n --g300:#cccccc;\n --g400:#aaaaaa;\n --g600:#666666;\n --g800:#333333;\n --red:#e8001c;\n --ff-display:'Syne',sans-serif;\n --ff-body:'Outfit',sans-serif;\n}\nhtml{scroll-behavior:smooth}\nbody{font-family:var(--ff-body);background:var(--white);color:var(--black);overflow-x:hidden;-webkit-font-smoothing:antialiased}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hero{\n display:grid;\n grid-template-columns:1fr 1fr;\n min-height:100vh;\n padding:0;\n position:relative;\n background:var(--white);\n overflow:hidden;\n}\n\n.hero-left{\n display:flex;\n flex-direction:column;\n justify-content:center;\n padding:8rem 3rem 6rem 7rem;\n opacity:0;\n transform:translateY(30px);\n animation:slideUp .9s cubic-bezier(.22,1,.36,1) .1s forwards;\n}\n\n.badge{\n display:inline-flex;\n align-items:center;\n gap:7px;\n font-family:var(--ff-body);\n font-size:11px;\n font-weight:600;\n letter-spacing:.12em;\n text-transform:uppercase;\n color:var(--g600);\n margin-bottom:2.2rem;\n}\n.badge-dot{\n width:8px;height:8px;\n background:var(--red);\n border-radius:50%;\n}\n.badge-flag{font-size:14px}\n\n.hero-h1{\n font-family:var(--ff-display);\n font-size:clamp(2rem,3.2vw,3.4rem);\n font-weight:800;\n line-height:1.08;\n letter-spacing:-.03em;\n color:var(--black);\n margin-bottom:1.2rem;\n}\n.hero-h1 strong{font-weight:800}\n\n.hero-p{\n font-size:.9rem;\n font-weight:300;\n line-height:1.72;\n color:var(--g600);\n max-width:400px;\n margin-bottom:2rem;\n}\n\n.btn-row{display:flex;gap:12px;margin-bottom:2.4rem;flex-wrap:wrap}\n\n.btn-blk{\n padding:13px 28px;\n background:var(--black);\n color:var(--white);\n border:1.5px solid var(--black);\n border-radius:5px;\n font-family:var(--ff-body);\n font-size:14px;\n font-weight:600;\n cursor:pointer;\n text-decoration:none;\n display:inline-block;\n transition:all .22s ease;\n letter-spacing:.01em;\n}\n.btn-blk:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.18)}\n\n.btn-out{\n padding:13px 28px;\n background:transparent;\n color:var(--black);\n border:1.5px solid var(--g200);\n border-radius:5px;\n font-family:var(--ff-body);\n font-size:14px;\n font-weight:600;\n cursor:pointer;\n text-decoration:none;\n display:inline-block;\n transition:all .22s ease;\n letter-spacing:.01em;\n}\n.btn-out:hover{border-color:var(--black);transform:translateY(-1px)}\n\n.stars-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}\n.star-svg{width:16px;height:16px;fill:var(--black)}\n.score{font-family:var(--ff-display);font-size:15px;font-weight:700;color:var(--black)}\n.trust-sub{font-size:12px;color:var(--g400);letter-spacing:.02em}\n\n\/* HERO RIGHT *\/\n.hero-right{\n display:flex;\n align-items:center;\n justify-content:center;\n padding:4rem 5rem 4rem 2rem;\n position:relative;\n opacity:0;\n animation:fadeIn 1.1s ease .35s forwards;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CRANE SVG \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.crane-wrap{\n width:100%;\n max-width:580px;\n position:relative;\n}\n.crane-wrap svg{width:100%;height:auto;overflow:visible}\n\n\/* crane arm subtle sway *\/\n.crane-jib-group{\n transform-origin:265px 30px;\n animation:sway 8s ease-in-out infinite;\n}\n@keyframes sway{\n 0%,100%{transform:rotate(0deg)}\n 35%{transform:rotate(1.5deg)}\n 65%{transform:rotate(-1deg)}\n}\n\n\/* hook + WP logo swing *\/\n.hook-group{\n animation:hookSwing 6s ease-in-out infinite;\n transform-origin:370px 95px;\n}\n@keyframes hookSwing{\n 0%,100%{transform:rotate(0deg)}\n 25%{transform:rotate(2.5deg)}\n 75%{transform:rotate(-2deg)}\n}\n\n\/* screen build-in *\/\n.screen-group{\n opacity:0;\n animation:buildUp .9s cubic-bezier(.22,1,.36,1) .8s forwards;\n}\n@keyframes buildUp{\n from{opacity:0;transform:translateY(18px)}\n to{opacity:1;transform:translateY(0)}\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TRUST BAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.trust-bar{\n border-top:1px solid var(--g200);\n border-bottom:1px solid var(--g200);\n}\n.trust-inner{\n display:grid;\n grid-template-columns:repeat(6,1fr);\n}\n.trust-item{\n display:flex;\n flex-direction:column;\n align-items:flex-start;\n gap:6px;\n padding:2.4rem 2rem;\n border-right:1px solid var(--g200);\n transition:background .2s;\n opacity:0;\n transform:translateY(14px);\n animation:slideUp .6s cubic-bezier(.22,1,.36,1) forwards;\n}\n.trust-item:nth-child(1){animation-delay:.05s}\n.trust-item:nth-child(2){animation-delay:.1s}\n.trust-item:nth-child(3){animation-delay:.15s}\n.trust-item:nth-child(4){animation-delay:.2s}\n.trust-item:nth-child(5){animation-delay:.25s}\n.trust-item:nth-child(6){animation-delay:.3s;border-right:none}\n.trust-item:hover{background:var(--g50)}\n\n.ti-icon{\n width:28px;height:28px;\n stroke:var(--black);fill:none;\n stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;\n margin-bottom:4px;\n transition:transform .25s cubic-bezier(.22,1,.36,1);\n}\n.trust-item:hover .ti-icon{transform:scale(1.1)}\n\n.ti-name{\n font-family:var(--ff-display);\n font-size:12.5px;\n font-weight:700;\n color:var(--black);\n letter-spacing:.01em;\n}\n.ti-sub{font-size:11.5px;color:var(--g400);font-weight:300}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTL SECTION \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.intl{\n background:var(--g50);\n display:grid;\n grid-template-columns:1fr 1.3fr;\n min-height:560px;\n border-top:1px solid var(--g200);\n}\n\n.intl-left{\n display:flex;\n flex-direction:column;\n justify-content:center;\n padding:6rem 4rem 6rem 7rem;\n}\n\n.intl-h2{\n font-family:var(--ff-display);\n font-size:clamp(1.6rem,2.4vw,2.4rem);\n font-weight:800;\n line-height:1.1;\n letter-spacing:-.03em;\n color:var(--black);\n margin-bottom:1rem;\n}\n\n.intl-p{\n font-size:.875rem;\n font-weight:300;\n line-height:1.78;\n color:var(--g600);\n max-width:360px;\n margin-bottom:2.4rem;\n}\n\n.stat-row{\n display:flex;\n gap:3rem;\n}\n.stat-item{display:flex;flex-direction:column;gap:3px}\n.stat-icon{\n width:26px;height:26px;\n stroke:var(--black);fill:none;\n stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;\n margin-bottom:6px;\n}\n.stat-num{\n font-family:var(--ff-display);\n font-size:1.7rem;\n font-weight:800;\n letter-spacing:-.04em;\n color:var(--black);\n line-height:1;\n}\n.stat-label{font-size:11px;color:var(--g400);letter-spacing:.05em;text-transform:uppercase;font-weight:400}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 WORLD MAP \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.intl-right{\n display:flex;\n align-items:center;\n justify-content:center;\n padding:4rem 5rem 4rem 2rem;\n position:relative;\n}\n.map-wrap{position:relative;width:100%;max-width:600px}\n#mapCanvas{width:100%;height:auto;display:block;border-radius:6px;}\n\n\/* pin bounce *\/\n.map-pin{animation:pinDrop .5s cubic-bezier(.22,1,.36,1) both}\n.pin-ch{animation-delay:.2s}\n.pin-usa{animation-delay:.5s}\n.pin-ind{animation-delay:.7s}\n.pin-isr{animation-delay:.9s}\n.pin-aus{animation-delay:1.1s}\n\n@keyframes pinDrop{\n from{opacity:0;transform:translateY(-20px)}\n to{opacity:1;transform:translateY(0)}\n}\n\n\/* Switzerland red pulsing ring *\/\n.ch-ring{\n animation:chPulse 2.5s ease-in-out infinite;\n transform-origin:center;\n}\n@keyframes chPulse{\n 0%,100%{opacity:.6;r:12}\n 50%{opacity:.1;r:18}\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 KEYFRAMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@keyframes slideUp{\n to{opacity:1;transform:translateY(0)}\n}\n@keyframes fadeIn{\n to{opacity:1}\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 REVEAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.reveal{\n opacity:0;\n transform:translateY(24px);\n transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);\n}\n.reveal.vis{opacity:1;transform:translateY(0)}\n.reveal-d1{transition-delay:.12s}\n.reveal-d2{transition-delay:.24s}\n.reveal-d3{transition-delay:.36s}\n\n\/* Fallback: if JS observer doesn't fire (iframe\/sandbox), still show content *\/\n.intl-left, .intl-right, .stat-item{\n opacity:1 !important;\n transform:none !important;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media(max-width:900px){\n .hero{grid-template-columns:1fr}\n .hero-left{padding:6rem 2rem 2rem}\n .hero-right{padding:2rem 2rem 4rem}\n .trust-inner{grid-template-columns:repeat(3,1fr)}\n .trust-item:nth-child(3){border-right:none}\n .trust-item:nth-child(4){border-right:1px solid var(--g200);border-top:1px solid var(--g200)}\n .trust-item:nth-child(5){border-top:1px solid var(--g200)}\n .trust-item:nth-child(6){border-top:1px solid var(--g200);border-right:none}\n .intl{grid-template-columns:1fr}\n .intl-left{padding:5rem 2rem 2rem}\n .intl-right{padding:2rem 2rem 5rem}\n}\n<\/style>\n<\/head>\n<body>\n\n\n<section class=\"hero\">\n\n \n <div class=\"hero-left\">\n <div class=\"badge\">\n <span class=\"badge-dot\"><\/span>\n <span>New in Switzerland<\/span>\n <span class=\"badge-flag\">\ud83c\udde8\ud83c\udded<\/span>\n <\/div>\n\n <h1 class=\"hero-h1\">\n Premium Websites.<br>\n Unbeatable Prices.<br>\n Built for <strong>Switzerland.<\/strong>\n <\/h1>\n\n <p class=\"hero-p\">\n We are an international web design agency, now launching in Switzerland to help businesses grow online with stunning, high-performance websites at the most affordable prices.\n <\/p>\n\n <div class=\"btn-row\">\n <a href=\"#\" class=\"btn-blk\">View Packages<\/a>\n <a href=\"#\" class=\"btn-out\">Start Your Project<\/a>\n <\/div>\n\n <div class=\"stars-row\">\n <svg class=\"star-svg\" viewBox=\"0 0 20 20\"><polygon points=\"10,1 12.9,7 19.5,7.6 14.5,12 16.2,18.5 10,15 3.8,18.5 5.5,12 0.5,7.6 7.1,7\"\/><\/svg>\n <svg class=\"star-svg\" viewBox=\"0 0 20 20\"><polygon points=\"10,1 12.9,7 19.5,7.6 14.5,12 16.2,18.5 10,15 3.8,18.5 5.5,12 0.5,7.6 7.1,7\"\/><\/svg>\n <svg class=\"star-svg\" viewBox=\"0 0 20 20\"><polygon points=\"10,1 12.9,7 19.5,7.6 14.5,12 16.2,18.5 10,15 3.8,18.5 5.5,12 0.5,7.6 7.1,7\"\/><\/svg>\n <svg class=\"star-svg\" viewBox=\"0 0 20 20\"><polygon points=\"10,1 12.9,7 19.5,7.6 14.5,12 16.2,18.5 10,15 3.8,18.5 5.5,12 0.5,7.6 7.1,7\"\/><\/svg>\n <svg class=\"star-svg\" viewBox=\"0 0 20 20\"><polygon points=\"10,1 12.9,7 19.5,7.6 14.5,12 16.2,18.5 10,15 3.8,18.5 5.5,12 0.5,7.6 7.1,7\"\/><\/svg>\n <span class=\"score\">5.0<\/span>\n <\/div>\n <p class=\"trust-sub\">Trusted by businesses worldwide<\/p>\n <\/div>\n\n \n <div class=\"hero-right\">\n <div class=\"crane-wrap\">\n <svg viewBox=\"0 0 580 580\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <defs>\n \n <pattern id=\"grid\" width=\"30\" height=\"30\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M30 0L0 0 0 30\" fill=\"none\" stroke=\"#e8e8e8\" stroke-width=\".6\"\/>\n <\/pattern>\n <filter id=\"shadow\">\n <feDropShadow dx=\"0\" dy=\"6\" stdDeviation=\"8\" flood-color=\"#000\" flood-opacity=\".12\"\/>\n <\/filter>\n <filter id=\"shadow-sm\">\n <feDropShadow dx=\"0\" dy=\"3\" stdDeviation=\"4\" flood-color=\"#000\" flood-opacity=\".1\"\/>\n <\/filter>\n <\/defs>\n\n \n <rect width=\"580\" height=\"580\" fill=\"url(#grid)\"\/>\n\n \n <ellipse cx=\"295\" cy=\"548\" rx=\"200\" ry=\"14\" fill=\"#e0e0e0\" opacity=\".7\"\/>\n\n \n\n \n <rect x=\"220\" y=\"516\" width=\"150\" height=\"18\" rx=\"3\" fill=\"#111\" filter=\"url(#shadow-sm)\"\/>\n <rect x=\"234\" y=\"504\" width=\"10\" height=\"14\" fill=\"#222\"\/>\n <rect x=\"258\" y=\"504\" width=\"10\" height=\"14\" fill=\"#222\"\/>\n <rect x=\"312\" y=\"504\" width=\"10\" height=\"14\" fill=\"#222\"\/>\n <rect x=\"336\" y=\"504\" width=\"10\" height=\"14\" fill=\"#222\"\/>\n \n <line x1=\"234\" y1=\"504\" x2=\"346\" y2=\"518\" stroke=\"#333\" stroke-width=\"1.5\"\/>\n <line x1=\"346\" y1=\"504\" x2=\"234\" y2=\"518\" stroke=\"#333\" stroke-width=\"1.5\"\/>\n\n \n \n <rect x=\"268\" y=\"30\" width=\"11\" height=\"476\" fill=\"#0a0a0a\"\/>\n \n <rect x=\"301\" y=\"30\" width=\"11\" height=\"476\" fill=\"#0a0a0a\"\/>\n \n <g stroke=\"#1a1a1a\" stroke-width=\"1.4\" fill=\"none\">\n <line x1=\"279\" y1=\"80\" x2=\"301\" y2=\"100\"\/>\n <line x1=\"279\" y1=\"100\" x2=\"301\" y2=\"80\"\/>\n <line x1=\"279\" y1=\"140\" x2=\"301\" y2=\"160\"\/>\n <line x1=\"279\" y1=\"160\" x2=\"301\" y2=\"140\"\/>\n <line x1=\"279\" y1=\"200\" x2=\"301\" y2=\"220\"\/>\n <line x1=\"279\" y1=\"220\" x2=\"301\" y2=\"200\"\/>\n <line x1=\"279\" y1=\"260\" x2=\"301\" y2=\"280\"\/>\n <line x1=\"279\" y1=\"280\" x2=\"301\" y2=\"260\"\/>\n <line x1=\"279\" y1=\"320\" x2=\"301\" y2=\"340\"\/>\n <line x1=\"279\" y1=\"340\" x2=\"301\" y2=\"320\"\/>\n <line x1=\"279\" y1=\"380\" x2=\"301\" y2=\"400\"\/>\n <line x1=\"279\" y1=\"400\" x2=\"301\" y2=\"380\"\/>\n <line x1=\"279\" y1=\"440\" x2=\"301\" y2=\"460\"\/>\n <line x1=\"279\" y1=\"460\" x2=\"301\" y2=\"440\"\/>\n <\/g>\n\n \n <g class=\"crane-jib-group\">\n \n \n <line x1=\"279\" y1=\"42\" x2=\"530\" y2=\"55\" stroke=\"#0a0a0a\" stroke-width=\"9\" stroke-linecap=\"round\"\/>\n \n <line x1=\"279\" y1=\"28\" x2=\"530\" y2=\"40\" stroke=\"#0a0a0a\" stroke-width=\"6\" stroke-linecap=\"round\"\/>\n \n <g stroke=\"#333\" stroke-width=\"1.2\">\n <line x1=\"320\" y1=\"28\" x2=\"340\" y2=\"55\"\/>\n <line x1=\"340\" y1=\"28\" x2=\"320\" y2=\"55\"\/>\n <line x1=\"370\" y1=\"30\" x2=\"390\" y2=\"55\"\/>\n <line x1=\"390\" y1=\"30\" x2=\"370\" y2=\"55\"\/>\n <line x1=\"420\" y1=\"32\" x2=\"440\" y2=\"55\"\/>\n <line x1=\"440\" y1=\"32\" x2=\"420\" y2=\"55\"\/>\n <line x1=\"470\" y1=\"34\" x2=\"490\" y2=\"56\"\/>\n <line x1=\"490\" y1=\"34\" x2=\"470\" y2=\"56\"\/>\n <line x1=\"505\" y1=\"35\" x2=\"520\" y2=\"56\"\/>\n <\/g>\n\n \n <line x1=\"279\" y1=\"42\" x2=\"140\" y2=\"54\" stroke=\"#0a0a0a\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n <line x1=\"279\" y1=\"28\" x2=\"140\" y2=\"38\" stroke=\"#0a0a0a\" stroke-width=\"5\" stroke-linecap=\"round\"\/>\n <g stroke=\"#333\" stroke-width=\"1.2\">\n <line x1=\"230\" y1=\"28\" x2=\"210\" y2=\"54\"\/>\n <line x1=\"210\" y1=\"28\" x2=\"230\" y2=\"54\"\/>\n <line x1=\"180\" y1=\"30\" x2=\"160\" y2=\"54\"\/>\n <line x1=\"160\" y1=\"30\" x2=\"180\" y2=\"54\"\/>\n <\/g>\n\n \n <rect x=\"118\" y=\"52\" width=\"30\" height=\"18\" rx=\"2\" fill=\"#111\"\/>\n <rect x=\"122\" y=\"56\" width=\"8\" height=\"10\" fill=\"#2a2a2a\"\/>\n <rect x=\"133\" y=\"56\" width=\"8\" height=\"10\" fill=\"#2a2a2a\"\/>\n\n \n <rect x=\"260\" y=\"18\" width=\"60\" height=\"18\" rx=\"3\" fill=\"#111\"\/>\n \n <polygon points=\"290,4 260,18 320,18\" fill=\"#0a0a0a\"\/>\n\n \n <rect x=\"260\" y=\"46\" width=\"45\" height=\"34\" rx=\"3\" fill=\"#111\" filter=\"url(#shadow-sm)\"\/>\n \n <rect x=\"266\" y=\"52\" width=\"12\" height=\"9\" rx=\"1.5\" fill=\"#e8e8e8\" opacity=\".3\"\/>\n <rect x=\"282\" y=\"52\" width=\"12\" height=\"9\" rx=\"1.5\" fill=\"#e8e8e8\" opacity=\".3\"\/>\n <rect x=\"266\" y=\"65\" width=\"12\" height=\"9\" rx=\"1.5\" fill=\"#e8e8e8\" opacity=\".15\"\/>\n <rect x=\"282\" y=\"65\" width=\"12\" height=\"9\" rx=\"1.5\" fill=\"#e8e8e8\" opacity=\".15\"\/>\n\n \n <rect x=\"370\" y=\"47\" width=\"20\" height=\"12\" rx=\"2\" fill=\"#444\"\/>\n <circle cx=\"376\" cy=\"46\" r=\"3\" fill=\"#666\"\/>\n <circle cx=\"386\" cy=\"46\" r=\"3\" fill=\"#666\"\/>\n\n \n <g class=\"hook-group\">\n \n <line x1=\"380\" y1=\"59\" x2=\"380\" y2=\"130\" stroke=\"#555\" stroke-width=\"2\" stroke-dasharray=\"none\"\/>\n <line x1=\"376\" y1=\"59\" x2=\"376\" y2=\"130\" stroke=\"#888\" stroke-width=\"1\"\/>\n\n \n <rect x=\"370\" y=\"130\" width=\"20\" height=\"12\" rx=\"2\" fill=\"#333\"\/>\n \n <path d=\"M 378 142 Q 360 155 362 168 Q 364 180 376 180 Q 390 180 392 168\" \n stroke=\"#222\" stroke-width=\"3.5\" fill=\"none\" stroke-linecap=\"round\"\/>\n <circle cx=\"382\" cy=\"180\" r=\"3\" fill=\"#333\"\/>\n\n \n <g transform=\"translate(332, 182)\" filter=\"url(#shadow)\">\n <circle cx=\"48\" cy=\"48\" r=\"47\" fill=\"#21759b\"\/>\n <circle cx=\"48\" cy=\"48\" r=\"47\" fill=\"none\" stroke=\"#1a5f80\" stroke-width=\"2.5\"\/>\n <circle cx=\"48\" cy=\"48\" r=\"40\" fill=\"none\" stroke=\"rgba(255,255,255,0.18)\" stroke-width=\"1.5\"\/>\n <text x=\"48\" y=\"62\"\n font-family=\"'Syne','Outfit',Arial,sans-serif\"\n font-size=\"54\"\n font-weight=\"800\"\n fill=\"white\"\n text-anchor=\"middle\"\n letter-spacing=\"-3\">W<\/text>\n <\/g>\n <\/g>\n\n \n <line x1=\"290\" y1=\"18\" x2=\"530\" y2=\"55\" stroke=\"#555\" stroke-width=\"1.2\"\/>\n <line x1=\"290\" y1=\"18\" x2=\"140\" y2=\"54\" stroke=\"#555\" stroke-width=\"1.2\"\/>\n <\/g>\n\n \n <g class=\"screen-group\" filter=\"url(#shadow)\">\n \n <rect x=\"96\" y=\"380\" width=\"290\" height=\"190\" rx=\"6\" fill=\"#f0f0f0\" stroke=\"#d0d0d0\" stroke-width=\"1\"\/>\n \n <rect x=\"104\" y=\"388\" width=\"274\" height=\"158\" rx=\"3\" fill=\"white\"\/>\n \n \n \n <rect x=\"104\" y=\"388\" width=\"274\" height=\"22\" rx=\"3\" fill=\"#0a0a0a\"\/>\n <rect x=\"112\" y=\"394\" width=\"36\" height=\"10\" rx=\"2\" fill=\"white\" opacity=\".25\"\/>\n <rect x=\"272\" y=\"394\" width=\"20\" height=\"10\" rx=\"2\" fill=\"white\" opacity=\".15\"\/>\n <rect x=\"298\" y=\"394\" width=\"20\" height=\"10\" rx=\"2\" fill=\"white\" opacity=\".1\"\/>\n <rect x=\"324\" y=\"394\" width=\"20\" height=\"10\" rx=\"2\" fill=\"white\" opacity=\".1\"\/>\n <rect x=\"350\" y=\"394\" width=\"20\" height=\"10\" rx=\"2\" fill=\"white\" opacity=\".1\"\/>\n \n \n <rect x=\"104\" y=\"410\" width=\"274\" height=\"80\" fill=\"#fafafa\"\/>\n \n <rect x=\"116\" y=\"420\" width=\"100\" height=\"9\" rx=\"2\" fill=\"#d0d0d0\"\/>\n <rect x=\"116\" y=\"434\" width=\"80\" height=\"7\" rx=\"2\" fill=\"#e0e0e0\"\/>\n <rect x=\"116\" y=\"445\" width=\"60\" height=\"7\" rx=\"2\" fill=\"#e8e8e8\"\/>\n \n <rect x=\"116\" y=\"458\" width=\"56\" height=\"16\" rx=\"3\" fill=\"#0a0a0a\"\/>\n <rect x=\"176\" y=\"458\" width=\"48\" height=\"16\" rx=\"3\" fill=\"none\" stroke=\"#d0d0d0\" stroke-width=\"1\"\/>\n \n <rect x=\"254\" y=\"413\" width=\"114\" height=\"72\" rx=\"3\" fill=\"#e8e8e8\"\/>\n \n <line x1=\"254\" y1=\"413\" x2=\"368\" y2=\"485\" stroke=\"#d0d0d0\" stroke-width=\"1\"\/>\n <line x1=\"368\" y1=\"413\" x2=\"254\" y2=\"485\" stroke=\"#d0d0d0\" stroke-width=\"1\"\/>\n \n \n <rect x=\"104\" y=\"490\" width=\"274\" height=\"56\" fill=\"white\" stroke=\"#ebebeb\" stroke-width=\"1\"\/>\n \n <rect x=\"114\" y=\"498\" width=\"74\" height=\"40\" rx=\"3\" fill=\"#fafafa\" stroke=\"#ebebeb\" stroke-width=\"1\"\/>\n <rect x=\"198\" y=\"498\" width=\"74\" height=\"40\" rx=\"3\" fill=\"#fafafa\" stroke=\"#ebebeb\" stroke-width=\"1\"\/>\n <rect x=\"282\" y=\"498\" width=\"74\" height=\"40\" rx=\"3\" fill=\"#fafafa\" stroke=\"#ebebeb\" stroke-width=\"1\"\/>\n \n <rect x=\"122\" y=\"504\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#e0e0e0\"\/>\n <rect x=\"206\" y=\"504\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#e0e0e0\"\/>\n <rect x=\"290\" y=\"504\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#e0e0e0\"\/>\n <rect x=\"122\" y=\"522\" width=\"40\" height=\"5\" rx=\"1\" fill=\"#e8e8e8\"\/>\n <rect x=\"206\" y=\"522\" width=\"40\" height=\"5\" rx=\"1\" fill=\"#e8e8e8\"\/>\n <rect x=\"290\" y=\"522\" width=\"40\" height=\"5\" rx=\"1\" fill=\"#e8e8e8\"\/>\n\n \n <rect x=\"96\" y=\"568\" width=\"290\" height=\"8\" rx=\"2\" fill=\"#c8c8c8\"\/>\n \n <rect x=\"80\" y=\"572\" width=\"322\" height=\"12\" rx=\"6\" fill=\"#c8c8c8\"\/>\n \n <ellipse cx=\"241\" cy=\"580\" rx=\"155\" ry=\"6\" fill=\"#b0b0b0\" opacity=\".5\"\/>\n <\/g>\n\n \n <g fill=\"#555\" opacity=\".5\">\n \n <circle cx=\"430\" cy=\"536\" r=\"4\"\/>\n <line x1=\"430\" y1=\"540\" x2=\"430\" y2=\"558\" stroke=\"#555\" stroke-width=\"2.5\"\/>\n <line x1=\"418\" y1=\"548\" x2=\"442\" y2=\"548\" stroke=\"#555\" stroke-width=\"2\"\/>\n <line x1=\"430\" y1=\"558\" x2=\"420\" y2=\"572\" stroke=\"#555\" stroke-width=\"2\"\/>\n <line x1=\"430\" y1=\"558\" x2=\"440\" y2=\"572\" stroke=\"#555\" stroke-width=\"2\"\/>\n \n <path d=\"M426 532 Q430 526 434 532\" stroke=\"#333\" stroke-width=\"2\" fill=\"#888\"\/>\n <\/g>\n\n \n <g fill=\"#bbb\" opacity=\".3\">\n <circle cx=\"50\" cy=\"50\" r=\"1.5\"\/>\n <circle cx=\"80\" cy=\"50\" r=\"1.5\"\/>\n <circle cx=\"50\" cy=\"80\" r=\"1.5\"\/>\n <circle cx=\"520\" cy=\"480\" r=\"1.5\"\/>\n <circle cx=\"550\" cy=\"480\" r=\"1.5\"\/>\n <circle cx=\"520\" cy=\"510\" r=\"1.5\"\/>\n <\/g>\n <\/svg>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"trust-bar\">\n <div class=\"trust-inner\">\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"9.5\"\/>\n <path d=\"M2.5 12h19M12 2.5a14.5 14.5 0 010 19M12 2.5a14.5 14.5 0 000 19\"\/>\n <\/svg>\n <span class=\"ti-name\">Domain Included<\/span>\n <span class=\"ti-sub\">.ch or custom domain<\/span>\n <\/div>\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"12\" rx=\"2\"\/>\n <path d=\"M6 20h12M12 14v6\"\/>\n <path d=\"M5 7h3M5 10h6\"\/>\n <\/svg>\n <span class=\"ti-name\">Hosting Included<\/span>\n <span class=\"ti-sub\">Fast & Secure<\/span>\n <\/div>\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <rect x=\"7\" y=\"1\" width=\"10\" height=\"18\" rx=\"2\"\/>\n <line x1=\"10\" y1=\"21\" x2=\"14\" y2=\"21\"\/>\n <circle cx=\"12\" cy=\"16\" r=\".8\" fill=\"#0a0a0a\"\/>\n <\/svg>\n <span class=\"ti-name\">Mobile Optimized<\/span>\n <span class=\"ti-sub\">Perfect on every device<\/span>\n <\/div>\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"7.5\"\/>\n <path d=\"M21 21l-4-4\"\/>\n <path d=\"M10.5 7v3.5l2.5 2.5\"\/>\n <\/svg>\n <span class=\"ti-name\">SEO Ready<\/span>\n <span class=\"ti-sub\">Rank higher on Google<\/span>\n <\/div>\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M12 2L2 13h7l-1 9 12-13h-7l1-7z\"\/>\n <\/svg>\n <span class=\"ti-name\">Fast Delivery<\/span>\n <span class=\"ti-sub\">On-time guarantee<\/span>\n <\/div>\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n <path d=\"M9 12l2 2 4-4\"\/>\n <\/svg>\n <span class=\"ti-name\">Support 24\/7<\/span>\n <span class=\"ti-sub\">We're here for you<\/span>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<section class=\"intl\" id=\"intl\">\n\n <div class=\"intl-left reveal\" id=\"intlLeft\">\n <h2 class=\"intl-h2\">An International Brand.<br>Now in Switzerland.<\/h2>\n <p class=\"intl-p\">DesignWebsite is a global web solutions company with happy clients in multiple countries.<br><br>Now, we're bringing world-class web design services within everyone's reach in Switzerland.<\/p>\n\n <div class=\"stat-row\">\n <div class=\"stat-item reveal reveal-d1\" id=\"s1\">\n <svg class=\"stat-icon\" viewBox=\"0 0 24 24\">\n <polygon points=\"12,2 15.1,8.3 22,9.3 17,14.1 18.2,21 12,17.8 5.8,21 7,14.1 2,9.3 8.9,8.3\"\/>\n <\/svg>\n <span class=\"stat-num\" data-target=\"500\" data-suffix=\"+\">500+<\/span>\n <span class=\"stat-label\">Projects Completed<\/span>\n <\/div>\n <div class=\"stat-item reveal reveal-d2\" id=\"s2\">\n <svg class=\"stat-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/>\n <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n <path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/>\n <\/svg>\n <span class=\"stat-num\" data-target=\"250\" data-suffix=\"+\">250+<\/span>\n <span class=\"stat-label\">Happy Clients<\/span>\n <\/div>\n <div class=\"stat-item reveal reveal-d3\" id=\"s3\">\n <svg class=\"stat-icon\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <path d=\"M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20\"\/>\n <\/svg>\n <span class=\"stat-num\" data-target=\"10\" data-suffix=\"+\">10+<\/span>\n <span class=\"stat-label\">Countries Served<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"intl-right reveal\" id=\"intlRight\" style=\"transition-delay:.18s\">\n <div class=\"map-wrap\" id=\"mapWrap\">\n \n <img decoding=\"async\" id=\"mapImg\"\n src=\"https:\/\/raw.githubusercontent.com\/johan\/world.geo.json\/master\/countries.geo.json\"\n alt=\"\" style=\"display:none\"\/>\n \n <canvas id=\"mapCanvas\" style=\"width:100%;height:auto;display:block;border-radius:8px;\"><\/canvas>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n\/\/ \u2500\u2500 Scroll reveal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst obs = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if(e.isIntersecting){ e.target.classList.add('vis'); obs.unobserve(e.target); }\n });\n},{threshold:.12});\ndocument.querySelectorAll('.reveal').forEach(el => obs.observe(el));\n\n\/\/ \u2500\u2500 Counter animation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction counter(el, target, suffix, duration){\n let start = null;\n const step = ts => {\n if(!start) start = ts;\n const p = Math.min((ts-start)\/duration, 1);\n const eased = 1 - Math.pow(1-p, 3);\n el.textContent = Math.floor(eased * target) + suffix;\n if(p < 1) requestAnimationFrame(step);\n };\n requestAnimationFrame(step);\n}\nconst statsObs = new IntersectionObserver(entries=>{\n entries.forEach(e=>{\n if(e.isIntersecting){\n document.querySelectorAll('.stat-num').forEach(n=>{\n counter(n, +n.dataset.target, n.dataset.suffix, 1600);\n });\n statsObs.disconnect();\n }\n });\n},{threshold:.2});\nconst statsSection = document.querySelector('.stat-row');\nif(statsSection) statsObs.observe(statsSection);\n\n\/\/ \u2500\u2500 World Map via GeoJSON + Canvas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst W = 900, H = 500;\nconst canvas = document.getElementById('mapCanvas');\ncanvas.width = W; canvas.height = H;\nconst ctx = canvas.getContext('2d');\n\n\/\/ Mercator projection\nfunction project(lon, lat){\n const x = (lon + 180) \/ 360 * W;\n const latRad = lat * Math.PI \/ 180;\n const mercN = Math.log(Math.tan(Math.PI\/4 + latRad\/2));\n const y = H\/2 - (mercN * H \/ (2 * Math.PI)) * 0.88 + 30;\n return [x, y];\n}\n\n\/\/ Location pins data [lon, lat, label, isSwiss]\nconst pins = [\n [8.5417, 47.3769, 'Switzerland', true],\n [-98.5795, 39.8283,'USA', false],\n [78.9629, 20.5937,'India', false],\n [34.8516, 31.0461,'Israel', false],\n [133.7751,-25.2744,'Australia', false],\n];\n\n\/\/ Draw function\nfunction drawMap(geo){\n ctx.clearRect(0,0,W,H);\n\n \/\/ Draw countries\n geo.features.forEach(f => {\n ctx.beginPath();\n const geom = f.geometry;\n const polys = geom.type === 'Polygon'\n ? [geom.coordinates]\n : geom.type === 'MultiPolygon'\n ? geom.coordinates\n : [];\n\n polys.forEach(poly => {\n poly.forEach(ring => {\n ring.forEach(([lon,lat], i) => {\n const [x,y] = project(lon,lat);\n i === 0 ? ctx.moveTo(x,y) : ctx.lineTo(x,y);\n });\n ctx.closePath();\n });\n });\n\n ctx.fillStyle = '#e4e4e4';\n ctx.fill();\n ctx.strokeStyle = '#c8c8c8';\n ctx.lineWidth = 0.5;\n ctx.stroke();\n });\n\n \/\/ Draw connection arcs from Switzerland to others\n const [swx, swy] = project(pins[0][0], pins[0][1]);\n pins.slice(1).forEach(([lon,lat]) => {\n const [px,py] = project(lon,lat);\n const mx = (swx+px)\/2;\n const my = Math.min(swy,py) - 80;\n ctx.beginPath();\n ctx.moveTo(swx,swy);\n ctx.quadraticCurveTo(mx,my,px,py);\n ctx.strokeStyle = 'rgba(0,0,0,0.2)';\n ctx.lineWidth = 1.2;\n ctx.setLineDash([5,4]);\n ctx.stroke();\n ctx.setLineDash([]);\n });\n\n \/\/ Draw pins\n pins.forEach(([lon,lat,label,isSwiss], idx) => {\n const [px,py] = project(lon,lat);\n const pinH = isSwiss ? 34 : 28;\n const pinR = isSwiss ? 7 : 5;\n const pinColor = isSwiss ? '#e8001c' : '#111111';\n\n \/\/ drop shadow\n ctx.save();\n ctx.shadowColor = 'rgba(0,0,0,0.3)';\n ctx.shadowBlur = 8;\n ctx.shadowOffsetY = 4;\n\n \/\/ pin teardrop\n ctx.beginPath();\n ctx.arc(px, py - pinH + pinR, pinR, 0, 2*Math.PI);\n ctx.fillStyle = pinColor;\n ctx.fill();\n\n ctx.beginPath();\n ctx.moveTo(px - pinR * 0.7, py - pinH + pinR);\n ctx.lineTo(px, py);\n ctx.lineTo(px + pinR * 0.7, py - pinH + pinR);\n ctx.fillStyle = pinColor;\n ctx.fill();\n ctx.restore();\n\n \/\/ white dot inside pin\n ctx.beginPath();\n ctx.arc(px, py - pinH + pinR, pinR * 0.45, 0, 2*Math.PI);\n ctx.fillStyle = 'white';\n ctx.fill();\n\n \/\/ Swiss pulsing ring (drawn statically, animation via CSS below)\n if(isSwiss){\n ctx.beginPath();\n ctx.arc(px, py - 4, 16, 0, 2*Math.PI);\n ctx.strokeStyle = 'rgba(232,0,28,0.35)';\n ctx.lineWidth = 1.5;\n ctx.stroke();\n }\n\n \/\/ label pill\n const font = isSwiss ? 'bold 11px Outfit,sans-serif' : '500 10px Outfit,sans-serif';\n ctx.font = font;\n const tw = ctx.measureText(label).width;\n const ph = 18, pw = tw + 20, pr = 9;\n const lx = px - pw\/2, ly = py - pinH - ph - 6;\n\n ctx.save();\n ctx.shadowColor = 'rgba(0,0,0,0.15)';\n ctx.shadowBlur = 6;\n ctx.shadowOffsetY = 2;\n ctx.beginPath();\n ctx.roundRect(lx, ly, pw, ph, pr);\n ctx.fillStyle = isSwiss ? '#e8001c' : 'rgba(17,17,17,0.88)';\n ctx.fill();\n ctx.restore();\n\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.font = font;\n ctx.fillText(label, px, ly + ph\/2);\n\n \/\/ small flag for Switzerland\n if(isSwiss){\n ctx.font = '12px serif';\n ctx.fillText('\ud83c\udde8\ud83c\udded', px + tw\/2 + 6, ly + ph\/2);\n }\n });\n}\n\n\/\/ Fetch GeoJSON and render\nfetch('https:\/\/raw.githubusercontent.com\/nvkelso\/natural-earth-vector\/master\/geojson\/ne_110m_admin_0_countries.geojson')\n .then(r => r.json())\n .then(geo => {\n drawMap(geo);\n \/\/ Animate arcs on scroll\n const sectionObs = new IntersectionObserver(entries=>{\n entries.forEach(e=>{\n if(e.isIntersecting){ drawMap(geo); sectionObs.disconnect(); }\n });\n },{threshold:.2});\n const sect = document.getElementById('intl');\n if(sect) sectionObs.observe(sect);\n })\n .catch(() => {\n \/\/ Fallback: draw a placeholder message\n ctx.fillStyle = '#f2f2f2';\n ctx.fillRect(0,0,W,H);\n ctx.fillStyle = '#aaa';\n ctx.font = '16px Outfit,sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('World map loading...', W\/2, H\/2);\n });\n<\/script>\n\n\n<section class=\"why\" id=\"why\">\n <div class=\"why-inner\">\n <div class=\"sec-label\">Why Us<\/div>\n <h2 class=\"sec-h2\">Why Businesses Choose DesignWebsite<\/h2>\n <p class=\"sec-sub\">Premium quality websites at prices that challenge traditional agency costs.<\/p>\n <div class=\"why-grid\">\n\n <div class=\"why-card sc-reveal\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><path d=\"M8 14s1 2 4 2 4-2 4-2\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">Affordable Swiss Pricing<\/h3>\n <p class=\"why-desc\">World-class website quality at a fraction of traditional Swiss agency costs \u2014 no compromise on output.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.08s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">Premium Modern Design<\/h3>\n <p class=\"why-desc\">Every website is crafted with international design standards \u2014 clean, modern, and built to impress.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.16s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">Domain & Hosting Included<\/h3>\n <p class=\"why-desc\">Everything bundled \u2014 your domain and fast, secure Swiss-grade hosting included in every package.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.24s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">Fast Delivery<\/h3>\n <p class=\"why-desc\">We move fast. Your website goes live in days, not months \u2014 without sacrificing quality.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.32s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14\"\/><path d=\"M15.54 8.46a5 5 0 010 7.07M8.46 8.46a5 5 0 000 7.07\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">WordPress Experts<\/h3>\n <p class=\"why-desc\">Deep expertise in WordPress \u2014 flexible, scalable sites that are easy for you to manage after launch.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.4s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"M21 21l-4.35-4.35\"\/><path d=\"M11 8v3l2 2\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">SEO Optimized<\/h3>\n <p class=\"why-desc\">Built to rank from day one \u2014 every site comes structured with proper SEO foundations for Google.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.48s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/><path d=\"M8 10h8M8 14h4\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">Multilingual Support<\/h3>\n <p class=\"why-desc\">Reach more customers \u2014 we build websites in English, German, French, Italian and more for the Swiss market.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.56s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><path d=\"M9 12l2 2 4-4\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">International Experience<\/h3>\n <p class=\"why-desc\">500+ projects across 10+ countries. We bring global best practices directly to your Swiss business.<\/p>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"portfolio\" id=\"portfolio\">\n <div class=\"portfolio-inner\">\n <div class=\"sec-label\">Our Work<\/div>\n <h2 class=\"sec-h2\">Selected Client Work<\/h2>\n <p class=\"sec-sub\">A collection of websites designed for businesses, organizations, and growing brands.<\/p>\n <div class=\"port-grid\">\n\n <a href=\"https:\/\/www.tinaramchandani.com\/\" target=\"_blank\" class=\"port-card sc-reveal\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/shekeltech.com\/wp-content\/uploads\/2025\/04\/s3.webp\" alt=\"Tina Ramchandani\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Personal Brand<\/span>\n <h3 class=\"port-title\">Tina Ramchandani<\/h3>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/www.whistledrive.com\/\" target=\"_blank\" class=\"port-card sc-reveal\" style=\"--d:.08s\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/shekeltech.com\/wp-content\/uploads\/2025\/04\/s5.webp\" alt=\"WhistleDrive\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Corporate<\/span>\n <h3 class=\"port-title\">WhistleDrive<\/h3>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/jagaviskritunga.in\/\" target=\"_blank\" class=\"port-card sc-reveal\" style=\"--d:.16s\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/shekeltech.com\/wp-content\/uploads\/2025\/04\/s4.webp\" alt=\"Jagavis Kritunga\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Organisation<\/span>\n <h3 class=\"port-title\">Jagavis Kritunga<\/h3>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/www.chennaisuperkings.com\/\" target=\"_blank\" class=\"port-card sc-reveal\" style=\"--d:.24s\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/shekeltech.com\/wp-content\/uploads\/2025\/04\/s6.webp\" alt=\"Chennai Super Kings\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Sports Brand<\/span>\n <h3 class=\"port-title\">Chennai Super Kings<\/h3>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/www.bhashyamschools.com\/\" target=\"_blank\" class=\"port-card sc-reveal\" style=\"--d:.32s\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/shekeltech.com\/wp-content\/uploads\/2025\/04\/S2.webp\" alt=\"Bhashyam Schools\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Education<\/span>\n <h3 class=\"port-title\">Bhashyam Schools<\/h3>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/hajipapa.com\/\" target=\"_blank\" class=\"port-card sc-reveal\" style=\"--d:.4s\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/plain-apac-prod-public.komododecks.com\/202605\/27\/3zYNVOSyRJsGIu2gAUTT\/image.png\" alt=\"Haji Papa\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Restaurant<\/span>\n <h3 class=\"port-title\">Haji Papa<\/h3>\n <\/div>\n <\/a>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"pricing\" id=\"pricing\">\n <div class=\"pricing-inner\">\n <div class=\"sec-label\">Pricing<\/div>\n <h2 class=\"sec-h2\">Affordable Premium Website Packages<\/h2>\n <p class=\"sec-sub\">Transparent pricing. Premium quality. No hidden costs.<\/p>\n <div class=\"pricing-badge\">Designed to challenge traditional Swiss agency pricing.<\/div>\n\n <div class=\"plans-grid\">\n\n \n <div class=\"plan-card sc-reveal\">\n <div class=\"plan-top\">\n <span class=\"plan-name\">Starter<\/span>\n <div class=\"plan-price\"><span class=\"plan-currency\">CHF<\/span>599<\/div>\n <p class=\"plan-for\">For startups & small businesses just getting online.<\/p>\n <\/div>\n <ul class=\"plan-list\">\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Domain Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Hosting Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>2 Page Website<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Mobile Responsive<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Contact Form<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Basic SEO Setup<\/li>\n <li class=\"plan-list-muted\"><svg viewBox=\"0 0 16 16\"><line x1=\"3\" y1=\"8\" x2=\"13\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>No Ecommerce<\/li>\n <li class=\"plan-list-muted\"><svg viewBox=\"0 0 16 16\"><line x1=\"3\" y1=\"8\" x2=\"13\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>No WhatsApp Integration<\/li>\n <li class=\"plan-list-muted\"><svg viewBox=\"0 0 16 16\"><line x1=\"3\" y1=\"8\" x2=\"13\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>No Speed Optimization<\/li>\n <\/ul>\n <button class=\"plan-btn plan-btn-out\" onclick=\"openModal('Starter \u2013 599 CHF')\">Order Now<\/button>\n <\/div>\n\n \n <div class=\"plan-card plan-pro sc-reveal\" style=\"--d:.1s\">\n <div class=\"plan-popular\">\u2b50 Most Popular<\/div>\n <div class=\"plan-top\">\n <span class=\"plan-name plan-name-pro\">Pro<\/span>\n <div class=\"plan-price plan-price-pro\"><span class=\"plan-currency plan-currency-pro\">CHF<\/span>1499<\/div>\n <p class=\"plan-for plan-for-pro\">The complete package. Everything your business needs to win online.<\/p>\n <\/div>\n <ul class=\"plan-list plan-list-pro\">\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Domain & Hosting Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Up to 8 Pages<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Ecommerce Integration<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Payment Gateway Setup<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>WhatsApp Integration<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Advanced SEO + Schema<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Google Analytics Setup<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Social Media Integration<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Speed & Performance Optimization<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>SSL Certificate Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Multilingual Ready<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Priority Delivery<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>3 Months Free Support<\/li>\n <\/ul>\n <div class=\"pro-value-tag\">\ud83c\udf81 Best Value \u2014 Save vs. Agency<\/div>\n <button class=\"plan-btn plan-btn-pro\" onclick=\"openModal('Pro \u2013 1499 CHF')\">Get Started \u2192<\/button>\n <\/div>\n\n \n <div class=\"plan-card sc-reveal\" style=\"--d:.2s\">\n <div class=\"plan-top\">\n <span class=\"plan-name\">Standard<\/span>\n <div class=\"plan-price\"><span class=\"plan-currency\">CHF<\/span>999<\/div>\n <p class=\"plan-for\">For growing businesses that need more pages and integrations.<\/p>\n <\/div>\n <ul class=\"plan-list\">\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Domain Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Hosting Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Up to 5 Pages<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Mobile Responsive<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>WhatsApp Integration<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Social Media Integration<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>SEO Ready<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Speed Optimization<\/li>\n <li class=\"plan-list-muted\"><svg viewBox=\"0 0 16 16\"><line x1=\"3\" y1=\"8\" x2=\"13\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>No Ecommerce<\/li>\n <li class=\"plan-list-muted\"><svg viewBox=\"0 0 16 16\"><line x1=\"3\" y1=\"8\" x2=\"13\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>No Payment Gateway<\/li>\n <\/ul>\n <button class=\"plan-btn plan-btn-out\" onclick=\"openModal('Standard \u2013 999 CHF')\">Order Now<\/button>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"pay-trust\" id=\"payment\">\n <div class=\"pay-inner\">\n <div class=\"sec-label\">Payment Process<\/div>\n <h2 class=\"sec-h2\">Simple & Risk-Free Payment Process<\/h2>\n <p class=\"pay-body\">To make things simple and transparent, we only require <strong>50% upfront<\/strong> payment to begin your project. The remaining <strong>50% is paid only after<\/strong> your website is completed, reviewed, and approved.<\/p>\n\n <div class=\"pay-grid\">\n <div class=\"pay-card sc-reveal\">\n <div class=\"pay-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M2 10h20\"\/><path d=\"M6 15h4\"\/><\/svg>\n <\/div>\n <div class=\"pay-pct\">50%<\/div>\n <h3 class=\"pay-card-title\">Upfront<\/h3>\n <p class=\"pay-card-desc\">A small deposit to kick off your project and begin design and development immediately.<\/p>\n <\/div>\n\n <div class=\"pay-card sc-reveal\" style=\"--d:.1s\">\n <div class=\"pay-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\n <\/div>\n <div class=\"pay-pct\">50%<\/div>\n <h3 class=\"pay-card-title\">After Completion<\/h3>\n <p class=\"pay-card-desc\">The balance is only due once your website is finished, reviewed, and approved by you.<\/p>\n <\/div>\n\n <div class=\"pay-card sc-reveal\" style=\"--d:.2s\">\n <div class=\"pay-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"\/><path d=\"M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6\"\/><\/svg>\n <\/div>\n <div class=\"pay-pct-sm\">\u2726<\/div>\n <h3 class=\"pay-card-title\">Transparent Pricing<\/h3>\n <p class=\"pay-card-desc\">No hidden costs. No surprise invoices. The price you see is the price you pay \u2014 full stop.<\/p>\n <\/div>\n\n <div class=\"pay-card sc-reveal\" style=\"--d:.3s\">\n <div class=\"pay-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z\"\/><\/svg>\n <\/div>\n <div class=\"pay-pct-sm\">\u2726<\/div>\n <h3 class=\"pay-card-title\">Client Satisfaction Focus<\/h3>\n <p class=\"pay-card-desc\">We don't just deliver websites \u2014 we deliver results that make our clients genuinely proud.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"modal-backdrop\" id=\"modalBackdrop\" onclick=\"closeModal()\">\n <div class=\"modal-box\" onclick=\"event.stopPropagation()\">\n <button class=\"modal-close\" onclick=\"closeModal()\">\u2715<\/button>\n <div class=\"modal-header\">\n <div class=\"sec-label\" style=\"margin-bottom:.6rem\">Start Your Project<\/div>\n <h3 class=\"modal-title\">Tell Us About Your Project<\/h3>\n <p class=\"modal-sub\">Our team will reach out within 24 hours.<\/p>\n <\/div>\n <div class=\"modal-body\">\n <div class=\"mf-group\">\n <label class=\"mf-label\">Full Name<\/label>\n <input class=\"mf-input\" type=\"text\" placeholder=\"John M\u00fcller\" id=\"mf-name\"\/>\n <\/div>\n <div class=\"mf-group\">\n <label class=\"mf-label\">WhatsApp \/ Mobile Number<\/label>\n <input class=\"mf-input\" type=\"tel\" placeholder=\"+41 79 000 00 00\" id=\"mf-phone\"\/>\n <\/div>\n <div class=\"mf-group\">\n <label class=\"mf-label\">Email Address<\/label>\n <input class=\"mf-input\" type=\"email\" placeholder=\"john@company.ch\" id=\"mf-email\"\/>\n <\/div>\n <div class=\"mf-group\">\n <label class=\"mf-label\">Website Type<\/label>\n <select class=\"mf-input mf-select\" id=\"mf-type\">\n <option value=\"\" disabled selected>Select a website type<\/option>\n <option>Business Website<\/option>\n <option>Ecommerce Website<\/option>\n <option>Portfolio Website<\/option>\n <option>Restaurant Website<\/option>\n <option>Booking Website<\/option>\n <option>Custom Website<\/option>\n <\/select>\n <\/div>\n <div class=\"mf-group\" id=\"mf-pkg-group\" style=\"display:none\">\n <label class=\"mf-label\">Selected Package<\/label>\n <input class=\"mf-input\" type=\"text\" id=\"mf-pkg\" readonly\/>\n <\/div>\n <div class=\"mf-group\">\n <label class=\"mf-label\">Project Details<\/label>\n <textarea class=\"mf-input mf-textarea\" placeholder=\"Tell us about your business, goals, and anything specific you'd like on your website...\" id=\"mf-details\"><\/textarea>\n <\/div>\n <button class=\"mf-submit\" onclick=\"submitForm()\">Submit Project Request<\/button>\n <p class=\"mf-note\">No spam. Our team will contact you shortly.<\/p>\n <\/div>\n <\/div>\n<\/div>\n\n<style>\n\/* \u2500\u2500 SHARED SECTION UTILS \u2500\u2500 *\/\n.sec-label{\n font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;\n color:var(--g400);margin-bottom:1rem;\n}\n.sec-h2{\n font-family:var(--ff-display);font-size:clamp(1.7rem,2.8vw,2.6rem);\n font-weight:800;letter-spacing:-.03em;line-height:1.1;\n color:var(--black);margin-bottom:.9rem;\n}\n.sec-sub{\n font-size:.9rem;font-weight:300;color:var(--g600);\n line-height:1.7;max-width:520px;\n}\n\n\/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\n.sc-reveal{\n opacity:0;transform:translateY(24px);\n transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--d,0s),\n transform .7s cubic-bezier(.22,1,.36,1) var(--d,0s);\n}\n.sc-reveal.in{opacity:1;transform:translateY(0)}\n\n\/* \u2550\u2550\u2550 WHY SECTION \u2550\u2550\u2550 *\/\n.why{padding:6rem 7rem;background:var(--white);border-top:1px solid var(--g200)}\n.why-inner{max-width:1200px;margin:0 auto}\n.why-inner .sec-sub{margin-bottom:3.5rem}\n.why-grid{\n display:grid;grid-template-columns:repeat(4,1fr);gap:1px;\n border:1px solid var(--g200);border-radius:12px;overflow:hidden;\n}\n.why-card{\n padding:2.2rem 1.8rem;\n background:var(--white);\n border-right:1px solid var(--g200);\n border-bottom:1px solid var(--g200);\n transition:background .25s ease, transform .25s ease, box-shadow .25s ease;\n cursor:default;\n}\n.why-card:nth-child(4n){border-right:none}\n.why-card:nth-child(5),.why-card:nth-child(6),.why-card:nth-child(7),.why-card:nth-child(8){border-bottom:none}\n.why-card:hover{background:var(--g50);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.06)}\n.why-icon-wrap{\n width:38px;height:38px;\n display:flex;align-items:center;justify-content:center;\n background:var(--g100);border-radius:8px;margin-bottom:1.2rem;\n transition:background .25s;\n}\n.why-card:hover .why-icon-wrap{background:var(--black)}\n.why-icon-wrap svg{\n width:18px;height:18px;color:var(--black);\n transition:color .25s;\n}\n.why-card:hover .why-icon-wrap svg{color:var(--white)}\n.why-title{\n font-family:var(--ff-display);font-size:13.5px;font-weight:700;\n color:var(--black);margin-bottom:.5rem;letter-spacing:-.01em;\n}\n.why-desc{font-size:12px;font-weight:300;color:var(--g600);line-height:1.65}\n\n\/* \u2550\u2550\u2550 PORTFOLIO \u2550\u2550\u2550 *\/\n.portfolio{padding:6rem 7rem;background:var(--g50);border-top:1px solid var(--g200)}\n.portfolio-inner{max-width:1200px;margin:0 auto}\n.portfolio-inner .sec-sub{margin-bottom:3.5rem}\n.port-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:20px;\n}\n.port-card{\n text-decoration:none;color:inherit;\n display:flex;flex-direction:column;\n border-radius:10px;overflow:hidden;\n border:1px solid var(--g200);\n background:var(--white);\n transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;\n}\n.port-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.1)}\n.port-img-wrap{\n position:relative;overflow:hidden;\n aspect-ratio:16\/10;\n}\n.port-img-wrap img{\n width:100%;height:100%;object-fit:cover;\n transition:transform .6s cubic-bezier(.22,1,.36,1);\n display:block;\n}\n.port-card:hover .port-img-wrap img{transform:scale(1.06)}\n.port-overlay{\n position:absolute;inset:0;\n background:rgba(10,10,10,.55);\n display:flex;align-items:center;justify-content:center;\n opacity:0;transition:opacity .3s ease;\n backdrop-filter:blur(2px);\n}\n.port-card:hover .port-overlay{opacity:1}\n.port-visit{\n color:white;font-size:13px;font-weight:600;\n letter-spacing:.06em;border:1px solid rgba(255,255,255,.6);\n padding:9px 20px;border-radius:100px;\n transition:background .2s;\n}\n.port-card:hover .port-visit{background:rgba(255,255,255,.15)}\n.port-meta{padding:1.2rem 1.4rem}\n.port-cat{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)}\n.port-title{font-family:var(--ff-display);font-size:15px;font-weight:700;color:var(--black);margin-top:.3rem;letter-spacing:-.01em}\n\n\/* \u2550\u2550\u2550 PRICING \u2550\u2550\u2550 *\/\n.pricing{padding:6rem 7rem;background:var(--white);border-top:1px solid var(--g200)}\n.pricing-inner{max-width:1100px;margin:0 auto}\n.pricing-badge{\n display:inline-block;\n font-size:11px;font-weight:500;\n letter-spacing:.05em;color:var(--g600);\n border:1px solid var(--g200);border-radius:100px;\n padding:5px 14px;margin-top:1rem;margin-bottom:3.5rem;\n}\n.plans-grid{\n display:grid;grid-template-columns:repeat(3,1fr);\n gap:20px;align-items:start;\n}\n.plan-card{\n border:1px solid var(--g200);border-radius:12px;\n padding:2.4rem 2rem;background:var(--white);\n transition:transform .3s ease,box-shadow .3s ease;\n}\n.plan-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}\n.plan-pro{\n background:var(--black);border-color:transparent;\n box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.28);\n position:relative;\n}\n.plan-pro:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 32px 70px rgba(0,0,0,.35)}\n.plan-popular{\n position:absolute;top:-13px;left:50%;transform:translateX(-50%);\n background:var(--white);color:var(--black);\n font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;\n padding:4px 14px;border-radius:100px;white-space:nowrap;\n border:1px solid var(--g200);\n}\n.plan-name{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g400)}\n.plan-name-pro{color:rgba(255,255,255,.5)}\n.plan-price{\n font-family:var(--ff-display);font-size:2.8rem;font-weight:800;\n letter-spacing:-.05em;color:var(--black);line-height:1;\n margin:.6rem 0 .4rem;display:flex;align-items:baseline;gap:4px;\n}\n.plan-price-pro{color:var(--white)}\n.plan-currency{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--g400);margin-bottom:4px}\n.plan-currency-pro{color:rgba(255,255,255,.45)}\n.plan-for{font-size:.82rem;color:var(--g400);font-weight:300;margin-bottom:1.6rem;line-height:1.5}\n.plan-for-pro{color:rgba(255,255,255,.4)}\n.plan-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-bottom:2rem}\n.plan-list li{\n display:flex;align-items:center;gap:9px;\n font-size:.84rem;color:var(--g800);font-weight:400;\n}\n.plan-list-pro li{color:rgba(255,255,255,.8)}\n.plan-list li svg{width:14px;height:14px;flex-shrink:0;color:var(--black)}\n.plan-list-pro li svg{color:rgba(255,255,255,.7)}\n.plan-btn{\n width:100%;padding:12px;border-radius:7px;\n font-family:var(--ff-body);font-size:13.5px;font-weight:600;\n cursor:pointer;transition:all .22s ease;letter-spacing:.01em;border:none;\n}\n.plan-btn-out{\n background:transparent;color:var(--black);\n border:1.5px solid var(--g200);\n}\n.plan-btn-out:hover{border-color:var(--black);background:var(--black);color:var(--white)}\n.plan-btn-pro{background:var(--white);color:var(--black)}\n.plan-btn-pro:hover{background:var(--g100)}\n\n\/* \u2550\u2550\u2550 PAYMENT TRUST \u2550\u2550\u2550 *\/\n.pay-trust{padding:6rem 7rem;background:var(--g50);border-top:1px solid var(--g200)}\n.pay-inner{max-width:1100px;margin:0 auto}\n.pay-body{\n font-size:.95rem;font-weight:300;color:var(--g600);\n line-height:1.8;max-width:640px;margin:1.4rem 0 3.5rem;\n}\n.pay-body strong{color:var(--black);font-weight:600}\n.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}\n.pay-card{\n background:var(--white);border:1px solid var(--g200);\n border-radius:12px;padding:2rem 1.6rem;\n transition:transform .3s ease,box-shadow .3s ease;\n}\n.pay-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.07)}\n.pay-icon{\n width:40px;height:40px;background:var(--g100);border-radius:10px;\n display:flex;align-items:center;justify-content:center;margin-bottom:1rem;\n transition:background .25s;\n}\n.pay-card:hover .pay-icon{background:var(--black)}\n.pay-icon svg{width:18px;height:18px;color:var(--black);transition:color .25s}\n.pay-card:hover .pay-icon svg{color:var(--white)}\n.pay-pct{\n font-family:var(--ff-display);font-size:2.2rem;font-weight:800;\n letter-spacing:-.04em;color:var(--black);line-height:1;margin-bottom:.4rem;\n}\n.pay-pct-sm{font-size:1.4rem;color:var(--black);margin-bottom:.4rem;line-height:1}\n.pay-card-title{font-family:var(--ff-display);font-size:13.5px;font-weight:700;color:var(--black);margin-bottom:.5rem}\n.pay-card-desc{font-size:11.5px;color:var(--g600);line-height:1.65;font-weight:300}\n\n\/* \u2550\u2550\u2550 MODAL \u2550\u2550\u2550 *\/\n.modal-backdrop{\n position:fixed;inset:0;background:rgba(10,10,10,.6);\n z-index:9999;display:flex;align-items:center;justify-content:center;\n padding:1.5rem;opacity:0;pointer-events:none;\n backdrop-filter:blur(6px);\n transition:opacity .3s ease;\n}\n.modal-backdrop.open{opacity:1;pointer-events:all}\n.modal-box{\n background:var(--white);border-radius:14px;\n width:100%;max-width:520px;max-height:90vh;overflow-y:auto;\n padding:2.6rem 2.8rem;position:relative;\n transform:translateY(20px) scale(.98);\n transition:transform .35s cubic-bezier(.22,1,.36,1);\n border:1px solid var(--g200);\n}\n.modal-backdrop.open .modal-box{transform:translateY(0) scale(1)}\n.modal-close{\n position:absolute;top:1.2rem;right:1.4rem;\n background:var(--g100);border:none;border-radius:50%;\n width:30px;height:30px;font-size:13px;cursor:pointer;\n color:var(--g600);transition:all .2s;\n display:flex;align-items:center;justify-content:center;\n}\n.modal-close:hover{background:var(--black);color:var(--white)}\n.modal-title{font-family:var(--ff-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--black);margin-bottom:.4rem}\n.modal-sub{font-size:.85rem;color:var(--g400);margin-bottom:1.8rem;font-weight:300}\n.mf-group{display:flex;flex-direction:column;gap:6px;margin-bottom:1.1rem}\n.mf-label{font-size:11.5px;font-weight:600;color:var(--g800);letter-spacing:.02em}\n.mf-input{\n padding:11px 14px;border:1.5px solid var(--g200);border-radius:7px;\n font-family:var(--ff-body);font-size:13.5px;color:var(--black);\n background:var(--white);outline:none;\n transition:border-color .2s;width:100%;\n}\n.mf-input:focus{border-color:var(--black)}\n.mf-select{cursor:pointer;appearance:none;background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'\/%3E%3C\/svg%3E\");background-repeat:no-repeat;background-position:right 12px center}\n.mf-textarea{resize:vertical;min-height:90px;line-height:1.5}\n.mf-submit{\n width:100%;padding:13px;background:var(--black);color:var(--white);\n border:none;border-radius:7px;font-family:var(--ff-body);\n font-size:14px;font-weight:600;cursor:pointer;\n transition:background .2s,transform .2s;margin-top:.4rem;letter-spacing:.01em;\n}\n.mf-submit:hover{background:var(--g800);transform:translateY(-1px)}\n.mf-note{font-size:11px;color:var(--g400);text-align:center;margin-top:.8rem;font-weight:300}\n\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550 *\/\n@media(max-width:1100px){\n .why{padding:5rem 3rem}\n .portfolio{padding:5rem 3rem}\n .pricing{padding:5rem 3rem}\n .pay-trust{padding:5rem 3rem}\n .why-grid{grid-template-columns:repeat(2,1fr)}\n .why-card:nth-child(2n){border-right:none}\n .why-card:nth-child(n+3){border-bottom:1px solid var(--g200)}\n .why-card:nth-child(7),.why-card:nth-child(8){border-bottom:none}\n}\n@media(max-width:760px){\n .plans-grid{grid-template-columns:1fr}\n .port-grid{grid-template-columns:1fr}\n .pay-grid{grid-template-columns:repeat(2,1fr)}\n .why-grid{grid-template-columns:1fr}\n .why-card{border-right:none !important}\n .why-card:not(:last-child){border-bottom:1px solid var(--g200)}\n}\n<\/style>\n\n<script>\n\/\/ \u2500\u2500 Scroll reveal for new sections \u2500\u2500\nconst scObs = new IntersectionObserver(entries=>{\n entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');scObs.unobserve(e.target)}});\n},{threshold:.1});\ndocument.querySelectorAll('.sc-reveal').forEach(el=>scObs.observe(el));\n\n\/\/ \u2500\u2500 Modal \u2500\u2500\nfunction openModal(pkg){\n const bd=document.getElementById('modalBackdrop');\n const pkgGroup=document.getElementById('mf-pkg-group');\n const pkgInput=document.getElementById('mf-pkg');\n if(pkg){pkgInput.value=pkg;pkgGroup.style.display='flex';}\n else{pkgGroup.style.display='none';}\n bd.classList.add('open');\n document.body.style.overflow='hidden';\n}\nfunction closeModal(){\n document.getElementById('modalBackdrop').classList.remove('open');\n document.body.style.overflow='';\n}\nfunction submitForm(){\n const name=document.getElementById('mf-name').value.trim();\n const email=document.getElementById('mf-email').value.trim();\n if(!name||!email){alert('Please fill in your name and email.');return;}\n const btn=document.querySelector('.mf-submit');\n btn.textContent='Request Submitted \u2713';\n btn.style.background='#1a7a4a';\n setTimeout(()=>{closeModal();btn.textContent='Submit Project Request';btn.style.background='';},2200);\n}\ndocument.addEventListener('keydown',e=>{if(e.key==='Escape')closeModal()});\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8488a97 elementor-widget elementor-widget-html\" data-id=\"8488a97\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Sections 8\u201313 \u2014 Premium Swiss Web Agency<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Serif+Display:ital@0;1&family=Geist+Mono:wght@300;400&display=swap\" rel=\"stylesheet\">\n\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --black: #080808;\n --white: #f8f8f6;\n --gray-100: #f0f0ee;\n --gray-200: #e4e4e0;\n --gray-300: #c8c8c4;\n --gray-500: #888884;\n --gray-700: #444440;\n --gray-900: #1c1c1a;\n --accent: #080808;\n --font-display: 'DM Serif Display', Georgia, serif;\n --font-body: 'DM Sans', system-ui, sans-serif;\n --font-mono: 'Geist Mono', monospace;\n --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n html { scroll-behavior: smooth; }\n\n body {\n background: var(--white);\n color: var(--black);\n font-family: var(--font-body);\n font-size: 16px;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 Utility \u2500\u2500 *\/\n .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }\n @media (max-width: 768px) { .container { padding: 0 24px; } }\n\n .section-label {\n font-family: var(--font-mono);\n font-size: 10px;\n font-weight: 400;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--gray-500);\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 12px;\n }\n .section-label::before {\n content: '';\n display: block;\n width: 24px;\n height: 1px;\n background: var(--gray-300);\n }\n\n .reveal {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);\n }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n .reveal-delay-1 { transition-delay: 0.1s; }\n .reveal-delay-2 { transition-delay: 0.2s; }\n .reveal-delay-3 { transition-delay: 0.3s; }\n .reveal-delay-4 { transition-delay: 0.4s; }\n .reveal-delay-5 { transition-delay: 0.5s; }\n\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SECTION 8 \u2014 PROCESS TIMELINE\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .process-section {\n padding: 140px 0;\n background: var(--white);\n border-top: 1px solid var(--gray-200);\n }\n\n .process-header { margin-bottom: 80px; }\n\n .process-header h2 {\n font-family: var(--font-display);\n font-size: clamp(2.4rem, 5vw, 3.8rem);\n font-weight: 400;\n line-height: 1.1;\n letter-spacing: -0.02em;\n color: var(--black);\n max-width: 620px;\n margin-bottom: 20px;\n }\n\n .process-header p {\n font-size: 1.05rem;\n color: var(--gray-700);\n max-width: 480px;\n line-height: 1.65;\n font-weight: 300;\n }\n\n .timeline {\n position: relative;\n display: grid;\n grid-template-columns: 1fr;\n gap: 0;\n }\n\n .timeline-track {\n position: absolute;\n left: 28px;\n top: 0;\n bottom: 0;\n width: 1px;\n background: var(--gray-200);\n z-index: 0;\n }\n\n .timeline-track-fill {\n position: absolute;\n left: 28px;\n top: 0;\n width: 1px;\n height: 0%;\n background: var(--black);\n transition: height 1.2s var(--ease-out-expo);\n z-index: 1;\n }\n\n .timeline-step {\n display: grid;\n grid-template-columns: 56px 1fr;\n gap: 32px;\n padding: 0 0 60px 0;\n position: relative;\n z-index: 2;\n cursor: default;\n }\n .timeline-step:last-child { padding-bottom: 0; }\n\n .step-node {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0;\n position: relative;\n }\n\n .step-dot {\n width: 56px;\n height: 56px;\n border: 1.5px solid var(--gray-300);\n background: var(--white);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 2;\n transition: border-color 0.4s var(--ease-out-expo), background 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);\n flex-shrink: 0;\n }\n\n .timeline-step:hover .step-dot {\n border-color: var(--black);\n background: var(--black);\n transform: scale(1.05);\n }\n\n .step-dot svg {\n width: 20px;\n height: 20px;\n stroke: var(--gray-500);\n transition: stroke 0.4s var(--ease-out-expo);\n }\n .timeline-step:hover .step-dot svg { stroke: var(--white); }\n\n .step-number {\n font-family: var(--font-mono);\n font-size: 9px;\n letter-spacing: 0.12em;\n color: var(--gray-300);\n margin-top: 10px;\n font-weight: 400;\n }\n\n .step-content {\n padding-top: 14px;\n padding-bottom: 0;\n }\n\n .step-content h3 {\n font-size: 1.1rem;\n font-weight: 500;\n letter-spacing: -0.01em;\n color: var(--black);\n margin-bottom: 10px;\n transition: color 0.3s ease;\n }\n\n .step-content p {\n font-size: 0.925rem;\n color: var(--gray-500);\n line-height: 1.65;\n font-weight: 300;\n max-width: 440px;\n }\n\n .step-tag {\n display: inline-block;\n font-family: var(--font-mono);\n font-size: 9px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--gray-300);\n border: 1px solid var(--gray-200);\n padding: 3px 10px;\n border-radius: 100px;\n margin-bottom: 12px;\n transition: all 0.3s ease;\n }\n .timeline-step:hover .step-tag {\n border-color: var(--gray-400);\n color: var(--gray-700);\n }\n\n @media (max-width: 768px) {\n .process-section { padding: 80px 0; }\n .timeline-track, .timeline-track-fill { left: 20px; }\n .timeline-step { grid-template-columns: 40px 1fr; gap: 20px; }\n .step-dot { width: 40px; height: 40px; }\n .step-dot svg { width: 16px; height: 16px; }\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SECTIONS 9\u201311 \u2014 SEO CONTENT BLOCKS\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .seo-section {\n padding: 120px 0;\n border-top: 1px solid var(--gray-200);\n }\n\n .seo-section.alt { background: var(--gray-100); }\n\n .seo-inner {\n display: grid;\n grid-template-columns: 380px 1fr;\n gap: 80px;\n align-items: start;\n }\n\n .seo-inner.reverse { direction: rtl; }\n .seo-inner.reverse > * { direction: ltr; }\n\n .seo-left { position: sticky; top: 40px; }\n\n .seo-left h2 {\n font-family: var(--font-display);\n font-size: clamp(1.9rem, 3.5vw, 2.8rem);\n font-weight: 400;\n line-height: 1.15;\n letter-spacing: -0.02em;\n color: var(--black);\n margin-bottom: 28px;\n }\n\n .seo-left .seo-summary {\n font-size: 0.9rem;\n color: var(--gray-500);\n line-height: 1.7;\n font-weight: 300;\n border-left: 2px solid var(--gray-200);\n padding-left: 20px;\n }\n\n .seo-right {}\n\n .seo-right p {\n font-size: 0.975rem;\n color: var(--gray-700);\n line-height: 1.8;\n font-weight: 300;\n margin-bottom: 22px;\n }\n\n .seo-right p:last-child { margin-bottom: 0; }\n\n .seo-right strong {\n color: var(--black);\n font-weight: 500;\n }\n\n .seo-stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1px;\n background: var(--gray-200);\n border: 1px solid var(--gray-200);\n border-radius: 12px;\n overflow: hidden;\n margin: 40px 0;\n }\n\n .stat-item {\n background: var(--white);\n padding: 28px 24px;\n text-align: center;\n }\n .seo-section.alt .stat-item { background: var(--gray-100); }\n\n .stat-item .stat-value {\n font-family: var(--font-display);\n font-size: 2rem;\n font-weight: 400;\n color: var(--black);\n line-height: 1;\n margin-bottom: 6px;\n letter-spacing: -0.03em;\n }\n\n .stat-item .stat-label {\n font-size: 0.78rem;\n color: var(--gray-500);\n font-weight: 400;\n letter-spacing: 0.02em;\n }\n\n @media (max-width: 900px) {\n .seo-inner { grid-template-columns: 1fr; gap: 40px; }\n .seo-inner.reverse { direction: ltr; }\n .seo-left { position: static; }\n .seo-stats { grid-template-columns: repeat(3, 1fr); }\n }\n\n @media (max-width: 600px) {\n .seo-section { padding: 72px 0; }\n .seo-stats { grid-template-columns: 1fr; }\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SECTION 12 \u2014 FAQ\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .faq-section {\n padding: 140px 0;\n background: var(--black);\n border-top: 1px solid #1a1a18;\n color: var(--white);\n }\n\n .faq-header { margin-bottom: 72px; }\n\n .faq-header .section-label { color: #555550; }\n .faq-header .section-label::before { background: #333330; }\n\n .faq-header h2 {\n font-family: var(--font-display);\n font-size: clamp(2.4rem, 5vw, 3.8rem);\n font-weight: 400;\n line-height: 1.1;\n letter-spacing: -0.02em;\n color: var(--white);\n max-width: 560px;\n }\n\n .faq-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0 60px;\n align-items: start;\n }\n\n .faq-col { display: flex; flex-direction: column; gap: 0; }\n\n .faq-item {\n border-bottom: 1px solid #1e1e1c;\n overflow: hidden;\n }\n\n .faq-question {\n width: 100%;\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 24px 0;\n text-align: left;\n color: var(--white);\n }\n\n .faq-question span {\n font-size: 0.95rem;\n font-weight: 400;\n line-height: 1.45;\n color: #d0d0cc;\n transition: color 0.3s ease;\n }\n\n .faq-item.open .faq-question span,\n .faq-question:hover span { color: var(--white); }\n\n .faq-icon {\n width: 28px;\n height: 28px;\n border: 1px solid #2a2a28;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease-out-expo);\n }\n\n .faq-item.open .faq-icon {\n background: var(--white);\n border-color: var(--white);\n transform: rotate(45deg);\n }\n\n .faq-icon svg {\n width: 12px;\n height: 12px;\n stroke: #555550;\n transition: stroke 0.3s ease;\n }\n .faq-item.open .faq-icon svg { stroke: var(--black); }\n\n .faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.55s var(--ease-out-expo), padding 0.4s ease;\n }\n\n .faq-item.open .faq-answer { max-height: 600px; }\n\n .faq-answer-inner {\n padding: 0 0 24px 0;\n font-size: 0.9rem;\n color: #888884;\n line-height: 1.75;\n font-weight: 300;\n max-width: 480px;\n }\n\n .faq-answer-inner strong { color: #c8c8c4; font-weight: 400; }\n\n @media (max-width: 900px) {\n .faq-grid { grid-template-columns: 1fr; gap: 0; }\n .faq-section { padding: 80px 0; }\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SECTION 13 \u2014 FINAL CTA\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .cta-section {\n padding: 160px 0 120px;\n background: var(--black);\n border-top: 1px solid #1a1a18;\n position: relative;\n overflow: hidden;\n }\n\n .cta-bg-text {\n position: absolute;\n bottom: -40px;\n left: 50%;\n transform: translateX(-50%);\n font-family: var(--font-display);\n font-size: clamp(100px, 20vw, 220px);\n font-weight: 400;\n letter-spacing: -0.04em;\n color: transparent;\n -webkit-text-stroke: 1px #1a1a18;\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n line-height: 1;\n }\n\n .cta-inner { position: relative; z-index: 2; text-align: center; }\n\n .cta-label {\n font-family: var(--font-mono);\n font-size: 10px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #555550;\n margin-bottom: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n }\n .cta-label::before, .cta-label::after {\n content: '';\n display: block;\n width: 32px;\n height: 1px;\n background: #2a2a28;\n }\n\n .cta-heading {\n font-family: var(--font-display);\n font-size: clamp(2.8rem, 7vw, 5.5rem);\n font-weight: 400;\n line-height: 1.0;\n letter-spacing: -0.03em;\n color: var(--white);\n margin-bottom: 28px;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .cta-heading em {\n font-style: italic;\n color: #888884;\n }\n\n .cta-subheading {\n font-size: 1rem;\n color: #666662;\n line-height: 1.65;\n font-weight: 300;\n max-width: 520px;\n margin: 0 auto 56px;\n }\n\n .cta-buttons {\n display: flex;\n gap: 16px;\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 64px;\n }\n\n .btn-primary-cta {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--white);\n color: var(--black);\n border: none;\n font-family: var(--font-body);\n font-size: 0.9rem;\n font-weight: 500;\n letter-spacing: 0.01em;\n padding: 16px 32px;\n border-radius: 100px;\n cursor: pointer;\n text-decoration: none;\n transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease, background 0.3s ease;\n }\n .btn-primary-cta:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(248,248,246,0.2);\n }\n\n .btn-secondary-cta {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: transparent;\n color: #888884;\n border: 1px solid #2a2a28;\n font-family: var(--font-body);\n font-size: 0.9rem;\n font-weight: 400;\n letter-spacing: 0.01em;\n padding: 16px 32px;\n border-radius: 100px;\n cursor: pointer;\n text-decoration: none;\n transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out-expo);\n }\n .btn-secondary-cta:hover {\n border-color: #666662;\n color: var(--white);\n transform: translateY(-2px);\n }\n\n .trust-points {\n display: flex;\n gap: 32px;\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 56px;\n }\n\n .trust-point {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.82rem;\n color: #555550;\n font-weight: 400;\n }\n\n .trust-point-check {\n width: 18px;\n height: 18px;\n border: 1px solid #2a2a28;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .trust-point-check svg {\n width: 10px;\n height: 10px;\n stroke: #555550;\n }\n\n .cta-footer-text {\n font-family: var(--font-mono);\n font-size: 11px;\n letter-spacing: 0.06em;\n color: #333330;\n text-align: center;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.7;\n }\n\n \/* \u2500\u2500 Scrollbar \u2500\u2500 *\/\n ::-webkit-scrollbar { width: 4px; }\n ::-webkit-scrollbar-track { background: var(--white); }\n ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }\n<\/style>\n<\/head>\n<body>\n\n\n<section class=\"process-section\" id=\"process\">\n <div class=\"container\">\n <div class=\"process-header\">\n <div class=\"section-label reveal\">Our Process<\/div>\n <h2 class=\"reveal reveal-delay-1\">How Your Website<br>Comes To Life<\/h2>\n <p class=\"reveal reveal-delay-2\">A simple, transparent process designed to get your business online quickly.<\/p>\n <\/div>\n\n <div class=\"timeline\">\n <div class=\"timeline-track\"><\/div>\n <div class=\"timeline-track-fill\" id=\"timelineFill\"><\/div>\n\n \n <div class=\"timeline-step reveal\">\n <div class=\"step-node\">\n <div class=\"step-dot\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/>\n <path d=\"M9 12l2 2 4-4\"\/>\n <\/svg>\n <\/div>\n <span class=\"step-number\">01<\/span>\n <\/div>\n <div class=\"step-content\">\n <div class=\"step-tag\">Starting Point<\/div>\n <h3>Choose Your Package<\/h3>\n <p>Select the package that best suits your business needs. From essential online presence to fully-featured ecommerce \u2014 we have the right solution for every stage.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"timeline-step reveal reveal-delay-1\">\n <div class=\"step-node\">\n <div class=\"step-dot\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5\"\/>\n <path d=\"M17.5 3.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 8.5-8.5z\"\/>\n <\/svg>\n <\/div>\n <span class=\"step-number\">02<\/span>\n <\/div>\n <div class=\"step-content\">\n <div class=\"step-tag\">Onboarding<\/div>\n <h3>Submit Requirements<\/h3>\n <p>Share your business details, goals, brand assets, and content. Our structured onboarding process ensures we capture everything needed to build exactly what you envision.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"timeline-step reveal reveal-delay-2\">\n <div class=\"step-node\">\n <div class=\"step-dot\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\n <\/svg>\n <\/div>\n <span class=\"step-number\">03<\/span>\n <\/div>\n <div class=\"step-content\">\n <div class=\"step-tag\">Production<\/div>\n <h3>Design & Development<\/h3>\n <p>We create a premium custom website tailored to your business. Every element \u2014 from typography to performance \u2014 is crafted with precision and built on rock-solid technology.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"timeline-step reveal reveal-delay-3\">\n <div class=\"step-node\">\n <div class=\"step-dot\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <\/svg>\n <\/div>\n <span class=\"step-number\">04<\/span>\n <\/div>\n <div class=\"step-content\">\n <div class=\"step-tag\">Refinement<\/div>\n <h3>Review & Revisions<\/h3>\n <p>Review your website and request revisions if needed. Your satisfaction is our standard \u2014 we iterate until the result is exactly right, with no compromise on quality.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"timeline-step reveal reveal-delay-4\">\n <div class=\"step-node\">\n <div class=\"step-dot\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/>\n <path d=\"M2 17l10 5 10-5\"\/>\n <path d=\"M2 12l10 5 10-5\"\/>\n <\/svg>\n <\/div>\n <span class=\"step-number\">05<\/span>\n <\/div>\n <div class=\"step-content\">\n <div class=\"step-tag\">Go Live<\/div>\n <h3>Launch & Go Live<\/h3>\n <p>Your website is launched and ready to grow your business. Domain configured, hosting live, search engines notified \u2014 your digital presence is open for business from day one.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"seo-section\" id=\"about-swiss-web-design\">\n <div class=\"container\">\n <div class=\"seo-inner\">\n <div class=\"seo-left reveal\">\n <div class=\"section-label\">Web Design In Switzerland<\/div>\n <h2>Affordable Website Design Services In Switzerland<\/h2>\n <p class=\"seo-summary\">Professional websites built for Swiss businesses \u2014 without the inflated price tag of a traditional local agency.<\/p>\n <\/div>\n <div class=\"seo-right reveal reveal-delay-1\">\n <p>Switzerland is home to some of the world's most respected businesses \u2014 and in an increasingly digital economy, your website is often the first impression you make. Whether you operate a boutique in Zurich, a consultancy in Geneva, or a growing startup in Basel, <strong>the quality of your online presence directly influences how prospects perceive your business<\/strong>.<\/p>\n\n <p>For too long, high-quality website design in Switzerland has been the exclusive domain of large companies with substantial marketing budgets. Traditional Swiss agencies charge premium rates that many small and medium businesses simply cannot justify \u2014 leaving them with either no website, or a generic template that fails to communicate the professionalism they deserve.<\/p>\n\n <p>We exist to change that. Our studio delivers <strong>internationally benchmarked website design<\/strong> tailored specifically to Swiss businesses, at a price point that removes the barrier between ambition and execution. Every website we build is custom-designed, mobile-responsive, and built on WordPress \u2014 the world's most widely used and flexible content management platform, powering over 40% of all websites globally.<\/p>\n\n <div class=\"seo-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">40%<\/div>\n <div class=\"stat-label\">of the web runs on WordPress<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">3s<\/div>\n <div class=\"stat-label\">avg. bounce if page loads slow<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">75%<\/div>\n <div class=\"stat-label\">judge credibility by design<\/div>\n <\/div>\n <\/div>\n\n <p>Affordable website design does not mean cutting corners. It means building smarter \u2014 using proven technologies, refined workflows, and a global team operating at a lower cost base than a Z\u00fcrich city-centre office. The savings we pass on to you are structural, not qualitative. <strong>Your website will be built with the same care and craft we apply to projects for international brands<\/strong> \u2014 because we believe every business deserves a digital home it's proud of.<\/p>\n\n <p>From clean, conversion-focused landing pages to full multi-page business websites with contact forms, service pages, portfolios, and blog functionality \u2014 we scope every project around your specific goals. Our team works closely with you from the first conversation to launch day, ensuring the final result accurately represents your brand and speaks directly to your ideal customers.<\/p>\n\n <p>If you've been searching for <strong>affordable website design in Switzerland<\/strong> that doesn't compromise on professionalism, you've found it. Your digital presence is an investment in the growth of your business \u2014 and we're here to make that investment accessible.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"seo-section alt\" id=\"why-swiss-businesses-need-website\">\n <div class=\"container\">\n <div class=\"seo-inner reverse\">\n <div class=\"seo-left reveal\">\n <div class=\"section-label\">Why It Matters<\/div>\n <h2>Why Swiss Businesses Need A Professional Website<\/h2>\n <p class=\"seo-summary\">In a market built on trust and precision, a professional online presence isn't optional \u2014 it's the foundation of your credibility.<\/p>\n <\/div>\n <div class=\"seo-right reveal reveal-delay-1\">\n <p>Switzerland holds one of the world's most discerning consumer markets. Swiss customers research before they buy, compare before they decide, and trust before they transact. <strong>A professional website is not a marketing luxury \u2014 it is the single most important trust signal your business can present<\/strong> to a prospective customer in 2024.<\/p>\n\n <p>Consider the journey of a typical Swiss buyer. They search online, scan results, click through to a website, and form a judgement in under three seconds. If your website looks dated, loads slowly, or fails to communicate clearly what you do and why it matters \u2014 they leave. No phone call, no enquiry, no sale. The opportunity cost of a poor or absent online presence compounds quietly and continuously.<\/p>\n\n <p>A well-built website transforms this dynamic. It works for your business around the clock, generating leads while you sleep and answering questions before they're asked. For <strong>Swiss businesses looking to grow beyond word-of-mouth referrals<\/strong>, a conversion-focused website is the most efficient sales tool available \u2014 one that operates 24 hours a day without additional overhead.<\/p>\n\n <div class=\"seo-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">81%<\/div>\n <div class=\"stat-label\">research online before buying<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">94%<\/div>\n <div class=\"stat-label\">cite design as reason to distrust<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">2.3\u00d7<\/div>\n <div class=\"stat-label\">more leads from responsive sites<\/div>\n <\/div>\n <\/div>\n\n <p>Ecommerce represents another significant opportunity that many Swiss SMEs have yet to fully capitalise on. Consumer comfort with online purchasing is at an all-time high, and the infrastructure to support secure, seamless transactions is more accessible than ever. Whether you sell physical products, digital services, or bookable experiences \u2014 <strong>an ecommerce-enabled website opens your business to customers beyond your immediate geography<\/strong>, extending your market across Switzerland and internationally.<\/p>\n\n <p>Beyond lead generation and sales, your website communicates brand. In a competitive market, the businesses that invest in modern, considered branding consistently outperform those that don't. A cohesive visual identity \u2014 carried through your website, your copywriting, and your customer touchpoints \u2014 signals that your business is serious, established, and worthy of confidence. <strong>WordPress solutions built on solid foundations<\/strong> ensure that as your brand evolves, your website can evolve with it.<\/p>\n\n <p>The businesses growing fastest in Switzerland today understand that digital presence and business credibility are inseparable. Your website is your most valuable commercial asset \u2014 it deserves to be treated as one.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"seo-section\" id=\"international-quality-swiss-service\">\n <div class=\"container\">\n <div class=\"seo-inner\">\n <div class=\"seo-left reveal\">\n <div class=\"section-label\">Our Approach<\/div>\n <h2>International Quality. Swiss-Focused Service.<\/h2>\n <p class=\"seo-summary\">A global digital studio bringing world-class web development to Swiss businesses \u2014 with local understanding and transparent, fair pricing.<\/p>\n <\/div>\n <div class=\"seo-right reveal reveal-delay-1\">\n <p>The best websites in the world are not built in any single country. They are built by teams who understand design at an international level, who stay current with web technology as it evolves, and who approach every project with a standard of craft that transcends geography. <strong>That is precisely the approach we bring to every Swiss business we work with.<\/strong><\/p>\n\n <p>Our experience spans clients and markets across Europe, North America, the Middle East, and Southeast Asia. This breadth of exposure has sharpened our understanding of what works \u2014 what design patterns convert, what technology choices age well, and what level of quality users in mature digital markets expect. When we build your website, we bring this global perspective to bear on your specific context.<\/p>\n\n <p>Modern web development is, by nature, an international discipline. The frameworks we use \u2014 WordPress, WooCommerce, modern JavaScript \u2014 are maintained by global open-source communities. The design principles we follow \u2014 clean hierarchy, intentional whitespace, performance-first thinking \u2014 are applied by the best studios in London, New York, Tokyo, and Berlin. <strong>Geography does not determine quality. Intent and execution do.<\/strong><\/p>\n\n <div class=\"seo-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">CH<\/div>\n <div class=\"stat-label\">Swiss-market focused<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">4+<\/div>\n <div class=\"stat-label\">languages supported<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">100%<\/div>\n <div class=\"stat-label\">mobile-first approach<\/div>\n <\/div>\n <\/div>\n\n <p>Switzerland is a multilingual market, and we build for that reality. Whether you need your website in German, French, Italian, English \u2014 or all four \u2014 we implement multilingual structures that are technically sound, SEO-friendly, and easy for you to manage. Multilingual websites are not an afterthought for us; they are a core capability built into our standard process for Swiss clients.<\/p>\n\n <p>Every website we deliver is fully responsive \u2014 designed and tested across mobile, tablet, and desktop to ensure a consistent, high-quality experience for every visitor regardless of how they reach you. We also build with ongoing maintenance in mind: <strong>clean code, logical structure, and WordPress's intuitive CMS mean you can update your own content<\/strong> without needing a developer for every minor change.<\/p>\n\n <p>For businesses ready to grow into ecommerce, our WooCommerce implementations provide a robust, scalable foundation for online retail \u2014 from simple product catalogues to complex inventory and payment workflows. And our post-launch care plans ensure your website remains secure, fast, and current long after the initial build is complete.<\/p>\n\n <p>We are a global digital agency with a clear focus: delivering premium websites to Swiss businesses that deserve international-quality work at a price that reflects genuine value, not inflated local market rates.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"faq-section\" id=\"faq\">\n <div class=\"container\">\n <div class=\"faq-header\">\n <div class=\"section-label reveal\">Questions<\/div>\n <h2 class=\"reveal reveal-delay-1\">Frequently Asked<br>Questions<\/h2>\n <\/div>\n\n <div class=\"faq-grid reveal reveal-delay-2\">\n \n <div class=\"faq-col\">\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>How much does a website cost in Switzerland?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Traditional Swiss agencies typically charge between CHF 5,000 and CHF 30,000+ for a business website. Our packages start at significantly lower price points \u2014 designed specifically to make professional website design accessible to SMEs and startups. You can view our exact pricing transparently on our packages page. <strong>No hidden fees, no surprise invoices.<\/strong><\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Is domain registration included?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes \u2014 all packages include your domain registration for the first year. Whether you need a .ch, .com, .swiss, or another extension, we handle setup and configuration so your website launches with the right address. Domain renewal costs are clearly communicated in advance.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Is hosting included?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes. All packages include managed hosting for the first year \u2014 fast, secure, and backed by daily backups and SSL certificate. After year one, hosting continues at a straightforward annual rate with full transparency. <strong>No surprise infrastructure costs.<\/strong><\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Can I upgrade my website later?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Absolutely. We build every website with growth in mind. You can start with an Essential package and expand to include ecommerce, multilingual functionality, additional pages, or advanced features as your business grows. Upgrades are handled cleanly \u2014 no need to rebuild from scratch.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Do you support ecommerce websites?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes \u2014 our Ecommerce package delivers a fully featured WooCommerce store, including product catalogue, cart, checkout, payment gateway integration, and order management. We also configure tax settings appropriate for Switzerland and can support both physical and digital product sales.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>How long does website development take?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Standard business websites are typically delivered within <strong>10\u201314 business days<\/strong> from receipt of your content and requirements. Ecommerce projects and larger builds may take 3\u20134 weeks. We set clear timelines at the outset and keep you updated throughout \u2014 no disappearing acts.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Can I edit my website myself?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes. All websites are built on WordPress with an intuitive content editor. You can update text, images, blog posts, and basic content without any technical knowledge. We include a brief training walkthrough on delivery so you're fully confident managing your site independently.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"faq-col\">\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Do you provide multilingual websites?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes. We build fully multilingual websites supporting German, French, Italian, English, and other languages \u2014 using technically sound structures that are SEO-optimised for each language. <strong>Multilingual capability is standard<\/strong> in our Business and Ecommerce packages, and available as an add-on for Essential.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Is SEO included?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Every website is built with solid on-page SEO foundations \u2014 clean URL structures, meta tags, schema markup, sitemap submission, and performance optimisation. We also configure Google Search Console and Analytics on all projects. Ongoing SEO content strategy is available as a separate service.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>What happens after launch?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">After launch you receive 30 days of complimentary support for any questions or minor adjustments. Beyond that, our care plans provide ongoing security updates, performance monitoring, backups, and technical support. You're never left to manage a complex system alone.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Do you work with businesses across Switzerland?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes \u2014 we work with businesses in Zurich, Geneva, Basel, Bern, Lausanne, Lugano, and across all Swiss cantons. Our process is fully remote and digital, which means location is never a constraint. We communicate via video call, email, and project management tools at whatever pace works for you.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>What payment methods are accepted?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">We accept bank transfer (CHF and EUR), major credit and debit cards, and PayPal. All invoicing is clear and itemised. Payment is structured as <strong>50% to begin and 50% on delivery<\/strong> \u2014 ensuring both parties are aligned throughout the project.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Why are your prices lower than many agencies?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">We operate as a lean international studio without the overhead of a Swiss city-centre office, large permanent staff, or expensive account management layers. These structural savings flow directly to our pricing \u2014 not to any reduction in quality. <strong>Our work is benchmarked against international agency standards<\/strong>, not local market norms.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Is support available after project completion?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Absolutely. We offer flexible monthly care plans covering security updates, plugin maintenance, hosting management, performance monitoring, and priority support. Whether you need minimal oversight or hands-on ongoing assistance, we have a plan that fits.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Can you redesign an existing website?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes \u2014 website redesigns are one of our most common projects. If your current website looks dated, underperforms on mobile, or no longer reflects your brand, we can build a modern replacement that preserves your SEO equity where possible and dramatically improves your digital presence.<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"cta-section\" id=\"get-started\">\n <div class=\"cta-bg-text\">LAUNCH<\/div>\n <div class=\"container\">\n <div class=\"cta-inner\">\n <div class=\"cta-label reveal\">Get Started Today<\/div>\n <h2 class=\"cta-heading reveal reveal-delay-1\">Ready To Build Your<br><em>Business Website?<\/em><\/h2>\n <p class=\"cta-subheading reveal reveal-delay-2\">Premium websites. Transparent pricing. International quality. Built for Swiss businesses.<\/p>\n\n <div class=\"cta-buttons reveal reveal-delay-3\">\n <a href=\"#\" class=\"btn-primary-cta\">\n Start Your Project\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/a>\n <a href=\"#\" class=\"btn-secondary-cta\">View Packages<\/a>\n <\/div>\n\n <div class=\"trust-points reveal reveal-delay-4\">\n <div class=\"trust-point\">\n <div class=\"trust-point-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n Domain Included\n <\/div>\n <div class=\"trust-point\">\n <div class=\"trust-point-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n Hosting Included\n <\/div>\n <div class=\"trust-point\">\n <div class=\"trust-point-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n Mobile Responsive\n <\/div>\n <div class=\"trust-point\">\n <div class=\"trust-point-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n SEO Ready\n <\/div>\n <div class=\"trust-point\">\n <div class=\"trust-point-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n 50% Upfront \/ 50% After Completion\n <\/div>\n <\/div>\n\n <p class=\"cta-footer-text reveal reveal-delay-5\">Helping businesses establish a professional online presence without traditional agency costs.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n \/* \u2500\u2500 Intersection Observer \u2014 Reveal Animations \u2500\u2500 *\/\n const revealEls = document.querySelectorAll('.reveal');\n const revealObs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('visible');\n revealObs.unobserve(e.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n revealEls.forEach(el => revealObs.observe(el));\n\n \/* \u2500\u2500 Timeline Progress Fill \u2500\u2500 *\/\n const timelineSection = document.querySelector('.process-section');\n const timelineFill = document.getElementById('timelineFill');\n if (timelineFill && timelineSection) {\n const updateFill = () => {\n const rect = timelineSection.getBoundingClientRect();\n const windowH = window.innerHeight;\n const progress = Math.min(1, Math.max(0, (windowH - rect.top) \/ (rect.height + windowH * 0.3)));\n timelineFill.style.height = (progress * 100) + '%';\n };\n window.addEventListener('scroll', updateFill, { passive: true });\n updateFill();\n }\n\n \/* \u2500\u2500 FAQ Accordion \u2500\u2500 *\/\n const faqItems = document.querySelectorAll('.faq-item');\n faqItems.forEach(item => {\n const btn = item.querySelector('.faq-question');\n btn.addEventListener('click', () => {\n const isOpen = item.classList.contains('open');\n \/\/ close all others in same column\n faqItems.forEach(i => {\n i.classList.remove('open');\n i.querySelector('.faq-question').setAttribute('aria-expanded', 'false');\n });\n if (!isOpen) {\n item.classList.add('open');\n btn.setAttribute('aria-expanded', 'true');\n }\n });\n });\n\n \/* \u2500\u2500 CTA Background Parallax \u2500\u2500 *\/\n const ctaBgText = document.querySelector('.cta-bg-text');\n if (ctaBgText) {\n window.addEventListener('scroll', () => {\n const ctaSection = document.querySelector('.cta-section');\n const rect = ctaSection.getBoundingClientRect();\n const offset = (rect.top \/ window.innerHeight) * 30;\n ctaBgText.style.transform = `translateX(-50%) translateY(${offset}px)`;\n }, { passive: true });\n }\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>designwebsite.ch \u2014 Premium Websites for Switzerland New in Switzerland \ud83c\udde8\ud83c\udded Premium Websites. Unbeatable Prices. Built for Switzerland. We are an international web design agency, now launching in Switzerland to help businesses grow online with stunning, high-performance websites at the most affordable prices. View Packages Start Your Project 5.0 Trusted by businesses worldwide W Domain Included […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_angie_page":false,"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":16,"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/pages\/14\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/media?parent=14"}],"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\ndesignwebsite.ch \u2014 Premium Websites for Switzerland<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}\n:root{\n --black:#0a0a0a;\n --white:#ffffff;\n --g50:#f9f9f9;\n --g100:#f2f2f2;\n --g200:#e4e4e4;\n --g300:#cccccc;\n --g400:#aaaaaa;\n --g600:#666666;\n --g800:#333333;\n --red:#e8001c;\n --ff-display:'Syne',sans-serif;\n --ff-body:'Outfit',sans-serif;\n}\nhtml{scroll-behavior:smooth}\nbody{font-family:var(--ff-body);background:var(--white);color:var(--black);overflow-x:hidden;-webkit-font-smoothing:antialiased}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hero{\n display:grid;\n grid-template-columns:1fr 1fr;\n min-height:100vh;\n padding:0;\n position:relative;\n background:var(--white);\n overflow:hidden;\n}\n\n.hero-left{\n display:flex;\n flex-direction:column;\n justify-content:center;\n padding:8rem 3rem 6rem 7rem;\n opacity:0;\n transform:translateY(30px);\n animation:slideUp .9s cubic-bezier(.22,1,.36,1) .1s forwards;\n}\n\n.badge{\n display:inline-flex;\n align-items:center;\n gap:7px;\n font-family:var(--ff-body);\n font-size:11px;\n font-weight:600;\n letter-spacing:.12em;\n text-transform:uppercase;\n color:var(--g600);\n margin-bottom:2.2rem;\n}\n.badge-dot{\n width:8px;height:8px;\n background:var(--red);\n border-radius:50%;\n}\n.badge-flag{font-size:14px}\n\n.hero-h1{\n font-family:var(--ff-display);\n font-size:clamp(2rem,3.2vw,3.4rem);\n font-weight:800;\n line-height:1.08;\n letter-spacing:-.03em;\n color:var(--black);\n margin-bottom:1.2rem;\n}\n.hero-h1 strong{font-weight:800}\n\n.hero-p{\n font-size:.9rem;\n font-weight:300;\n line-height:1.72;\n color:var(--g600);\n max-width:400px;\n margin-bottom:2rem;\n}\n\n.btn-row{display:flex;gap:12px;margin-bottom:2.4rem;flex-wrap:wrap}\n\n.btn-blk{\n padding:13px 28px;\n background:var(--black);\n color:var(--white);\n border:1.5px solid var(--black);\n border-radius:5px;\n font-family:var(--ff-body);\n font-size:14px;\n font-weight:600;\n cursor:pointer;\n text-decoration:none;\n display:inline-block;\n transition:all .22s ease;\n letter-spacing:.01em;\n}\n.btn-blk:hover{background:var(--g800);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.18)}\n\n.btn-out{\n padding:13px 28px;\n background:transparent;\n color:var(--black);\n border:1.5px solid var(--g200);\n border-radius:5px;\n font-family:var(--ff-body);\n font-size:14px;\n font-weight:600;\n cursor:pointer;\n text-decoration:none;\n display:inline-block;\n transition:all .22s ease;\n letter-spacing:.01em;\n}\n.btn-out:hover{border-color:var(--black);transform:translateY(-1px)}\n\n.stars-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}\n.star-svg{width:16px;height:16px;fill:var(--black)}\n.score{font-family:var(--ff-display);font-size:15px;font-weight:700;color:var(--black)}\n.trust-sub{font-size:12px;color:var(--g400);letter-spacing:.02em}\n\n\/* HERO RIGHT *\/\n.hero-right{\n display:flex;\n align-items:center;\n justify-content:center;\n padding:4rem 5rem 4rem 2rem;\n position:relative;\n opacity:0;\n animation:fadeIn 1.1s ease .35s forwards;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CRANE SVG \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.crane-wrap{\n width:100%;\n max-width:580px;\n position:relative;\n}\n.crane-wrap svg{width:100%;height:auto;overflow:visible}\n\n\/* crane arm subtle sway *\/\n.crane-jib-group{\n transform-origin:265px 30px;\n animation:sway 8s ease-in-out infinite;\n}\n@keyframes sway{\n 0%,100%{transform:rotate(0deg)}\n 35%{transform:rotate(1.5deg)}\n 65%{transform:rotate(-1deg)}\n}\n\n\/* hook + WP logo swing *\/\n.hook-group{\n animation:hookSwing 6s ease-in-out infinite;\n transform-origin:370px 95px;\n}\n@keyframes hookSwing{\n 0%,100%{transform:rotate(0deg)}\n 25%{transform:rotate(2.5deg)}\n 75%{transform:rotate(-2deg)}\n}\n\n\/* screen build-in *\/\n.screen-group{\n opacity:0;\n animation:buildUp .9s cubic-bezier(.22,1,.36,1) .8s forwards;\n}\n@keyframes buildUp{\n from{opacity:0;transform:translateY(18px)}\n to{opacity:1;transform:translateY(0)}\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TRUST BAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.trust-bar{\n border-top:1px solid var(--g200);\n border-bottom:1px solid var(--g200);\n}\n.trust-inner{\n display:grid;\n grid-template-columns:repeat(6,1fr);\n}\n.trust-item{\n display:flex;\n flex-direction:column;\n align-items:flex-start;\n gap:6px;\n padding:2.4rem 2rem;\n border-right:1px solid var(--g200);\n transition:background .2s;\n opacity:0;\n transform:translateY(14px);\n animation:slideUp .6s cubic-bezier(.22,1,.36,1) forwards;\n}\n.trust-item:nth-child(1){animation-delay:.05s}\n.trust-item:nth-child(2){animation-delay:.1s}\n.trust-item:nth-child(3){animation-delay:.15s}\n.trust-item:nth-child(4){animation-delay:.2s}\n.trust-item:nth-child(5){animation-delay:.25s}\n.trust-item:nth-child(6){animation-delay:.3s;border-right:none}\n.trust-item:hover{background:var(--g50)}\n\n.ti-icon{\n width:28px;height:28px;\n stroke:var(--black);fill:none;\n stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;\n margin-bottom:4px;\n transition:transform .25s cubic-bezier(.22,1,.36,1);\n}\n.trust-item:hover .ti-icon{transform:scale(1.1)}\n\n.ti-name{\n font-family:var(--ff-display);\n font-size:12.5px;\n font-weight:700;\n color:var(--black);\n letter-spacing:.01em;\n}\n.ti-sub{font-size:11.5px;color:var(--g400);font-weight:300}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 INTL SECTION \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.intl{\n background:var(--g50);\n display:grid;\n grid-template-columns:1fr 1.3fr;\n min-height:560px;\n border-top:1px solid var(--g200);\n}\n\n.intl-left{\n display:flex;\n flex-direction:column;\n justify-content:center;\n padding:6rem 4rem 6rem 7rem;\n}\n\n.intl-h2{\n font-family:var(--ff-display);\n font-size:clamp(1.6rem,2.4vw,2.4rem);\n font-weight:800;\n line-height:1.1;\n letter-spacing:-.03em;\n color:var(--black);\n margin-bottom:1rem;\n}\n\n.intl-p{\n font-size:.875rem;\n font-weight:300;\n line-height:1.78;\n color:var(--g600);\n max-width:360px;\n margin-bottom:2.4rem;\n}\n\n.stat-row{\n display:flex;\n gap:3rem;\n}\n.stat-item{display:flex;flex-direction:column;gap:3px}\n.stat-icon{\n width:26px;height:26px;\n stroke:var(--black);fill:none;\n stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;\n margin-bottom:6px;\n}\n.stat-num{\n font-family:var(--ff-display);\n font-size:1.7rem;\n font-weight:800;\n letter-spacing:-.04em;\n color:var(--black);\n line-height:1;\n}\n.stat-label{font-size:11px;color:var(--g400);letter-spacing:.05em;text-transform:uppercase;font-weight:400}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 WORLD MAP \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.intl-right{\n display:flex;\n align-items:center;\n justify-content:center;\n padding:4rem 5rem 4rem 2rem;\n position:relative;\n}\n.map-wrap{position:relative;width:100%;max-width:600px}\n#mapCanvas{width:100%;height:auto;display:block;border-radius:6px;}\n\n\/* pin bounce *\/\n.map-pin{animation:pinDrop .5s cubic-bezier(.22,1,.36,1) both}\n.pin-ch{animation-delay:.2s}\n.pin-usa{animation-delay:.5s}\n.pin-ind{animation-delay:.7s}\n.pin-isr{animation-delay:.9s}\n.pin-aus{animation-delay:1.1s}\n\n@keyframes pinDrop{\n from{opacity:0;transform:translateY(-20px)}\n to{opacity:1;transform:translateY(0)}\n}\n\n\/* Switzerland red pulsing ring *\/\n.ch-ring{\n animation:chPulse 2.5s ease-in-out infinite;\n transform-origin:center;\n}\n@keyframes chPulse{\n 0%,100%{opacity:.6;r:12}\n 50%{opacity:.1;r:18}\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 KEYFRAMES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@keyframes slideUp{\n to{opacity:1;transform:translateY(0)}\n}\n@keyframes fadeIn{\n to{opacity:1}\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 REVEAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.reveal{\n opacity:0;\n transform:translateY(24px);\n transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);\n}\n.reveal.vis{opacity:1;transform:translateY(0)}\n.reveal-d1{transition-delay:.12s}\n.reveal-d2{transition-delay:.24s}\n.reveal-d3{transition-delay:.36s}\n\n\/* Fallback: if JS observer doesn't fire (iframe\/sandbox), still show content *\/\n.intl-left, .intl-right, .stat-item{\n opacity:1 !important;\n transform:none !important;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media(max-width:900px){\n .hero{grid-template-columns:1fr}\n .hero-left{padding:6rem 2rem 2rem}\n .hero-right{padding:2rem 2rem 4rem}\n .trust-inner{grid-template-columns:repeat(3,1fr)}\n .trust-item:nth-child(3){border-right:none}\n .trust-item:nth-child(4){border-right:1px solid var(--g200);border-top:1px solid var(--g200)}\n .trust-item:nth-child(5){border-top:1px solid var(--g200)}\n .trust-item:nth-child(6){border-top:1px solid var(--g200);border-right:none}\n .intl{grid-template-columns:1fr}\n .intl-left{padding:5rem 2rem 2rem}\n .intl-right{padding:2rem 2rem 5rem}\n}\n<\/style>\n<\/head>\n<body>\n\n\n<section class=\"hero\">\n\n \n <div class=\"hero-left\">\n <div class=\"badge\">\n <span class=\"badge-dot\"><\/span>\n <span>New in Switzerland<\/span>\n <span class=\"badge-flag\">\ud83c\udde8\ud83c\udded<\/span>\n <\/div>\n\n <h1 class=\"hero-h1\">\n Premium Websites.<br>\n Unbeatable Prices.<br>\n Built for <strong>Switzerland.<\/strong>\n <\/h1>\n\n <p class=\"hero-p\">\n We are an international web design agency, now launching in Switzerland to help businesses grow online with stunning, high-performance websites at the most affordable prices.\n <\/p>\n\n <div class=\"btn-row\">\n <a href=\"#\" class=\"btn-blk\">View Packages<\/a>\n <a href=\"#\" class=\"btn-out\">Start Your Project<\/a>\n <\/div>\n\n <div class=\"stars-row\">\n <svg class=\"star-svg\" viewBox=\"0 0 20 20\"><polygon points=\"10,1 12.9,7 19.5,7.6 14.5,12 16.2,18.5 10,15 3.8,18.5 5.5,12 0.5,7.6 7.1,7\"\/><\/svg>\n <svg class=\"star-svg\" viewBox=\"0 0 20 20\"><polygon points=\"10,1 12.9,7 19.5,7.6 14.5,12 16.2,18.5 10,15 3.8,18.5 5.5,12 0.5,7.6 7.1,7\"\/><\/svg>\n <svg class=\"star-svg\" viewBox=\"0 0 20 20\"><polygon points=\"10,1 12.9,7 19.5,7.6 14.5,12 16.2,18.5 10,15 3.8,18.5 5.5,12 0.5,7.6 7.1,7\"\/><\/svg>\n <svg class=\"star-svg\" viewBox=\"0 0 20 20\"><polygon points=\"10,1 12.9,7 19.5,7.6 14.5,12 16.2,18.5 10,15 3.8,18.5 5.5,12 0.5,7.6 7.1,7\"\/><\/svg>\n <svg class=\"star-svg\" viewBox=\"0 0 20 20\"><polygon points=\"10,1 12.9,7 19.5,7.6 14.5,12 16.2,18.5 10,15 3.8,18.5 5.5,12 0.5,7.6 7.1,7\"\/><\/svg>\n <span class=\"score\">5.0<\/span>\n <\/div>\n <p class=\"trust-sub\">Trusted by businesses worldwide<\/p>\n <\/div>\n\n \n <div class=\"hero-right\">\n <div class=\"crane-wrap\">\n <svg viewBox=\"0 0 580 580\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <defs>\n \n <pattern id=\"grid\" width=\"30\" height=\"30\" patternUnits=\"userSpaceOnUse\">\n <path d=\"M30 0L0 0 0 30\" fill=\"none\" stroke=\"#e8e8e8\" stroke-width=\".6\"\/>\n <\/pattern>\n <filter id=\"shadow\">\n <feDropShadow dx=\"0\" dy=\"6\" stdDeviation=\"8\" flood-color=\"#000\" flood-opacity=\".12\"\/>\n <\/filter>\n <filter id=\"shadow-sm\">\n <feDropShadow dx=\"0\" dy=\"3\" stdDeviation=\"4\" flood-color=\"#000\" flood-opacity=\".1\"\/>\n <\/filter>\n <\/defs>\n\n \n <rect width=\"580\" height=\"580\" fill=\"url(#grid)\"\/>\n\n \n <ellipse cx=\"295\" cy=\"548\" rx=\"200\" ry=\"14\" fill=\"#e0e0e0\" opacity=\".7\"\/>\n\n \n\n \n <rect x=\"220\" y=\"516\" width=\"150\" height=\"18\" rx=\"3\" fill=\"#111\" filter=\"url(#shadow-sm)\"\/>\n <rect x=\"234\" y=\"504\" width=\"10\" height=\"14\" fill=\"#222\"\/>\n <rect x=\"258\" y=\"504\" width=\"10\" height=\"14\" fill=\"#222\"\/>\n <rect x=\"312\" y=\"504\" width=\"10\" height=\"14\" fill=\"#222\"\/>\n <rect x=\"336\" y=\"504\" width=\"10\" height=\"14\" fill=\"#222\"\/>\n \n <line x1=\"234\" y1=\"504\" x2=\"346\" y2=\"518\" stroke=\"#333\" stroke-width=\"1.5\"\/>\n <line x1=\"346\" y1=\"504\" x2=\"234\" y2=\"518\" stroke=\"#333\" stroke-width=\"1.5\"\/>\n\n \n \n <rect x=\"268\" y=\"30\" width=\"11\" height=\"476\" fill=\"#0a0a0a\"\/>\n \n <rect x=\"301\" y=\"30\" width=\"11\" height=\"476\" fill=\"#0a0a0a\"\/>\n \n <g stroke=\"#1a1a1a\" stroke-width=\"1.4\" fill=\"none\">\n <line x1=\"279\" y1=\"80\" x2=\"301\" y2=\"100\"\/>\n <line x1=\"279\" y1=\"100\" x2=\"301\" y2=\"80\"\/>\n <line x1=\"279\" y1=\"140\" x2=\"301\" y2=\"160\"\/>\n <line x1=\"279\" y1=\"160\" x2=\"301\" y2=\"140\"\/>\n <line x1=\"279\" y1=\"200\" x2=\"301\" y2=\"220\"\/>\n <line x1=\"279\" y1=\"220\" x2=\"301\" y2=\"200\"\/>\n <line x1=\"279\" y1=\"260\" x2=\"301\" y2=\"280\"\/>\n <line x1=\"279\" y1=\"280\" x2=\"301\" y2=\"260\"\/>\n <line x1=\"279\" y1=\"320\" x2=\"301\" y2=\"340\"\/>\n <line x1=\"279\" y1=\"340\" x2=\"301\" y2=\"320\"\/>\n <line x1=\"279\" y1=\"380\" x2=\"301\" y2=\"400\"\/>\n <line x1=\"279\" y1=\"400\" x2=\"301\" y2=\"380\"\/>\n <line x1=\"279\" y1=\"440\" x2=\"301\" y2=\"460\"\/>\n <line x1=\"279\" y1=\"460\" x2=\"301\" y2=\"440\"\/>\n <\/g>\n\n \n <g class=\"crane-jib-group\">\n \n \n <line x1=\"279\" y1=\"42\" x2=\"530\" y2=\"55\" stroke=\"#0a0a0a\" stroke-width=\"9\" stroke-linecap=\"round\"\/>\n \n <line x1=\"279\" y1=\"28\" x2=\"530\" y2=\"40\" stroke=\"#0a0a0a\" stroke-width=\"6\" stroke-linecap=\"round\"\/>\n \n <g stroke=\"#333\" stroke-width=\"1.2\">\n <line x1=\"320\" y1=\"28\" x2=\"340\" y2=\"55\"\/>\n <line x1=\"340\" y1=\"28\" x2=\"320\" y2=\"55\"\/>\n <line x1=\"370\" y1=\"30\" x2=\"390\" y2=\"55\"\/>\n <line x1=\"390\" y1=\"30\" x2=\"370\" y2=\"55\"\/>\n <line x1=\"420\" y1=\"32\" x2=\"440\" y2=\"55\"\/>\n <line x1=\"440\" y1=\"32\" x2=\"420\" y2=\"55\"\/>\n <line x1=\"470\" y1=\"34\" x2=\"490\" y2=\"56\"\/>\n <line x1=\"490\" y1=\"34\" x2=\"470\" y2=\"56\"\/>\n <line x1=\"505\" y1=\"35\" x2=\"520\" y2=\"56\"\/>\n <\/g>\n\n \n <line x1=\"279\" y1=\"42\" x2=\"140\" y2=\"54\" stroke=\"#0a0a0a\" stroke-width=\"8\" stroke-linecap=\"round\"\/>\n <line x1=\"279\" y1=\"28\" x2=\"140\" y2=\"38\" stroke=\"#0a0a0a\" stroke-width=\"5\" stroke-linecap=\"round\"\/>\n <g stroke=\"#333\" stroke-width=\"1.2\">\n <line x1=\"230\" y1=\"28\" x2=\"210\" y2=\"54\"\/>\n <line x1=\"210\" y1=\"28\" x2=\"230\" y2=\"54\"\/>\n <line x1=\"180\" y1=\"30\" x2=\"160\" y2=\"54\"\/>\n <line x1=\"160\" y1=\"30\" x2=\"180\" y2=\"54\"\/>\n <\/g>\n\n \n <rect x=\"118\" y=\"52\" width=\"30\" height=\"18\" rx=\"2\" fill=\"#111\"\/>\n <rect x=\"122\" y=\"56\" width=\"8\" height=\"10\" fill=\"#2a2a2a\"\/>\n <rect x=\"133\" y=\"56\" width=\"8\" height=\"10\" fill=\"#2a2a2a\"\/>\n\n \n <rect x=\"260\" y=\"18\" width=\"60\" height=\"18\" rx=\"3\" fill=\"#111\"\/>\n \n <polygon points=\"290,4 260,18 320,18\" fill=\"#0a0a0a\"\/>\n\n \n <rect x=\"260\" y=\"46\" width=\"45\" height=\"34\" rx=\"3\" fill=\"#111\" filter=\"url(#shadow-sm)\"\/>\n \n <rect x=\"266\" y=\"52\" width=\"12\" height=\"9\" rx=\"1.5\" fill=\"#e8e8e8\" opacity=\".3\"\/>\n <rect x=\"282\" y=\"52\" width=\"12\" height=\"9\" rx=\"1.5\" fill=\"#e8e8e8\" opacity=\".3\"\/>\n <rect x=\"266\" y=\"65\" width=\"12\" height=\"9\" rx=\"1.5\" fill=\"#e8e8e8\" opacity=\".15\"\/>\n <rect x=\"282\" y=\"65\" width=\"12\" height=\"9\" rx=\"1.5\" fill=\"#e8e8e8\" opacity=\".15\"\/>\n\n \n <rect x=\"370\" y=\"47\" width=\"20\" height=\"12\" rx=\"2\" fill=\"#444\"\/>\n <circle cx=\"376\" cy=\"46\" r=\"3\" fill=\"#666\"\/>\n <circle cx=\"386\" cy=\"46\" r=\"3\" fill=\"#666\"\/>\n\n \n <g class=\"hook-group\">\n \n <line x1=\"380\" y1=\"59\" x2=\"380\" y2=\"130\" stroke=\"#555\" stroke-width=\"2\" stroke-dasharray=\"none\"\/>\n <line x1=\"376\" y1=\"59\" x2=\"376\" y2=\"130\" stroke=\"#888\" stroke-width=\"1\"\/>\n\n \n <rect x=\"370\" y=\"130\" width=\"20\" height=\"12\" rx=\"2\" fill=\"#333\"\/>\n \n <path d=\"M 378 142 Q 360 155 362 168 Q 364 180 376 180 Q 390 180 392 168\" \n stroke=\"#222\" stroke-width=\"3.5\" fill=\"none\" stroke-linecap=\"round\"\/>\n <circle cx=\"382\" cy=\"180\" r=\"3\" fill=\"#333\"\/>\n\n \n <g transform=\"translate(332, 182)\" filter=\"url(#shadow)\">\n <circle cx=\"48\" cy=\"48\" r=\"47\" fill=\"#21759b\"\/>\n <circle cx=\"48\" cy=\"48\" r=\"47\" fill=\"none\" stroke=\"#1a5f80\" stroke-width=\"2.5\"\/>\n <circle cx=\"48\" cy=\"48\" r=\"40\" fill=\"none\" stroke=\"rgba(255,255,255,0.18)\" stroke-width=\"1.5\"\/>\n <text x=\"48\" y=\"62\"\n font-family=\"'Syne','Outfit',Arial,sans-serif\"\n font-size=\"54\"\n font-weight=\"800\"\n fill=\"white\"\n text-anchor=\"middle\"\n letter-spacing=\"-3\">W<\/text>\n <\/g>\n <\/g>\n\n \n <line x1=\"290\" y1=\"18\" x2=\"530\" y2=\"55\" stroke=\"#555\" stroke-width=\"1.2\"\/>\n <line x1=\"290\" y1=\"18\" x2=\"140\" y2=\"54\" stroke=\"#555\" stroke-width=\"1.2\"\/>\n <\/g>\n\n \n <g class=\"screen-group\" filter=\"url(#shadow)\">\n \n <rect x=\"96\" y=\"380\" width=\"290\" height=\"190\" rx=\"6\" fill=\"#f0f0f0\" stroke=\"#d0d0d0\" stroke-width=\"1\"\/>\n \n <rect x=\"104\" y=\"388\" width=\"274\" height=\"158\" rx=\"3\" fill=\"white\"\/>\n \n \n \n <rect x=\"104\" y=\"388\" width=\"274\" height=\"22\" rx=\"3\" fill=\"#0a0a0a\"\/>\n <rect x=\"112\" y=\"394\" width=\"36\" height=\"10\" rx=\"2\" fill=\"white\" opacity=\".25\"\/>\n <rect x=\"272\" y=\"394\" width=\"20\" height=\"10\" rx=\"2\" fill=\"white\" opacity=\".15\"\/>\n <rect x=\"298\" y=\"394\" width=\"20\" height=\"10\" rx=\"2\" fill=\"white\" opacity=\".1\"\/>\n <rect x=\"324\" y=\"394\" width=\"20\" height=\"10\" rx=\"2\" fill=\"white\" opacity=\".1\"\/>\n <rect x=\"350\" y=\"394\" width=\"20\" height=\"10\" rx=\"2\" fill=\"white\" opacity=\".1\"\/>\n \n \n <rect x=\"104\" y=\"410\" width=\"274\" height=\"80\" fill=\"#fafafa\"\/>\n \n <rect x=\"116\" y=\"420\" width=\"100\" height=\"9\" rx=\"2\" fill=\"#d0d0d0\"\/>\n <rect x=\"116\" y=\"434\" width=\"80\" height=\"7\" rx=\"2\" fill=\"#e0e0e0\"\/>\n <rect x=\"116\" y=\"445\" width=\"60\" height=\"7\" rx=\"2\" fill=\"#e8e8e8\"\/>\n \n <rect x=\"116\" y=\"458\" width=\"56\" height=\"16\" rx=\"3\" fill=\"#0a0a0a\"\/>\n <rect x=\"176\" y=\"458\" width=\"48\" height=\"16\" rx=\"3\" fill=\"none\" stroke=\"#d0d0d0\" stroke-width=\"1\"\/>\n \n <rect x=\"254\" y=\"413\" width=\"114\" height=\"72\" rx=\"3\" fill=\"#e8e8e8\"\/>\n \n <line x1=\"254\" y1=\"413\" x2=\"368\" y2=\"485\" stroke=\"#d0d0d0\" stroke-width=\"1\"\/>\n <line x1=\"368\" y1=\"413\" x2=\"254\" y2=\"485\" stroke=\"#d0d0d0\" stroke-width=\"1\"\/>\n \n \n <rect x=\"104\" y=\"490\" width=\"274\" height=\"56\" fill=\"white\" stroke=\"#ebebeb\" stroke-width=\"1\"\/>\n \n <rect x=\"114\" y=\"498\" width=\"74\" height=\"40\" rx=\"3\" fill=\"#fafafa\" stroke=\"#ebebeb\" stroke-width=\"1\"\/>\n <rect x=\"198\" y=\"498\" width=\"74\" height=\"40\" rx=\"3\" fill=\"#fafafa\" stroke=\"#ebebeb\" stroke-width=\"1\"\/>\n <rect x=\"282\" y=\"498\" width=\"74\" height=\"40\" rx=\"3\" fill=\"#fafafa\" stroke=\"#ebebeb\" stroke-width=\"1\"\/>\n \n <rect x=\"122\" y=\"504\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#e0e0e0\"\/>\n <rect x=\"206\" y=\"504\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#e0e0e0\"\/>\n <rect x=\"290\" y=\"504\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#e0e0e0\"\/>\n <rect x=\"122\" y=\"522\" width=\"40\" height=\"5\" rx=\"1\" fill=\"#e8e8e8\"\/>\n <rect x=\"206\" y=\"522\" width=\"40\" height=\"5\" rx=\"1\" fill=\"#e8e8e8\"\/>\n <rect x=\"290\" y=\"522\" width=\"40\" height=\"5\" rx=\"1\" fill=\"#e8e8e8\"\/>\n\n \n <rect x=\"96\" y=\"568\" width=\"290\" height=\"8\" rx=\"2\" fill=\"#c8c8c8\"\/>\n \n <rect x=\"80\" y=\"572\" width=\"322\" height=\"12\" rx=\"6\" fill=\"#c8c8c8\"\/>\n \n <ellipse cx=\"241\" cy=\"580\" rx=\"155\" ry=\"6\" fill=\"#b0b0b0\" opacity=\".5\"\/>\n <\/g>\n\n \n <g fill=\"#555\" opacity=\".5\">\n \n <circle cx=\"430\" cy=\"536\" r=\"4\"\/>\n <line x1=\"430\" y1=\"540\" x2=\"430\" y2=\"558\" stroke=\"#555\" stroke-width=\"2.5\"\/>\n <line x1=\"418\" y1=\"548\" x2=\"442\" y2=\"548\" stroke=\"#555\" stroke-width=\"2\"\/>\n <line x1=\"430\" y1=\"558\" x2=\"420\" y2=\"572\" stroke=\"#555\" stroke-width=\"2\"\/>\n <line x1=\"430\" y1=\"558\" x2=\"440\" y2=\"572\" stroke=\"#555\" stroke-width=\"2\"\/>\n \n <path d=\"M426 532 Q430 526 434 532\" stroke=\"#333\" stroke-width=\"2\" fill=\"#888\"\/>\n <\/g>\n\n \n <g fill=\"#bbb\" opacity=\".3\">\n <circle cx=\"50\" cy=\"50\" r=\"1.5\"\/>\n <circle cx=\"80\" cy=\"50\" r=\"1.5\"\/>\n <circle cx=\"50\" cy=\"80\" r=\"1.5\"\/>\n <circle cx=\"520\" cy=\"480\" r=\"1.5\"\/>\n <circle cx=\"550\" cy=\"480\" r=\"1.5\"\/>\n <circle cx=\"520\" cy=\"510\" r=\"1.5\"\/>\n <\/g>\n <\/svg>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"trust-bar\">\n <div class=\"trust-inner\">\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"9.5\"\/>\n <path d=\"M2.5 12h19M12 2.5a14.5 14.5 0 010 19M12 2.5a14.5 14.5 0 000 19\"\/>\n <\/svg>\n <span class=\"ti-name\">Domain Included<\/span>\n <span class=\"ti-sub\">.ch or custom domain<\/span>\n <\/div>\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <rect x=\"2\" y=\"2\" width=\"20\" height=\"12\" rx=\"2\"\/>\n <path d=\"M6 20h12M12 14v6\"\/>\n <path d=\"M5 7h3M5 10h6\"\/>\n <\/svg>\n <span class=\"ti-name\">Hosting Included<\/span>\n <span class=\"ti-sub\">Fast & Secure<\/span>\n <\/div>\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <rect x=\"7\" y=\"1\" width=\"10\" height=\"18\" rx=\"2\"\/>\n <line x1=\"10\" y1=\"21\" x2=\"14\" y2=\"21\"\/>\n <circle cx=\"12\" cy=\"16\" r=\".8\" fill=\"#0a0a0a\"\/>\n <\/svg>\n <span class=\"ti-name\">Mobile Optimized<\/span>\n <span class=\"ti-sub\">Perfect on every device<\/span>\n <\/div>\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"7.5\"\/>\n <path d=\"M21 21l-4-4\"\/>\n <path d=\"M10.5 7v3.5l2.5 2.5\"\/>\n <\/svg>\n <span class=\"ti-name\">SEO Ready<\/span>\n <span class=\"ti-sub\">Rank higher on Google<\/span>\n <\/div>\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M12 2L2 13h7l-1 9 12-13h-7l1-7z\"\/>\n <\/svg>\n <span class=\"ti-name\">Fast Delivery<\/span>\n <span class=\"ti-sub\">On-time guarantee<\/span>\n <\/div>\n\n <div class=\"trust-item\">\n <svg class=\"ti-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\n <path d=\"M9 12l2 2 4-4\"\/>\n <\/svg>\n <span class=\"ti-name\">Support 24\/7<\/span>\n <span class=\"ti-sub\">We're here for you<\/span>\n <\/div>\n\n <\/div>\n<\/section>\n\n\n<section class=\"intl\" id=\"intl\">\n\n <div class=\"intl-left reveal\" id=\"intlLeft\">\n <h2 class=\"intl-h2\">An International Brand.<br>Now in Switzerland.<\/h2>\n <p class=\"intl-p\">DesignWebsite is a global web solutions company with happy clients in multiple countries.<br><br>Now, we're bringing world-class web design services within everyone's reach in Switzerland.<\/p>\n\n <div class=\"stat-row\">\n <div class=\"stat-item reveal reveal-d1\" id=\"s1\">\n <svg class=\"stat-icon\" viewBox=\"0 0 24 24\">\n <polygon points=\"12,2 15.1,8.3 22,9.3 17,14.1 18.2,21 12,17.8 5.8,21 7,14.1 2,9.3 8.9,8.3\"\/>\n <\/svg>\n <span class=\"stat-num\" data-target=\"500\" data-suffix=\"+\">500+<\/span>\n <span class=\"stat-label\">Projects Completed<\/span>\n <\/div>\n <div class=\"stat-item reveal reveal-d2\" id=\"s2\">\n <svg class=\"stat-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"\/>\n <circle cx=\"9\" cy=\"7\" r=\"4\"\/>\n <path d=\"M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75\"\/>\n <\/svg>\n <span class=\"stat-num\" data-target=\"250\" data-suffix=\"+\">250+<\/span>\n <span class=\"stat-label\">Happy Clients<\/span>\n <\/div>\n <div class=\"stat-item reveal reveal-d3\" id=\"s3\">\n <svg class=\"stat-icon\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <path d=\"M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20\"\/>\n <\/svg>\n <span class=\"stat-num\" data-target=\"10\" data-suffix=\"+\">10+<\/span>\n <span class=\"stat-label\">Countries Served<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"intl-right reveal\" id=\"intlRight\" style=\"transition-delay:.18s\">\n <div class=\"map-wrap\" id=\"mapWrap\">\n \n <img decoding=\"async\" id=\"mapImg\"\n src=\"https:\/\/raw.githubusercontent.com\/johan\/world.geo.json\/master\/countries.geo.json\"\n alt=\"\" style=\"display:none\"\/>\n \n <canvas id=\"mapCanvas\" style=\"width:100%;height:auto;display:block;border-radius:8px;\"><\/canvas>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n\/\/ \u2500\u2500 Scroll reveal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst obs = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if(e.isIntersecting){ e.target.classList.add('vis'); obs.unobserve(e.target); }\n });\n},{threshold:.12});\ndocument.querySelectorAll('.reveal').forEach(el => obs.observe(el));\n\n\/\/ \u2500\u2500 Counter animation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction counter(el, target, suffix, duration){\n let start = null;\n const step = ts => {\n if(!start) start = ts;\n const p = Math.min((ts-start)\/duration, 1);\n const eased = 1 - Math.pow(1-p, 3);\n el.textContent = Math.floor(eased * target) + suffix;\n if(p < 1) requestAnimationFrame(step);\n };\n requestAnimationFrame(step);\n}\nconst statsObs = new IntersectionObserver(entries=>{\n entries.forEach(e=>{\n if(e.isIntersecting){\n document.querySelectorAll('.stat-num').forEach(n=>{\n counter(n, +n.dataset.target, n.dataset.suffix, 1600);\n });\n statsObs.disconnect();\n }\n });\n},{threshold:.2});\nconst statsSection = document.querySelector('.stat-row');\nif(statsSection) statsObs.observe(statsSection);\n\n\/\/ \u2500\u2500 World Map via GeoJSON + Canvas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst W = 900, H = 500;\nconst canvas = document.getElementById('mapCanvas');\ncanvas.width = W; canvas.height = H;\nconst ctx = canvas.getContext('2d');\n\n\/\/ Mercator projection\nfunction project(lon, lat){\n const x = (lon + 180) \/ 360 * W;\n const latRad = lat * Math.PI \/ 180;\n const mercN = Math.log(Math.tan(Math.PI\/4 + latRad\/2));\n const y = H\/2 - (mercN * H \/ (2 * Math.PI)) * 0.88 + 30;\n return [x, y];\n}\n\n\/\/ Location pins data [lon, lat, label, isSwiss]\nconst pins = [\n [8.5417, 47.3769, 'Switzerland', true],\n [-98.5795, 39.8283,'USA', false],\n [78.9629, 20.5937,'India', false],\n [34.8516, 31.0461,'Israel', false],\n [133.7751,-25.2744,'Australia', false],\n];\n\n\/\/ Draw function\nfunction drawMap(geo){\n ctx.clearRect(0,0,W,H);\n\n \/\/ Draw countries\n geo.features.forEach(f => {\n ctx.beginPath();\n const geom = f.geometry;\n const polys = geom.type === 'Polygon'\n ? [geom.coordinates]\n : geom.type === 'MultiPolygon'\n ? geom.coordinates\n : [];\n\n polys.forEach(poly => {\n poly.forEach(ring => {\n ring.forEach(([lon,lat], i) => {\n const [x,y] = project(lon,lat);\n i === 0 ? ctx.moveTo(x,y) : ctx.lineTo(x,y);\n });\n ctx.closePath();\n });\n });\n\n ctx.fillStyle = '#e4e4e4';\n ctx.fill();\n ctx.strokeStyle = '#c8c8c8';\n ctx.lineWidth = 0.5;\n ctx.stroke();\n });\n\n \/\/ Draw connection arcs from Switzerland to others\n const [swx, swy] = project(pins[0][0], pins[0][1]);\n pins.slice(1).forEach(([lon,lat]) => {\n const [px,py] = project(lon,lat);\n const mx = (swx+px)\/2;\n const my = Math.min(swy,py) - 80;\n ctx.beginPath();\n ctx.moveTo(swx,swy);\n ctx.quadraticCurveTo(mx,my,px,py);\n ctx.strokeStyle = 'rgba(0,0,0,0.2)';\n ctx.lineWidth = 1.2;\n ctx.setLineDash([5,4]);\n ctx.stroke();\n ctx.setLineDash([]);\n });\n\n \/\/ Draw pins\n pins.forEach(([lon,lat,label,isSwiss], idx) => {\n const [px,py] = project(lon,lat);\n const pinH = isSwiss ? 34 : 28;\n const pinR = isSwiss ? 7 : 5;\n const pinColor = isSwiss ? '#e8001c' : '#111111';\n\n \/\/ drop shadow\n ctx.save();\n ctx.shadowColor = 'rgba(0,0,0,0.3)';\n ctx.shadowBlur = 8;\n ctx.shadowOffsetY = 4;\n\n \/\/ pin teardrop\n ctx.beginPath();\n ctx.arc(px, py - pinH + pinR, pinR, 0, 2*Math.PI);\n ctx.fillStyle = pinColor;\n ctx.fill();\n\n ctx.beginPath();\n ctx.moveTo(px - pinR * 0.7, py - pinH + pinR);\n ctx.lineTo(px, py);\n ctx.lineTo(px + pinR * 0.7, py - pinH + pinR);\n ctx.fillStyle = pinColor;\n ctx.fill();\n ctx.restore();\n\n \/\/ white dot inside pin\n ctx.beginPath();\n ctx.arc(px, py - pinH + pinR, pinR * 0.45, 0, 2*Math.PI);\n ctx.fillStyle = 'white';\n ctx.fill();\n\n \/\/ Swiss pulsing ring (drawn statically, animation via CSS below)\n if(isSwiss){\n ctx.beginPath();\n ctx.arc(px, py - 4, 16, 0, 2*Math.PI);\n ctx.strokeStyle = 'rgba(232,0,28,0.35)';\n ctx.lineWidth = 1.5;\n ctx.stroke();\n }\n\n \/\/ label pill\n const font = isSwiss ? 'bold 11px Outfit,sans-serif' : '500 10px Outfit,sans-serif';\n ctx.font = font;\n const tw = ctx.measureText(label).width;\n const ph = 18, pw = tw + 20, pr = 9;\n const lx = px - pw\/2, ly = py - pinH - ph - 6;\n\n ctx.save();\n ctx.shadowColor = 'rgba(0,0,0,0.15)';\n ctx.shadowBlur = 6;\n ctx.shadowOffsetY = 2;\n ctx.beginPath();\n ctx.roundRect(lx, ly, pw, ph, pr);\n ctx.fillStyle = isSwiss ? '#e8001c' : 'rgba(17,17,17,0.88)';\n ctx.fill();\n ctx.restore();\n\n ctx.fillStyle = 'white';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.font = font;\n ctx.fillText(label, px, ly + ph\/2);\n\n \/\/ small flag for Switzerland\n if(isSwiss){\n ctx.font = '12px serif';\n ctx.fillText('\ud83c\udde8\ud83c\udded', px + tw\/2 + 6, ly + ph\/2);\n }\n });\n}\n\n\/\/ Fetch GeoJSON and render\nfetch('https:\/\/raw.githubusercontent.com\/nvkelso\/natural-earth-vector\/master\/geojson\/ne_110m_admin_0_countries.geojson')\n .then(r => r.json())\n .then(geo => {\n drawMap(geo);\n \/\/ Animate arcs on scroll\n const sectionObs = new IntersectionObserver(entries=>{\n entries.forEach(e=>{\n if(e.isIntersecting){ drawMap(geo); sectionObs.disconnect(); }\n });\n },{threshold:.2});\n const sect = document.getElementById('intl');\n if(sect) sectionObs.observe(sect);\n })\n .catch(() => {\n \/\/ Fallback: draw a placeholder message\n ctx.fillStyle = '#f2f2f2';\n ctx.fillRect(0,0,W,H);\n ctx.fillStyle = '#aaa';\n ctx.font = '16px Outfit,sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('World map loading...', W\/2, H\/2);\n });\n<\/script>\n\n\n<section class=\"why\" id=\"why\">\n <div class=\"why-inner\">\n <div class=\"sec-label\">Why Us<\/div>\n <h2 class=\"sec-h2\">Why Businesses Choose DesignWebsite<\/h2>\n <p class=\"sec-sub\">Premium quality websites at prices that challenge traditional agency costs.<\/p>\n <div class=\"why-grid\">\n\n <div class=\"why-card sc-reveal\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 6v6l4 2\"\/><path d=\"M8 14s1 2 4 2 4-2 4-2\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">Affordable Swiss Pricing<\/h3>\n <p class=\"why-desc\">World-class website quality at a fraction of traditional Swiss agency costs \u2014 no compromise on output.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.08s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">Premium Modern Design<\/h3>\n <p class=\"why-desc\">Every website is crafted with international design standards \u2014 clean, modern, and built to impress.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.16s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">Domain & Hosting Included<\/h3>\n <p class=\"why-desc\">Everything bundled \u2014 your domain and fast, secure Swiss-grade hosting included in every package.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.24s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">Fast Delivery<\/h3>\n <p class=\"why-desc\">We move fast. Your website goes live in days, not months \u2014 without sacrificing quality.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.32s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14\"\/><path d=\"M15.54 8.46a5 5 0 010 7.07M8.46 8.46a5 5 0 000 7.07\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">WordPress Experts<\/h3>\n <p class=\"why-desc\">Deep expertise in WordPress \u2014 flexible, scalable sites that are easy for you to manage after launch.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.4s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"M21 21l-4.35-4.35\"\/><path d=\"M11 8v3l2 2\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">SEO Optimized<\/h3>\n <p class=\"why-desc\">Built to rank from day one \u2014 every site comes structured with proper SEO foundations for Google.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.48s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\"\/><path d=\"M8 10h8M8 14h4\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">Multilingual Support<\/h3>\n <p class=\"why-desc\">Reach more customers \u2014 we build websites in English, German, French, Italian and more for the Swiss market.<\/p>\n <\/div>\n\n <div class=\"why-card sc-reveal\" style=\"--d:.56s\">\n <div class=\"why-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><path d=\"M9 12l2 2 4-4\"\/><\/svg>\n <\/div>\n <h3 class=\"why-title\">International Experience<\/h3>\n <p class=\"why-desc\">500+ projects across 10+ countries. We bring global best practices directly to your Swiss business.<\/p>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"portfolio\" id=\"portfolio\">\n <div class=\"portfolio-inner\">\n <div class=\"sec-label\">Our Work<\/div>\n <h2 class=\"sec-h2\">Selected Client Work<\/h2>\n <p class=\"sec-sub\">A collection of websites designed for businesses, organizations, and growing brands.<\/p>\n <div class=\"port-grid\">\n\n <a href=\"https:\/\/www.tinaramchandani.com\/\" target=\"_blank\" class=\"port-card sc-reveal\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/shekeltech.com\/wp-content\/uploads\/2025\/04\/s3.webp\" alt=\"Tina Ramchandani\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Personal Brand<\/span>\n <h3 class=\"port-title\">Tina Ramchandani<\/h3>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/www.whistledrive.com\/\" target=\"_blank\" class=\"port-card sc-reveal\" style=\"--d:.08s\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/shekeltech.com\/wp-content\/uploads\/2025\/04\/s5.webp\" alt=\"WhistleDrive\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Corporate<\/span>\n <h3 class=\"port-title\">WhistleDrive<\/h3>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/jagaviskritunga.in\/\" target=\"_blank\" class=\"port-card sc-reveal\" style=\"--d:.16s\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/shekeltech.com\/wp-content\/uploads\/2025\/04\/s4.webp\" alt=\"Jagavis Kritunga\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Organisation<\/span>\n <h3 class=\"port-title\">Jagavis Kritunga<\/h3>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/www.chennaisuperkings.com\/\" target=\"_blank\" class=\"port-card sc-reveal\" style=\"--d:.24s\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/shekeltech.com\/wp-content\/uploads\/2025\/04\/s6.webp\" alt=\"Chennai Super Kings\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Sports Brand<\/span>\n <h3 class=\"port-title\">Chennai Super Kings<\/h3>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/www.bhashyamschools.com\/\" target=\"_blank\" class=\"port-card sc-reveal\" style=\"--d:.32s\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/shekeltech.com\/wp-content\/uploads\/2025\/04\/S2.webp\" alt=\"Bhashyam Schools\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Education<\/span>\n <h3 class=\"port-title\">Bhashyam Schools<\/h3>\n <\/div>\n <\/a>\n\n <a href=\"https:\/\/hajipapa.com\/\" target=\"_blank\" class=\"port-card sc-reveal\" style=\"--d:.4s\" rel=\"noopener\">\n <div class=\"port-img-wrap\">\n <img decoding=\"async\" src=\"https:\/\/plain-apac-prod-public.komododecks.com\/202605\/27\/3zYNVOSyRJsGIu2gAUTT\/image.png\" alt=\"Haji Papa\" loading=\"lazy\"\/>\n <div class=\"port-overlay\">\n <span class=\"port-visit\">Visit Website \u2197<\/span>\n <\/div>\n <\/div>\n <div class=\"port-meta\">\n <span class=\"port-cat\">Restaurant<\/span>\n <h3 class=\"port-title\">Haji Papa<\/h3>\n <\/div>\n <\/a>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"pricing\" id=\"pricing\">\n <div class=\"pricing-inner\">\n <div class=\"sec-label\">Pricing<\/div>\n <h2 class=\"sec-h2\">Affordable Premium Website Packages<\/h2>\n <p class=\"sec-sub\">Transparent pricing. Premium quality. No hidden costs.<\/p>\n <div class=\"pricing-badge\">Designed to challenge traditional Swiss agency pricing.<\/div>\n\n <div class=\"plans-grid\">\n\n \n <div class=\"plan-card sc-reveal\">\n <div class=\"plan-top\">\n <span class=\"plan-name\">Starter<\/span>\n <div class=\"plan-price\"><span class=\"plan-currency\">CHF<\/span>599<\/div>\n <p class=\"plan-for\">For startups & small businesses just getting online.<\/p>\n <\/div>\n <ul class=\"plan-list\">\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Domain Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Hosting Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>2 Page Website<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Mobile Responsive<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Contact Form<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Basic SEO Setup<\/li>\n <li class=\"plan-list-muted\"><svg viewBox=\"0 0 16 16\"><line x1=\"3\" y1=\"8\" x2=\"13\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>No Ecommerce<\/li>\n <li class=\"plan-list-muted\"><svg viewBox=\"0 0 16 16\"><line x1=\"3\" y1=\"8\" x2=\"13\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>No WhatsApp Integration<\/li>\n <li class=\"plan-list-muted\"><svg viewBox=\"0 0 16 16\"><line x1=\"3\" y1=\"8\" x2=\"13\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>No Speed Optimization<\/li>\n <\/ul>\n <button class=\"plan-btn plan-btn-out\" onclick=\"openModal('Starter \u2013 599 CHF')\">Order Now<\/button>\n <\/div>\n\n \n <div class=\"plan-card plan-pro sc-reveal\" style=\"--d:.1s\">\n <div class=\"plan-popular\">\u2b50 Most Popular<\/div>\n <div class=\"plan-top\">\n <span class=\"plan-name plan-name-pro\">Pro<\/span>\n <div class=\"plan-price plan-price-pro\"><span class=\"plan-currency plan-currency-pro\">CHF<\/span>1499<\/div>\n <p class=\"plan-for plan-for-pro\">The complete package. Everything your business needs to win online.<\/p>\n <\/div>\n <ul class=\"plan-list plan-list-pro\">\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Domain & Hosting Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Up to 8 Pages<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Ecommerce Integration<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Payment Gateway Setup<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>WhatsApp Integration<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Advanced SEO + Schema<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Google Analytics Setup<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Social Media Integration<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Speed & Performance Optimization<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>SSL Certificate Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Multilingual Ready<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Priority Delivery<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>3 Months Free Support<\/li>\n <\/ul>\n <div class=\"pro-value-tag\">\ud83c\udf81 Best Value \u2014 Save vs. Agency<\/div>\n <button class=\"plan-btn plan-btn-pro\" onclick=\"openModal('Pro \u2013 1499 CHF')\">Get Started \u2192<\/button>\n <\/div>\n\n \n <div class=\"plan-card sc-reveal\" style=\"--d:.2s\">\n <div class=\"plan-top\">\n <span class=\"plan-name\">Standard<\/span>\n <div class=\"plan-price\"><span class=\"plan-currency\">CHF<\/span>999<\/div>\n <p class=\"plan-for\">For growing businesses that need more pages and integrations.<\/p>\n <\/div>\n <ul class=\"plan-list\">\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Domain Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Hosting Included<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Up to 5 Pages<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Mobile Responsive<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>WhatsApp Integration<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Social Media Integration<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>SEO Ready<\/li>\n <li><svg viewBox=\"0 0 16 16\"><polyline points=\"2,8 6,12 14,4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"\/><\/svg>Speed Optimization<\/li>\n <li class=\"plan-list-muted\"><svg viewBox=\"0 0 16 16\"><line x1=\"3\" y1=\"8\" x2=\"13\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>No Ecommerce<\/li>\n <li class=\"plan-list-muted\"><svg viewBox=\"0 0 16 16\"><line x1=\"3\" y1=\"8\" x2=\"13\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/><\/svg>No Payment Gateway<\/li>\n <\/ul>\n <button class=\"plan-btn plan-btn-out\" onclick=\"openModal('Standard \u2013 999 CHF')\">Order Now<\/button>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"pay-trust\" id=\"payment\">\n <div class=\"pay-inner\">\n <div class=\"sec-label\">Payment Process<\/div>\n <h2 class=\"sec-h2\">Simple & Risk-Free Payment Process<\/h2>\n <p class=\"pay-body\">To make things simple and transparent, we only require <strong>50% upfront<\/strong> payment to begin your project. The remaining <strong>50% is paid only after<\/strong> your website is completed, reviewed, and approved.<\/p>\n\n <div class=\"pay-grid\">\n <div class=\"pay-card sc-reveal\">\n <div class=\"pay-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"5\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M2 10h20\"\/><path d=\"M6 15h4\"\/><\/svg>\n <\/div>\n <div class=\"pay-pct\">50%<\/div>\n <h3 class=\"pay-card-title\">Upfront<\/h3>\n <p class=\"pay-card-desc\">A small deposit to kick off your project and begin design and development immediately.<\/p>\n <\/div>\n\n <div class=\"pay-card sc-reveal\" style=\"--d:.1s\">\n <div class=\"pay-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\n <\/div>\n <div class=\"pay-pct\">50%<\/div>\n <h3 class=\"pay-card-title\">After Completion<\/h3>\n <p class=\"pay-card-desc\">The balance is only due once your website is finished, reviewed, and approved by you.<\/p>\n <\/div>\n\n <div class=\"pay-card sc-reveal\" style=\"--d:.2s\">\n <div class=\"pay-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\"\/><path d=\"M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6\"\/><\/svg>\n <\/div>\n <div class=\"pay-pct-sm\">\u2726<\/div>\n <h3 class=\"pay-card-title\">Transparent Pricing<\/h3>\n <p class=\"pay-card-desc\">No hidden costs. No surprise invoices. The price you see is the price you pay \u2014 full stop.<\/p>\n <\/div>\n\n <div class=\"pay-card sc-reveal\" style=\"--d:.3s\">\n <div class=\"pay-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z\"\/><\/svg>\n <\/div>\n <div class=\"pay-pct-sm\">\u2726<\/div>\n <h3 class=\"pay-card-title\">Client Satisfaction Focus<\/h3>\n <p class=\"pay-card-desc\">We don't just deliver websites \u2014 we deliver results that make our clients genuinely proud.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"modal-backdrop\" id=\"modalBackdrop\" onclick=\"closeModal()\">\n <div class=\"modal-box\" onclick=\"event.stopPropagation()\">\n <button class=\"modal-close\" onclick=\"closeModal()\">\u2715<\/button>\n <div class=\"modal-header\">\n <div class=\"sec-label\" style=\"margin-bottom:.6rem\">Start Your Project<\/div>\n <h3 class=\"modal-title\">Tell Us About Your Project<\/h3>\n <p class=\"modal-sub\">Our team will reach out within 24 hours.<\/p>\n <\/div>\n <div class=\"modal-body\">\n <div class=\"mf-group\">\n <label class=\"mf-label\">Full Name<\/label>\n <input class=\"mf-input\" type=\"text\" placeholder=\"John M\u00fcller\" id=\"mf-name\"\/>\n <\/div>\n <div class=\"mf-group\">\n <label class=\"mf-label\">WhatsApp \/ Mobile Number<\/label>\n <input class=\"mf-input\" type=\"tel\" placeholder=\"+41 79 000 00 00\" id=\"mf-phone\"\/>\n <\/div>\n <div class=\"mf-group\">\n <label class=\"mf-label\">Email Address<\/label>\n <input class=\"mf-input\" type=\"email\" placeholder=\"john@company.ch\" id=\"mf-email\"\/>\n <\/div>\n <div class=\"mf-group\">\n <label class=\"mf-label\">Website Type<\/label>\n <select class=\"mf-input mf-select\" id=\"mf-type\">\n <option value=\"\" disabled selected>Select a website type<\/option>\n <option>Business Website<\/option>\n <option>Ecommerce Website<\/option>\n <option>Portfolio Website<\/option>\n <option>Restaurant Website<\/option>\n <option>Booking Website<\/option>\n <option>Custom Website<\/option>\n <\/select>\n <\/div>\n <div class=\"mf-group\" id=\"mf-pkg-group\" style=\"display:none\">\n <label class=\"mf-label\">Selected Package<\/label>\n <input class=\"mf-input\" type=\"text\" id=\"mf-pkg\" readonly\/>\n <\/div>\n <div class=\"mf-group\">\n <label class=\"mf-label\">Project Details<\/label>\n <textarea class=\"mf-input mf-textarea\" placeholder=\"Tell us about your business, goals, and anything specific you'd like on your website...\" id=\"mf-details\"><\/textarea>\n <\/div>\n <button class=\"mf-submit\" onclick=\"submitForm()\">Submit Project Request<\/button>\n <p class=\"mf-note\">No spam. Our team will contact you shortly.<\/p>\n <\/div>\n <\/div>\n<\/div>\n\n<style>\n\/* \u2500\u2500 SHARED SECTION UTILS \u2500\u2500 *\/\n.sec-label{\n font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;\n color:var(--g400);margin-bottom:1rem;\n}\n.sec-h2{\n font-family:var(--ff-display);font-size:clamp(1.7rem,2.8vw,2.6rem);\n font-weight:800;letter-spacing:-.03em;line-height:1.1;\n color:var(--black);margin-bottom:.9rem;\n}\n.sec-sub{\n font-size:.9rem;font-weight:300;color:var(--g600);\n line-height:1.7;max-width:520px;\n}\n\n\/* \u2500\u2500 SCROLL REVEAL \u2500\u2500 *\/\n.sc-reveal{\n opacity:0;transform:translateY(24px);\n transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--d,0s),\n transform .7s cubic-bezier(.22,1,.36,1) var(--d,0s);\n}\n.sc-reveal.in{opacity:1;transform:translateY(0)}\n\n\/* \u2550\u2550\u2550 WHY SECTION \u2550\u2550\u2550 *\/\n.why{padding:6rem 7rem;background:var(--white);border-top:1px solid var(--g200)}\n.why-inner{max-width:1200px;margin:0 auto}\n.why-inner .sec-sub{margin-bottom:3.5rem}\n.why-grid{\n display:grid;grid-template-columns:repeat(4,1fr);gap:1px;\n border:1px solid var(--g200);border-radius:12px;overflow:hidden;\n}\n.why-card{\n padding:2.2rem 1.8rem;\n background:var(--white);\n border-right:1px solid var(--g200);\n border-bottom:1px solid var(--g200);\n transition:background .25s ease, transform .25s ease, box-shadow .25s ease;\n cursor:default;\n}\n.why-card:nth-child(4n){border-right:none}\n.why-card:nth-child(5),.why-card:nth-child(6),.why-card:nth-child(7),.why-card:nth-child(8){border-bottom:none}\n.why-card:hover{background:var(--g50);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.06)}\n.why-icon-wrap{\n width:38px;height:38px;\n display:flex;align-items:center;justify-content:center;\n background:var(--g100);border-radius:8px;margin-bottom:1.2rem;\n transition:background .25s;\n}\n.why-card:hover .why-icon-wrap{background:var(--black)}\n.why-icon-wrap svg{\n width:18px;height:18px;color:var(--black);\n transition:color .25s;\n}\n.why-card:hover .why-icon-wrap svg{color:var(--white)}\n.why-title{\n font-family:var(--ff-display);font-size:13.5px;font-weight:700;\n color:var(--black);margin-bottom:.5rem;letter-spacing:-.01em;\n}\n.why-desc{font-size:12px;font-weight:300;color:var(--g600);line-height:1.65}\n\n\/* \u2550\u2550\u2550 PORTFOLIO \u2550\u2550\u2550 *\/\n.portfolio{padding:6rem 7rem;background:var(--g50);border-top:1px solid var(--g200)}\n.portfolio-inner{max-width:1200px;margin:0 auto}\n.portfolio-inner .sec-sub{margin-bottom:3.5rem}\n.port-grid{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:20px;\n}\n.port-card{\n text-decoration:none;color:inherit;\n display:flex;flex-direction:column;\n border-radius:10px;overflow:hidden;\n border:1px solid var(--g200);\n background:var(--white);\n transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;\n}\n.port-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.1)}\n.port-img-wrap{\n position:relative;overflow:hidden;\n aspect-ratio:16\/10;\n}\n.port-img-wrap img{\n width:100%;height:100%;object-fit:cover;\n transition:transform .6s cubic-bezier(.22,1,.36,1);\n display:block;\n}\n.port-card:hover .port-img-wrap img{transform:scale(1.06)}\n.port-overlay{\n position:absolute;inset:0;\n background:rgba(10,10,10,.55);\n display:flex;align-items:center;justify-content:center;\n opacity:0;transition:opacity .3s ease;\n backdrop-filter:blur(2px);\n}\n.port-card:hover .port-overlay{opacity:1}\n.port-visit{\n color:white;font-size:13px;font-weight:600;\n letter-spacing:.06em;border:1px solid rgba(255,255,255,.6);\n padding:9px 20px;border-radius:100px;\n transition:background .2s;\n}\n.port-card:hover .port-visit{background:rgba(255,255,255,.15)}\n.port-meta{padding:1.2rem 1.4rem}\n.port-cat{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g400)}\n.port-title{font-family:var(--ff-display);font-size:15px;font-weight:700;color:var(--black);margin-top:.3rem;letter-spacing:-.01em}\n\n\/* \u2550\u2550\u2550 PRICING \u2550\u2550\u2550 *\/\n.pricing{padding:6rem 7rem;background:var(--white);border-top:1px solid var(--g200)}\n.pricing-inner{max-width:1100px;margin:0 auto}\n.pricing-badge{\n display:inline-block;\n font-size:11px;font-weight:500;\n letter-spacing:.05em;color:var(--g600);\n border:1px solid var(--g200);border-radius:100px;\n padding:5px 14px;margin-top:1rem;margin-bottom:3.5rem;\n}\n.plans-grid{\n display:grid;grid-template-columns:repeat(3,1fr);\n gap:20px;align-items:start;\n}\n.plan-card{\n border:1px solid var(--g200);border-radius:12px;\n padding:2.4rem 2rem;background:var(--white);\n transition:transform .3s ease,box-shadow .3s ease;\n}\n.plan-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08)}\n.plan-pro{\n background:var(--black);border-color:transparent;\n box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.28);\n position:relative;\n}\n.plan-pro:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 32px 70px rgba(0,0,0,.35)}\n.plan-popular{\n position:absolute;top:-13px;left:50%;transform:translateX(-50%);\n background:var(--white);color:var(--black);\n font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;\n padding:4px 14px;border-radius:100px;white-space:nowrap;\n border:1px solid var(--g200);\n}\n.plan-name{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g400)}\n.plan-name-pro{color:rgba(255,255,255,.5)}\n.plan-price{\n font-family:var(--ff-display);font-size:2.8rem;font-weight:800;\n letter-spacing:-.05em;color:var(--black);line-height:1;\n margin:.6rem 0 .4rem;display:flex;align-items:baseline;gap:4px;\n}\n.plan-price-pro{color:var(--white)}\n.plan-currency{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--g400);margin-bottom:4px}\n.plan-currency-pro{color:rgba(255,255,255,.45)}\n.plan-for{font-size:.82rem;color:var(--g400);font-weight:300;margin-bottom:1.6rem;line-height:1.5}\n.plan-for-pro{color:rgba(255,255,255,.4)}\n.plan-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-bottom:2rem}\n.plan-list li{\n display:flex;align-items:center;gap:9px;\n font-size:.84rem;color:var(--g800);font-weight:400;\n}\n.plan-list-pro li{color:rgba(255,255,255,.8)}\n.plan-list li svg{width:14px;height:14px;flex-shrink:0;color:var(--black)}\n.plan-list-pro li svg{color:rgba(255,255,255,.7)}\n.plan-btn{\n width:100%;padding:12px;border-radius:7px;\n font-family:var(--ff-body);font-size:13.5px;font-weight:600;\n cursor:pointer;transition:all .22s ease;letter-spacing:.01em;border:none;\n}\n.plan-btn-out{\n background:transparent;color:var(--black);\n border:1.5px solid var(--g200);\n}\n.plan-btn-out:hover{border-color:var(--black);background:var(--black);color:var(--white)}\n.plan-btn-pro{background:var(--white);color:var(--black)}\n.plan-btn-pro:hover{background:var(--g100)}\n\n\/* \u2550\u2550\u2550 PAYMENT TRUST \u2550\u2550\u2550 *\/\n.pay-trust{padding:6rem 7rem;background:var(--g50);border-top:1px solid var(--g200)}\n.pay-inner{max-width:1100px;margin:0 auto}\n.pay-body{\n font-size:.95rem;font-weight:300;color:var(--g600);\n line-height:1.8;max-width:640px;margin:1.4rem 0 3.5rem;\n}\n.pay-body strong{color:var(--black);font-weight:600}\n.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}\n.pay-card{\n background:var(--white);border:1px solid var(--g200);\n border-radius:12px;padding:2rem 1.6rem;\n transition:transform .3s ease,box-shadow .3s ease;\n}\n.pay-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.07)}\n.pay-icon{\n width:40px;height:40px;background:var(--g100);border-radius:10px;\n display:flex;align-items:center;justify-content:center;margin-bottom:1rem;\n transition:background .25s;\n}\n.pay-card:hover .pay-icon{background:var(--black)}\n.pay-icon svg{width:18px;height:18px;color:var(--black);transition:color .25s}\n.pay-card:hover .pay-icon svg{color:var(--white)}\n.pay-pct{\n font-family:var(--ff-display);font-size:2.2rem;font-weight:800;\n letter-spacing:-.04em;color:var(--black);line-height:1;margin-bottom:.4rem;\n}\n.pay-pct-sm{font-size:1.4rem;color:var(--black);margin-bottom:.4rem;line-height:1}\n.pay-card-title{font-family:var(--ff-display);font-size:13.5px;font-weight:700;color:var(--black);margin-bottom:.5rem}\n.pay-card-desc{font-size:11.5px;color:var(--g600);line-height:1.65;font-weight:300}\n\n\/* \u2550\u2550\u2550 MODAL \u2550\u2550\u2550 *\/\n.modal-backdrop{\n position:fixed;inset:0;background:rgba(10,10,10,.6);\n z-index:9999;display:flex;align-items:center;justify-content:center;\n padding:1.5rem;opacity:0;pointer-events:none;\n backdrop-filter:blur(6px);\n transition:opacity .3s ease;\n}\n.modal-backdrop.open{opacity:1;pointer-events:all}\n.modal-box{\n background:var(--white);border-radius:14px;\n width:100%;max-width:520px;max-height:90vh;overflow-y:auto;\n padding:2.6rem 2.8rem;position:relative;\n transform:translateY(20px) scale(.98);\n transition:transform .35s cubic-bezier(.22,1,.36,1);\n border:1px solid var(--g200);\n}\n.modal-backdrop.open .modal-box{transform:translateY(0) scale(1)}\n.modal-close{\n position:absolute;top:1.2rem;right:1.4rem;\n background:var(--g100);border:none;border-radius:50%;\n width:30px;height:30px;font-size:13px;cursor:pointer;\n color:var(--g600);transition:all .2s;\n display:flex;align-items:center;justify-content:center;\n}\n.modal-close:hover{background:var(--black);color:var(--white)}\n.modal-title{font-family:var(--ff-display);font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--black);margin-bottom:.4rem}\n.modal-sub{font-size:.85rem;color:var(--g400);margin-bottom:1.8rem;font-weight:300}\n.mf-group{display:flex;flex-direction:column;gap:6px;margin-bottom:1.1rem}\n.mf-label{font-size:11.5px;font-weight:600;color:var(--g800);letter-spacing:.02em}\n.mf-input{\n padding:11px 14px;border:1.5px solid var(--g200);border-radius:7px;\n font-family:var(--ff-body);font-size:13.5px;color:var(--black);\n background:var(--white);outline:none;\n transition:border-color .2s;width:100%;\n}\n.mf-input:focus{border-color:var(--black)}\n.mf-select{cursor:pointer;appearance:none;background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'\/%3E%3C\/svg%3E\");background-repeat:no-repeat;background-position:right 12px center}\n.mf-textarea{resize:vertical;min-height:90px;line-height:1.5}\n.mf-submit{\n width:100%;padding:13px;background:var(--black);color:var(--white);\n border:none;border-radius:7px;font-family:var(--ff-body);\n font-size:14px;font-weight:600;cursor:pointer;\n transition:background .2s,transform .2s;margin-top:.4rem;letter-spacing:.01em;\n}\n.mf-submit:hover{background:var(--g800);transform:translateY(-1px)}\n.mf-note{font-size:11px;color:var(--g400);text-align:center;margin-top:.8rem;font-weight:300}\n\n\/* \u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550 *\/\n@media(max-width:1100px){\n .why{padding:5rem 3rem}\n .portfolio{padding:5rem 3rem}\n .pricing{padding:5rem 3rem}\n .pay-trust{padding:5rem 3rem}\n .why-grid{grid-template-columns:repeat(2,1fr)}\n .why-card:nth-child(2n){border-right:none}\n .why-card:nth-child(n+3){border-bottom:1px solid var(--g200)}\n .why-card:nth-child(7),.why-card:nth-child(8){border-bottom:none}\n}\n@media(max-width:760px){\n .plans-grid{grid-template-columns:1fr}\n .port-grid{grid-template-columns:1fr}\n .pay-grid{grid-template-columns:repeat(2,1fr)}\n .why-grid{grid-template-columns:1fr}\n .why-card{border-right:none !important}\n .why-card:not(:last-child){border-bottom:1px solid var(--g200)}\n}\n<\/style>\n\n<script>\n\/\/ \u2500\u2500 Scroll reveal for new sections \u2500\u2500\nconst scObs = new IntersectionObserver(entries=>{\n entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');scObs.unobserve(e.target)}});\n},{threshold:.1});\ndocument.querySelectorAll('.sc-reveal').forEach(el=>scObs.observe(el));\n\n\/\/ \u2500\u2500 Modal \u2500\u2500\nfunction openModal(pkg){\n const bd=document.getElementById('modalBackdrop');\n const pkgGroup=document.getElementById('mf-pkg-group');\n const pkgInput=document.getElementById('mf-pkg');\n if(pkg){pkgInput.value=pkg;pkgGroup.style.display='flex';}\n else{pkgGroup.style.display='none';}\n bd.classList.add('open');\n document.body.style.overflow='hidden';\n}\nfunction closeModal(){\n document.getElementById('modalBackdrop').classList.remove('open');\n document.body.style.overflow='';\n}\nfunction submitForm(){\n const name=document.getElementById('mf-name').value.trim();\n const email=document.getElementById('mf-email').value.trim();\n if(!name||!email){alert('Please fill in your name and email.');return;}\n const btn=document.querySelector('.mf-submit');\n btn.textContent='Request Submitted \u2713';\n btn.style.background='#1a7a4a';\n setTimeout(()=>{closeModal();btn.textContent='Submit Project Request';btn.style.background='';},2200);\n}\ndocument.addEventListener('keydown',e=>{if(e.key==='Escape')closeModal()});\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8488a97 elementor-widget elementor-widget-html\" data-id=\"8488a97\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Sections 8\u201313 \u2014 Premium Swiss Web Agency<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Serif+Display:ital@0;1&family=Geist+Mono:wght@300;400&display=swap\" rel=\"stylesheet\">\n\n<style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --black: #080808;\n --white: #f8f8f6;\n --gray-100: #f0f0ee;\n --gray-200: #e4e4e0;\n --gray-300: #c8c8c4;\n --gray-500: #888884;\n --gray-700: #444440;\n --gray-900: #1c1c1a;\n --accent: #080808;\n --font-display: 'DM Serif Display', Georgia, serif;\n --font-body: 'DM Sans', system-ui, sans-serif;\n --font-mono: 'Geist Mono', monospace;\n --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n html { scroll-behavior: smooth; }\n\n body {\n background: var(--white);\n color: var(--black);\n font-family: var(--font-body);\n font-size: 16px;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 Utility \u2500\u2500 *\/\n .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }\n @media (max-width: 768px) { .container { padding: 0 24px; } }\n\n .section-label {\n font-family: var(--font-mono);\n font-size: 10px;\n font-weight: 400;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: var(--gray-500);\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 12px;\n }\n .section-label::before {\n content: '';\n display: block;\n width: 24px;\n height: 1px;\n background: var(--gray-300);\n }\n\n .reveal {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);\n }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n .reveal-delay-1 { transition-delay: 0.1s; }\n .reveal-delay-2 { transition-delay: 0.2s; }\n .reveal-delay-3 { transition-delay: 0.3s; }\n .reveal-delay-4 { transition-delay: 0.4s; }\n .reveal-delay-5 { transition-delay: 0.5s; }\n\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SECTION 8 \u2014 PROCESS TIMELINE\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .process-section {\n padding: 140px 0;\n background: var(--white);\n border-top: 1px solid var(--gray-200);\n }\n\n .process-header { margin-bottom: 80px; }\n\n .process-header h2 {\n font-family: var(--font-display);\n font-size: clamp(2.4rem, 5vw, 3.8rem);\n font-weight: 400;\n line-height: 1.1;\n letter-spacing: -0.02em;\n color: var(--black);\n max-width: 620px;\n margin-bottom: 20px;\n }\n\n .process-header p {\n font-size: 1.05rem;\n color: var(--gray-700);\n max-width: 480px;\n line-height: 1.65;\n font-weight: 300;\n }\n\n .timeline {\n position: relative;\n display: grid;\n grid-template-columns: 1fr;\n gap: 0;\n }\n\n .timeline-track {\n position: absolute;\n left: 28px;\n top: 0;\n bottom: 0;\n width: 1px;\n background: var(--gray-200);\n z-index: 0;\n }\n\n .timeline-track-fill {\n position: absolute;\n left: 28px;\n top: 0;\n width: 1px;\n height: 0%;\n background: var(--black);\n transition: height 1.2s var(--ease-out-expo);\n z-index: 1;\n }\n\n .timeline-step {\n display: grid;\n grid-template-columns: 56px 1fr;\n gap: 32px;\n padding: 0 0 60px 0;\n position: relative;\n z-index: 2;\n cursor: default;\n }\n .timeline-step:last-child { padding-bottom: 0; }\n\n .step-node {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0;\n position: relative;\n }\n\n .step-dot {\n width: 56px;\n height: 56px;\n border: 1.5px solid var(--gray-300);\n background: var(--white);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 2;\n transition: border-color 0.4s var(--ease-out-expo), background 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);\n flex-shrink: 0;\n }\n\n .timeline-step:hover .step-dot {\n border-color: var(--black);\n background: var(--black);\n transform: scale(1.05);\n }\n\n .step-dot svg {\n width: 20px;\n height: 20px;\n stroke: var(--gray-500);\n transition: stroke 0.4s var(--ease-out-expo);\n }\n .timeline-step:hover .step-dot svg { stroke: var(--white); }\n\n .step-number {\n font-family: var(--font-mono);\n font-size: 9px;\n letter-spacing: 0.12em;\n color: var(--gray-300);\n margin-top: 10px;\n font-weight: 400;\n }\n\n .step-content {\n padding-top: 14px;\n padding-bottom: 0;\n }\n\n .step-content h3 {\n font-size: 1.1rem;\n font-weight: 500;\n letter-spacing: -0.01em;\n color: var(--black);\n margin-bottom: 10px;\n transition: color 0.3s ease;\n }\n\n .step-content p {\n font-size: 0.925rem;\n color: var(--gray-500);\n line-height: 1.65;\n font-weight: 300;\n max-width: 440px;\n }\n\n .step-tag {\n display: inline-block;\n font-family: var(--font-mono);\n font-size: 9px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--gray-300);\n border: 1px solid var(--gray-200);\n padding: 3px 10px;\n border-radius: 100px;\n margin-bottom: 12px;\n transition: all 0.3s ease;\n }\n .timeline-step:hover .step-tag {\n border-color: var(--gray-400);\n color: var(--gray-700);\n }\n\n @media (max-width: 768px) {\n .process-section { padding: 80px 0; }\n .timeline-track, .timeline-track-fill { left: 20px; }\n .timeline-step { grid-template-columns: 40px 1fr; gap: 20px; }\n .step-dot { width: 40px; height: 40px; }\n .step-dot svg { width: 16px; height: 16px; }\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SECTIONS 9\u201311 \u2014 SEO CONTENT BLOCKS\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .seo-section {\n padding: 120px 0;\n border-top: 1px solid var(--gray-200);\n }\n\n .seo-section.alt { background: var(--gray-100); }\n\n .seo-inner {\n display: grid;\n grid-template-columns: 380px 1fr;\n gap: 80px;\n align-items: start;\n }\n\n .seo-inner.reverse { direction: rtl; }\n .seo-inner.reverse > * { direction: ltr; }\n\n .seo-left { position: sticky; top: 40px; }\n\n .seo-left h2 {\n font-family: var(--font-display);\n font-size: clamp(1.9rem, 3.5vw, 2.8rem);\n font-weight: 400;\n line-height: 1.15;\n letter-spacing: -0.02em;\n color: var(--black);\n margin-bottom: 28px;\n }\n\n .seo-left .seo-summary {\n font-size: 0.9rem;\n color: var(--gray-500);\n line-height: 1.7;\n font-weight: 300;\n border-left: 2px solid var(--gray-200);\n padding-left: 20px;\n }\n\n .seo-right {}\n\n .seo-right p {\n font-size: 0.975rem;\n color: var(--gray-700);\n line-height: 1.8;\n font-weight: 300;\n margin-bottom: 22px;\n }\n\n .seo-right p:last-child { margin-bottom: 0; }\n\n .seo-right strong {\n color: var(--black);\n font-weight: 500;\n }\n\n .seo-stats {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1px;\n background: var(--gray-200);\n border: 1px solid var(--gray-200);\n border-radius: 12px;\n overflow: hidden;\n margin: 40px 0;\n }\n\n .stat-item {\n background: var(--white);\n padding: 28px 24px;\n text-align: center;\n }\n .seo-section.alt .stat-item { background: var(--gray-100); }\n\n .stat-item .stat-value {\n font-family: var(--font-display);\n font-size: 2rem;\n font-weight: 400;\n color: var(--black);\n line-height: 1;\n margin-bottom: 6px;\n letter-spacing: -0.03em;\n }\n\n .stat-item .stat-label {\n font-size: 0.78rem;\n color: var(--gray-500);\n font-weight: 400;\n letter-spacing: 0.02em;\n }\n\n @media (max-width: 900px) {\n .seo-inner { grid-template-columns: 1fr; gap: 40px; }\n .seo-inner.reverse { direction: ltr; }\n .seo-left { position: static; }\n .seo-stats { grid-template-columns: repeat(3, 1fr); }\n }\n\n @media (max-width: 600px) {\n .seo-section { padding: 72px 0; }\n .seo-stats { grid-template-columns: 1fr; }\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SECTION 12 \u2014 FAQ\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .faq-section {\n padding: 140px 0;\n background: var(--black);\n border-top: 1px solid #1a1a18;\n color: var(--white);\n }\n\n .faq-header { margin-bottom: 72px; }\n\n .faq-header .section-label { color: #555550; }\n .faq-header .section-label::before { background: #333330; }\n\n .faq-header h2 {\n font-family: var(--font-display);\n font-size: clamp(2.4rem, 5vw, 3.8rem);\n font-weight: 400;\n line-height: 1.1;\n letter-spacing: -0.02em;\n color: var(--white);\n max-width: 560px;\n }\n\n .faq-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0 60px;\n align-items: start;\n }\n\n .faq-col { display: flex; flex-direction: column; gap: 0; }\n\n .faq-item {\n border-bottom: 1px solid #1e1e1c;\n overflow: hidden;\n }\n\n .faq-question {\n width: 100%;\n background: none;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n padding: 24px 0;\n text-align: left;\n color: var(--white);\n }\n\n .faq-question span {\n font-size: 0.95rem;\n font-weight: 400;\n line-height: 1.45;\n color: #d0d0cc;\n transition: color 0.3s ease;\n }\n\n .faq-item.open .faq-question span,\n .faq-question:hover span { color: var(--white); }\n\n .faq-icon {\n width: 28px;\n height: 28px;\n border: 1px solid #2a2a28;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--ease-out-expo);\n }\n\n .faq-item.open .faq-icon {\n background: var(--white);\n border-color: var(--white);\n transform: rotate(45deg);\n }\n\n .faq-icon svg {\n width: 12px;\n height: 12px;\n stroke: #555550;\n transition: stroke 0.3s ease;\n }\n .faq-item.open .faq-icon svg { stroke: var(--black); }\n\n .faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.55s var(--ease-out-expo), padding 0.4s ease;\n }\n\n .faq-item.open .faq-answer { max-height: 600px; }\n\n .faq-answer-inner {\n padding: 0 0 24px 0;\n font-size: 0.9rem;\n color: #888884;\n line-height: 1.75;\n font-weight: 300;\n max-width: 480px;\n }\n\n .faq-answer-inner strong { color: #c8c8c4; font-weight: 400; }\n\n @media (max-width: 900px) {\n .faq-grid { grid-template-columns: 1fr; gap: 0; }\n .faq-section { padding: 80px 0; }\n }\n\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SECTION 13 \u2014 FINAL CTA\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n .cta-section {\n padding: 160px 0 120px;\n background: var(--black);\n border-top: 1px solid #1a1a18;\n position: relative;\n overflow: hidden;\n }\n\n .cta-bg-text {\n position: absolute;\n bottom: -40px;\n left: 50%;\n transform: translateX(-50%);\n font-family: var(--font-display);\n font-size: clamp(100px, 20vw, 220px);\n font-weight: 400;\n letter-spacing: -0.04em;\n color: transparent;\n -webkit-text-stroke: 1px #1a1a18;\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n line-height: 1;\n }\n\n .cta-inner { position: relative; z-index: 2; text-align: center; }\n\n .cta-label {\n font-family: var(--font-mono);\n font-size: 10px;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #555550;\n margin-bottom: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n }\n .cta-label::before, .cta-label::after {\n content: '';\n display: block;\n width: 32px;\n height: 1px;\n background: #2a2a28;\n }\n\n .cta-heading {\n font-family: var(--font-display);\n font-size: clamp(2.8rem, 7vw, 5.5rem);\n font-weight: 400;\n line-height: 1.0;\n letter-spacing: -0.03em;\n color: var(--white);\n margin-bottom: 28px;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .cta-heading em {\n font-style: italic;\n color: #888884;\n }\n\n .cta-subheading {\n font-size: 1rem;\n color: #666662;\n line-height: 1.65;\n font-weight: 300;\n max-width: 520px;\n margin: 0 auto 56px;\n }\n\n .cta-buttons {\n display: flex;\n gap: 16px;\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 64px;\n }\n\n .btn-primary-cta {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--white);\n color: var(--black);\n border: none;\n font-family: var(--font-body);\n font-size: 0.9rem;\n font-weight: 500;\n letter-spacing: 0.01em;\n padding: 16px 32px;\n border-radius: 100px;\n cursor: pointer;\n text-decoration: none;\n transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease, background 0.3s ease;\n }\n .btn-primary-cta:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(248,248,246,0.2);\n }\n\n .btn-secondary-cta {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: transparent;\n color: #888884;\n border: 1px solid #2a2a28;\n font-family: var(--font-body);\n font-size: 0.9rem;\n font-weight: 400;\n letter-spacing: 0.01em;\n padding: 16px 32px;\n border-radius: 100px;\n cursor: pointer;\n text-decoration: none;\n transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease-out-expo);\n }\n .btn-secondary-cta:hover {\n border-color: #666662;\n color: var(--white);\n transform: translateY(-2px);\n }\n\n .trust-points {\n display: flex;\n gap: 32px;\n justify-content: center;\n flex-wrap: wrap;\n margin-bottom: 56px;\n }\n\n .trust-point {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.82rem;\n color: #555550;\n font-weight: 400;\n }\n\n .trust-point-check {\n width: 18px;\n height: 18px;\n border: 1px solid #2a2a28;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .trust-point-check svg {\n width: 10px;\n height: 10px;\n stroke: #555550;\n }\n\n .cta-footer-text {\n font-family: var(--font-mono);\n font-size: 11px;\n letter-spacing: 0.06em;\n color: #333330;\n text-align: center;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.7;\n }\n\n \/* \u2500\u2500 Scrollbar \u2500\u2500 *\/\n ::-webkit-scrollbar { width: 4px; }\n ::-webkit-scrollbar-track { background: var(--white); }\n ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }\n<\/style>\n<\/head>\n<body>\n\n\n<section class=\"process-section\" id=\"process\">\n <div class=\"container\">\n <div class=\"process-header\">\n <div class=\"section-label reveal\">Our Process<\/div>\n <h2 class=\"reveal reveal-delay-1\">How Your Website<br>Comes To Life<\/h2>\n <p class=\"reveal reveal-delay-2\">A simple, transparent process designed to get your business online quickly.<\/p>\n <\/div>\n\n <div class=\"timeline\">\n <div class=\"timeline-track\"><\/div>\n <div class=\"timeline-track-fill\" id=\"timelineFill\"><\/div>\n\n \n <div class=\"timeline-step reveal\">\n <div class=\"step-node\">\n <div class=\"step-dot\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"3\"\/>\n <path d=\"M9 12l2 2 4-4\"\/>\n <\/svg>\n <\/div>\n <span class=\"step-number\">01<\/span>\n <\/div>\n <div class=\"step-content\">\n <div class=\"step-tag\">Starting Point<\/div>\n <h3>Choose Your Package<\/h3>\n <p>Select the package that best suits your business needs. From essential online presence to fully-featured ecommerce \u2014 we have the right solution for every stage.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"timeline-step reveal reveal-delay-1\">\n <div class=\"step-node\">\n <div class=\"step-dot\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5\"\/>\n <path d=\"M17.5 3.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 8.5-8.5z\"\/>\n <\/svg>\n <\/div>\n <span class=\"step-number\">02<\/span>\n <\/div>\n <div class=\"step-content\">\n <div class=\"step-tag\">Onboarding<\/div>\n <h3>Submit Requirements<\/h3>\n <p>Share your business details, goals, brand assets, and content. Our structured onboarding process ensures we capture everything needed to build exactly what you envision.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"timeline-step reveal reveal-delay-2\">\n <div class=\"step-node\">\n <div class=\"step-dot\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\n <\/svg>\n <\/div>\n <span class=\"step-number\">03<\/span>\n <\/div>\n <div class=\"step-content\">\n <div class=\"step-tag\">Production<\/div>\n <h3>Design & Development<\/h3>\n <p>We create a premium custom website tailored to your business. Every element \u2014 from typography to performance \u2014 is crafted with precision and built on rock-solid technology.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"timeline-step reveal reveal-delay-3\">\n <div class=\"step-node\">\n <div class=\"step-dot\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n <\/svg>\n <\/div>\n <span class=\"step-number\">04<\/span>\n <\/div>\n <div class=\"step-content\">\n <div class=\"step-tag\">Refinement<\/div>\n <h3>Review & Revisions<\/h3>\n <p>Review your website and request revisions if needed. Your satisfaction is our standard \u2014 we iterate until the result is exactly right, with no compromise on quality.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"timeline-step reveal reveal-delay-4\">\n <div class=\"step-node\">\n <div class=\"step-dot\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/>\n <path d=\"M2 17l10 5 10-5\"\/>\n <path d=\"M2 12l10 5 10-5\"\/>\n <\/svg>\n <\/div>\n <span class=\"step-number\">05<\/span>\n <\/div>\n <div class=\"step-content\">\n <div class=\"step-tag\">Go Live<\/div>\n <h3>Launch & Go Live<\/h3>\n <p>Your website is launched and ready to grow your business. Domain configured, hosting live, search engines notified \u2014 your digital presence is open for business from day one.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"seo-section\" id=\"about-swiss-web-design\">\n <div class=\"container\">\n <div class=\"seo-inner\">\n <div class=\"seo-left reveal\">\n <div class=\"section-label\">Web Design In Switzerland<\/div>\n <h2>Affordable Website Design Services In Switzerland<\/h2>\n <p class=\"seo-summary\">Professional websites built for Swiss businesses \u2014 without the inflated price tag of a traditional local agency.<\/p>\n <\/div>\n <div class=\"seo-right reveal reveal-delay-1\">\n <p>Switzerland is home to some of the world's most respected businesses \u2014 and in an increasingly digital economy, your website is often the first impression you make. Whether you operate a boutique in Zurich, a consultancy in Geneva, or a growing startup in Basel, <strong>the quality of your online presence directly influences how prospects perceive your business<\/strong>.<\/p>\n\n <p>For too long, high-quality website design in Switzerland has been the exclusive domain of large companies with substantial marketing budgets. Traditional Swiss agencies charge premium rates that many small and medium businesses simply cannot justify \u2014 leaving them with either no website, or a generic template that fails to communicate the professionalism they deserve.<\/p>\n\n <p>We exist to change that. Our studio delivers <strong>internationally benchmarked website design<\/strong> tailored specifically to Swiss businesses, at a price point that removes the barrier between ambition and execution. Every website we build is custom-designed, mobile-responsive, and built on WordPress \u2014 the world's most widely used and flexible content management platform, powering over 40% of all websites globally.<\/p>\n\n <div class=\"seo-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">40%<\/div>\n <div class=\"stat-label\">of the web runs on WordPress<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">3s<\/div>\n <div class=\"stat-label\">avg. bounce if page loads slow<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">75%<\/div>\n <div class=\"stat-label\">judge credibility by design<\/div>\n <\/div>\n <\/div>\n\n <p>Affordable website design does not mean cutting corners. It means building smarter \u2014 using proven technologies, refined workflows, and a global team operating at a lower cost base than a Z\u00fcrich city-centre office. The savings we pass on to you are structural, not qualitative. <strong>Your website will be built with the same care and craft we apply to projects for international brands<\/strong> \u2014 because we believe every business deserves a digital home it's proud of.<\/p>\n\n <p>From clean, conversion-focused landing pages to full multi-page business websites with contact forms, service pages, portfolios, and blog functionality \u2014 we scope every project around your specific goals. Our team works closely with you from the first conversation to launch day, ensuring the final result accurately represents your brand and speaks directly to your ideal customers.<\/p>\n\n <p>If you've been searching for <strong>affordable website design in Switzerland<\/strong> that doesn't compromise on professionalism, you've found it. Your digital presence is an investment in the growth of your business \u2014 and we're here to make that investment accessible.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"seo-section alt\" id=\"why-swiss-businesses-need-website\">\n <div class=\"container\">\n <div class=\"seo-inner reverse\">\n <div class=\"seo-left reveal\">\n <div class=\"section-label\">Why It Matters<\/div>\n <h2>Why Swiss Businesses Need A Professional Website<\/h2>\n <p class=\"seo-summary\">In a market built on trust and precision, a professional online presence isn't optional \u2014 it's the foundation of your credibility.<\/p>\n <\/div>\n <div class=\"seo-right reveal reveal-delay-1\">\n <p>Switzerland holds one of the world's most discerning consumer markets. Swiss customers research before they buy, compare before they decide, and trust before they transact. <strong>A professional website is not a marketing luxury \u2014 it is the single most important trust signal your business can present<\/strong> to a prospective customer in 2024.<\/p>\n\n <p>Consider the journey of a typical Swiss buyer. They search online, scan results, click through to a website, and form a judgement in under three seconds. If your website looks dated, loads slowly, or fails to communicate clearly what you do and why it matters \u2014 they leave. No phone call, no enquiry, no sale. The opportunity cost of a poor or absent online presence compounds quietly and continuously.<\/p>\n\n <p>A well-built website transforms this dynamic. It works for your business around the clock, generating leads while you sleep and answering questions before they're asked. For <strong>Swiss businesses looking to grow beyond word-of-mouth referrals<\/strong>, a conversion-focused website is the most efficient sales tool available \u2014 one that operates 24 hours a day without additional overhead.<\/p>\n\n <div class=\"seo-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">81%<\/div>\n <div class=\"stat-label\">research online before buying<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">94%<\/div>\n <div class=\"stat-label\">cite design as reason to distrust<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">2.3\u00d7<\/div>\n <div class=\"stat-label\">more leads from responsive sites<\/div>\n <\/div>\n <\/div>\n\n <p>Ecommerce represents another significant opportunity that many Swiss SMEs have yet to fully capitalise on. Consumer comfort with online purchasing is at an all-time high, and the infrastructure to support secure, seamless transactions is more accessible than ever. Whether you sell physical products, digital services, or bookable experiences \u2014 <strong>an ecommerce-enabled website opens your business to customers beyond your immediate geography<\/strong>, extending your market across Switzerland and internationally.<\/p>\n\n <p>Beyond lead generation and sales, your website communicates brand. In a competitive market, the businesses that invest in modern, considered branding consistently outperform those that don't. A cohesive visual identity \u2014 carried through your website, your copywriting, and your customer touchpoints \u2014 signals that your business is serious, established, and worthy of confidence. <strong>WordPress solutions built on solid foundations<\/strong> ensure that as your brand evolves, your website can evolve with it.<\/p>\n\n <p>The businesses growing fastest in Switzerland today understand that digital presence and business credibility are inseparable. Your website is your most valuable commercial asset \u2014 it deserves to be treated as one.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"seo-section\" id=\"international-quality-swiss-service\">\n <div class=\"container\">\n <div class=\"seo-inner\">\n <div class=\"seo-left reveal\">\n <div class=\"section-label\">Our Approach<\/div>\n <h2>International Quality. Swiss-Focused Service.<\/h2>\n <p class=\"seo-summary\">A global digital studio bringing world-class web development to Swiss businesses \u2014 with local understanding and transparent, fair pricing.<\/p>\n <\/div>\n <div class=\"seo-right reveal reveal-delay-1\">\n <p>The best websites in the world are not built in any single country. They are built by teams who understand design at an international level, who stay current with web technology as it evolves, and who approach every project with a standard of craft that transcends geography. <strong>That is precisely the approach we bring to every Swiss business we work with.<\/strong><\/p>\n\n <p>Our experience spans clients and markets across Europe, North America, the Middle East, and Southeast Asia. This breadth of exposure has sharpened our understanding of what works \u2014 what design patterns convert, what technology choices age well, and what level of quality users in mature digital markets expect. When we build your website, we bring this global perspective to bear on your specific context.<\/p>\n\n <p>Modern web development is, by nature, an international discipline. The frameworks we use \u2014 WordPress, WooCommerce, modern JavaScript \u2014 are maintained by global open-source communities. The design principles we follow \u2014 clean hierarchy, intentional whitespace, performance-first thinking \u2014 are applied by the best studios in London, New York, Tokyo, and Berlin. <strong>Geography does not determine quality. Intent and execution do.<\/strong><\/p>\n\n <div class=\"seo-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">CH<\/div>\n <div class=\"stat-label\">Swiss-market focused<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">4+<\/div>\n <div class=\"stat-label\">languages supported<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">100%<\/div>\n <div class=\"stat-label\">mobile-first approach<\/div>\n <\/div>\n <\/div>\n\n <p>Switzerland is a multilingual market, and we build for that reality. Whether you need your website in German, French, Italian, English \u2014 or all four \u2014 we implement multilingual structures that are technically sound, SEO-friendly, and easy for you to manage. Multilingual websites are not an afterthought for us; they are a core capability built into our standard process for Swiss clients.<\/p>\n\n <p>Every website we deliver is fully responsive \u2014 designed and tested across mobile, tablet, and desktop to ensure a consistent, high-quality experience for every visitor regardless of how they reach you. We also build with ongoing maintenance in mind: <strong>clean code, logical structure, and WordPress's intuitive CMS mean you can update your own content<\/strong> without needing a developer for every minor change.<\/p>\n\n <p>For businesses ready to grow into ecommerce, our WooCommerce implementations provide a robust, scalable foundation for online retail \u2014 from simple product catalogues to complex inventory and payment workflows. And our post-launch care plans ensure your website remains secure, fast, and current long after the initial build is complete.<\/p>\n\n <p>We are a global digital agency with a clear focus: delivering premium websites to Swiss businesses that deserve international-quality work at a price that reflects genuine value, not inflated local market rates.<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"faq-section\" id=\"faq\">\n <div class=\"container\">\n <div class=\"faq-header\">\n <div class=\"section-label reveal\">Questions<\/div>\n <h2 class=\"reveal reveal-delay-1\">Frequently Asked<br>Questions<\/h2>\n <\/div>\n\n <div class=\"faq-grid reveal reveal-delay-2\">\n \n <div class=\"faq-col\">\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>How much does a website cost in Switzerland?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Traditional Swiss agencies typically charge between CHF 5,000 and CHF 30,000+ for a business website. Our packages start at significantly lower price points \u2014 designed specifically to make professional website design accessible to SMEs and startups. You can view our exact pricing transparently on our packages page. <strong>No hidden fees, no surprise invoices.<\/strong><\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Is domain registration included?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes \u2014 all packages include your domain registration for the first year. Whether you need a .ch, .com, .swiss, or another extension, we handle setup and configuration so your website launches with the right address. Domain renewal costs are clearly communicated in advance.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Is hosting included?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes. All packages include managed hosting for the first year \u2014 fast, secure, and backed by daily backups and SSL certificate. After year one, hosting continues at a straightforward annual rate with full transparency. <strong>No surprise infrastructure costs.<\/strong><\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Can I upgrade my website later?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Absolutely. We build every website with growth in mind. You can start with an Essential package and expand to include ecommerce, multilingual functionality, additional pages, or advanced features as your business grows. Upgrades are handled cleanly \u2014 no need to rebuild from scratch.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Do you support ecommerce websites?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes \u2014 our Ecommerce package delivers a fully featured WooCommerce store, including product catalogue, cart, checkout, payment gateway integration, and order management. We also configure tax settings appropriate for Switzerland and can support both physical and digital product sales.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>How long does website development take?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Standard business websites are typically delivered within <strong>10\u201314 business days<\/strong> from receipt of your content and requirements. Ecommerce projects and larger builds may take 3\u20134 weeks. We set clear timelines at the outset and keep you updated throughout \u2014 no disappearing acts.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Can I edit my website myself?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes. All websites are built on WordPress with an intuitive content editor. You can update text, images, blog posts, and basic content without any technical knowledge. We include a brief training walkthrough on delivery so you're fully confident managing your site independently.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"faq-col\">\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Do you provide multilingual websites?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes. We build fully multilingual websites supporting German, French, Italian, English, and other languages \u2014 using technically sound structures that are SEO-optimised for each language. <strong>Multilingual capability is standard<\/strong> in our Business and Ecommerce packages, and available as an add-on for Essential.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Is SEO included?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Every website is built with solid on-page SEO foundations \u2014 clean URL structures, meta tags, schema markup, sitemap submission, and performance optimisation. We also configure Google Search Console and Analytics on all projects. Ongoing SEO content strategy is available as a separate service.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>What happens after launch?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">After launch you receive 30 days of complimentary support for any questions or minor adjustments. Beyond that, our care plans provide ongoing security updates, performance monitoring, backups, and technical support. You're never left to manage a complex system alone.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Do you work with businesses across Switzerland?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes \u2014 we work with businesses in Zurich, Geneva, Basel, Bern, Lausanne, Lugano, and across all Swiss cantons. Our process is fully remote and digital, which means location is never a constraint. We communicate via video call, email, and project management tools at whatever pace works for you.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>What payment methods are accepted?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">We accept bank transfer (CHF and EUR), major credit and debit cards, and PayPal. All invoicing is clear and itemised. Payment is structured as <strong>50% to begin and 50% on delivery<\/strong> \u2014 ensuring both parties are aligned throughout the project.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Why are your prices lower than many agencies?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">We operate as a lean international studio without the overhead of a Swiss city-centre office, large permanent staff, or expensive account management layers. These structural savings flow directly to our pricing \u2014 not to any reduction in quality. <strong>Our work is benchmarked against international agency standards<\/strong>, not local market norms.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Is support available after project completion?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Absolutely. We offer flexible monthly care plans covering security updates, plugin maintenance, hosting management, performance monitoring, and priority support. Whether you need minimal oversight or hands-on ongoing assistance, we have a plan that fits.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"faq-item\">\n <button class=\"faq-question\" aria-expanded=\"false\">\n <span>Can you redesign an existing website?<\/span>\n <div class=\"faq-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg><\/div>\n <\/button>\n <div class=\"faq-answer\">\n <div class=\"faq-answer-inner\">Yes \u2014 website redesigns are one of our most common projects. If your current website looks dated, underperforms on mobile, or no longer reflects your brand, we can build a modern replacement that preserves your SEO equity where possible and dramatically improves your digital presence.<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"cta-section\" id=\"get-started\">\n <div class=\"cta-bg-text\">LAUNCH<\/div>\n <div class=\"container\">\n <div class=\"cta-inner\">\n <div class=\"cta-label reveal\">Get Started Today<\/div>\n <h2 class=\"cta-heading reveal reveal-delay-1\">Ready To Build Your<br><em>Business Website?<\/em><\/h2>\n <p class=\"cta-subheading reveal reveal-delay-2\">Premium websites. Transparent pricing. International quality. Built for Swiss businesses.<\/p>\n\n <div class=\"cta-buttons reveal reveal-delay-3\">\n <a href=\"#\" class=\"btn-primary-cta\">\n Start Your Project\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>\n <\/a>\n <a href=\"#\" class=\"btn-secondary-cta\">View Packages<\/a>\n <\/div>\n\n <div class=\"trust-points reveal reveal-delay-4\">\n <div class=\"trust-point\">\n <div class=\"trust-point-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n Domain Included\n <\/div>\n <div class=\"trust-point\">\n <div class=\"trust-point-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n Hosting Included\n <\/div>\n <div class=\"trust-point\">\n <div class=\"trust-point-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n Mobile Responsive\n <\/div>\n <div class=\"trust-point\">\n <div class=\"trust-point-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n SEO Ready\n <\/div>\n <div class=\"trust-point\">\n <div class=\"trust-point-check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n 50% Upfront \/ 50% After Completion\n <\/div>\n <\/div>\n\n <p class=\"cta-footer-text reveal reveal-delay-5\">Helping businesses establish a professional online presence without traditional agency costs.<\/p>\n <\/div>\n <\/div>\n<\/section>\n\n<script>\n \/* \u2500\u2500 Intersection Observer \u2014 Reveal Animations \u2500\u2500 *\/\n const revealEls = document.querySelectorAll('.reveal');\n const revealObs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('visible');\n revealObs.unobserve(e.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n revealEls.forEach(el => revealObs.observe(el));\n\n \/* \u2500\u2500 Timeline Progress Fill \u2500\u2500 *\/\n const timelineSection = document.querySelector('.process-section');\n const timelineFill = document.getElementById('timelineFill');\n if (timelineFill && timelineSection) {\n const updateFill = () => {\n const rect = timelineSection.getBoundingClientRect();\n const windowH = window.innerHeight;\n const progress = Math.min(1, Math.max(0, (windowH - rect.top) \/ (rect.height + windowH * 0.3)));\n timelineFill.style.height = (progress * 100) + '%';\n };\n window.addEventListener('scroll', updateFill, { passive: true });\n updateFill();\n }\n\n \/* \u2500\u2500 FAQ Accordion \u2500\u2500 *\/\n const faqItems = document.querySelectorAll('.faq-item');\n faqItems.forEach(item => {\n const btn = item.querySelector('.faq-question');\n btn.addEventListener('click', () => {\n const isOpen = item.classList.contains('open');\n \/\/ close all others in same column\n faqItems.forEach(i => {\n i.classList.remove('open');\n i.querySelector('.faq-question').setAttribute('aria-expanded', 'false');\n });\n if (!isOpen) {\n item.classList.add('open');\n btn.setAttribute('aria-expanded', 'true');\n }\n });\n });\n\n \/* \u2500\u2500 CTA Background Parallax \u2500\u2500 *\/\n const ctaBgText = document.querySelector('.cta-bg-text');\n if (ctaBgText) {\n window.addEventListener('scroll', () => {\n const ctaSection = document.querySelector('.cta-section');\n const rect = ctaSection.getBoundingClientRect();\n const offset = (rect.top \/ window.innerHeight) * 30;\n ctaBgText.style.transform = `translateX(-50%) translateY(${offset}px)`;\n }, { passive: true });\n }\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>designwebsite.ch \u2014 Premium Websites for Switzerland New in Switzerland \ud83c\udde8\ud83c\udded Premium Websites. Unbeatable Prices. Built for Switzerland. We are an international web design agency, now launching in Switzerland to help businesses grow online with stunning, high-performance websites at the most affordable prices. View Packages Start Your Project 5.0 Trusted by businesses worldwide W Domain Included […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_angie_page":false,"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":16,"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/pages\/14\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/designwebsite.ch\/de\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}