:root { --web-ink:#071a3a; --web-navy:#082f6b; --web-blue:#126cf0; --web-sky:#eaf6ff; --web-line:#cee7fa; --web-text:#5b7693; --web-yellow:#ffe36b; --web-green:#2bc895; }
.website-premium-page { background:#fff; color:var(--web-ink); }.website-premium-page .site-header { position:sticky; top:0; background:rgba(255,255,255,.88)!important; border-bottom:1px solid rgba(18,108,240,.1); backdrop-filter:blur(16px); }.web-shell { width:min(100% - 10vw,1320px); margin-inline:auto; }.web-section { padding:clamp(5.5rem,10vw,9.5rem) 0; }.website-premium-page h1,.website-premium-page h2,.website-premium-page h3,.website-premium-page p { font-family:Manrope,Arial,sans-serif; }.website-premium-page h1,.website-premium-page h2 { margin:0; color:var(--web-ink); font-weight:800; letter-spacing:-.08em; }.website-premium-page h1 em,.website-premium-page h2 em { color:var(--web-blue); font-family:Manrope,Arial,sans-serif; font-style:normal; }.web-kicker { display:flex; align-items:center; gap:.7rem; margin:0; color:var(--web-blue); font:800 .68rem "DM Mono",monospace; letter-spacing:.15em; }.web-kicker > span { width:3.5rem; height:2px; background:currentColor; }.website-premium-page a:focus-visible,.website-premium-page input:focus-visible { outline:3px solid rgba(18,108,240,.45); outline-offset:4px; }

/* Hero */
.web-hero { position:relative; overflow:hidden; padding:clamp(4.8rem,9vw,8.6rem) 0 clamp(4.6rem,8vw,7.3rem); background:linear-gradient(132deg,#fff,#fbfdff 47%,#edf8ff); }.web-hero::before { position:absolute; inset:0; opacity:.48; background-image:linear-gradient(rgba(18,108,240,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(18,108,240,.045) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(90deg,#000,transparent 78%); content:""; }.web-hero__grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.87fr) minmax(31rem,1fr); align-items:center; gap:clamp(3rem,8vw,8.5rem); }.web-hero h1 { max-width:11ch; margin-top:1.2rem; font-size:clamp(3.7rem,7vw,7.65rem); line-height:.88; }.web-hero__lead { max-width:38rem; margin:1.55rem 0 0; color:#3f6489; font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.72; }.web-hero__actions,.web-final-cta__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }.website-premium-page .button { min-height:3.15rem; padding:.82rem 1.25rem; font-size:.77rem; }.website-premium-page .button-primary { background:var(--web-blue); box-shadow:0 13px 26px rgba(18,108,240,.25); }.website-premium-page .button-secondary { border-color:#b9dbf7; color:#194b83; background:rgba(255,255,255,.74); }.web-hero__note { display:flex; align-items:center; gap:.55rem; margin:1.35rem 0 0; color:#62809c; font-size:.73rem; font-weight:700; }.web-hero__note i { display:grid; width:1.25rem; height:1.25rem; place-items:center; border-radius:50%; background:#fff0b2; color:#b77900; font-size:.68rem; font-style:normal; }.web-hero__blur { position:absolute; border-radius:50%; filter:blur(10px); pointer-events:none; }.web-hero__blur--one { width:37rem; height:37rem; top:-22rem; right:-14rem; background:radial-gradient(circle,rgba(72,167,255,.25),transparent 70%); }.web-hero__blur--two { width:17rem; height:17rem; bottom:-11rem; left:37%; background:radial-gradient(circle,rgba(255,227,107,.22),transparent 70%); }

/* Browser build animation */
.web-build-window { position:relative; min-height:32rem; padding:.9rem; overflow:hidden; border:1px solid #b8ddfa; border-radius:1.45rem; background:rgba(255,255,255,.76); box-shadow:0 28px 62px rgba(18,91,166,.18); backdrop-filter:blur(13px); }.web-build-window::before { position:absolute; inset:0; opacity:.24; background:linear-gradient(145deg,rgba(104,190,255,.35),transparent 36%); content:""; }.web-build-window__chrome { position:relative; z-index:2; display:flex; height:2rem; align-items:center; gap:.7rem; padding:0 .65rem; border:1px solid #d5eafa; border-radius:.65rem .65rem 0 0; background:#fff; color:#6a8aa7; font:700 .55rem "DM Mono",monospace; letter-spacing:.05em; }.web-build-window__chrome span { display:flex; gap:.3rem; }.web-build-window__chrome span i { width:.42rem; height:.42rem; border-radius:50%; background:#b8d0e2; }.web-build-window__chrome span i:first-child{background:#ff968c}.web-build-window__chrome span i:nth-child(2){background:#ffe47a}.web-build-window__chrome b { margin:auto; font-weight:700; }.web-build-window__chrome em { color:#0e9b67; font-style:normal; }.web-build-window__canvas { position:relative; z-index:1; min-height:28.6rem; overflow:hidden; border:1px solid #d5eafa; border-top:0; border-radius:0 0 .75rem .75rem; background:#f4f8fc; }.web-build-window__nav { position:absolute; top:0; right:0; left:0; display:flex; height:3rem; align-items:center; gap:.7rem; padding:0 1rem; border-bottom:1px solid #e0edf8; background:rgba(255,255,255,.88); }.web-build-window__nav i { width:3rem; height:.6rem; margin-right:auto; border-radius:99px; background:#7ebefa; }.web-build-window__nav span { width:2rem; height:.34rem; border-radius:99px; background:#c9dce9; }.web-build-window__nav b { width:3.9rem; height:1.25rem; margin-left:.35rem; border-radius:99px; background:#196fdb; }.web-build-window__hero-block { position:relative; min-height:19rem; padding:5rem 1.3rem 1.2rem; overflow:hidden; background:linear-gradient(135deg,#e9f5ff,#fdfefe); }.web-build-window__wire { position:relative; z-index:2; height:.6rem; margin-bottom:.65rem; border-radius:.18rem; background:#c9dce9; animation:web-wirefade 7.8s ease-in-out infinite; }.web-build-window__wire--eyebrow { width:5rem; height:.35rem; background:#75b9f9; }.web-build-window__wire--title { width:12rem; height:1.15rem; }.web-build-window__wire--title-short { width:8rem; height:1.15rem; }.web-build-window__wire--copy { width:10rem; height:.45rem; }.web-build-window__wire--button { width:5.2rem; height:1.55rem; margin-top:1.2rem; background:#a8cceb; }.web-build-window__image { position:absolute; right:1.2rem; bottom:1.2rem; width:42%; height:13rem; overflow:hidden; border-radius:.65rem; background:linear-gradient(145deg,#d0eaff,#8fc7fb); opacity:.42; animation:web-image-load 7.8s ease-in-out infinite; }.web-build-window__image::before { position:absolute; width:9rem; height:9rem; top:-3rem; right:-1rem; border-radius:50%; background:#ffe36b; content:""; }.web-build-window__image::after { position:absolute; width:7rem; height:11rem; right:2rem; bottom:-2rem; border-radius:3rem 3rem 0 0; background:#126cf0; content:""; }.web-build-window__tiles { position:absolute; z-index:2; right:1.2rem; bottom:1.25rem; left:1.2rem; display:flex; gap:.6rem; opacity:.3; animation:web-tiles-load 7.8s ease-in-out infinite; }.web-build-window__tiles i { height:4.15rem; flex:1; border-radius:.45rem; background:#c6dfef; }.web-build-window__complete { position:absolute; inset:3rem 0 0; z-index:3; display:grid; align-content:center; padding:2rem; background:linear-gradient(132deg,#0a3b86,#1476e9 66%,#4fb9f7); color:#fff; opacity:0; transform:translateY(16px); animation:web-complete-load 7.8s ease-in-out infinite; }.web-build-window__complete span { color:#b8e3ff; font:700 .58rem "DM Mono",monospace; letter-spacing:.11em; }.web-build-window__complete b { margin:1rem 0; font-size:clamp(2rem,4vw,3.5rem); line-height:.86; letter-spacing:-.085em; }.web-build-window__complete em { display:inline-flex; width:max-content; padding:.65rem .8rem; border-radius:99px; background:#ffe36b; color:#08336e; font-size:.68rem; font-style:normal; font-weight:800; }.web-build-window__tag { position:absolute; z-index:4; right:-.45rem; bottom:3rem; display:grid; width:5.2rem; height:5.2rem; place-items:center; border:1px solid rgba(10,80,172,.22); border-radius:50%; background:#fff; color:#0d5cb9; box-shadow:0 15px 26px rgba(8,68,143,.16); font:800 .57rem/.98 "DM Mono",monospace; letter-spacing:.06em; text-align:center; transform:rotate(10deg); animation:web-tag-float 4s ease-in-out infinite; }

/* Projects */
.web-projects { background:#fff; }.web-section-heading { max-width:45rem; }.web-section-heading h2,.web-devices h2,.web-why h2 { margin-top:1.1rem; font-size:clamp(3rem,5.6vw,6rem); line-height:.91; }.web-section-heading > p:last-child { max-width:31rem; margin:1.4rem 0 0; color:#5c7894; font-size:.94rem; line-height:1.7; }.web-section-heading--projects { display:flex; align-items:end; justify-content:space-between; gap:3rem; max-width:none; margin-bottom:clamp(2.7rem,6vw,5rem); }.web-section-heading--projects > p { margin:0; }.web-project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.web-project-card { transition:transform .35s ease; }.web-project-card:hover { transform:translateY(-9px); }.web-project-frame { position:relative; overflow:hidden; border:1px solid #c6e3f8; border-radius:.95rem; background:#f5f9fc; box-shadow:0 14px 28px rgba(20,85,151,.1); transform-style:preserve-3d; transition:box-shadow .35s ease,transform .35s ease; }.web-project-card:hover .web-project-frame { box-shadow:0 26px 42px rgba(20,85,151,.18); transform:perspective(850px) rotateX(2deg) rotateY(-2deg); }.web-project-frame__top { display:flex; height:2rem; align-items:center; gap:.5rem; padding:0 .75rem; border-bottom:1px solid #dcecf7; background:#fff; color:#7893aa; font:700 .5rem "DM Mono",monospace; }.web-project-frame__top span { display:flex; gap:.25rem; }.web-project-frame__top span i { width:.35rem; height:.35rem; border-radius:50%; background:#b8cbd9; }.web-project-frame__top span i:first-child{background:#ff9c91}.web-project-frame__top span i:nth-child(2){background:#ffe27a}.web-project-frame__top b { margin:auto; font-weight:700; }.web-project-frame__top em { color:#1875d3; font-style:normal; font-size:.75rem; }.web-project-frame img { display:block; width:100%; aspect-ratio:1.98; object-fit:contain; object-position:top center; background:#fff; transition:transform .55s cubic-bezier(.2,.75,.2,1); }.web-project-card:hover img { transform:scale(1.035); }.web-project-frame__reflection { position:absolute; inset:2rem 0 0; background:linear-gradient(112deg,transparent 33%,rgba(255,255,255,.38) 47%,transparent 61%); transform:translateX(-120%); pointer-events:none; }.web-project-card:hover .web-project-frame__reflection { transition:transform .75s ease; transform:translateX(120%); }.web-project-card__meta { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:1rem .25rem .3rem; }.web-project-card__meta h3 { margin:0; color:#123d75; font-size:1rem; letter-spacing:-.045em; }.web-project-card__meta p { margin:.28rem 0 0; color:#728ba3; font-size:.65rem; font-weight:700; }.web-project-card__meta a { display:inline-flex; align-items:center; gap:.35rem; color:#126cf0; font-size:.65rem; font-weight:800; text-decoration:none; }.web-project-card__meta a span { font-size:.9rem; transition:transform .2s ease; }.web-project-card__meta a:hover span { transform:translate(3px,-3px); }.web-project-card.reveal { transition:opacity .7s ease,transform .7s ease; }.web-project-card:nth-child(2){transition-delay:.11s}.web-project-card:nth-child(3){transition-delay:.22s}

/* Process */
.web-process { overflow:hidden; border-top:1px solid #dbeefb; border-bottom:1px solid #dbeefb; background:#f7fbff; }.web-section-heading--center { margin-inline:auto; text-align:center; }.web-section-heading--center .web-kicker { justify-content:center; }.web-section-heading--center h2 { max-width:13ch; margin-inline:auto; }.web-process-flow { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:clamp(3rem,6vw,5.5rem); }.web-process-flow__line { position:absolute; top:2.4rem; right:7%; left:7%; height:1px; background:#b8daf5; }.web-process-flow__line::after { position:absolute; inset:0; background:linear-gradient(90deg,#126cf0,#55c0fa); content:""; transform:scaleX(0); transform-origin:left; transition:transform 1.3s cubic-bezier(.2,.75,.2,1); }.web-process-flow.is-visible .web-process-flow__line::after { transform:scaleX(1); }.web-process-flow article { position:relative; z-index:1; padding:0 .5rem; text-align:center; }.web-process-flow article i { display:grid; width:4.8rem; height:4.8rem; margin-inline:auto; place-items:center; border:1px solid #a5d4f7; border-radius:1.15rem; background:rgba(255,255,255,.88); color:#0c68cf; box-shadow:0 12px 25px rgba(23,92,157,.09); font-size:1.55rem; font-style:normal; animation:web-process-float 4s ease-in-out infinite; }.web-process-flow article:nth-child(3) i { animation-delay:-.8s; }.web-process-flow article:nth-child(4) i { animation-delay:-1.6s; }.web-process-flow article:nth-child(5) i { animation-delay:-2.4s; }.web-process-flow article:nth-child(6) i { animation-delay:-3.2s; }.web-process-flow h3 { margin:1.15rem 0 .45rem; color:#123d75; font-size:1rem; letter-spacing:-.05em; }.web-process-flow p { max-width:12rem; margin:0 auto; color:#6b849b; font-size:.68rem; line-height:1.6; }

/* Feature grid */
.web-features { background:#fff; }.web-feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; margin-top:clamp(2.7rem,6vw,5rem); }.web-feature-grid article { position:relative; min-height:13rem; padding:1.25rem; overflow:hidden; border:1px solid #d5e9f9; border-radius:1rem; background:#fbfdff; box-shadow:0 10px 25px rgba(27,97,160,.05); transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease; }.web-feature-grid article::after { position:absolute; top:-4.5rem; right:-4.5rem; width:9rem; height:9rem; border-radius:50%; background:rgba(62,157,255,.07); content:""; transition:transform .35s ease,background .35s ease; }.web-feature-grid article:hover { border-color:#87c6f5; background:#fff; box-shadow:0 20px 34px rgba(27,97,160,.12); transform:translateY(-7px); }.web-feature-grid article:hover::after { background:rgba(62,157,255,.13); transform:scale(1.16); }.web-feature-grid i { position:relative; z-index:1; display:grid; width:2.55rem; height:2.55rem; place-items:center; border:1px solid #b8dcf7; border-radius:.72rem; background:#eef8ff; color:#126cf0; font-size:1.25rem; font-style:normal; transition:transform .32s ease; }.web-feature-grid article:hover i { transform:rotate(-8deg) scale(1.08); }.web-feature-grid h3 { position:relative; z-index:1; margin:1.45rem 0 .5rem; color:#123e76; font-size:.95rem; letter-spacing:-.045em; }.web-feature-grid p { position:relative; z-index:1; margin:0; color:#68839e; font-size:.68rem; line-height:1.58; }.web-feature-grid article.reveal { transition:opacity .7s ease,transform .7s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease; }

/* Device demo */
.web-devices { overflow:hidden; background:linear-gradient(135deg,#edf9ff,#f9fdff); }.web-devices__grid { display:grid; grid-template-columns:minmax(0,.63fr) minmax(34rem,1fr); align-items:center; gap:clamp(3rem,8vw,9rem); }.web-devices__copy > p:not(.web-kicker) { max-width:31rem; margin:1.5rem 0 0; color:#5c7893; font-size:1rem; line-height:1.72; }.web-device-labels { display:flex; gap:.5rem; margin-top:1.65rem; }.web-device-labels span { padding:.45rem .65rem; border:1px solid #c4e1f8; border-radius:99px; color:#68829a; font-size:.62rem; font-weight:800; transition:background .25s ease,color .25s ease; }.web-device-labels .is-active { border-color:#126cf0; background:#126cf0; color:#fff; }.web-device-stage { position:relative; min-height:27rem; }.web-device { position:absolute; overflow:hidden; border:7px solid #113a75; background:#113a75; box-shadow:0 20px 36px rgba(12,66,139,.22); }.web-device__screen { position:relative; width:100%; height:100%; overflow:hidden; background:linear-gradient(145deg,#fdfefe,#dff3ff); }.web-device__screen::before { position:absolute; width:60%; height:65%; right:-15%; bottom:-8%; border-radius:4rem 4rem 0 0; background:linear-gradient(145deg,#6ebef7,#1570d8); content:""; }.web-device__screen > span { position:absolute; top:15%; left:12%; width:17%; height:4%; border-radius:99px; background:#6daff0; }.web-device__screen b { position:absolute; z-index:1; top:27%; left:12%; color:#133d77; font-size:clamp(.65rem,1.5vw,1.25rem); line-height:.88; letter-spacing:-.07em; }.web-device__screen i { position:absolute; z-index:1; top:52%; left:12%; width:23%; height:7%; border-radius:99px; background:#126cf0; }.web-device__screen em { position:absolute; z-index:1; top:65%; left:12%; width:38%; height:4%; border-radius:99px; background:#c2dbed; }.web-device--desktop { top:1.8rem; left:1.4rem; width:73%; height:21rem; border-radius:.85rem; }.web-device--desktop::after { position:absolute; width:30%; height:1rem; right:35%; bottom:-1rem; border-radius:0 0 .7rem .7rem; background:#153d76; content:""; }.web-device--tablet { right:5%; bottom:1rem; width:34%; height:16.4rem; border-radius:.8rem; transform:rotate(7deg); }.web-device--phone { right:27%; bottom:.2rem; width:18%; height:13rem; border-radius:1rem; transform:rotate(-7deg); }.web-device-stage__shine { position:absolute; z-index:3; top:2.5rem; left:8%; width:58%; height:17rem; background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.48) 49%,transparent 60%); transform:translateX(-155%); animation:web-device-shine 5.5s ease-in-out infinite; pointer-events:none; }

/* Why */
.web-why { background:#fff; }.web-why__grid { display:grid; grid-template-columns:minmax(23rem,.84fr) minmax(0,.8fr); align-items:center; gap:clamp(3rem,9vw,10rem); }.web-why__visual { position:relative; min-height:29rem; overflow:hidden; border-radius:1.3rem; background:linear-gradient(145deg,#093577,#126cf0); box-shadow:0 24px 45px rgba(7,66,143,.2); }.web-why__visual::before { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(rgba(255,255,255,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.17) 1px,transparent 1px); background-size:38px 38px; content:""; }.web-why__screen { position:absolute; border:1px solid rgba(216,240,255,.45); border-radius:.75rem; box-shadow:0 16px 30px rgba(0,25,72,.2); }.web-why__screen--back { width:65%; height:54%; top:17%; right:10%; background:rgba(188,228,255,.18); transform:rotate(8deg); }.web-why__screen--back span { display:block; height:1.2rem; margin:1rem; border-radius:.25rem; background:rgba(224,247,255,.23); }.web-why__screen--front { display:grid; align-content:center; width:59%; height:52%; bottom:15%; left:11%; padding:1.25rem; background:#f7fcff; color:#0a4b9e; transform:rotate(-6deg); }.web-why__screen--front small { color:#5c91c9; font:800 .5rem "DM Mono",monospace; letter-spacing:.1em; }.web-why__screen--front b { margin:.75rem 0; font-size:clamp(1.3rem,2.5vw,2.2rem); line-height:.88; letter-spacing:-.08em; }.web-why__screen--front i { display:grid; width:1.7rem; height:1.7rem; place-items:center; border-radius:50%; background:#ffe36b; color:#0a478e; font-size:.9rem; font-style:normal; }.web-why__cursor { position:absolute; z-index:3; top:26%; left:23%; display:grid; width:2.5rem; height:2.5rem; place-items:center; border:1px solid rgba(221,244,255,.5); border-radius:50%; background:rgba(255,255,255,.17); color:#ffe36b; font-size:1rem; animation:web-cursor 3.4s ease-in-out infinite; }.web-why__pixel { position:absolute; width:.7rem; height:.7rem; border-radius:50%; background:#76d6ff; box-shadow:0 0 0 5px rgba(118,214,255,.13); }.web-why__pixel--one { top:15%; left:12%; }.web-why__pixel--two { right:16%; bottom:12%; background:#ffe36b; box-shadow:0 0 0 5px rgba(255,227,107,.15); }.web-why h2 { max-width:11ch; }.web-why__list { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:2rem; }.web-why__list article { display:flex; align-items:center; gap:.55rem; padding:.8rem; border:1px solid #d5e9f9; border-radius:.75rem; background:#fbfdff; color:#17477e; font-size:.72rem; font-weight:800; }.web-why__list i { display:grid; width:1.3rem; height:1.3rem; flex:0 0 auto; place-items:center; border-radius:50%; background:#e4f8ee; color:#0a9c65; font-size:.65rem; font-style:normal; }

/* Interactive website comparison */
.web-comparison-section { background:#f7fbff; }.web-comparison-section .web-section-heading > p:last-child { margin-inline:auto; text-align:center; }.web-comparison { position:relative; min-height:31rem; margin-top:clamp(2.8rem,6vw,5rem); overflow:hidden; border:1px solid #b7dafa; border-radius:1.25rem; background:#fff; box-shadow:0 20px 42px rgba(24,93,158,.14); }.web-comparison__modern,.web-comparison__old { position:absolute; inset:0; }.web-comparison__modern { background:#f8fbfd; }.web-comparison__old { z-index:2; clip-path:inset(0 calc(100% - var(--comparison-position)) 0 0); }.web-comparison__site { position:absolute; inset:1rem; overflow:hidden; border-radius:.8rem; }.web-comparison__site nav { display:flex; align-items:center; gap:1.1rem; height:3.1rem; padding:0 1.15rem; }.web-comparison__site nav b { margin-right:auto; }.web-comparison__site--modern { background:linear-gradient(135deg,#0d55bd,#1a94f0); color:#fff; }.web-comparison__site--modern nav { border-bottom:1px solid rgba(255,255,255,.2); color:#d7efff; font-size:.65rem; font-weight:700; }.web-comparison__site--modern nav b { color:#fff; font-size:.83rem; letter-spacing:-.05em; }.web-comparison__site--modern nav i { padding:.48rem .7rem; border-radius:99px; background:#ffe36b; color:#093b7d; font-style:normal; }.web-comparison__site--modern > div { position:absolute; top:22%; left:10%; z-index:1; }.web-comparison__site--modern small { color:#bde7ff; font:800 .55rem "DM Mono",monospace; letter-spacing:.11em; }.web-comparison__site--modern h3 { margin:.8rem 0; color:#fff; font-size:clamp(2rem,4vw,4.8rem); line-height:.84; letter-spacing:-.09em; }.web-comparison__site--modern h3 em { color:#ffe36b; font-family:Manrope,Arial,sans-serif; font-style:normal; }.web-comparison__site--modern p { color:#d3efff; font-size:.8rem; }.web-comparison__site--modern > div > b { display:inline-block; margin-top:1rem; padding:.65rem .8rem; border-radius:99px; background:#fff; color:#0e5cbe; font-size:.65rem; }.web-comparison__site--modern aside { position:absolute; right:7%; bottom:-6%; width:32%; height:72%; border-radius:4rem 4rem 0 0; background:linear-gradient(145deg,#9ad8ff,#e5f7ff); transform:rotate(9deg); }.web-comparison__site--modern aside span { position:absolute; display:block; height:.65rem; border-radius:99px; background:#126cf0; }.web-comparison__site--modern aside span:nth-child(1){top:25%;left:24%;width:50%}.web-comparison__site--modern aside span:nth-child(2){top:38%;left:24%;width:35%}.web-comparison__site--modern aside span:nth-child(3){top:54%;left:24%;width:46%;height:2.4rem;background:#ffe36b}.web-comparison__site--old { background:#c9cdd0; color:#43474c; filter:grayscale(1); }.web-comparison__site--old nav { height:2.4rem; border-bottom:3px solid #9a9d9f; background:#dbddde; color:#696d70; font:600 .54rem Arial,sans-serif; }.web-comparison__site--old nav b { color:#4c4f51; font-size:.72rem; }.web-comparison__site--old > div { position:absolute; top:28%; left:9%; width:47%; padding:1rem; border:1px dashed #888d8f; background:#d5d7d8; }.web-comparison__site--old h3 { margin:0; color:#484c4f; font:700 clamp(1.5rem,3vw,3rem)/.95 Arial,sans-serif; }.web-comparison__site--old p { color:#6c7073; font:12px/1.45 Arial,sans-serif; }.web-comparison__site--old button { padding:.45rem .7rem; border:2px outset #a2a5a7; background:#b8bbbc; color:#585c60; font-size:.58rem; }.web-comparison__site--old aside { position:absolute; right:10%; top:18%; display:grid; gap:.7rem; }.web-comparison__site--old aside span { display:block; padding:.35rem; border:1px solid #96999b; background:#bbbec0; color:#707376; font:bold .55rem Arial,sans-serif; }.web-comparison label { position:absolute; z-index:3; bottom:1.6rem; padding:.45rem .62rem; border-radius:99px; background:rgba(255,255,255,.9); color:#27598d; box-shadow:0 5px 14px rgba(5,45,92,.12); font:800 .54rem "DM Mono",monospace; letter-spacing:.06em; }.web-comparison__modern label { right:1.7rem; }.web-comparison__old label { left:1.7rem; }.web-comparison__range { position:absolute; z-index:5; inset:0; width:100%; height:100%; margin:0; cursor:ew-resize; opacity:0; }.web-comparison__handle { position:absolute; z-index:4; top:0; bottom:0; left:var(--comparison-position); width:2px; background:#fff; box-shadow:0 0 0 1px rgba(7,56,119,.16); transform:translateX(-50%); pointer-events:none; }.web-comparison__handle::before { position:absolute; top:50%; left:50%; width:3.4rem; height:3.4rem; border:1px solid #c1e2f8; border-radius:50%; background:#fff; box-shadow:0 10px 22px rgba(10,70,138,.18); content:""; transform:translate(-50%,-50%); }.web-comparison__handle i { position:absolute; top:50%; left:50%; z-index:1; color:#126cf0; font-size:1rem; font-style:normal; transform:translate(-50%,-50%); }

/* Final CTA */
.web-final-cta { position:relative; overflow:hidden; padding:clamp(5.5rem,10vw,9rem) 0; background:linear-gradient(135deg,#061a3d,#083f91 62%,#126cf0); color:#fff; }.web-final-cta::before { position:absolute; inset:0; opacity:.23; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(120deg,#000,transparent 86%); content:""; }.web-final-cta__content { position:relative; z-index:1; max-width:54rem; text-align:center; }.web-final-cta .web-kicker { justify-content:center; color:#c9ebff; }.web-final-cta h2 { max-width:12ch; margin:1.15rem auto 0; color:#fff; font-size:clamp(3.3rem,6.8vw,7.2rem); line-height:.89; }.web-final-cta h2 em { color:#ffe36b; }.web-final-cta__content > p:not(.web-kicker) { max-width:37rem; margin:1.5rem auto 0; color:#c7e6ff; font-size:1rem; line-height:1.72; }.web-final-cta__actions { justify-content:center; }.web-final-cta__actions .button { background:#fff; color:#0956ba; box-shadow:0 14px 26px rgba(0,25,78,.2); }.web-final-cta__actions .button:hover { background:#ffe36b; color:#0a3877; }.web-final-cta__actions > a:last-child { display:inline-flex; align-items:center; gap:.55rem; padding:.82rem .22rem; border-bottom:1px solid rgba(255,255,255,.7); color:#fff; font-size:.75rem; font-weight:800; text-decoration:none; }.web-final-cta__actions > a:last-child span { color:#ffe36b; font-size:1.05rem; transition:transform .2s ease; }.web-final-cta__actions > a:last-child:hover span { transform:translateX(3px); }.web-final-cta__mesh span { position:absolute; width:20rem; height:20rem; border-radius:50%; filter:blur(15px); }.web-final-cta__mesh span:nth-child(1){top:-11rem;left:-7rem;background:rgba(79,184,247,.22)}.web-final-cta__mesh span:nth-child(2){right:-8rem;bottom:-13rem;background:rgba(70,148,255,.22)}.web-final-cta__mesh span:nth-child(3){top:14%;right:22%;width:7rem;height:7rem;background:rgba(255,227,107,.16)}.web-final-cta__mesh i { position:absolute; color:rgba(216,241,255,.2); font-style:normal; }.web-final-cta__mesh i:nth-of-type(1){top:21%;left:13%;font-size:2rem}.web-final-cta__mesh i:nth-of-type(2){right:15%;bottom:25%;font-size:2.7rem}.web-final-cta__mesh i:nth-of-type(3){top:16%;right:33%;font-size:1.6rem}

@keyframes web-wirefade { 0%,26%{opacity:1;transform:none} 38%,100%{opacity:0;transform:translateY(-8px)} } @keyframes web-image-load { 0%,26%{opacity:.42;transform:none} 38%,100%{opacity:0;transform:scale(.94)} } @keyframes web-tiles-load { 0%,26%{opacity:.3;transform:none} 38%,100%{opacity:0;transform:translateY(8px)} } @keyframes web-complete-load { 0%,32%{opacity:0;transform:translateY(16px)} 44%,84%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-12px)} } @keyframes web-tag-float { 50%{transform:rotate(16deg) translateY(-8px)} } @keyframes web-process-float { 50%{transform:translateY(-7px)} } @keyframes web-device-shine { 48%,100%{transform:translateX(160%)} } @keyframes web-cursor { 50%{transform:translate(17px,13px) rotate(20deg)} }

@media(max-width:1050px){.web-hero__grid,.web-devices__grid{grid-template-columns:1fr}.web-hero__copy{max-width:46rem}.web-build-window{width:min(100%,44rem);min-height:30rem}.web-project-grid{grid-template-columns:repeat(2,1fr)}.web-project-card:last-child{grid-column:span 2;max-width:calc(50% - .5rem)}.web-process-flow{grid-template-columns:repeat(3,1fr);row-gap:2.8rem}.web-process-flow__line{display:none}.web-feature-grid{grid-template-columns:repeat(3,1fr)}.web-devices__grid{gap:3rem}.web-device-stage{max-width:43rem}.web-why__grid{grid-template-columns:1fr}.web-why__visual{max-width:43rem}.web-comparison{min-height:27rem}}
@media(max-width:700px){.web-shell{width:min(100% - 2.7rem,1320px)}.web-section{padding:4.6rem 0}.web-hero{padding:4.3rem 0 4.5rem}.web-hero__grid{gap:2.7rem}.web-hero h1{font-size:clamp(3.15rem,14vw,4.75rem)}.web-hero__lead{font-size:.96rem}.web-hero__actions{flex-direction:column;align-items:stretch}.web-hero__actions .button{justify-content:center}.web-build-window{min-height:23rem;padding:.65rem;border-radius:1rem}.web-build-window__canvas{min-height:20.2rem}.web-build-window__hero-block{min-height:14rem;padding-top:3.6rem}.web-build-window__image{height:9rem}.web-build-window__complete b{font-size:2.1rem}.web-build-window__tag{width:4.2rem;height:4.2rem;right:-.3rem;bottom:1.8rem;font-size:.48rem}.web-section-heading h2,.web-devices h2,.web-why h2{font-size:clamp(2.75rem,12.5vw,4rem)}.web-section-heading--projects{display:block}.web-section-heading--projects>p{margin-top:1.3rem}.web-project-grid{grid-template-columns:1fr}.web-project-card:last-child{grid-column:auto;max-width:none}.web-project-card__meta{padding-top:.85rem}.web-process-flow{grid-template-columns:1fr;gap:1.2rem;margin-top:2.7rem}.web-process-flow article{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;text-align:left}.web-process-flow article i{width:3.7rem;height:3.7rem;margin:0;grid-row:span 2}.web-process-flow h3{margin:.25rem 0 .3rem}.web-process-flow p{margin:0;max-width:none}.web-feature-grid{grid-template-columns:repeat(2,1fr)}.web-feature-grid article{min-height:11rem;padding:1rem}.web-feature-grid h3{font-size:.82rem}.web-feature-grid p{font-size:.62rem}.web-device-stage{min-height:20rem}.web-device--desktop{top:1.4rem;left:0;width:78%;height:15.2rem}.web-device--tablet{right:0;bottom:1rem;width:36%;height:12.4rem}.web-device--phone{right:25%;width:19%;height:10rem}.web-device-stage__shine{height:12rem}.web-why__visual{min-height:23rem}.web-why__list{grid-template-columns:1fr}.web-comparison{min-height:23rem;margin-top:2.7rem;border-radius:1rem}.web-comparison__site{inset:.55rem}.web-comparison__site nav{gap:.45rem;height:2.3rem;padding:0 .65rem}.web-comparison__site nav span{display:none}.web-comparison__site--modern > div{top:20%;left:9%}.web-comparison__site--modern h3{font-size:2.1rem}.web-comparison__site--modern p{font-size:.63rem}.web-comparison__site--modern aside{width:37%;height:64%}.web-comparison__site--old > div{top:27%;width:56%;padding:.65rem}.web-comparison__site--old h3{font-size:1.5rem}.web-comparison__site--old p{font-size:10px}.web-comparison label{bottom:1rem;font-size:.45rem}.web-comparison__modern label{right:1rem}.web-comparison__old label{left:1rem}.web-final-cta{padding:4.8rem 0}.web-final-cta h2{font-size:clamp(3rem,13.2vw,4.7rem)}.web-final-cta__actions{flex-direction:column;align-items:center}.web-final-cta__actions .button{justify-content:center}}
@media(prefers-reduced-motion:reduce){.website-premium-page *,.website-premium-page *::before,.website-premium-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.web-process-flow__line::after{transform:scaleX(1)}.web-comparison__handle{transition:none!important}}

/* Project previews stay inside the site instead of opening a blank browser page. */
.web-project-preview { display:inline-flex; align-items:center; gap:.35rem; padding:0; border:0; background:transparent; color:#126cf0; font:800 .65rem Manrope,Arial,sans-serif; cursor:pointer; }.web-project-preview span { font-size:.9rem; transition:transform .2s ease; }.web-project-preview:hover span { transform:translate(3px,-3px); }.web-preview-dialog { width:min(92vw,1160px); max-width:1160px; max-height:90svh; padding:0; overflow:hidden; border:1px solid rgba(198,227,248,.8); border-radius:1rem; background:#fff; box-shadow:0 28px 80px rgba(3,25,61,.38); }.web-preview-dialog::backdrop { background:rgba(4,22,51,.72); backdrop-filter:blur(5px); }.web-preview-dialog__bar { display:flex; height:3.1rem; align-items:center; justify-content:space-between; gap:1rem; padding:0 1rem 0 1.2rem; border-bottom:1px solid #dcecf7; color:#26598d; font:800 .59rem "DM Mono",monospace; letter-spacing:.1em; }.web-preview-dialog__close { min-height:2rem; padding:.35rem .7rem; border:1px solid #b8dcf8; border-radius:99px; background:#f7fbff; color:#155da9; font:800 .62rem Manrope,Arial,sans-serif; cursor:pointer; }.web-preview-dialog__close:hover { border-color:#126cf0; background:#126cf0; color:#fff; }.web-preview-dialog img { display:block; width:100%; max-height:calc(90svh - 3.1rem); object-fit:contain; object-position:top center; background:#f5f9fc; }

/* Keep the portfolio cards compact, even when a supplied screenshot has empty space below its visible page. */
.web-project-frame img { height:clamp(10rem,14vw,13.5rem); aspect-ratio:auto; object-fit:cover; object-position:top center; }

/* A fuller first stage for the website-build animation. */
.web-build-window__hero-block { background:radial-gradient(circle at 78% 22%,rgba(255,227,107,.22),transparent 25%),linear-gradient(135deg,#eef9ff,#dff2ff 58%,#f9fdff); }.web-build-window__hero-block::before { position:absolute; inset:0; opacity:.65; background-image:linear-gradient(rgba(42,125,211,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(42,125,211,.08) 1px,transparent 1px); background-size:24px 24px; content:""; }.web-build-window__draft-copy { position:absolute; z-index:3; top:2rem; left:1.35rem; display:flex; width:47%; flex-direction:column; align-items:flex-start; animation:web-draftfade 7.8s ease-in-out infinite; }.web-build-window__draft-copy small { color:#3178c6; font:800 .5rem "DM Mono",monospace; letter-spacing:.13em; }.web-build-window__draft-copy b { margin:.55rem 0 .65rem; color:#0d4a9a; font-size:clamp(1.05rem,2.1vw,1.75rem); line-height:.92; letter-spacing:-.075em; }.web-build-window__draft-copy span { max-width:12rem; color:#5d7f9d; font-size:.55rem; font-weight:700; line-height:1.55; }.web-build-window__draft-copy em { display:inline-flex; align-items:center; gap:.35rem; margin-top:.85rem; padding:.42rem .55rem; border:1px solid #b8ddfa; border-radius:99px; background:rgba(255,255,255,.75); color:#1463ba; font-size:.5rem; font-style:normal; font-weight:800; }.web-build-window__draft-copy em i { color:#126cf0; font-size:.7rem; font-style:normal; }.web-build-window__hero-block .web-build-window__wire { opacity:0!important; animation:none!important; }.web-build-window__image { z-index:2; width:40%; height:14.1rem; border:1px solid rgba(72,149,225,.15); box-shadow:0 18px 31px rgba(45,117,191,.16); }.web-build-window__image::before { box-shadow:0 0 0 16px rgba(255,255,255,.21); }.web-build-window__tiles { z-index:3; right:1.15rem; bottom:1.2rem; left:auto; width:42%; opacity:1; animation:web-draftfade 7.8s ease-in-out infinite; }.web-build-window__tiles i { position:relative; height:3.45rem; overflow:hidden; border:1px solid rgba(115,180,236,.18); border-radius:.4rem; background:rgba(255,255,255,.72); box-shadow:0 5px 12px rgba(37,107,174,.09); }.web-build-window__tiles i::before { position:absolute; top:.48rem; left:.45rem; color:#7ca3c4; font:800 .38rem "DM Mono",monospace; letter-spacing:.08em; content:"BRAND"; }.web-build-window__tiles i::after { position:absolute; right:.45rem; bottom:.45rem; left:.45rem; height:.35rem; border-radius:99px; background:#acd7f6; content:""; }.web-build-window__tiles i:nth-child(2)::before{content:"MOBILE"}.web-build-window__tiles i:nth-child(2)::after{width:55%;background:#75b9f9}.web-build-window__tiles i:nth-child(3)::before{content:"LEADS"}.web-build-window__tiles i:nth-child(3)::after{width:67%;background:#ffe36b}.web-build-window__progress { position:absolute; z-index:3; bottom:1.65rem; left:1.35rem; display:grid; width:38%; grid-template-columns:1fr auto; align-items:center; gap:.38rem .55rem; padding:.6rem .7rem; border:1px solid rgba(116,181,234,.24); border-radius:.5rem; background:rgba(255,255,255,.74); box-shadow:0 7px 16px rgba(37,107,174,.08); animation:web-draftfade 7.8s ease-in-out infinite; }.web-build-window__progress span { color:#6c94b7; font:800 .39rem "DM Mono",monospace; letter-spacing:.09em; }.web-build-window__progress b { color:#126cf0; font-size:.65rem; }.web-build-window__progress > i { grid-column:span 2; height:.28rem; overflow:hidden; border-radius:99px; background:#d8eaf7; }.web-build-window__progress > i em { display:block; width:68%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#126cf0,#6dbef7); }.web-build-window__complete { z-index:7; }.web-build-window__tag { z-index:8; }

@keyframes web-draftfade { 0%,32% { opacity:1; transform:translateY(0); } 44%,84% { opacity:0; transform:translateY(10px); } 100% { opacity:1; transform:translateY(0); } }

@media(max-width:700px){.web-build-window__draft-copy{top:1.25rem;left:1rem}.web-build-window__draft-copy b{font-size:1rem}.web-build-window__draft-copy span{font-size:.47rem}.web-build-window__draft-copy em{margin-top:.55rem}.web-build-window__image{right:.8rem;bottom:1rem;height:10rem}.web-build-window__tiles{right:.8rem;bottom:.8rem}.web-build-window__tiles i{height:2.55rem}.web-build-window__progress{bottom:1.08rem;left:1rem;width:40%;padding:.48rem}.web-build-window__progress span{font-size:.34rem}}

/* Premium before-and-after presentation. */
.web-comparison { min-height:34rem; padding:.8rem; border-color:#a9d7f8; border-radius:1.5rem; background:linear-gradient(135deg,#dff3ff,#f8fcff); box-shadow:0 25px 56px rgba(24,93,158,.16); }.web-comparison__modern,.web-comparison__old { inset:.8rem; border-radius:1rem; }.web-comparison__modern { overflow:hidden; background:radial-gradient(circle at 84% 24%,rgba(255,228,111,.28),transparent 23%),linear-gradient(132deg,#063e92,#0e73dc 60%,#37b6f5); }.web-comparison__old { width:var(--comparison-position); overflow:hidden; clip-path:none; filter:none; }.web-comparison__site { inset:0; border-radius:0; }.web-comparison__site--modern nav { height:3.5rem; padding:0 1.5rem; background:rgba(255,255,255,.1); backdrop-filter:blur(7px); }.web-comparison__site--modern nav b { font-size:.76rem; }.web-comparison__site--modern nav i { padding:.56rem .83rem; box-shadow:0 6px 15px rgba(5,39,100,.16); }.web-comparison__site--modern > div { top:24%; left:9%; }.web-comparison__site--modern h3 { max-width:10ch; font-size:clamp(2.5rem,5.1vw,5.9rem); }.web-comparison__site--modern p { max-width:17rem; color:#d8f1ff; font-size:.78rem; line-height:1.6; }.web-comparison__site--modern > div > b { box-shadow:0 9px 18px rgba(3,41,105,.16); }.web-comparison__site--modern aside { right:8%; bottom:8%; display:grid; width:30%; height:auto; gap:.55rem; padding:0; border-radius:0; background:none; transform:rotate(-4deg); }.web-comparison__site--modern aside::before { position:absolute; width:15rem; height:15rem; right:-5rem; bottom:-5rem; border:1px solid rgba(255,255,255,.25); border-radius:50%; box-shadow:0 0 0 2.2rem rgba(255,255,255,.06),0 0 0 4.4rem rgba(255,255,255,.04); content:""; }.web-comparison__site--modern aside span { position:relative; height:auto; padding:.7rem .75rem; border:1px solid rgba(255,255,255,.25); border-radius:.55rem; background:rgba(255,255,255,.13); color:#fff; box-shadow:0 10px 20px rgba(3,35,98,.16); backdrop-filter:blur(7px); font-size:.6rem; font-weight:800; }.web-comparison__site--modern aside span:nth-child(1){width:100%;background:rgba(255,255,255,.18)}.web-comparison__site--modern aside span:nth-child(2){width:82%;margin-left:8%;background:rgba(13,54,124,.3)}.web-comparison__site--modern aside span:nth-child(3){width:92%;margin-left:-4%;background:rgba(255,227,107,.94);color:#0c4a94}.web-comparison__site--old { background:linear-gradient(135deg,#d9dcdf,#b8bdc2); color:#474b4e; filter:grayscale(1); }.web-comparison__site--old::before { position:absolute; inset:0; opacity:.26; background-image:linear-gradient(rgba(71,75,78,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(71,75,78,.3) 1px,transparent 1px); background-size:26px 26px; content:""; }.web-comparison__site--old nav { position:relative; height:3.5rem; padding:0 1.5rem; border-bottom:1px solid rgba(66,70,73,.35); background:rgba(255,255,255,.25); color:#676b6e; font-size:.58rem; }.web-comparison__site--old nav b { color:#484c4f; font-size:.75rem; }.web-comparison__site--old > div { top:25%; left:9%; width:48%; padding:0; border:0; background:transparent; }.web-comparison__site--old small { color:#72767a; font:800 .5rem "DM Mono",monospace; letter-spacing:.1em; }.web-comparison__site--old h3 { margin:.7rem 0; color:#484c4f; font:700 clamp(1.7rem,3.6vw,3.8rem)/.93 Manrope,Arial,sans-serif; letter-spacing:-.07em; }.web-comparison__site--old p { color:#666b70; font:700 .7rem/1.6 Manrope,Arial,sans-serif; }.web-comparison__site--old button { padding:.62rem .82rem; border:1px solid #9ca1a5; border-radius:.25rem; background:#babdc0; color:#656a6e; font:700 .6rem Manrope,Arial,sans-serif; }.web-comparison__site--old aside { right:7%; top:auto; bottom:10%; display:flex; width:25%; flex-wrap:wrap; gap:.35rem; }.web-comparison__site--old aside span { padding:.38rem .48rem; border:1px solid #969ba0; background:rgba(255,255,255,.18); color:#6f7478; font:bold .48rem Manrope,Arial,sans-serif; }.web-comparison__handle { z-index:8; width:3px; box-shadow:0 0 0 1px rgba(7,56,119,.08),0 0 18px rgba(255,255,255,.65); }.web-comparison__handle::before { width:3.7rem; height:3.7rem; border-color:#b4ddf9; box-shadow:0 12px 26px rgba(8,63,130,.25); }.web-comparison__handle i { font-size:1.15rem; }.web-comparison label { z-index:7; bottom:1.7rem; padding:.5rem .7rem; border:1px solid rgba(170,214,246,.85); color:#1c5e9d; }.web-comparison__modern label { right:1.7rem; }.web-comparison__old label { left:1.7rem; }.web-comparison__range { z-index:9; }

@media(max-width:700px){.web-comparison{min-height:26rem;padding:.5rem;border-radius:1rem}.web-comparison__modern,.web-comparison__old{inset:.5rem;border-radius:.7rem}.web-comparison__site--modern nav,.web-comparison__site--old nav{height:2.75rem;padding:0 .8rem}.web-comparison__site--modern nav b,.web-comparison__site--old nav b{font-size:.55rem}.web-comparison__site--old nav span{white-space:nowrap;font-size:.4rem}.web-comparison__site--modern > div,.web-comparison__site--old > div{top:23%;left:8%}.web-comparison__site--modern h3{font-size:2.25rem}.web-comparison__site--modern p{max-width:11rem;font-size:.59rem}.web-comparison__site--modern aside{right:4%;bottom:11%;width:36%}.web-comparison__site--modern aside span{padding:.42rem;font-size:.43rem}.web-comparison__site--old > div{width:60%}.web-comparison__site--old h3{font-size:1.55rem}.web-comparison__site--old p{font-size:.55rem}.web-comparison__site--old aside{display:none}.web-comparison__handle::before{width:3.2rem;height:3.2rem}.web-comparison label{bottom:1rem;padding:.35rem .5rem;font-size:.4rem}.web-comparison__modern label{right:1rem}.web-comparison__old label{left:1rem}}

.web-comparison__old { right:auto; }

/* Keep every device message readable in the responsive showcase. */
.web-device-stage { isolation:isolate; }.web-device--desktop { z-index:1; left:0; width:70%; }.web-device--tablet { z-index:3; right:0; bottom:1.2rem; width:33%; }.web-device--phone { z-index:4; right:-1.5%; bottom:.4rem; width:17%; }.web-device__screen b { z-index:4; padding:.12em .16em; border-radius:.2em; background:rgba(255,255,255,.68); box-shadow:0 3px 8px rgba(15,65,130,.08); text-shadow:none; }.web-device--tablet .web-device__screen b { top:17%; left:11%; font-size:clamp(.63rem,1.25vw,1rem); }.web-device--phone .web-device__screen b { top:18%; left:13%; font-size:clamp(.5rem,.9vw,.72rem); }.web-device--tablet .web-device__screen i { top:52%; left:11%; width:29%; }.web-device--phone .web-device__screen i { top:51%; left:13%; width:34%; }.web-device--tablet .web-device__screen em { left:11%; width:44%; }.web-device--phone .web-device__screen em { left:13%; width:46%; }.web-device-stage__shine { z-index:2; pointer-events:none; }

@media(max-width:700px){.web-device--desktop{left:0;width:72%}.web-device--tablet{right:0;bottom:1rem;width:36%}.web-device--phone{right:-1%;bottom:.35rem;width:18%}.web-device--tablet .web-device__screen b{font-size:.55rem}.web-device--phone .web-device__screen b{font-size:.42rem}}