@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#102B3C;--green:#2878C8;--light:#F3F6FA;--muted:#5E7180;--line:#DFE7F0;--white:#fff;--shadow:0 24px 70px rgba(16,44,58,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:'DM Sans',Arial,sans-serif;line-height:1.6}a{color:inherit}button,input,textarea{font:inherit}.wrap{width:min(1140px,calc(100% - 40px));margin:auto}.topline{background:var(--ink);color:#dbe9e8;text-align:center;padding:8px 12px;font-size:12px;letter-spacing:.07em;font-weight:700}.header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}.logo{display:block;width:245px;max-width:48vw}.links{display:flex;align-items:center;gap:27px}.links a{text-decoration:none;font-size:14px;font-weight:700}.links a:hover{color:var(--green)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:11px;background:var(--green);color:#fff;padding:14px 22px;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s}.btn:hover{background:#1765AE;transform:translateY(-2px)}.btn.dark{background:var(--ink)}.btn.dark:hover{background:#234a5d}.btn.outline{background:#fff;border:1px solid #CCD9E7;color:var(--ink)}.btn.sm{padding:10px 17px;font-size:13px}.hero{background:radial-gradient(circle at 85% 22%,#E6F1FC 0,transparent 31%),linear-gradient(125deg,#F6F9FD 0%,#fff 65%);padding:90px 0 86px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:54px}.eyebrow{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:#2878C8;font-weight:800;margin-bottom:15px}.hero h1{font:800 clamp(42px,5.5vw,74px)/1.09 'Manrope',sans-serif;letter-spacing:-.055em;margin:0 0 22px}.hero h1 em{font-style:normal;color:var(--green)}.lead{font-size:19px;color:#4f6771;max-width:560px;margin:0 0 30px}.actions{display:flex;gap:12px;flex-wrap:wrap}.micro{color:#71848a;font-size:12px;margin-top:18px}.hero-visual{position:relative}.browser{border:1px solid #D7E2EE;border-radius:18px;overflow:hidden;background:white;box-shadow:var(--shadow);transform:rotate(2deg)}.browser-top{height:36px;display:flex;align-items:center;gap:6px;padding:0 15px;background:#F3F7FB;border-bottom:1px solid #DFE7F0}.dot{width:8px;height:8px;border-radius:50%;background:#AFC0D0}.browser-content{padding:26px}.demo-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.demo-mark{font-weight:800;font-size:17px}.demo-tag{background:#EAF4FE;color:#1765AE;border-radius:99px;padding:4px 10px;font-size:10px;font-weight:800}.demo-heading{font:800 33px/1.12 Manrope,sans-serif;letter-spacing:-.04em;margin:0 0 14px}.demo-desc{font-size:13px;color:#5C7182;max-width:300px}.demo-cta{display:inline-block;background:#102B3C;color:white;padding:9px 15px;border-radius:6px;font-size:11px;font-weight:800;margin:15px 0}.demo-img{height:130px;border-radius:10px;background:linear-gradient(125deg,#DEEAF7,#9CC5EE);position:relative;overflow:hidden}.demo-img:before{content:'';position:absolute;width:130px;height:130px;border-radius:50%;background:#f7fff5;right:35px;top:25px;opacity:.8}.demo-img:after{content:'';position:absolute;bottom:-24px;left:35px;width:230px;height:90px;background:#2878C8;transform:rotate(-12deg);border-radius:25px}.price-sticker{position:absolute;right:-10px;bottom:-30px;background:var(--ink);color:#fff;padding:17px 23px;border-radius:15px;transform:rotate(-6deg);box-shadow:0 15px 35px #102B3C33}.price-sticker strong{font-size:31px;display:block;line-height:1.1}.price-sticker small{font-size:11px;color:#D5E4F3}.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;padding:25px 0}.trust-item{font-weight:800;font-size:13px;display:flex;align-items:center;gap:10px}.tick{display:grid;place-items:center;width:25px;height:25px;flex:none;border-radius:50%;background:#E7F2FE;color:#1765AE}.section{padding:90px 0}.section.alt{background:#F4F7FB}.section-head{max-width:670px;margin-bottom:37px}.section h2{font:800 clamp(30px,3.5vw,45px)/1.18 Manrope,sans-serif;letter-spacing:-.04em;margin:0 0 15px}.section-head p{color:var(--muted);font-size:17px;margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:white;border:1px solid var(--line);border-radius:17px;padding:27px;box-shadow:0 6px 22px rgba(16,44,58,.025)}.card-icon{font-size:26px;background:#EAF2FC;border-radius:12px;width:54px;height:54px;display:grid;place-items:center;margin-bottom:17px}.card h3{margin:0 0 8px;font-size:19px}.card p{color:var(--muted);font-size:14px;margin:0}.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.sample{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}.sample-art{height:205px;padding:20px;display:flex;align-items:flex-end;position:relative;overflow:hidden}.sample-art:before{content:'';position:absolute;inset:18px 18px auto; height:12px;border-radius:3px;background:rgba(255,255,255,.5)}.sample-art:after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;right:-60px;bottom:-95px;background:rgba(255,255,255,.2)}.sample-art h3{font:800 27px/1.1 Manrope,sans-serif;max-width:220px;position:relative;z-index:1;margin:0;color:white}.sample-art.trades{background:linear-gradient(135deg,#142d3b,#397e9d)}.sample-art.beauty{background:linear-gradient(135deg,#724d5c,#e0a9a1)}.sample-art.garden{background:linear-gradient(135deg,#253959,#7185A6)}.sample-text{padding:20px}.sample-text strong{display:block;font-size:15px}.sample-text p{margin:6px 0 0;color:var(--muted);font-size:13px}.note{font-size:12px;color:var(--muted);margin-top:14px}.pricing{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}.price-card{background:var(--ink);color:#fff;border-radius:23px;padding:37px;box-shadow:var(--shadow)}.price-card .eyebrow{color:#91CBFF}.price-number{font:800 80px/1 Manrope,sans-serif;letter-spacing:-.06em}.price-card p{color:#c3d6dc}.price-card ul{list-style:none;padding:0;margin:25px 0}.price-card li{padding:9px 0;border-bottom:1px solid #ffffff22}.price-card li:before{content:'✓';color:#91CBFF;font-weight:800;margin-right:11px}.price-card .btn{width:100%}.smallprint{font-size:12px;color:#B8C8D8;margin-top:15px}.pricing-copy p{color:var(--muted)}.extra{border:1px solid var(--line);padding:18px 20px;border-radius:12px;margin-top:18px}.extra strong{display:block}.extra span{color:var(--muted);font-size:13px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.step-number{font:800 45px Manrope,sans-serif;color:#9AC8F0}.steps h3{margin:2px 0 8px}.steps p{color:var(--muted);font-size:14px;margin:0}.faq{max-width:850px}.faq details{border-bottom:1px solid var(--line);padding:20px 0}.faq summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary:after{content:'+';font-size:23px;color:var(--green)}.faq details[open] summary:after{content:'−'}.faq p{color:var(--muted);margin:12px 0 0}.contact{background:var(--ink);color:#fff;padding:88px 0}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}.contact h2{font:800 clamp(32px,4vw,48px)/1.15 Manrope,sans-serif;letter-spacing:-.04em;margin:0 0 17px}.contact p{color:#c6d8dd}.contact a.email{color:#91CBFF;font-weight:700}.form{background:white;color:var(--ink);padding:30px;border-radius:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{margin-bottom:15px}.field label{display:block;font-size:12px;font-weight:800;margin-bottom:6px}.field input,.field textarea,.field select{display:block;width:100%;border:1px solid #CBD8E7;border-radius:8px;padding:12px 13px;background:white;color:var(--ink)}.field textarea{min-height:110px;resize:vertical}.form .btn{width:100%}.form .privacy{font-size:11px;color:var(--muted);margin:12px 0 0}.footer{background:#0b222e;color:#d1e0e2;padding:35px 0}.footer-grid{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}.footer small{color:#a5bdc4}.footer a{color:#d1e0e2}.legal{padding:70px 0;max-width:800px}.legal h1{font:800 40px Manrope,sans-serif}.legal p,.legal li{color:#4c6470}.mobile-menu{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:850px){.hero-grid,.pricing,.contact-grid{grid-template-columns:1fr}.hero{padding:60px 0}.hero-visual{max-width:530px}.links{gap:15px}.links a:not(.btn){display:none}.trust-grid{grid-template-columns:repeat(2,1fr)}.cards,.portfolio,.steps{grid-template-columns:1fr 1fr}.contact-grid{gap:25px}}@media(max-width:570px){.wrap{width:min(100% - 30px,1140px)}.nav{min-height:72px}.logo{width:210px}.links .btn{font-size:12px;padding:10px 11px}.hero h1{font-size:43px}.hero-visual{margin:20px 14px 30px 0}.price-sticker{right:-16px;bottom:-28px}.trust-grid,.cards,.portfolio,.steps,.form-grid{grid-template-columns:1fr}.section{padding:65px 0}.price-card{padding:27px}.price-number{font-size:65px}.contact{padding:65px 0}.form{padding:21px}}

