/* Pico Steamers — mobile landing: consolidated styles (fonts + block styles) */ /* ===== fonts ===== */ /* cyrillic-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/plus-jakarta-sans-cyrillic-ext.woff2") format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* vietnamese */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/plus-jakarta-sans-vietnamese.woff2") format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* latin-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/plus-jakarta-sans-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/plus-jakarta-sans-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* devanagari */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-devanagari-600.woff2") format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;} /* devanagari */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-devanagari-700.woff2") format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;} /* devanagari */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/poppins-devanagari-800.woff2") format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;} /* latin-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-latin-ext-600.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-latin-ext-700.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/poppins-latin-ext-800.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-latin-600.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* latin */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/poppins-latin-700.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* latin */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/poppins-latin-800.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* cyrillic-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-cyrillic-ext.woff2") format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* cyrillic */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-cyrillic.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* greek */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-greek.woff2") format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;} /* vietnamese */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-vietnamese.woff2") format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* latin-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/manrope-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* cyrillic-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/mulish-cyrillic-ext.woff2") format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* cyrillic */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/mulish-cyrillic.woff2") format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* vietnamese */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/mulish-vietnamese.woff2") format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* latin-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/mulish-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/mulish-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* latin-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/figtree-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/figtree-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* devanagari */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/baloo-2-devanagari.woff2") format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;} /* vietnamese */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/baloo-2-vietnamese.woff2") format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* latin-ext */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/baloo-2-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face{font-family:'Plus Jakarta Sans', system-ui, sans-serif;font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/baloo-2-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ===== design tokens ===== */ :root{ --brand:#1E63F0; --brand-deep:#1652D6; --brand-tint:#E8F0FE; --ink:#0B1B4D; --muted:#54627F; --line:#E4E8F1; --warm:#F5A524; --warm-ink:#A85D00; --shadow-card:0 1px 2px rgba(16,27,60,.05), 0 14px 30px -14px rgba(16,27,60,.15); --shadow-btn:0 2px 5px rgba(30,99,240,.22), 0 12px 22px -10px rgba(30,99,240,.4); } /* ===== page ===== */ html,body{margin:0;padding:0;background:#F7F8FB;} /* no double-tap-to-zoom when tapping cards, tabs and carousel arrows; pinch-zoom still works — the viewport meta sets no user-scalable=no. Same treatment as cleaning-price-calculator.html. */ html{scroll-behavior:smooth;touch-action:manipulation;} body{overflow-x:hidden;-webkit-font-smoothing:antialiased;font-family:'Plus Jakarta Sans', system-ui, sans-serif;touch-action:manipulation;} /* applied to everything rather than a list of components: the surfaces people actually tap twice are the before/after photo, the review card, the area map and the city chips, and enumerating them means missing the next one. Nothing in this site sets touch-action to anything else, and manipulation still allows panning and pinch, so the reviews swipe handler is unaffected. */ *{touch-action:manipulation;} a{color:#1E63F0;} a:hover{color:#1652D6;} /* ===== sticky top bar + menu panel ===== */ #nav-bar{transform:translateY(-104%);opacity:0;visibility:hidden; transition:transform .42s cubic-bezier(0.22,1,0.36,1), opacity .3s ease, visibility .42s;} #nav-bar[data-show="true"]{transform:translateY(0);opacity:1;visibility:visible;} #nav-panel{transform:translateX(102%);opacity:1;pointer-events:none;} #nav-panel[data-anim="fade"]{transform:translateY(18px);opacity:0;} #nav-panel[data-open="true"]{transform:none;opacity:1;pointer-events:auto;} /* ===== main (hero) ===== */ #home{-webkit-font-smoothing:antialiased;} #home, #home *, #home *::before, #home *::after{box-sizing:border-box;} /* ===== about us ===== */ #about .logo-wrap{overflow:hidden;} #about .logo-wrap img{display:block;width:100%;height:100%;object-fit:cover;} /* ===== how it works ===== */ #how-it-works a{color:#1E63F0;text-decoration:none;} #how-it-works a:hover{color:#1652D6;} /* ===== reviews ===== */ #reviews a{color:#1E63F0;text-decoration:none;} #reviews a:hover{color:#1652D6;} @keyframes revNextA{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:translateX(0);}} @keyframes revNextB{from{opacity:0;transform:translateX(26px);}to{opacity:1;transform:translateX(0);}} @keyframes revPrevA{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:translateX(0);}} @keyframes revPrevB{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:translateX(0);}} /* ===== areas ===== */ #areas, #areas *{box-sizing:border-box;font-family:'Plus Jakarta Sans', system-ui, sans-serif;-webkit-tap-highlight-color:transparent;} #areas a{color:#1E63F0;} #areas a:hover{color:#1652D6;} /* city chips are static markup toggled by [hidden]; they carry an inline display:flex, which would otherwise beat the browser's [hidden] rule */ #areas-cities > [hidden]{display:none !important;} @keyframes popIn{from{opacity:0;transform:translate(-50%,-40%);}to{opacity:1;transform:translate(-50%,-50%);}} /* ===== faq ===== */ @keyframes faqFadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}} /* ===== contacts ===== */ #contacts{font-family:'Plus Jakarta Sans', system-ui, sans-serif;-webkit-font-smoothing:antialiased;} #contacts a{color:#1E63F0;text-decoration:none;} #contacts a:hover{color:#1652D6;} /* drop the redundant "Local. Reliable. Professional." box on phones */ @media(max-width:759px){ .ct-trustbox{display:none !important;} } /* single-column view: centre the About / Contact section headers so the eyebrow + heading match the other sections' centred rhythm. Body copy stays left-aligned for readability. */ @media(max-width:1079px){ #about .ab-wrap{text-align:center;} #about .ab-lede,#about .ab-card{text-align:left;} #contacts .ct-badge{display:flex !important;width:fit-content;margin-left:auto;margin-right:auto;} #contacts .ct-h1,#contacts .ct-lede{text-align:center;} } /* phones only: let the hero photo run on behind the first CTA and dissolve there, instead of stopping at a hard edge above it. The CTAs are pulled back up by the same amount, so nothing below them moves. Kept off tablets — their hero band is short and the long fade would wash out the feature rows. */ @media(max-width:759px){ #home .hero-media{padding-bottom:104px;} #home .hero-ctas{position:relative;z-index:1;margin-top:-104px;} /* inline styles on the element, so these have to win */ #home .hero-fade--btm{ height:330px !important; background:linear-gradient(180deg, rgba(9,16,38,0) 0%, rgba(9,16,38,0.26) 34%, rgba(9,16,38,0.30) 62%, rgba(9,16,38,0.30) 80%, rgba(247,248,250,0.55) 92%, #F7F8FB 100%) !important; } } @keyframes pinDrop{0%{transform:translateY(-16px);opacity:0;}60%{transform:translateY(2px);opacity:1;}100%{transform:translateY(0);}} /* ===== before / after (work) ===== */ #work{--brand: #1E63F0; --ink: #0B1B4D; --muted: #54627F; --card: #ffffff; --bg: #F7F8FB; --radius: 20px; --font-head: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif;} #work, #work *{box-sizing: border-box;} #work{background: var(--bg); font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;} #work .app{display: flex; justify-content: center;} #work .sec{width: 100%; max-width: 480px; padding: 36px 20px 36px;} #work .eyebrow{display: flex; width: max-content; margin: 0 auto 16px; background: #E8F0FE; color: var(--brand); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 18px; border-radius: 999px;} #work .title{margin: 0; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: 34px; line-height: 1.14; letter-spacing: -0.02em; color: var(--ink);} #work .lede{margin: 14px auto 0; max-width: 320px; text-align: center; color: var(--muted); font-size: 15.5px; font-weight: 500; line-height: 1.55; text-wrap: pretty;} #work .card{background: var(--card); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16,27,60,.05), 0 14px 30px -14px rgba(16,27,60,.15); border: 1px solid #E5E9F2;} #work .tabs{margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px 8px 14px;} #work .tab{appearance: none; background: none; border: none; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 4px 4px 0; color: var(--muted); transition: color 0.16s ease;} #work .tab:not(:first-child){border-left: 1px solid rgba(12, 20, 45, 0.09);} #work .tab__icon{width: 27px; height: 27px; display: block;} #work .tab__label{font-size: 15px; font-weight: 600;} #work .tab__bar{margin-top: 11px; width: 60%; height: 3px; border-radius: 3px; background: var(--brand); opacity: 0; transform: scaleX(0.4); transition: opacity 0.18s ease, transform 0.18s ease;} #work .tab--on{color: var(--brand);} #work .tab--on .tab__bar{opacity: 1; transform: scaleX(1);} /* Nudge the label when the arrows carry you from one tab into the next, so the hand-off is visible instead of the counter appearing to reset. */ @keyframes tabJump{ 0%{transform: translateY(0);} 35%{transform: translateY(-5px);} 70%{transform: translateY(0);} 85%{transform: translateY(-2px);} 100%{transform: translateY(0);}} #work .tab--jump{animation: tabJump .42s ease;} @media (prefers-reduced-motion: reduce){ #work .tab--jump{animation: none;}} #work .imgcard{margin-top: 22px; padding: 0; overflow: hidden;} /* Light, not var(--ink): this shows through for the moment before a photo paints, and a dark navy block reads as a glitch rather than as loading. */ #work .ba{position: relative; width: 100%; aspect-ratio: 107 / 100; background: #E7EBF3; display: flex; overflow: hidden; user-select: none; -webkit-user-select: none;} #work .ba__half{position: relative; flex: 1 1 50%; min-width: 0; overflow: hidden;} #work .ba__half--before{box-shadow: 2px 0 0 0 rgba(255, 255, 255, 0.9); z-index: 1;} #work .ba__slot{position: absolute; inset: 0;} /* All five reviews sit in the markup so crawlers see every one; the carousel only toggles which is visible. Guarded with !important for the same reason the city chips are — an inline display on a card would beat the UA [hidden] rule and show them all at once. */ #review-content > [hidden]{display: none !important;} #work .ba__img{width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;} #work .scene{width: 100%; height: 100%; position: relative; display: grid; place-items: center; overflow: hidden; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 7px), radial-gradient(130% 95% at 50% 0%, color-mix(in srgb, var(--tone) 82%, #ffffff), var(--tone));} #work .scene__icon{width: 33%; max-width: 132px; color: rgba(11, 20, 45, 0.16);} #work .scene--before{filter: sepia(0.5) brightness(0.83) contrast(0.92) saturate(1.2);} #work .scene .stain{position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(86, 58, 28, 0.55), rgba(86, 58, 28, 0) 70%); filter: blur(7px);} #work .scene .s1{width: 46%; height: 36%; left: 6%; bottom: 4%;} #work .scene .s2{width: 30%; height: 26%; right: 12%; top: 24%; opacity: 0.8;} #work .scene .s3{width: 22%; height: 20%; left: 38%; top: 8%; opacity: 0.7;} #work .ba__badge{position: absolute; top: 16px; padding: 7px 14px; border-radius: 11px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: #fff; z-index: 3; box-shadow: 0 4px 12px rgba(12, 20, 45, 0.25);} #work .ba__badge--before{left: 16px; background: #0B1B4D;} #work .ba__badge--after{right: 16px; background: var(--brand);} #work .controls{margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px;} #work .navbtn{flex-shrink: 0; width: 56px; height: 52px; border: none; border-radius: 16px; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 32%, transparent); transition: transform 0.12s ease, background 0.12s ease;} #work .navbtn svg{width: 24px; height: 24px;} #work .navbtn:hover{background: color-mix(in srgb, var(--brand) 90%, #000);} #work .navbtn:active{transform: scale(0.94);} #work .controls__center{flex: 1; display: flex; flex-direction: column; align-items: center; gap: 12px;} #work .counter{display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 700; font-size: 17px;} #work .counter__cam{width: 22px; height: 22px; color: var(--muted); display: block;} #work .dots{display: flex; gap: 9px;} #work .dot{width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%; background: rgba(12, 20, 45, 0.16); cursor: pointer; transition: background 0.16s ease, transform 0.16s ease;} #work .dot--on{background: var(--brand); transform: scale(1.15);} #work .features{margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 24px 6px;} #work .feature{display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 0 8px;} #work .feature:not(:first-child){border-left: 1px solid rgba(12, 20, 45, 0.09);} #work .feature__icon{width: 30px; height: 30px; color: var(--brand);} #work .feature__txt{color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35;} #work .trust{margin: 22px auto 0; display: block; max-width: 320px; color: var(--muted); font-size: 13.5px; line-height: 1.5; font-weight: 600; text-align: center; text-wrap: balance;} #work .trust__icon{display: inline-block; width: 17px; height: 17px; color: var(--brand); vertical-align: -3px; margin-right: 6px;} /* ===== pricing ===== */ #pricing{--accent:#1E63F0; --accent-deep:#1652D6; --tint:#E8F0FE; --tint-2:#D6E4FD; --accent-shadow:color-mix(in srgb, var(--accent) 38%, transparent); --blue:var(--accent); --blue-strong:var(--accent-deep); --ink:#0B1B4D; --ink-soft:#54627F; --muted:#7F8DAD; --card:#ffffff; --icon-bg:var(--tint); --line:#E5E9F2; --bg-top:#F7F8FB; --bg-bot:#F7F8FB; --radius:20px; --radius-sm:16px; --circle-radius:50%;} #pricing, #pricing *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} #pricing{font-family:'Plus Jakarta Sans', system-ui, sans-serif; background:#F7F8FB; color:var(--ink); display:flex; justify-content:center;} #pricing:not([data-iconset]) .icon-circle .ico-detailed{display:block;} #pricing .screen{width:100%; max-width:480px; background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bot) 100%); padding:36px 18px 36px; display:flex; flex-direction:column;} #pricing .badge{align-self:center; display:inline-flex; align-items:center; gap:9px; background:var(--tint); color:var(--blue); font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:800; font-size:12px; letter-spacing:.08em; padding:9px 18px; border-radius:999px; white-space:nowrap;} #pricing .badge svg{width:16px;height:16px;} #pricing h2{font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:800; font-size:34px; line-height:1.14; letter-spacing:-.02em; text-align:center; color:var(--ink); margin-top:16px; text-wrap:balance;} #pricing .sub{text-align:center; color:var(--ink-soft); font-size:15.5px; line-height:1.55; font-weight:500; margin-top:14px; margin-bottom:24px;} #pricing .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;} #pricing .card{background:var(--card); display:flex; flex-direction:column; border:1px solid #E5E9F2; border-radius:var(--radius); padding:17px 18px 18px; text-align:left; box-shadow:0 12px 28px -16px var(--accent-shadow), 0 2px 6px -3px rgba(12,19,48,.06); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;} #pricing .card:active{transform:scale(.975);} #pricing .card.tap{transform:translateY(-4px); box-shadow:0 22px 38px -18px var(--accent-shadow), 0 4px 10px -4px rgba(12,19,48,.08); border-color:var(--tint-2);} #pricing .icon-circle{width:var(--ic-size,64px);height:var(--ic-size,64px); margin:0; border-radius:var(--circle-radius); background:radial-gradient(circle at 50% 38%,var(--tint),var(--tint-2)); display:flex;align-items:center;justify-content:center; transition:width .18s ease, height .18s ease;} #pricing .icon-circle svg{width:calc(var(--ic-size,64px)*.625);height:calc(var(--ic-size,64px)*.625);stroke:var(--blue);color:var(--blue);} #pricing .icon-circle .ico-img{display:none;width:100%;height:100%;object-fit:cover;border-radius:inherit;transform:scale(var(--img-zoom,1));} #pricing .icon-circle.has-img .ico{display:none!important;} #pricing .icon-circle.has-img .ico-img{display:block;} #pricing .icon-circle.has-img{background:transparent!important;border:none!important;box-shadow:none!important;overflow:hidden;} #pricing[data-iconstyle="ghost"] .icon-circle.has-img{border-radius:18px;overflow:hidden;} #pricing .card h3{font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:600; font-size:18px; letter-spacing:-.01em; margin-top:13px; color:var(--ink);} #pricing .divider{display:none;} #pricing .from{font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:500; font-size:12px; letter-spacing:.02em; color:var(--muted); /* the grid already equalises card heights, so pinning the price block to the bottom keeps the prices on one line across a row even when one title wraps to two lines and its neighbour does not. padding, not margin, so the gap survives margin-top:auto. */ margin-top:auto; padding-top:14px; display:block;} #pricing .price{font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:700; font-size:38px; line-height:1; color:var(--blue); margin-top:2px; display:flex; align-items:baseline; justify-content:flex-start; gap:6px; letter-spacing:-.02em;} #pricing .price .unit{font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0;} #pricing .trust{margin-top:18px; background:#fff; border:1px solid #E5E9F2; border-radius:var(--radius-sm); padding:16px 6px; display:grid; grid-template-columns:1fr 1fr 1fr; box-shadow:0 1px 2px rgba(16,27,60,.05), 0 14px 30px -14px rgba(16,27,60,.15);} #pricing .trust-item{display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:0 13px; position:relative;} #pricing .trust-item + .trust-item::before{content:""; position:absolute;left:0;top:2px;bottom:2px; width:1px;background:var(--line);} #pricing .trust-ic{width:var(--trust-ic-size,32px);height:var(--trust-ic-size,32px);flex:none;border-radius:50%; display:flex;align-items:center;justify-content:center; margin-top:1px; transition:width .18s ease, height .18s ease;} #pricing .trust-ic svg{width:calc(var(--trust-ic-size,32px)*.62);height:calc(var(--trust-ic-size,32px)*.62);} #pricing .trust-ic .trust-img{display:none;width:100%;height:100%;object-fit:cover;border-radius:inherit;transform:scale(var(--trust-img-zoom,1));} #pricing .trust-ic.has-img .trust-img{display:block;} #pricing .trust-ic.has-img svg{display:none;} #pricing .trust-ic.has-img{background:transparent!important;overflow:hidden;} #pricing .ti-blue{background:var(--tint);} #pricing .ti-blue svg{fill:var(--blue);} #pricing .ti-green{background:#e1f6e9;} #pricing .ti-green svg{fill:#19a352;} #pricing .ti-purple{background:#ece4ff;} #pricing .ti-purple svg{fill:#6b43e0;} #pricing .trust-item b{font-family:'Plus Jakarta Sans', system-ui, sans-serif; display:block; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.15; margin-bottom:3px;} #pricing .trust-item span{font-size:11.5px; color:var(--ink-soft); line-height:1.28; display:block;} /* An , not a