/* ========================================================= Grow Digital Media Services — main stylesheet One stylesheet for every page. Page themes only change --accent / --accent-ink / --accent-soft / --accent-on-dark via the class. ========================================================= */ /* ---------- Font fallbacks (reduce layout shift while web fonts load) ---------- */ /* Brand fonts (Google Fonts: Montserrat + Inter, SIL Open Font License), served from our own domain so they can be preloaded in : they arrive before first paint (fast LCP, no layout shift). */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("../assets/fonts/montserrat.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+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/inter.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+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* size-adjust values measured against Arial so text wraps identically before/after the web font loads (CLS ≈ 0) */ @font-face { font-family: "Montserrat Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 700; size-adjust: 109.6%; ascent-override: 88.3%; descent-override: 22.9%; line-gap-override: 0%; } @font-face { font-family: "Montserrat Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 800; size-adjust: 110.5%; ascent-override: 87.6%; descent-override: 22.7%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; size-adjust: 105.9%; ascent-override: 91.5%; descent-override: 22.8%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 700; size-adjust: 101%; ascent-override: 95.9%; descent-override: 23.9%; line-gap-override: 0%; } /* ---------- Tokens ---------- */ :root { --navy: #1F3344; --navy-deep: #15222F; --navy-80: #2B4259; --leaf: #8DC042; --leaf-light: #A4D86E; --leaf-tint: #F1F8E9; --leaf-ink: #587934; --white: #FFFFFF; --gray-50: #F7F9FA; --gray-100: #EDF1F4; --gray-200: #DCE3E9; --gray-600: #5B6B7B; --wa: #25D366; /* default page accent = brand leaf */ --accent: #8DC042; --accent-ink: #587934; --accent-soft: #F4F9EC; --accent-on-dark: #8DC042; --font-head: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(21, 34, 47, .06), 0 2px 8px rgba(21, 34, 47, .05); --shadow: 0 4px 12px rgba(21, 34, 47, .06), 0 12px 32px rgba(21, 34, 47, .08); --shadow-lg: 0 10px 24px rgba(21, 34, 47, .08), 0 24px 60px rgba(21, 34, 47, .14); --container: 1320px; --gutter: clamp(16px, 4vw, 32px); --header-h: 72px; --ease: cubic-bezier(.22, .61, .36, 1); --safe-b: env(safe-area-inset-bottom, 0px); } /* ---------- Page themes (Phase 1D) ---------- */ .theme-ai-video { --accent: #7C5CFF; --accent-ink: #6F54E4; --accent-soft: #F2EFFF; --accent-on-dark: #A18AFF; } .theme-performance { --accent: #FF8A3D; --accent-ink: #A45F32; --accent-soft: #FFF3EC; --accent-on-dark: #FF8A3D; } .theme-social { --accent: #FF5C8A; --accent-ink: #B7486A; --accent-soft: #FFEFF3; --accent-on-dark: #FF638F; } .theme-seo { --accent: #2F9BFF; --accent-ink: #2571B8; --accent-soft: #EAF5FF; --accent-on-dark: #379FFF; } .theme-web { --accent: #14B8A6; --accent-ink: #127B73; --accent-soft: #E8F8F6; --accent-on-dark: #14B8A6; } .theme-ecommerce { --accent: #F5A623; --accent-ink: #906822; --accent-soft: #FEF6E9; --accent-on-dark: #F5A623; } .theme-sales { --accent: #25D366; --accent-ink: #1C8147; --accent-soft: #E9FBF0; --accent-on-dark: #25D366; } .theme-branding { --accent: #D946EF; --accent-ink: #A93BBD; --accent-soft: #FBECFD; --accent-on-dark: #E16BF2; } .theme-training { --accent: #4F46E5; --accent-ink: #4F46E5; --accent-soft: #EDECFC; --accent-on-dark: #9590EF; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--white); color: var(--gray-600); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } @supports (overflow: clip) { body { overflow-x: clip; } } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; } button { font: inherit; color: inherit; cursor: pointer; } input, select, textarea { font: inherit; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; } h1 { font-size: clamp(2.05rem, 1.35rem + 3.6vw, 4rem); font-weight: 800; } h2 { font-size: clamp(1.7rem, 1.25rem + 2.1vw, 2.85rem); font-weight: 800; } h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); font-weight: 700; letter-spacing: -.01em; } h4 { font-size: 1.05rem; font-weight: 700; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; } strong { color: var(--navy); font-weight: 600; } :focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; } .skip-link:focus { top: 12px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Visible placeholder marker — everything in [BRACKETS] that needs real data */ .ph { background: #FFF6D6; color: #6B5300; border: 1px dashed #D9B84A; border-radius: 6px; padding: 0 .35em; font-weight: 600; font-style: normal; white-space: normal; } .section--dark .ph, .hero--dark .ph, .cta-band .ph, .px-banner .ph { background: rgba(255, 246, 214, .12); color: #FFE9A3; border-color: rgba(255, 233, 163, .45); } /* ---------- Layout ---------- */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(860px + var(--gutter) * 2); } .section { position: relative; padding-block: clamp(64px, 5rem + 3vw, 120px); } .section--tight { padding-block: clamp(40px, 3rem + 2vw, 72px); } .section--alt { background: var(--gray-50); } .section--tint { background: var(--leaf-tint); } .section--accent { background: var(--accent-soft); } .section--dark { background: var(--navy); color: #C9D4DF; overflow: hidden; } .section--dark h2, .section--dark h3, .section--dark h4, .section--dark strong { color: #fff; } .section--dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 400px at 85% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(500px 360px at 5% 100%, rgba(141, 192, 66, .14), transparent 70%); } .section > .container { position: relative; } .grid { display: grid; gap: clamp(16px, 2vw, 28px); } .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .g-2, .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } } .split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; } @media (min-width: 1024px) { .split { grid-template-columns: 1.05fr .95fr; } .split--rev > :first-child { order: 2; } } .center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-lg { margin-top: clamp(32px, 4vw, 56px); } /* Section heading */ .sec-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); } .sec-head.center { margin-inline: auto; } .sec-head p { font-size: 1.075rem; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); } .eyebrow svg { width: 16px; height: 16px; color: var(--leaf); flex: none; } .section--dark .eyebrow, .hero--dark .eyebrow { color: var(--accent-on-dark); } .lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.6; } .text-accent { color: var(--accent-ink); } .hl { position: relative; white-space: nowrap; color: var(--navy); } .hl::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: .06em; height: .32em; background: var(--leaf); opacity: .45; border-radius: 4px; z-index: -1; } .hero--dark .hl, .section--dark .hl { color: #fff; } .hero--dark .hl::after { background: var(--accent); opacity: .55; } /* Leaf divider between sections */ .leaf-divider { display: flex; align-items: center; justify-content: center; gap: 14px; padding-block: 8px; color: var(--leaf); } .leaf-divider::before, .leaf-divider::after { content: ""; height: 1px; width: min(120px, 22vw); background: linear-gradient(90deg, transparent, var(--gray-200)); } .leaf-divider::after { transform: scaleX(-1); } .leaf-divider svg { width: 28px; height: 28px; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--leaf); --btn-fg: var(--navy); --btn-bd: var(--leaf); position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-head); font-weight: 700; font-size: .98rem; letter-spacing: .01em; text-decoration: none; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s; } .btn svg { width: 20px; height: 20px; flex: none; transition: transform .25s var(--ease); } .btn--primary { box-shadow: 0 6px 18px rgba(141, 192, 66, .35); } .btn--outline { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: var(--navy); } .btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .55); } .btn--wa { --btn-bg: var(--wa); --btn-fg: var(--navy-deep); --btn-bd: var(--wa); } .btn--navy { --btn-bg: var(--navy); --btn-fg: #fff; --btn-bd: var(--navy); } .btn--sm { min-height: 44px; padding: 9px 18px; font-size: .9rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .btn-row.center { justify-content: center; } @media (max-width: 479px) { .btn-row > .btn { flex: 1 1 100%; } } .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, .45); animation: ripple .6s linear; pointer-events: none; z-index: -1; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--accent-ink); text-decoration: none; min-height: 44px; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 2px no-repeat; transition: background-size .3s var(--ease); } .link-arrow svg { width: 16px; height: 16px; transition: transform .25s var(--ease); } .u-link { text-decoration: none; background: linear-gradient(var(--leaf), var(--leaf)) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease); } @media (hover: hover) { .btn:hover { transform: translateY(-2px); } .btn--primary:hover { --btn-bg: var(--leaf-light); --btn-bd: var(--leaf-light); box-shadow: 0 10px 26px rgba(141, 192, 66, .45); } .btn--outline:hover { --btn-bg: var(--navy); --btn-fg: #fff; } .btn--light:hover { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; } .btn--navy:hover { --btn-bg: var(--navy-deep); --btn-bd: var(--navy-deep); } .btn--wa:hover { box-shadow: 0 10px 26px rgba(37, 211, 102, .4); } .btn:hover svg { transform: translateX(3px); } .link-arrow:hover, .u-link:hover { background-size: 100% 2px; } .link-arrow:hover svg { transform: translateX(4px); } } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s; } .site-header.is-scrolled { box-shadow: 0 6px 24px rgba(21, 34, 47, .08); border-color: var(--gray-100); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); transition: height .3s var(--ease); } .site-header.is-scrolled .header-inner { height: 62px; } .brand { display: flex; align-items: center; flex: none; min-height: 44px; } .brand img { width: auto; height: 50px; transition: height .3s var(--ease); } .site-header.is-scrolled .brand img { height: 42px; } .primary-nav { display: none; } .header-actions { display: flex; align-items: center; gap: 10px; } .header-actions .btn { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--gray-200); background: #fff; color: var(--navy); } .nav-toggle svg { width: 24px; height: 24px; } @media (min-width: 560px) { .header-actions .btn { display: inline-flex; } } @media (min-width: 1100px) { .nav-toggle { display: none; } .primary-nav { display: block; } } .primary-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; } .primary-nav > ul > li > a, .mega-trigger { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 0; background: none; font-family: var(--font-head); font-weight: 600; font-size: .93rem; color: var(--navy); text-decoration: none; position: relative; } .primary-nav > ul > li > a::after, .mega-trigger::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--leaf); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .primary-nav > ul > li > a[aria-current="page"]::after, .mega-trigger.is-current::after { transform: scaleX(1); } .mega-trigger svg { width: 16px; height: 16px; transition: transform .25s; } @media (hover: hover) { .primary-nav > ul > li > a:hover::after, .mega-trigger:hover::after { transform: scaleX(1); } } /* Mega menu */ .has-mega { position: static; } .mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 6px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; } .has-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; } @media (hover: hover) { .has-mega:hover .mega { opacity: 1; visibility: visible; transform: none; } .has-mega:hover .mega-trigger svg { transform: rotate(180deg); } } .has-mega.is-open .mega-trigger svg { transform: rotate(180deg); } .mega-panel { max-width: 1120px; margin-inline: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--gray-100); padding: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .mega-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 14px; text-decoration: none; font-family: var(--font-head); transition: background-color .2s; } .mega-item[aria-current="page"] { background: var(--gray-50); } .mega-item .mi-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mi-soft); color: var(--mi-ink); transition: transform .3s var(--ease); } .mega-item .mi-icon svg { width: 22px; height: 22px; } .mega-item b { display: block; font-size: .95rem; color: var(--navy); } .mega-item small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .83rem; color: var(--gray-600); line-height: 1.45; margin-top: 2px; } .mega-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; padding: 14px 16px; border-radius: 14px; background: var(--leaf-tint); } .mega-foot p { margin: 0; font-size: .9rem; } @media (hover: hover) { .mega-item:hover { background: var(--gray-50); } .mega-item:hover .mi-icon { transform: translateY(-3px) rotate(-6deg); } } /* Mobile nav drawer */ .mnav-backdrop { position: fixed; inset: 0; background: rgba(21, 34, 47, .5); z-index: 190; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .mnav { position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 400px); z-index: 200; background: #fff; box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform .35s var(--ease); display: flex; flex-direction: column; padding: 12px 20px calc(20px + var(--safe-b)); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; } .nav-open .mnav { transform: none; visibility: visible; } .nav-open .mnav-backdrop { opacity: 1; visibility: visible; } .nav-open { overflow: hidden; } .mnav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .mnav-head img { height: 44px; width: auto; } .mnav ul { list-style: none; } .mnav > nav > ul > li { border-bottom: 1px solid var(--gray-100); } .mnav nav a, .mnav-sub-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 10px 4px; border: 0; background: none; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--navy); text-decoration: none; text-align: left; } .mnav-sub-toggle svg { width: 20px; height: 20px; transition: transform .25s; } .mnav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .mnav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); } .mnav-sub > ul { overflow: hidden; } .mnav-sub.is-open { grid-template-rows: 1fr; } .mnav nav .mnav-sub a { justify-content: flex-start; gap: 12px; min-height: 46px; font-size: .95rem; font-weight: 500; padding-left: 8px; } .mnav-sub a .mi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mi-accent); flex: none; } .mnav .btn-row { margin-top: 20px; flex-direction: column; } .mnav .btn-row > .btn { width: 100%; flex: none; } .mnav-contact { margin-top: 18px; font-size: .9rem; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 96px) clamp(56px, 7vw, 110px); isolation: isolate; } .hero-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(620px 460px at 88% 18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(560px 420px at 8% 90%, rgba(141, 192, 66, .14), transparent 70%), linear-gradient(180deg, #fff, var(--gray-50)); } .hero--dark { background: var(--navy-deep); color: #C9D4DF; } .hero--dark .hero-bg { background: radial-gradient(700px 500px at 80% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), radial-gradient(500px 400px at 0% 100%, rgba(141, 192, 66, .16), transparent 70%), linear-gradient(180deg, var(--navy-deep), var(--navy)); } .hero--dark h1, .hero--dark h2, .hero--dark strong { color: #fff; } .hero-glow { position: absolute; z-index: -1; width: 520px; height: 520px; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); transform: translate3d(var(--gx, -999px), var(--gy, -999px), 0) translate(-50%, -50%); transition: opacity .4s; } .hero.glow-on .hero-glow { opacity: 1; } .hero-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.08fr .92fr; } } .hero-copy { position: relative; z-index: 2; max-width: 680px; } .hero-copy .lead { margin-bottom: 28px; max-width: 580px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; margin-bottom: 20px; border-radius: 999px; background: #fff; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); font-family: var(--font-head); font-size: .8rem; font-weight: 700; color: var(--navy); letter-spacing: .02em; } .hero-badge .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); } .hero-badge .dot svg { width: 15px; height: 15px; } .hero--dark .hero-badge { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; } .hero--dark .hero-badge .dot { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #fff; } .hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; list-style: none; font-size: .93rem; font-weight: 500; color: var(--navy); } .hero--dark .hero-points { color: #E3EAF1; } .hero-points li { display: flex; align-items: center; gap: 8px; } .hero-points svg { width: 18px; height: 18px; color: var(--leaf); flex: none; } .crumbs { font-size: .85rem; margin-bottom: 18px; } .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; } .crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; } .crumbs a { color: inherit; } .hero--dark .crumbs { color: #AFC0D0; } /* ---------- Parallax scenes ---------- */ .px-scene { position: relative; width: 100%; aspect-ratio: 1 / .92; max-width: 600px; margin-inline: auto; } .px-layer { position: absolute; } .px-layer > * { width: 100%; } .px-active [data-parallax-speed], [data-parallax-speed].px-live { will-change: transform; } .bob { animation: bob 6s ease-in-out infinite; } .bob-2 { animation-duration: 7.5s; animation-delay: -2s; } .bob-3 { animation-duration: 5.2s; animation-delay: -1s; } .spin-slow { animation: spin 40s linear infinite; transform-origin: 50% 50%; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes spin { to { transform: rotate(360deg); } } .glass { background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px; -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); box-shadow: var(--shadow); } .hero--dark .glass, .section--dark .glass, .px-banner .glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); } .chip-card { padding: 12px 14px; font-family: var(--font-head); color: var(--navy); font-size: .8rem; font-weight: 700; line-height: 1.25; } .chip-card small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .72rem; color: var(--gray-600); } .chip-card .big { display: block; font-size: 1.35rem; font-weight: 800; color: var(--accent-ink); } .hero--dark .chip-card, .px-banner .chip-card { color: #fff; } .hero--dark .chip-card small, .px-banner .chip-card small { color: #C9D4DF; } .hero--dark .chip-card .big, .px-banner .chip-card .big { color: var(--accent-on-dark); } @media (max-width: 767px) { .px-hide-sm { display: none !important; } .hero .px-scene { max-width: 420px; } } /* Scene primitives: SVG colour utilities read the page theme */ .f-a { fill: var(--accent); } .f-as { fill: var(--accent-soft); } .f-n { fill: var(--navy); } .f-nd { fill: var(--navy-deep); } .f-l { fill: var(--leaf); } .f-w { fill: #fff; } .s-a { stroke: var(--accent); } .s-n { stroke: var(--navy); } .s-l { stroke: var(--leaf); } .s-w { stroke: #fff; } .fi { aspect-ratio: 1; width: 100%; border-radius: 28%; display: grid; place-items: center; box-shadow: var(--shadow); } .fi svg { width: 48%; height: 48%; } .fi-round { border-radius: 50%; } .fi-white { background: #fff; color: var(--accent-ink); } .fi-accent { background: var(--accent); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 40%, transparent); } .fi-navy { background: var(--navy); color: var(--accent-on-dark); } .fi-leaf { background: var(--leaf); color: var(--navy-deep); } .fi-glassd { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: var(--accent-on-dark); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .spot { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); } .chip-card .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); margin-top: 8px; overflow: hidden; } .chip-card .bar span { display: block; height: 100%; width: 100%; background: var(--accent-on-dark); border-radius: 3px; transform-origin: left; animation: loadbar 3.2s ease-in-out infinite; } @keyframes loadbar { 0% { transform: scaleX(.12); } 70%, 100% { transform: scaleX(.96); } } .chip-card svg { width: 100%; height: auto; } .chip-card > span > svg, .chip-card span svg { width: 18px; height: 18px; flex: none; } .searchbar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 999px; font-weight: 600; color: var(--navy); font-size: clamp(.78rem, .7rem + .4vw, 1rem); white-space: nowrap; overflow: hidden; } .searchbar svg { width: 22px; height: 22px; color: var(--accent-ink); flex: none; } .code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .76rem; font-weight: 500; line-height: 1.7; color: var(--navy); white-space: nowrap; } .code .c1 { color: var(--accent-ink); } .code .c2 { color: var(--leaf-ink); } .code .c3 { color: #A45F32; } .bubble { padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: var(--shadow); color: var(--navy); font-size: .85rem; font-weight: 500; line-height: 1.4; } .bubble--me { border-radius: 18px 18px 4px 18px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .bubble--wa { display: flex; align-items: center; gap: 8px; background: #E9FBF0; border-radius: 18px 18px 4px 18px; } .bubble--wa svg { width: 20px; height: 20px; color: #1C8147; flex: none; } .stars-row { display: flex; gap: 3px; color: #F5A623; } .stars-row svg { width: 20px; height: 20px; } .drive { width: 12%; animation: drive 9s linear infinite; } @keyframes drive { from { transform: translateX(-120%); } to { transform: translateX(860%); } } .type-card { padding: 18px 20px; font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); line-height: 1; color: var(--accent-ink); } .type-card small { display: block; margin-top: 8px; font-family: var(--font-body); font-size: .75rem; font-weight: 600; color: var(--gray-600); letter-spacing: .02em; } .about-orb { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #fff, var(--leaf-tint) 70%); box-shadow: inset 0 0 0 1px rgba(141, 192, 66, .25), var(--shadow); } .orb-sprout { width: 52%; } .float-frame { border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--leaf) 45%, #15222F), #1F3344); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); } .float-frame svg { width: 22%; height: auto; opacity: .85; } .scan { animation: scan 6s ease-in-out infinite; } @keyframes scan { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(70%, -30%); } 60% { transform: translate(-40%, 40%); } } .pop-check { animation: popcheck 3.6s ease-in-out infinite both; } @keyframes popcheck { 0%, 15% { transform: scale(0); opacity: 0; } 25%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } .big-pin { color: var(--accent); filter: drop-shadow(0 16px 24px rgba(21, 34, 47, .2)); } .big-pin svg { width: 100%; height: auto; fill: color-mix(in srgb, var(--accent) 16%, #fff); stroke-width: 1.4; } .skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; z-index: -1; pointer-events: none; } .px-scene--home { aspect-ratio: 1 / 1.02; } /* Home sprout that grows with scroll (--grow: 0..1 set by JS) */ .grow-sprout { position: absolute; z-index: -1; left: -40px; bottom: -10px; width: clamp(180px, 22vw, 320px); pointer-events: none; opacity: .9; } @media (max-width: 1023px) { .grow-sprout { opacity: .35; } } .grow-sprout .stem, .journey-plant .stem { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--grow, 1)); } .grow-sprout .leaf-l, .grow-sprout .leaf-r, .journey-plant path:not(.stem) { transform-box: fill-box; } .grow-sprout .leaf-l, .grow-sprout .leaf-r, .journey-plant .leaf-l, .journey-plant .leaf-r { transform: scale(clamp(0, (var(--grow, 1) - .55) * 2.3, 1)); } .journey-plant .leaf-l2, .journey-plant .leaf-r2 { transform: scale(clamp(0, (var(--grow, 1) - .2) * 2.6, 1)); } .grow-sprout .leaf-l, .journey-plant .leaf-l, .journey-plant .leaf-l2 { transform-origin: 100% 100%; } .grow-sprout .leaf-r, .journey-plant .leaf-r, .journey-plant .leaf-r2 { transform-origin: 0 100%; } .journey-plant { display: block; width: min(200px, 46%); margin: 28px auto 0; overflow: visible; } @media (min-width: 1024px) { .steps.steps--vertical { grid-template-columns: 1fr; gap: 22px; } .steps.steps--vertical::before { left: 27px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(var(--leaf), var(--accent)); } .steps--vertical .step { grid-template-columns: 56px 1fr; text-align: left; justify-items: start; } } .diff-ic { width: 24px; height: 24px; color: var(--leaf-ink); flex: none; } .hero > .px-layer { z-index: 0; opacity: .4; } /* Phone mockup */ .phone { position: relative; width: 100%; aspect-ratio: 9 / 18.5; border-radius: 34px; padding: 10px; background: var(--navy-deep); box-shadow: 0 30px 60px rgba(21, 34, 47, .3), inset 0 0 0 2px rgba(255, 255, 255, .08); } .phone::before { content: ""; position: absolute; top: 16px; left: 50%; width: 30%; height: 18px; transform: translateX(-50%); border-radius: 12px; background: var(--navy-deep); z-index: 2; } .phone-screen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, #2B4259, #15222F 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; color: #fff; } .phone-screen .reel-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .phone-screen .reel-play svg { width: 28px; height: 28px; margin-left: 4px; } .phone-screen .reel-meta { position: relative; font-size: .78rem; line-height: 1.4; } .phone-screen .reel-meta b { display: block; font-family: var(--font-head); font-size: .9rem; } .phone-screen .reel-side { position: absolute; right: 12px; bottom: 90px; display: grid; gap: 14px; justify-items: center; font-size: .7rem; } .phone-screen .reel-side svg { width: 22px; height: 22px; } .phone-screen .reel-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .2); } .phone-screen .reel-bar::after { content: ""; display: block; width: 100%; height: 100%; background: var(--leaf); transform-origin: left; animation: reel 8s linear infinite; } @keyframes reel { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- Trust strip / marquee ---------- */ .trust { padding-block: 28px; border-block: 1px solid var(--gray-100); background: #fff; } .trust-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } @media (min-width: 1024px) { .trust-inner { flex-direction: row; } } .trust-label { font-family: var(--font-head); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); white-space: nowrap; } .marquee { position: relative; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; gap: 14px; animation: marquee 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .m-item { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--gray-50); border: 1px solid var(--gray-100); font-weight: 600; font-size: .92rem; color: var(--navy); white-space: nowrap; } .m-item svg { width: 20px; height: 20px; color: var(--leaf-ink); } /* ---------- Cards ---------- */ .card { position: relative; background: #fff; border-radius: var(--radius-lg); padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--gray-100); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; } .card h3 { margin-bottom: .4em; } .card p:last-child { margin-bottom: 0; } .icon-box { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; background: var(--accent-soft); color: var(--accent-ink); transition: transform .35s var(--ease); } .icon-box svg { width: 26px; height: 26px; } .section--dark .card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); box-shadow: none; } .section--dark .card p { color: #C9D4DF; } .section--dark .icon-box { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-on-dark); } @media (hover: hover) { .card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .card--hover:hover .icon-box { transform: translateY(-4px) rotate(-6deg) scale(1.05); } } /* Service cards (each card sets --c / --c-soft / --c-ink inline) */ .svc-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: 1fr; } @media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } } .svc-card { display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, var(--c-soft), #fff 55%); text-decoration: none; color: inherit; } .svc-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--c); } .svc-card .icon-box { background: #fff; color: var(--c-ink); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 25%, transparent); } .svc-card p { flex: 1; } .svc-card .link-arrow { color: var(--c-ink); margin-top: 8px; } .svc-card--featured { background: linear-gradient(140deg, var(--navy-deep), var(--navy) 60%, #2E2466); color: #D6DEE7; border: 0; } .svc-card--featured h3 { color: #fff; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); } .svc-card--featured .link-arrow { color: #C2B5FF; } .svc-card--featured .icon-box { background: rgba(255, 255, 255, .1); color: #C2B5FF; box-shadow: none; } .svc-card--featured ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; } .svc-card--featured li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: .82rem; color: #fff; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-family: var(--font-head); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--leaf-tint); color: var(--leaf-ink); } .badge--leaf { background: var(--leaf); color: var(--navy-deep); } .svc-card--featured .badge { position: absolute; top: 20px; right: 20px; } @media (min-width: 1024px) { .svc-card--featured { grid-column: span 2; grid-row: span 2; padding: 40px; } .svc-card--featured .feat-visual { display: flex; } } .feat-visual { display: none; gap: 12px; margin-top: auto; padding-top: 22px; } .feat-visual .mini-reel { flex: 1; aspect-ratio: 9 / 16; max-width: 110px; border-radius: 14px; background: linear-gradient(160deg, rgba(124, 92, 255, .5), rgba(21, 34, 47, .6)); border: 1px solid rgba(255, 255, 255, .15); display: grid; place-items: center; } .feat-visual .mini-reel svg { width: 26px; height: 26px; color: #fff; opacity: .9; } @media (hover: hover) { .svc-card:hover { border-color: color-mix(in srgb, var(--c) 40%, transparent); } } /* Checklists with leaf bullets */ .checklist { list-style: none; display: grid; gap: 10px; margin: 14px 0 0; } .checklist li { position: relative; padding-left: 30px; line-height: 1.5; } .checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--leaf); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3.5C11 3.5 5 8 5 15c0 1.6.4 3.1 1 4.4C7.8 14.8 11 11.6 15.5 9.8 11.8 12.2 9 15.6 7.4 20.3c1.1.5 2.3.7 3.6.7 6.9 0 10-6.3 10-13.5 0-1.4-.3-2.8-1-4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3.5C11 3.5 5 8 5 15c0 1.6.4 3.1 1 4.4C7.8 14.8 11 11.6 15.5 9.8 11.8 12.2 9 15.6 7.4 20.3c1.1.5 2.3.7 3.6.7 6.9 0 10-6.3 10-13.5 0-1.4-.3-2.8-1-4z'/%3E%3C/svg%3E") center / contain no-repeat; } .checklist--accent li::before { background: var(--accent); } .section--dark .checklist li { color: #D6DEE7; } /* Sub-service detail cards */ .sub-card h3 { display: flex; align-items: center; gap: 12px; } .sub-card h3 .num { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-size: .95rem; } .sub-card .wyg { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--gray-200); } .sub-card .wyg b { font-family: var(--font-head); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); } /* Pain points */ .pain { border-left: 4px solid var(--accent); } .pain .pain-n { font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--accent-soft); -webkit-text-stroke: 1.5px var(--accent-ink); margin-bottom: 10px; display: block; } /* ---------- Bento grid ---------- */ .bento { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: 1fr; } @media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); } .bento .b-wide { grid-column: span 2; } .bento .b-tall { grid-row: span 2; } } .bento .card { display: flex; flex-direction: column; } .bento .b-dark { background: var(--navy); color: #C9D4DF; border: 0; } .bento .b-dark h3 { color: #fff; } .bento .b-dark .icon-box { background: rgba(141, 192, 66, .18); color: var(--leaf); } .bento .b-tint { background: var(--leaf-tint); border-color: transparent; } .bento .b-art { margin-top: auto; padding-top: 18px; } /* ---------- Steps / timeline ---------- */ .steps { list-style: none; display: grid; gap: 18px; position: relative; counter-reset: step; } .steps::before { content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(var(--leaf), var(--accent)); opacity: .5; } .step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; } .step-n { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--leaf); font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy); box-shadow: 0 0 0 6px var(--white); } .section--alt .step-n { box-shadow: 0 0 0 6px var(--gray-50); } .section--dark .step-n { background: var(--navy); color: #fff; box-shadow: 0 0 0 6px var(--navy); } .step h3 { margin: 12px 0 6px; } .step p { margin: 0; } @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; } .steps::before { left: 12%; right: 12%; top: 28px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--leaf), var(--accent)); } .step { grid-template-columns: 1fr; text-align: center; justify-items: center; } } /* ---------- Stats ---------- */ .stats { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { text-align: center; padding: 26px 12px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .stat .num { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem); color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat .lbl { font-size: .95rem; color: #C9D4DF; } /* ---------- Portfolio ---------- */ .pf-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 28px; scrollbar-width: none; } .pf-filters::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .pf-filters { justify-content: center; flex-wrap: wrap; } } .pf-filter { flex: none; min-height: 44px; padding: 8px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #E3EAF1; font-weight: 600; font-size: .92rem; transition: background-color .2s, color .2s; } .pf-filter[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: var(--navy-deep); } .pf-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; } @media (min-width: 768px) { .pf-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .pf-grid { grid-template-columns: repeat(4, 1fr); } } .pf-item { position: relative; border-radius: var(--radius); overflow: hidden; border: 0; padding: 0; text-align: left; display: block; width: 100%; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--c, #7C5CFF) 55%, #15222F), #15222F 75%); transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s; } .pf-item.is-hidden { display: none; } .pf-item--v { aspect-ratio: 9 / 16; } .pf-item--h { aspect-ratio: 16 / 9; grid-column: span 2; } .pf-item .pf-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .3s var(--ease); } .pf-item .pf-play svg { width: 24px; height: 24px; margin-left: 3px; } .pf-item .pf-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); font-size: .82rem; line-height: 1.35; } .pf-item .pf-cap b { display: block; font-family: var(--font-head); font-size: .92rem; } .pf-item .pf-tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); font-size: .7rem; font-weight: 600; letter-spacing: .04em; } .pf-item img, .pf-item iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } @media (hover: hover) { .pf-item:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); } .pf-item:hover .pf-play { transform: scale(1.12); } } .pf-teaser { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .pf-teaser { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .pf-teaser { grid-template-columns: repeat(6, 1fr); } } /* Horizontal swipe carousel on phones (scroll-snap) */ @media (max-width: 767px) { .swipe-sm { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 10px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .swipe-sm::-webkit-scrollbar { display: none; } .swipe-sm > * { flex: 0 0 78%; scroll-snap-align: start; } .swipe-sm.pf-teaser > * { flex-basis: 44%; } } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: rgba(10, 16, 23, .88); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox-inner { position: relative; width: min(100%, 420px); aspect-ratio: 9 / 16; max-height: 86vh; border-radius: 18px; overflow: hidden; background: #0d141c; display: grid; place-items: center; color: #C9D4DF; text-align: center; padding: 24px; } .lightbox-inner.is-wide { width: min(100%, 1000px); aspect-ratio: 16 / 9; } .lightbox-inner iframe, .lightbox-inner video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .lightbox-close { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; } .lightbox-close svg { width: 24px; height: 24px; } /* ---------- Testimonials ---------- */ .t-slider { position: relative; } .t-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 16px; } .t-track::-webkit-scrollbar { display: none; } @media (min-width: 768px) { .t-track { grid-auto-columns: calc(50% - 10px); } } @media (min-width: 1100px) { .t-track { grid-auto-columns: calc(33.333% - 14px); } } .t-card { scroll-snap-align: start; display: flex; flex-direction: column; } .t-card .stars { display: flex; gap: 3px; color: #F5A623; margin-bottom: 14px; } .t-card .stars svg { width: 18px; height: 18px; } .t-card blockquote { margin: 0 0 20px; font-size: 1.02rem; color: var(--navy); flex: 1; } .t-person { display: flex; align-items: center; gap: 12px; } .t-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf-tint); color: var(--leaf-ink); font-family: var(--font-head); font-weight: 800; } .t-person small { display: block; font-size: .82rem; } .t-nav { display: flex; justify-content: center; gap: 10px; margin-top: 10px; } .t-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gray-200); background: #fff; color: var(--navy); display: grid; place-items: center; transition: background-color .2s, color .2s; } .t-nav button svg { width: 20px; height: 20px; } @media (hover: hover) { .t-nav button:hover { background: var(--navy); color: #fff; } } /* ---------- Pricing ---------- */ .price-grid { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 900px) { .price-grid { grid-template-columns: repeat(3, 1fr); } } .price-card { display: flex; flex-direction: column; } .price-card .price { font-family: var(--font-head); color: var(--navy); margin: 8px 0 4px; } .price-card .price small { display: block; font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--gray-600); } .price-card .price b { font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem); font-weight: 800; } .price-card .checklist { flex: 1; margin-bottom: 26px; } .price-card--pop { border: 2px solid var(--leaf); box-shadow: var(--shadow-lg); } .price-card--pop .badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; } @media (min-width: 900px) { .price-card--pop { transform: translateY(-12px); } } /* ---------- Forms ---------- */ .form-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(22px, 3vw, 40px); border: 1px solid var(--gray-100); position: relative; } .form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } } .field label, .field .label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .92rem; color: var(--navy); } .field .req { color: #B42318; } .field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; font-size: 16px; color: var(--navy); background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: 12px; transition: border-color .2s, box-shadow .2s, background-color .2s; appearance: none; } .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3344' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; } .field textarea { min-height: 120px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--leaf-ink); background: #fff; box-shadow: 0 0 0 4px rgba(141, 192, 66, .22); } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #B42318; background: #FFF6F5; } .field-error { display: none; margin-top: 6px; font-size: .85rem; color: #B42318; font-weight: 500; } .field.has-error .field-error { display: block; } .phone-wrap { display: flex; } .phone-wrap span { display: grid; place-items: center; padding: 0 14px; border: 1.5px solid var(--gray-200); border-right: 0; border-radius: 12px 0 0 12px; background: var(--gray-100); font-weight: 600; color: var(--navy); } .phone-wrap input { border-radius: 0 12px 12px 0; } .check-grid { display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 480px) { .check-grid { grid-template-columns: 1fr 1fr; } } .check { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--gray-200); border-radius: 12px; background: var(--gray-50); cursor: pointer; font-size: .95rem; color: var(--navy); transition: border-color .2s, background-color .2s; } .check input { width: 20px; height: 20px; accent-color: var(--leaf-ink); flex: none; } .check:has(input:checked) { border-color: var(--leaf); background: var(--leaf-tint); } .form-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .88rem; } .form-note svg { width: 18px; height: 18px; color: var(--leaf-ink); flex: none; } .form-status { display: none; margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: #FFF6F5; color: #B42318; font-weight: 500; } .form-status.is-shown { display: block; } .form-success { display: none; text-align: center; padding: 20px 6px; } .form-success.is-shown { display: block; animation: pop .45s var(--ease); } .form-success .ok { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf-tint); color: var(--leaf-ink); } .form-success .ok svg { width: 36px; height: 36px; } @keyframes pop { from { opacity: 0; transform: scale(.94); } } form.is-sent { display: none; } .btn[disabled] { opacity: .7; pointer-events: none; } /* ---------- FAQ ---------- */ .faq { display: grid; gap: 12px; } .faq-item { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .faq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 16px 20px; border: 0; background: none; text-align: left; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--navy); } .faq-q .pm { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); transition: transform .3s var(--ease), background-color .3s; } .faq-q .pm svg { width: 18px; height: 18px; } .faq-q[aria-expanded="true"] .pm { transform: rotate(45deg); background: var(--leaf); color: var(--navy-deep); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .faq-a > div { overflow: hidden; } .faq-a p { padding: 0 20px 18px; margin: 0; } .faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; } .no-js .faq-a { grid-template-rows: 1fr; } /* ---------- Parallax banner (mid-page) ---------- */ .px-banner { position: relative; overflow: hidden; background: var(--navy-deep); color: #D6DEE7; padding-block: clamp(80px, 12vw, 150px); isolation: isolate; } .px-banner::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(700px 400px at 50% 50%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); } .px-banner .px-field { position: absolute; inset: -20% 0; z-index: -1; pointer-events: none; } .px-banner .px-field .px-layer { opacity: .7; } .b-art svg { height: 64px !important; } @media (min-width: 768px) { .footer-bottom { padding-right: 84px; } } .px-banner-content { position: relative; max-width: 820px; margin-inline: auto; text-align: center; } .px-banner blockquote { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); line-height: 1.2; color: #fff; letter-spacing: -.02em; } .px-banner blockquote em { font-style: normal; color: var(--accent-on-dark); } .px-banner p { margin: 18px auto 0; max-width: 600px; } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: #C9D4DF; padding-block: clamp(64px, 8vw, 110px); text-align: center; } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(520px 320px at 15% 20%, rgba(141, 192, 66, .22), transparent 70%), radial-gradient(520px 320px at 85% 90%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); } .cta-band h2 { color: #fff; } .cta-band p { max-width: 560px; margin: 0 auto 28px; font-size: 1.08rem; } .cta-band .cta-leaf { position: absolute; z-index: -1; color: var(--leaf); opacity: .16; pointer-events: none; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-deep); color: #AFC0D0; padding: clamp(56px, 7vw, 88px) 0 calc(24px + var(--safe-b)); font-size: .95rem; } .site-footer a { color: #D6DEE7; text-decoration: none; } .footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; } @media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1.1fr .8fr 1.1fr; } } .footer-brand img { height: 74px; width: auto; margin-bottom: 16px; } .footer-brand p { max-width: 320px; } .site-footer h3 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; } .footer-links { list-style: none; display: grid; gap: 2px; } .footer-links a { display: inline-flex; align-items: center; min-height: 36px; } .footer-contact { list-style: none; display: grid; gap: 12px; } .footer-contact li { display: flex; gap: 12px; align-items: flex-start; } .footer-contact svg { width: 20px; height: 20px; color: var(--leaf); flex: none; margin-top: 3px; } .socials { display: flex; gap: 10px; margin-top: 20px; } .socials a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: background-color .2s, transform .25s var(--ease); } .socials svg { width: 20px; height: 20px; } @media (hover: hover) { .socials a:hover { background: var(--leaf); color: var(--navy-deep); transform: translateY(-3px); } .footer-links a:hover { color: var(--leaf-light); } } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .87rem; } .footer-bottom nav { display: flex; gap: 6px; align-items: center; } .footer-bottom nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; } /* ---------- Floating WhatsApp + mobile CTA bar ---------- */ .wa-float { position: fixed; right: 22px; bottom: calc(22px + var(--safe-b)); z-index: 150; width: 60px; height: 60px; border-radius: 50%; display: none; place-items: center; background: var(--wa); color: #fff; box-shadow: 0 10px 24px rgba(37, 211, 102, .45); transition: transform .25s var(--ease), opacity .25s; } .wa-float svg { width: 32px; height: 32px; } .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wa); z-index: -1; animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.6); opacity: 0; } } @media (min-width: 768px) { .wa-float { display: grid; } } @media (hover: hover) { .wa-float:hover { transform: scale(1.08); } } .wa-float.is-hidden { opacity: 0; pointer-events: none; transform: scale(.8); } .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px calc(10px + var(--safe-b)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--gray-100); box-shadow: 0 -6px 20px rgba(21, 34, 47, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .3s var(--ease); } .mobile-cta .btn { min-height: 48px; padding: 10px 12px; font-size: .92rem; } .mobile-cta.is-hidden { transform: translateY(110%); } @media (max-width: 767px) { body { padding-bottom: calc(70px + var(--safe-b)); } } @media (min-width: 768px) { .mobile-cta { display: none; } } /* ---------- Misc blocks ---------- */ .industry-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; } .industry-tags li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--gray-200); font-weight: 600; font-size: .92rem; color: var(--navy); } .industry-tags svg { width: 18px; height: 18px; color: var(--accent-ink); } .ind-section { position: relative; overflow: hidden; isolation: isolate; } .ind-section .ind-sil { position: absolute; z-index: -1; right: -2%; top: 8%; width: clamp(220px, 34vw, 460px); color: var(--navy); opacity: .06; pointer-events: none; } .ind-section:nth-of-type(even) .ind-sil { right: auto; left: -2%; } .ind-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .ind-head .icon-box { margin: 0; } .ind-cols { display: grid; gap: 20px; } @media (min-width: 900px) { .ind-cols { grid-template-columns: 1fr 1.3fr; } } .ind-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .ind-jump::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { .ind-jump { flex-wrap: wrap; justify-content: center; } } .ind-jump a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--gray-200); background: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; } .founder { display: grid; gap: 28px; align-items: center; } @media (min-width: 900px) { .founder { grid-template-columns: 280px 1fr; } } .founder-photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--leaf-tint), #fff); border: 2px dashed var(--gray-200); display: grid; place-items: center; text-align: center; padding: 20px; font-size: .9rem; } .team-card { text-align: center; } .team-card .avatar { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; background: var(--leaf-tint); display: grid; place-items: center; color: var(--leaf-ink); } .team-card .avatar svg { width: 40px; height: 40px; } .map-ph { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: repeating-linear-gradient(45deg, var(--gray-50), var(--gray-50) 12px, #fff 12px, #fff 24px); border: 2px dashed var(--gray-200); display: grid; place-items: center; text-align: center; padding: 20px; } .map-ph svg { width: 42px; height: 42px; color: var(--leaf-ink); margin: 0 auto 10px; } .info-list { list-style: none; display: grid; gap: 14px; } .info-list li { display: flex; gap: 14px; align-items: flex-start; } .info-list .icon-box { width: 46px; height: 46px; margin: 0; border-radius: 12px; flex: none; } .info-list .icon-box svg { width: 22px; height: 22px; } .info-list b { display: block; color: var(--navy); } .prose { max-width: 800px; } .prose h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-top: 1.8em; } .prose ul { padding-left: 1.2em; margin-bottom: 1em; } .prose li { margin-bottom: .4em; } .hub-cat { scroll-margin-top: calc(var(--header-h) + 20px); } .hub-cat .hub-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .hub-cat .hub-head h2 { margin: 0; display: flex; align-items: center; gap: 14px; font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); } .hub-cat .hub-head .icon-box { margin: 0; background: var(--c-soft); color: var(--c-ink); } .hub-cat .sub-mini { border-top: 3px solid var(--c); } .hub-cat .sub-mini h3 { font-size: 1.05rem; } .hub-cat .sub-mini p { font-size: .95rem; margin: 0; } .not-found { min-height: 72vh; display: grid; place-items: center; text-align: center; } .wilt { width: 180px; margin: 0 auto 20px; cursor: pointer; border: 0; background: none; padding: 0; } .wilt .wilt-top { transform-origin: 50% 100%; transform-box: fill-box; transform: rotate(-58deg); transition: transform .9s cubic-bezier(.34, 1.56, .64, 1); } .wilt:hover .wilt-top, .wilt.is-up .wilt-top, .wilt:focus-visible .wilt-top { transform: rotate(0); } .wilt .wilt-l, .wilt .wilt-r { transform-box: fill-box; transition: transform .9s cubic-bezier(.34, 1.56, .64, 1) .1s; } .wilt .wilt-l { transform-origin: 100% 100%; transform: rotate(-40deg) scale(.85); } .wilt .wilt-r { transform-origin: 0 100%; transform: rotate(40deg) scale(.85); } .wilt:hover .wilt-l, .wilt:hover .wilt-r, .wilt.is-up .wilt-l, .wilt.is-up .wilt-r, .wilt:focus-visible .wilt-l, .wilt:focus-visible .wilt-r { transform: none; } .audit-points { counter-reset: ap; list-style: none; display: grid; gap: 14px; } .audit-points li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; } .audit-points li::before { counter-increment: ap; content: counter(ap); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--leaf-tint); color: var(--leaf-ink); font-family: var(--font-head); font-weight: 800; } .audit-points b { display: block; color: var(--navy); } .note { padding: 16px 20px; border-radius: var(--radius); background: var(--accent-soft); border-left: 4px solid var(--accent); color: var(--navy); } /* Background patterns per theme (hero) */ .pat-grid { background-image: linear-gradient(color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px); background-size: 32px 32px; } .pat-dots { background-image: radial-gradient(color-mix(in srgb, var(--accent) 28%, transparent) 1.4px, transparent 1.6px); background-size: 26px 26px; } .pat-blueprint { background-image: linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px); background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; } .pat-film { background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 18px, transparent 18px 36px); } .hero-pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%); } .film-divider { height: 34px; background: var(--navy-deep); background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, .9) 14px 30px, transparent 30px 44px); background-size: 44px 12px; background-repeat: repeat-x; background-position: 0 11px; opacity: 1; } /* Typing search bar (SEO theme) */ .type-caret::after { content: "|"; margin-left: 2px; color: var(--accent-ink); animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } /* ---------- Scroll reveal ---------- */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .js [data-reveal="left"] { transform: translate3d(-36px, 0, 0); } .js [data-reveal="right"] { transform: translate3d(36px, 0, 0); } .js [data-reveal="scale"] { transform: scale(.94); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* ---------- Reduced motion: static layouts ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } .js [data-reveal] { opacity: 1; transform: none; } [data-parallax-speed] { transform: none !important; } .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .marquee-track [aria-hidden="true"] { display: none; } .hero-glow { display: none; } .grow-sprout { --grow: 1 !important; } } /* ---------- Large monitors ---------- */ @media (min-width: 1600px) { :root { --header-h: 80px; } body { font-size: 1.0625rem; } } /* Print */ @media print { .site-header, .site-footer, .wa-float, .mobile-cta, .cta-band, .px-banner, .px-scene { display: none !important; } } .pf-teaser.who-pf { grid-template-columns: repeat(2, 1fr); max-width: 420px; margin-inline: auto; } @media (max-width: 767px) { .px-scene--home > .px-layer:nth-child(2) { left: 25% !important; width: 50% !important; } } /* Phone mockup adapts to its own width (container query), not the screen width */ .phone { container-type: inline-size; } @container (max-width: 240px) { .phone-screen { border-radius: 20px; padding: 12px; } .phone-screen .reel-meta { font-size: .66rem; padding-right: 30px; } .phone-screen .reel-meta b { font-size: .76rem; } .phone-screen .reel-side { right: 8px; gap: 10px; } .phone-screen .reel-side span { display: none; } .phone-screen .reel-side svg { width: 18px; height: 18px; } .phone-screen .reel-play { width: 48px; height: 48px; } } @media (max-width: 1023px) { .phone { border-radius: 26px; padding: 7px; } } .phone-screen .reel-meta { padding-right: 34px; } /* Performance: skip rendering work for off-screen sections until they approach the viewport */ main > .section:not(.section--dark), main > .trust { content-visibility: auto; contain-intrinsic-size: auto 720px; }