/* VERSION 2: professional, B2B-focused styling */
:root{--blue:#2878C8;--dark:#102B3C;--pale:#F3F6FA;--outline:#DFE7F0}
body{background:#fff}
.topline{background:#0C2437;letter-spacing:.11em}
.nav{min-height:88px}
.nav .logo{width:270px;height:auto;max-width:44vw;display:block;overflow:visible}
.header{box-shadow:0 2px 16px rgba(11,30,48,.025)}
.btn{background:var(--blue);border-radius:9px;box-shadow:0 5px 14px rgba(40,120,200,.12)}
.btn:hover{background:#1765AE;box-shadow:0 7px 19px rgba(40,120,200,.21)}
.btn.outline{box-shadow:none;border-color:#CEDBE9}
.hero{background:radial-gradient(ellipse at 81% 19%,rgba(210,231,252,.75),transparent 43%),linear-gradient(130deg,#F6F9FD 0%,#fff 65%);padding:94px 0 93px}
.eyebrow{color:#276DAE}
.hero h1 em{color:#2878C8}
.lead{color:#526B7F}
.hero-visual{padding:20px 12px 20px 2px}
.browser{border-color:#D3E0ED;transform:rotate(1.5deg);box-shadow:0 26px 80px rgba(10,37,65,.13)}
.browser-top{background:#F3F6FA}
.browser-content{padding:0}
.demo-nav{background:#fff;display:flex;align-items:center;gap:10px;margin:0;padding:17px 19px 14px;min-height:67px;border-bottom:1px solid #ECF0F5}
.demo-mark{font:900 15px/1 'Manrope',Arial,sans-serif;letter-spacing:-.04em;white-space:nowrap}
.bolt{display:inline-grid;place-items:center;border-radius:5px;background:#F6AB46;color:#102B3C;font-size:17px;width:23px;height:24px;margin-right:5px;vertical-align:middle}
.demo-submark{color:#457AAB;font-size:9px;letter-spacing:.11em;display:block;margin:4px 0 0 32px}
.demo-tag{margin-left:auto;font-size:9px;letter-spacing:.025em;color:#24639C;background:#EAF3FD;text-align:center}
.demo-body{padding:35px 27px 30px;background:linear-gradient(114deg,#fff 49%,#EFF6FF 100%);position:relative;overflow:hidden}
.demo-body:after{content:"";position:absolute;top:-35px;right:-35px;width:170px;height:170px;border-radius:25px;border:23px solid rgba(40,120,200,.065);transform:rotate(30deg);pointer-events:none}
.demo-line{font-weight:800;font-size:9px;letter-spacing:.15em;color:#2777C3;margin:0 0 14px}
.demo-heading{font:900 36px/1.08 Manrope,Arial,sans-serif;color:#102B3C;letter-spacing:-.055em;margin:0 0 15px;position:relative;z-index:1}
.demo-heading span{color:#2878C8}
.demo-desc{font-size:12px;line-height:1.6;max-width:260px;color:#566C7B;position:relative;z-index:1;margin:0}
.demo-cta{background:#102B3C;position:relative;z-index:1;padding:11px 14px;margin:20px 0 0;font-size:10px;letter-spacing:.025em}
.demo-cta span{color:#8DC9FF;margin-left:6px}
.demo-bottom{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #DCE8F4;background:#F5F9FD;padding:19px 17px;gap:10px}
.demo-stat strong{display:block;font-size:10px;letter-spacing:.08em;color:#2878C8;font-weight:900}
.demo-stat small{display:block;font-size:9px;line-height:1.3;margin-top:4px;color:#5A7081}
.price-sticker{background:#102B3C;right:-16px;bottom:-20px;border:1px solid #22465C}
.trust{background:#fff}
.card{border-color:#E0E9F3;box-shadow:0 9px 25px rgba(19,46,72,.035)}
.card-icon{background:#EAF3FD;color:#2878C8}
.sample-art.trades{background:linear-gradient(135deg,#102B3C,#2B72AF)}
.sample-art.beauty{background:linear-gradient(135deg,#64566E,#AB95B9)}
.sample-art.professional{background:linear-gradient(135deg,#153454,#506FA1)}
.section.alt{background:#F6F9FC}
.price-card{background:linear-gradient(145deg,#102B3C,#0D2033)}
.price-card .eyebrow,.price-card li:before{color:#8DCEFF}
.contact{background:linear-gradient(125deg,#102B3C,#0C2034)}
.contact a.email{color:#9ED4FF}
.step-number{color:#A9D4F6}
.form{box-shadow:0 20px 56px rgba(0,0,0,.14)}
.field input:focus,.field textarea:focus{outline:2px solid #2878C8;outline-offset:1px}
@media(max-width:570px){.nav .logo{width:194px;max-width:53vw}.demo-nav{padding:12px 13px}.demo-tag{display:none}.demo-body{padding:26px 21px}.demo-heading{font-size:31px}.demo-bottom{gap:5px;padding:15px 12px}.price-sticker{bottom:-30px}}

/* Version 3: immersive live previews, real visual examples */
.hero-visual-live{padding:19px 17px 25px 0}
.hero-browser-shell{border-radius:18px;overflow:hidden;background:#fff;border:1px solid #d2e0ed;box-shadow:0 28px 80px rgba(10,34,55,.17);transform:rotate(1.5deg);position:relative}
.hero-window-bar{background:#edf3f8;border-bottom:1px solid #dbe4ef;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:#688094;font-size:11px;gap:9px}
.mini-dots{display:flex;gap:5px}.mini-dots i,.sample-browser-top i{display:inline-block;width:7px;height:7px;background:#b0c1cc;border-radius:50%}.hero-window-bar span:nth-child(2){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hero-open-icon{font-size:17px;color:#2a79be}
.hero-iframe-wrap{position:relative;height:410px;overflow:hidden;background:#f7fafc}
.hero-iframe-wrap iframe{border:0;display:block;width:132%;height:660px;transform:scale(.76);transform-origin:top left;pointer-events:none;filter:saturate(.94)}
.hero-preview-link{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;padding:24px;text-decoration:none;background:linear-gradient(180deg,transparent 61%,rgba(6,31,51,.82));color:white;transition:background .2s}
.hero-preview-link span{padding:12px 20px;border:1px solid #ffffff66;background:#ffffff2e;backdrop-filter:blur(8px);border-radius:9px;font-size:13px;font-weight:800}
.hero-preview-link:hover span{background:#fff;color:#112d43}
.hero-visual-live .price-sticker{right:-12px;bottom:-12px;transform:rotate(-5deg)}
.sample-demo{display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(14,37,55,.055);transition:transform .2s,box-shadow .2s}
.sample-demo:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(14,37,55,.12)}
.sample-preview{display:block;overflow:hidden;text-decoration:none;background:#edf2f7}
.sample-browser-top{height:26px;display:flex;align-items:center;gap:5px;padding:0 13px;background:#e5ecf2}
.sample-browser-top i{width:6px;height:6px}
.sample-browser-top em{margin-left:auto;font-style:normal;font-size:9px;color:#5a7181;letter-spacing:.08em;font-weight:900}
.sample-photo{height:235px;display:flex;align-items:flex-end;position:relative;background-size:cover;background-position:center;overflow:hidden}
.photo-electrician{background-image:linear-gradient(0deg,rgba(5,25,42,.87) 0%,transparent 68%),url('/assets/electrician.jpg')}
.photo-beauty{background-image:linear-gradient(0deg,rgba(52,27,35,.88) 0%,transparent 68%),url('/assets/beauty.jpg')}
.photo-consultancy{background-image:linear-gradient(0deg,rgba(5,25,42,.87) 0%,transparent 68%),url('/assets/consultancy.jpg')}
.sample-overlay{display:flex;flex-direction:column;color:white;padding:21px;position:relative;z-index:1}
.sample-overlay small{font-size:10px;font-weight:900;letter-spacing:.1em;opacity:.9;text-transform:uppercase;margin-bottom:4px}
.sample-overlay strong{font:800 25px/1.15 'Manrope',sans-serif;letter-spacing:-.04em}
.sample-fake-button{color:#d3eaff;font-size:11px;font-weight:800;margin-top:11px}
.sample-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:16px;flex:1}
.demo-link{display:inline-flex;color:#1f73bf;font-weight:800;font-size:13px;text-decoration:none;border-bottom:1px solid #8db8de;padding-bottom:3px}
.demo-link:hover{color:#0e496f}
@media(max-width:850px){.hero-browser-shell{max-width:530px}.hero-iframe-wrap{height:370px}}
@media(max-width:570px){.hero-visual-live{margin:4px 10px 36px 0;padding:9px 9px 20px 0}.hero-iframe-wrap{height:290px}.hero-iframe-wrap iframe{width:174%;transform:scale(.575);height:600px}.hero-window-bar{padding-inline:11px}.sample-photo{height:240px}}

/* Robust, detailed screenshot-style hero preview with real generated photography */
.hero-iframe-wrap{height:400px;position:relative;background:white}
.hero-real-preview{height:100%;background:white;position:relative;display:flex;flex-direction:column}
.mini-website-nav{min-height:66px;padding:18px 19px;display:flex;align-items:center;gap:8px;color:#122b43;background:white}
.mini-bolt{display:grid;place-items:center;background:#f4aa40;border-radius:5px;width:28px;height:28px;font-size:18px;font-weight:900}
.mini-website-nav strong{font:900 15px 'Manrope',sans-serif;letter-spacing:-.04em;white-space:nowrap}
.mini-website-nav small{display:block;font-size:8px;letter-spacing:.15em;color:#2878c8;margin-top:0}
.mini-nav-links{font-size:9px;color:#6b7d8e;margin-left:auto;white-space:nowrap;font-weight:800}
.mini-website-hero{display:grid;grid-template-columns:56% 44%;flex:1;overflow:hidden}
.mini-website-copy{padding:31px 20px 22px;background:#f0f5fa;position:relative;z-index:1}
.mini-website-copy>span:first-child{font-size:9px;letter-spacing:.06em;color:#226eaf;font-weight:900}
.mini-website-copy h2{font:900 clamp(21px,2.3vw,33px)/1.12 'Manrope',sans-serif;letter-spacing:-.05em;margin:17px 0 11px;color:#102b3c}
.mini-website-copy p{font-size:11px;line-height:1.5;color:#647887;margin:0 0 15px}
.mini-demo-cta{display:inline-block;border-radius:4px;background:#2878c8;color:white;padding:9px 11px;font-weight:900;font-size:9px}
.mini-website-photo{background:url('/assets/electrician.jpg') center center/cover no-repeat;min-width:0}
.mini-website-bottom{min-height:53px;display:flex;align-items:center;justify-content:space-around;gap:9px;background:white;border-top:1px solid #e3eaf1;padding:10px 13px}
.mini-website-bottom span{font-size:9px;letter-spacing:.025em;color:#2a536f;font-weight:900}
.hero-preview-link{background:linear-gradient(180deg,transparent 72%,rgba(6,31,51,.78));padding-bottom:18px}
@media(max-width:570px){.hero-iframe-wrap{height:320px}.mini-website-nav{padding:11px;min-height:49px}.mini-website-nav strong{font-size:10px}.mini-website-nav small{font-size:6px}.mini-bolt{width:21px;height:21px}.mini-nav-links{display:none}.mini-website-copy{padding:22px 12px 14px}.mini-website-copy>span:first-child{font-size:7px}.mini-website-copy h2{font-size:22px;margin:12px 0 8px}.mini-website-copy p{font-size:9px}.mini-demo-cta{font-size:8px;padding:7px}.mini-website-bottom{min-height:40px}.mini-website-bottom span{font-size:7px}}
