:root { --color-brand: #000064; --color-brand-dark: #00004a; --color-brand-light: #e6e6f0; --color-brand-soft: rgba(0, 0, 100, 0.08); --color-accent: #F05A28; --color-accent-dark: #d14a1c; --color-accent-light: #fdeee7; --color-background: #ffffff; --color-surface: #f8fafc; --color-foreground: #2a2a2a; --color-muted: #64748b; --color-border: #e8e8e8; --nav-gradient-start: #000064; --nav-gradient-middle: #00004a; --nav-gradient-end: #000064; --font-primary: "Inter", ui-sans-serif, system-ui, sans-serif; --font-heading: "Outfit", "Inter", ui-sans-serif, system-ui, sans-serif; } * { box-sizing: border-box; } /* Reserve space for Lucide icons before JS swaps the placeholder for its inline elements ignore width/height (non-replaced inline elements), so without this rule every icon pops in at 0x0 and then jumps to its real size once lucide.createIcons() runs, causing a small layout shift (and a visible "jump" on refresh) across the page. */ [data-lucide] { display: inline-block; vertical-align: middle; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--color-brand); } html { scroll-behavior: smooth; margin: 0; padding: 0; scroll-padding-top: 4.5rem; overflow-x: hidden; width: 100%; max-width: 100%; } .onepage-section { scroll-margin-top: 4.5rem; } /* ============ Home: card-style sections with scroll-reveal transition ============ */ .home-card { position: relative; opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .home-card.in-view, .home-card.fade-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .home-card { opacity: 1; transform: none; transition: none; } } .page-one .site-nav__link--active { color: var(--color-accent, #F05A28); font-weight: 600; } body { margin: 0; padding: 0; background: var(--color-background); color: var(--color-foreground); font-family: var(--font-primary); -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; max-width: 100%; position: relative; } /* ============ Page transition (full-page navigation fade) ============ */ body { opacity: 0; animation: pageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } body.page-exit { animation: pageOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards; } /* NOTE: intentionally opacity-only, no transform here. A `transform` on would re-anchor every position:fixed descendant (like .site-nav) to the body instead of the viewport for the duration of the animation, making the "fixed" navbar visibly slide/jump with the page on every load — most noticeable on a hard refresh. Keep this fade-only. */ @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pageOut { from { opacity: 1; } to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { body { animation: none; opacity: 1; } body.page-exit { animation: none; } } ::selection { background: rgba(0, 0, 100, 0.15); color: var(--color-foreground); } .text-muted { color: var(--color-muted); } .gradient-text, .brand-text, .link-gradient { color: var(--color-brand); } .gradient-border { position: relative; background: #fff; border-radius: 1.25rem; border: 2px solid var(--color-brand); } .hero-bg { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 0, 100, 0.06), transparent), #ffffff; } .mesh-bg { background-color: #ffffff; background-image: radial-gradient(at 50% 30%, rgba(0, 0, 100, 0.06) 0px, transparent 55%); } .grid-bg { background-image: linear-gradient(rgba(0, 0, 100, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 100, 0.04) 1px, transparent 1px); background-size: 48px 48px; } .glass { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); border: 1px solid var(--color-border); box-shadow: 0 8px 32px rgba(0, 0, 100, 0.06); } .glass-card { background: #ffffff; border: 1px solid var(--color-border); border-radius: 1.25rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .glass-card:hover { transform: translateY(-6px); border-color: rgba(0, 0, 100, 0.3); box-shadow: 0 16px 40px rgba(0, 0, 100, 0.1); } .glow-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; background: rgba(0, 0, 100, 0.12) !important; } .section-alt { background: var(--color-surface); padding-top: 2rem; padding-bottom: 2rem; } .page-content { padding-top: 2rem; padding-bottom: 2.5rem; background: #ffffff; } .hero-ultra + section { padding-top: 2.5rem; } .page-header { background: linear-gradient(180deg, var(--color-brand-light) 0%, #ffffff 100%); } .brand-mark { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; } .brand-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--color-brand); color: white; font-weight: 800; font-size: 0.875rem; box-shadow: 0 4px 16px rgba(0, 0, 100, 0.3); } .brand-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-foreground); } .brand-name span { color: var(--color-brand); } .brand-tagline { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand); white-space: nowrap; } .login-logo-img { display: block; height: 4.5rem; width: auto; margin: 0 auto; } @media (max-width: 640px) { .login-logo-img { height: 3.5rem; } } /* Nav logo + tagline block */ .site-nav__logo { min-width: 0; flex-shrink: 1; } .site-nav__logo .brand-mark { min-width: 0; } .site-nav__logo .brand-mark .leading-tight { min-width: 0; } .site-nav__logo .site-nav__logo-text { display: block; line-height: 1.1; } .site-nav__logo .brand-tagline { display: block; line-height: 1.3; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 4px; padding: 0.875rem 1.75rem; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: white; background: var(--color-brand); box-shadow: 0 8px 24px rgba(0, 0, 100, 0.25); transition: all 0.3s ease; border: none; cursor: pointer; position: relative; overflow: hidden; z-index: 1; } .btn-primary::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--color-accent); z-index: -1; transition: all 0.4s ease; } .btn-primary:hover::before { width: 100%; } .btn-primary:hover { background: transparent !important; color: white !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(240, 90, 40, 0.35); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 4px; padding: 0.875rem 1.75rem; font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-brand); background: white; border: 2px solid var(--color-brand); transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; z-index: 1; } .btn-outline::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--color-accent); z-index: -1; transition: all 0.4s ease; } .btn-outline:hover::before { width: 100%; } .btn-outline:hover { border-color: var(--color-accent); color: white !important; transform: translateY(-2px); } .btn-lg { padding: 1rem 2.25rem; font-size: 1.0625rem; } .btn-md { padding: 0.75rem 1.5rem; font-size: 0.9375rem; } .btn-sm { padding: 0.5rem 1.25rem; font-size: 0.875rem; } .nav-link { color: var(--color-muted); border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease; } .nav-link:hover { color: var(--color-brand); background: var(--color-brand-soft); } .nav-link-active { color: white; background: var(--color-brand); box-shadow: 0 4px 14px rgba(0, 0, 100, 0.25); } .badge { display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 0; padding: 0; background: none; border: none; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-brand); } .badge::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background-color: var(--color-accent); } .badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); animation: pulse-dot 2s ease infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } } .stat-card { position: relative; overflow: hidden; background: white; border: 1px solid var(--color-border); border-radius: 1.25rem; padding: 1.75rem; text-align: center; transition: all 0.3s ease; } .stat-card::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--color-brand); transform: scaleX(0); transition: transform 0.3s ease; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0, 0, 100, 0.1); } .stat-card:hover::after { transform: scaleX(1); } .icon-box { display: inline-flex; border-radius: 1rem; padding: 0.875rem; background: var(--color-brand-light); border: 1px solid rgba(0, 0, 100, 0.12); } .icon-box i, .icon-box svg { width: 1.5rem; height: 1.5rem; color: var(--color-brand); } /* ============ Values Strip (borderless) ============ */ .values-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; } @media (min-width: 768px) { .values-row { grid-template-columns: repeat(4, 1fr); gap: 0; } } .value-item { position: relative; padding: 0 1.75rem; text-align: center; } @media (min-width: 768px) { .value-item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 1px; background: linear-gradient(180deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent); } } .value-item__icon { --value-accent: var(--color-brand); position: relative; display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: color-mix(in srgb, var(--value-accent) 10%, white); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, box-shadow 0.4s ease; } .value-item__icon::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: color-mix(in srgb, var(--value-accent) 16%, transparent); filter: blur(14px); opacity: 0; transition: opacity 0.4s ease; z-index: -1; } .value-item__icon i, .value-item__icon svg { width: 1.75rem; height: 1.75rem; color: var(--value-accent); transition: color 0.35s ease; } .value-item:hover .value-item__icon { transform: translateY(-6px) scale(1.06); background: var(--value-accent); box-shadow: 0 14px 30px color-mix(in srgb, var(--value-accent) 35%, transparent); } .value-item:hover .value-item__icon::before { opacity: 1; } .value-item:hover .value-item__icon i, .value-item:hover .value-item__icon svg { color: #ffffff; } .value-item__title { margin-top: 1.25rem; font-size: 1rem; font-weight: 700; color: var(--color-foreground); } .value-item__title::after { content: ""; display: block; width: 1.75rem; height: 2px; margin: 0.6rem auto 0; background: var(--value-accent); border-radius: 2px; transform: scaleX(0.6); opacity: 0.5; transition: transform 0.35s ease, opacity 0.35s ease; } .value-item:hover .value-item__title::after { transform: scaleX(1); opacity: 1; } .value-item__desc { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.65; color: var(--color-muted); } .tag { border-radius: 9999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 500; color: var(--color-brand); background: var(--color-brand-soft); border: 1px solid rgba(0, 0, 100, 0.12); } .ecosystem-band { background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand) 4%, white) 0%, #ffffff 55%); } .ecosystem-band__orb { width: 22rem; height: 22rem; top: 50%; transform: translateY(-50%); opacity: 0.5; } .ecosystem-band__orb--left { left: -9rem; } .ecosystem-band__orb--right { right: -9rem; } @media (max-width: 768px) { .ecosystem-band__orb { width: 14rem; height: 14rem; } } .brand-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .brand-grid { grid-template-columns: repeat(var(--brand-columns, 4), 1fr); } } .brand-card { --brand-accent: var(--color-brand); position: relative; overflow: hidden; display: flex; width: 100%; min-height: 340px; flex-direction: column; align-items: center; text-align: center; padding: 1.75rem 1.5rem 1.5rem; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-accent) 5%, white) 0%, #ffffff 45%); border: 1px solid var(--color-border); border-radius: 1.5rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 640px) { .brand-card { min-height: 300px; } } .brand-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brand-accent), color-mix(in srgb, var(--brand-accent) 40%, white)); } .brand-card::after { content: ""; position: absolute; top: -40%; right: -30%; width: 55%; height: 55%; border-radius: 50%; background: color-mix(in srgb, var(--brand-accent) 14%, transparent); filter: blur(30px); opacity: 0; transition: opacity 0.35s ease; } .brand-card:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--brand-accent) 45%, transparent); box-shadow: 0 20px 44px color-mix(in srgb, var(--brand-accent) 22%, transparent); } .brand-card:hover::after { opacity: 1; } .brand-card:hover .brand-card__icon { transform: scale(1.08) rotate(-4deg); } .brand-card:hover .brand-card__link { color: var(--brand-accent); gap: 0.5rem; } .brand-card__icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 1.125rem; background: color-mix(in srgb, var(--brand-accent) 12%, white); border: 1px solid color-mix(in srgb, var(--brand-accent) 25%, transparent); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .brand-card__icon i, .brand-card__icon svg { width: 1.7rem; height: 1.7rem; color: var(--brand-accent); } .brand-card__icon--logo { width: 5.75rem; height: 5.75rem; background: #ffffff; padding: 0.6rem; border-radius: 1.375rem; } .brand-card__icon--logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 0.5rem; } .brand-card__name { position: relative; z-index: 1; margin-top: 1rem; font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.02em; color: var(--color-brand); } .brand-card__tagline { position: relative; z-index: 1; margin-top: 0.375rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-accent); } .brand-card__desc { position: relative; z-index: 1; margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-muted); } .brand-card__link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 1.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); transition: all 0.3s ease; } /* ---- "Trusted by" logo strip (shared: homepage + Clients page) ---- */ .logo-strip-head { max-width: 40rem; margin: 0 auto 2.75rem; text-align: center; } .logo-strip-head h2 { font-size: 1.75rem; font-weight: 800; color: var(--color-foreground); line-height: 1.25; } @media (min-width: 768px) { .logo-strip-head h2 { font-size: 2.1rem; } } .logo-strip-head p { margin-top: 0.65rem; color: var(--color-muted); font-size: 0.95rem; } .logo-strip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 4.5rem; } @media (min-width: 640px) { .logo-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .logo-strip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1100px) { .logo-strip-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .logo-strip-card { display: flex; align-items: center; justify-content: center; height: 6.5rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--color-border); border-radius: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .logo-strip-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,60,0.08); } .logo-strip-card img { max-width: 100%; max-height: 100%; object-fit: contain; } .logo-strip-card__fallback { font-weight: 800; font-size: 1.05rem; color: var(--color-brand); text-align: center; } /* ---- Client marquee ("ecosystem: how it moves") ---- */ .client-marquee { position: relative; overflow: hidden; margin-top: 3rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .client-marquee__track { display: flex; align-items: center; gap: 3rem; width: max-content; animation: client-marquee-scroll 32s linear infinite; } .client-marquee:hover .client-marquee__track { animation-play-state: paused; } .client-marquee__item { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 6rem; width: 14rem; transition: transform 0.25s ease; } @media (max-width: 640px) { .client-marquee__item { height: 4.5rem; width: 11rem; } } .client-marquee__item:hover { transform: translateY(-2px); } .client-marquee__item img { max-width: 100%; max-height: 100%; object-fit: contain; } .client-marquee__item span { font-weight: 800; font-size: 1rem; color: var(--color-brand); white-space: nowrap; } @keyframes client-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .client-marquee__track { animation: none; } .client-marquee { overflow-x: auto; } } .wwd-list { border-top: 1px solid var(--color-border); } .wwd-row { --wwd-accent: var(--color-brand); position: relative; display: flex; align-items: center; gap: 1.5rem; padding: 1.75rem 0.5rem; border-bottom: 1px solid var(--color-border); transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease; } .wwd-row::before { content: ""; position: absolute; inset: 0; left: -0.5rem; right: -0.5rem; border-radius: 0.75rem; background: color-mix(in srgb, var(--wwd-accent) 5%, transparent); opacity: 0; transition: opacity 0.35s ease; z-index: 0; } .wwd-row:hover { padding-left: 1.25rem; } .wwd-row:hover::before { opacity: 1; } .wwd-row__num { position: relative; z-index: 1; flex-shrink: 0; width: 2.75rem; font-size: 0.9375rem; font-weight: 800; color: var(--color-border); transition: color 0.35s ease; } .wwd-row:hover .wwd-row__num { color: var(--wwd-accent); } .wwd-row__icon { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--wwd-accent) 12%, white); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .wwd-row__icon i, .wwd-row__icon svg { width: 1.375rem; height: 1.375rem; color: var(--wwd-accent); transition: color 0.3s ease; } .wwd-row:hover .wwd-row__icon { background: var(--wwd-accent); transform: scale(1.06); } .wwd-row:hover .wwd-row__icon i, .wwd-row:hover .wwd-row__icon svg { color: #ffffff; } .wwd-row__body { position: relative; z-index: 1; flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.5rem; row-gap: 0.25rem; } .wwd-row__title { font-size: 1.0625rem; font-weight: 700; color: var(--color-foreground); flex: 0 0 auto; width: 15rem; } .wwd-row__desc { font-size: 0.875rem; line-height: 1.6; color: var(--color-muted); flex: 1 1 18rem; margin: 0; } .wwd-row__arrow { position: relative; z-index: 1; flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--color-border); transform: rotate(0deg); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .wwd-row:hover .wwd-row__arrow { color: var(--wwd-accent); transform: translate(2px, -2px) rotate(45deg); } @media (max-width: 640px) { .wwd-row { flex-wrap: wrap; gap: 1rem; } .wwd-row__num { width: auto; } .wwd-row__body { flex: 1 1 100%; flex-direction: column; flex-wrap: nowrap; } .wwd-row__title { width: auto; } .wwd-row__desc { flex: 1 1 auto; } .wwd-row__arrow { display: none; } } /* ============ Process Section ============ */ .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--delay, 0) * 110ms); } .reveal-up.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1; transform: none; transition: none; } } .process-section { overflow: hidden; } /* Horizontal process timeline: a single animated wire runs left-to-right across the top, nodes sit on the wire in a row, and each step's text sits centered directly beneath its node. On tablet the row tightens up (and scrolls if needed); on phones it collapses into a vertical stack so nothing is cut off and no sideways scrolling is required — see the max-width: 560px block below. */ .process-track { position: relative; display: flex; align-items: flex-start; gap: 0; margin-top: 5rem; padding: 0.5rem 0.5rem 1.25rem; } .process-track__line { position: absolute; left: 3.75rem; right: 3.75rem; top: 2.75rem; height: 3px; background: color-mix(in srgb, var(--color-brand) 12%, transparent); border-radius: 999px; overflow: hidden; z-index: 0; } .process-track__line-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-brand), var(--color-brand-dark), var(--color-accent)); background-size: 200% 100%; border-radius: 999px; transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; animation: processWireFlow 2.4s linear infinite; } .process-track.in-view .process-track__line-fill { width: 100%; } @keyframes processWireFlow { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .process-step { --step-accent: var(--color-brand); position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1rem; } .process-step:nth-of-type(4n+2) { --step-accent: var(--color-brand-dark); } .process-step:nth-of-type(4n+3) { --step-accent: var(--color-accent); } .process-step:nth-of-type(4n+4) { --step-accent: var(--color-accent-dark); } .process-step__node { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; margin: 0 auto 1.5rem; border-radius: 50%; background: #ffffff; border: 1px solid color-mix(in srgb, var(--step-accent) 30%, transparent); box-shadow: 0 10px 30px color-mix(in srgb, var(--step-accent) 16%, transparent); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease; } .process-step:hover .process-step__node { transform: scale(1.06); box-shadow: 0 18px 40px color-mix(in srgb, var(--step-accent) 28%, transparent); } .process-step__ring { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--step-accent) 45%, transparent); opacity: 0; animation: processRingPulse 2.6s ease-out infinite; animation-delay: calc(var(--delay, 0) * 0.4s); animation-play-state: paused; } .process-track.in-view .process-step__ring { animation-play-state: running; } @keyframes processRingPulse { 0% { transform: scale(0.85); opacity: 0.55; } 70% { transform: scale(1.25); opacity: 0; } 100% { transform: scale(1.25); opacity: 0; } } .process-step__icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--step-accent); } .process-step__icon i, .process-step__icon svg { width: 1.75rem; height: 1.75rem; } .process-step__num { position: absolute; top: -0.4rem; right: -0.4rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 0.35rem; border-radius: 999px; background: var(--step-accent); color: #ffffff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; border: 2px solid #ffffff; } .process-step__body { max-width: 15rem; padding: 1rem 1.25rem; border-radius: 1rem; background: #ffffff; border: 1px solid var(--color-border, #e5e7eb); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04); text-align: center; } .process-step__spacer { display: none; } .process-step__phase { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--step-accent); } .process-step__title { margin-top: 0.35rem; font-size: 1.0625rem; font-weight: 700; color: var(--color-foreground); } .process-step__desc { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.55; color: var(--color-muted); } .process-cta { margin-top: 5rem; padding: 2.75rem 1.5rem; text-align: center; border-radius: 1.75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand) 6%, white), #ffffff 60%); border: 1px solid var(--color-border); } .process-cta__title { font-size: 1.375rem; font-weight: 800; color: var(--color-foreground); } .process-cta__sub { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--color-muted); } /* Tablet: keep the row horizontal but tighten spacing and card width so five steps still fit without overlapping. */ @media (max-width: 1024px) { .process-step__body { max-width: 12rem; padding: 0.85rem 1rem; } .process-step__title { font-size: 0.9375rem; } .process-step__desc { font-size: 0.75rem; } } /* Small tablet / large phone: still horizontal, but tighten further and let the row scroll if five steps genuinely can't fit — this only kicks in above the phone breakpoint below. */ @media (max-width: 760px) { .process-track { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: thin; } .process-step { flex: 0 0 11rem; scroll-snap-align: start; } } /* Phone: a horizontal row of five cards can't work at this width without chopping cards off mid-card, which reads as broken rather than swipeable. So the timeline collapses into a clean vertical stack — wire running down the left, each node beside its text, nothing cut off and no sideways scrolling required. */ @media (max-width: 560px) { .process-track { flex-direction: column; align-items: stretch; overflow-x: visible; gap: 2rem; margin-top: 3rem; padding: 0; scroll-snap-type: none; } .process-track__line { left: 1.75rem; right: auto; top: 0.25rem; bottom: 0.25rem; width: 3px; height: auto; } .process-track__line-fill { width: 100%; height: 0%; background: linear-gradient(180deg, var(--color-brand), var(--color-brand-dark), var(--color-accent)); background-size: 100% 200%; transition: height 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s; animation: processWireFlowV 2.4s linear infinite; } .process-track.in-view .process-track__line-fill { height: 100%; width: 100%; } @keyframes processWireFlowV { 0% { background-position: 0 100%; } 100% { background-position: 0 -100%; } } .process-step { flex: none; flex-direction: row; align-items: center; text-align: left; gap: 1.25rem; padding: 0; scroll-snap-align: none; } /* DOM order is body, node, spacer (needed for the desktop column layout where the card sits above the node). In this row layout the node must come first so it sits on the wire with the card beside it. */ .process-step__node { order: -1; flex-shrink: 0; width: 3.5rem; height: 3.5rem; margin: 0; } .process-step__body { order: 0; } .process-step__icon i, .process-step__icon svg { width: 1.375rem; height: 1.375rem; } .process-step__num { min-width: 1.4rem; height: 1.4rem; font-size: 0.625rem; } .process-step__body { max-width: none; flex: 1; padding: 0.85rem 1rem; text-align: left; } .process-cta { margin-top: 3rem; padding: 2.25rem 1.25rem; } .process-cta__title { font-size: 1.125rem; } } .product-showcase__badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .product-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 9999px; background: var(--color-brand-light); border: 1px solid rgba(0, 0, 100, 0.1); font-size: 0.8125rem; font-weight: 500; color: var(--color-foreground); } .product-badge i, .product-badge svg { color: var(--color-brand); } .product-badge--link { cursor: pointer; transition: all 0.25s ease; } .product-badge--link:hover { background: var(--color-brand); border-color: var(--color-brand); color: #ffffff; } .product-badge--link:hover i, .product-badge--link:hover svg { color: #ffffff; } .product-badge--maker { background: var(--color-brand); border-color: var(--color-brand); color: #ffffff; font-weight: 600; } .product-badge--maker i, .product-badge--maker svg { color: #ffffff; } /* Honeypot field: present in the DOM for bots, invisible and unreachable for people. */ .form-hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* "I'm not a robot" verification widget */ .robot-check { border: 1px solid var(--color-border); border-radius: 0.9rem; padding: 0.8rem 1rem; background: rgba(0, 0, 60, 0.02); } .robot-check__row { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; user-select: none; } .robot-check__input { position: absolute; opacity: 0; width: 1.4rem; height: 1.4rem; margin: 0; cursor: pointer; } .robot-check__box { flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 0.35rem; border: 2px solid var(--color-border); background: #ffffff; display: flex; align-items: center; justify-content: center; color: #ffffff; transition: background 0.15s ease, border-color 0.15s ease; } .robot-check__box i, .robot-check__box svg { opacity: 0; transition: opacity 0.15s ease; } .robot-check__input:checked + .robot-check__box { background: var(--color-brand); border-color: var(--color-brand); } .robot-check__input:checked + .robot-check__box i, .robot-check__input:checked + .robot-check__box svg { opacity: 1; } .robot-check__input:focus-visible + .robot-check__box { outline: 2px solid var(--color-brand); outline-offset: 2px; } .robot-check__label { font-weight: 600; font-size: 0.95rem; color: var(--color-foreground); } .robot-check__shield { margin-left: auto; color: var(--color-muted, #9aa0b4); } .robot-check__sum { margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px dashed var(--color-border); display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .robot-check__sum label { font-size: 0.85rem; font-weight: 500; color: var(--color-muted, #6b7280); } .robot-check__sum input { width: 6rem; padding: 0.45rem 0.7rem; } .robot-check--error { border-color: #ef4444; background: rgba(239, 68, 68, 0.04); } .robot-check__error { margin-top: 0.6rem; font-size: 0.8rem; color: #ef4444; font-weight: 500; } .contact-info-card, .contact-form-card { display: flex; flex-direction: column; height: auto; } .contact-map { margin-top: 1.75rem; border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--color-border); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); height: 320px; } /* Google's free maps embed shows a place/rating card ("4.0 * (10)" plus an "Open in Maps" button) in the top-left corner whenever the address resolves to a listed business or nearby POI. There's no official URL parameter to disable it, so the iframe is rendered taller than its container and shifted up: the visible window still shows real map tiles (just a bit further into the map), not blank space, while the card itself scrolls off above the visible area. */ .contact-map iframe { display: block; width: 100%; height: calc(100% + 190px); margin-top: -190px; } .contact-map--split { display: flex; flex-direction: row; gap: 1.1rem; border: none; box-shadow: none; border-radius: 0; overflow: visible; } .contact-map__item { border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--color-border); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); flex: 1 1 0%; min-width: 0; height: 320px; position: relative; } .contact-map__label { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1; background: rgba(255, 255, 255, 0.92); color: var(--color-foreground); font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 9999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } @media (max-width: 1023px) { .contact-info-card, .contact-form-card { height: auto; } .contact-map { height: 220px; flex: none; } .contact-map--split { height: auto; } .contact-map--split .contact-map__item { height: 220px; flex: none; } } @media (max-width: 639px) { .contact-map--split { flex-direction: column; } .contact-map--split .contact-map__item { width: 100%; } } .product-showcase__shot { position: relative; overflow: hidden; border-radius: 1.5rem; background: #0f172a; box-shadow: 0 16px 40px color-mix(in srgb, var(--p-accent) 30%, transparent); border: 1px solid color-mix(in srgb, var(--p-accent) 35%, transparent); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; will-change: transform; } .product-showcase__shot:hover { box-shadow: 0 26px 60px color-mix(in srgb, var(--p-accent) 40%, transparent); } @media (prefers-reduced-motion: reduce) { .product-showcase__shot { transition: none; } } .product-showcase__shot-bar { display: flex; align-items: center; gap: 0.375rem; padding: 0.75rem 1rem; background: #1e293b; } .product-showcase__shot-bar span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #475569; } .product-showcase__shot-bar span:nth-child(1) { background: #f87171; } .product-showcase__shot-bar span:nth-child(2) { background: #fbbf24; } .product-showcase__shot-bar span:nth-child(3) { background: #34d399; } .product-showcase__shot-img { display: block; width: 100%; height: auto; } .product-showcase__grid { --p-accent: var(--color-brand); display: grid; gap: 2rem; align-items: stretch; grid-template-columns: 1fr; } @media (min-width: 900px) { .product-showcase__grid { grid-template-columns: 0.9fr 1.1fr; } } .product-showcase__banner { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; padding: 2rem; border-radius: 1.5rem; background: linear-gradient(135deg, var(--p-accent) 0%, color-mix(in srgb, var(--p-accent) 55%, #050514) 100%); box-shadow: 0 16px 40px color-mix(in srgb, var(--p-accent) 30%, transparent); } .product-showcase__banner::before { content: ""; position: absolute; top: -30%; right: -20%; width: 70%; height: 70%; border-radius: 50%; background: rgba(255, 255, 255, 0.08); } .product-showcase__banner::after { content: ""; position: absolute; bottom: -35%; left: -15%; width: 60%; height: 60%; border-radius: 50%; background: rgba(255, 255, 255, 0.06); } .product-showcase__banner-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25); margin-bottom: auto; } .product-showcase__banner-icon i, .product-showcase__banner-icon svg { width: 1.375rem; height: 1.375rem; color: #ffffff; } .product-showcase__banner-icon--logo { width: 3.5rem; height: 3.5rem; background: #ffffff; padding: 0.4rem; } .product-showcase__banner-icon--logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 0.5rem; } .product-showcase__banner-label { position: relative; z-index: 1; margin-top: 1.5rem; font-size: 1.625rem; font-weight: 800; color: #ffffff; letter-spacing: -0.01em; } .product-showcase__banner-dot { color: #f87171; } .product-showcase__banner-sub { position: relative; z-index: 1; margin-top: 0.5rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.82); max-width: 32ch; } .product-showcase__body { display: flex; flex-direction: column; justify-content: center; } .product-showcase__name { font-size: 1.5rem; font-weight: 800; color: var(--color-foreground); } .product-showcase__desc { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.75; color: var(--color-muted); } .product-showcase__tags { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; } .product-showcase__tag { padding: 0.4rem 0.875rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; color: var(--p-accent, var(--color-brand)); background: color-mix(in srgb, var(--p-accent, var(--color-brand)) 10%, white); border: 1px solid color-mix(in srgb, var(--p-accent, var(--color-brand)) 25%, transparent); transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } .product-showcase__tag:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--p-accent, var(--color-brand)) 18%, white); box-shadow: 0 6px 16px color-mix(in srgb, var(--p-accent, var(--color-brand)) 25%, transparent); } .product-showcase__divider { height: 1px; background: var(--color-border); } .cta-banner { position: relative; overflow: hidden; border-radius: 2rem; background: var(--color-brand); color: white; } .cta-banner::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.5; } .cta-banner .cta-inner { position: relative; z-index: 1; } .cta-banner .btn-primary { background: white; color: var(--color-brand); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .cta-banner .btn-primary:hover { background: var(--color-brand-light); } .cta-banner .btn-outline { background: transparent; color: white; border: 2px solid rgba(255, 255, 255, 0.7); } .cta-banner .btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: white; } .dashboard-preview { background: var(--color-surface); border-radius: 1rem; border: 1px solid var(--color-border); } .dashboard-stat { background: white; border-radius: 0.875rem; padding: 1rem; border: 1px solid var(--color-border); } .chart-bar { height: 8rem; border-radius: 0.875rem; background: var(--color-brand-light); position: relative; overflow: hidden; } .chart-bar::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: var(--color-brand); opacity: 0.2; border-radius: 0 0 0.875rem 0.875rem; } .form-input { width: 100%; border-radius: 0.875rem; border: 1px solid var(--color-border); background: white; padding: 0.875rem 1rem; color: var(--color-foreground); transition: all 0.2s ease; } .form-input:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 4px rgba(0, 0, 100, 0.1); } .avatar { display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 9999px; background: var(--color-brand); font-size: 1.25rem; font-weight: 700; color: white; box-shadow: 0 8px 20px rgba(0, 0, 100, 0.25); } .message { border-radius: 0.875rem; padding: 0.875rem 1rem; margin-bottom: 1rem; font-size: 0.875rem; } .message-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; } .message-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } footer { background: var(--color-surface); border-top: 1px solid var(--color-border); } footer a:hover { color: var(--color-brand); } /* ===== Page Banner — matches hero gradient ===== */ .page-banner { position: relative; overflow: hidden; padding: 5.25rem 1.5rem 4.5rem; margin-top: 0; margin-bottom: 0; text-align: center; } .page-banner__gradient { position: absolute; inset: 0; background: linear-gradient(105deg, var(--nav-gradient-start, var(--color-brand, #000064)) 0%, var(--nav-gradient-middle, var(--color-brand-dark, #00004a)) 45%, var(--nav-gradient-end, var(--color-brand, #000064)) 100%); z-index: 0; } .page-banner__glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 1; } .page-banner__glow--1 { width: 280px; height: 280px; top: -80px; left: -60px; background: rgba(240, 90, 40, 0.12); } .page-banner__glow--2 { width: 320px; height: 320px; bottom: -100px; right: -80px; background: rgba(240, 90, 40, 0.08); } .page-banner__inner { position: relative; z-index: 2; max-width: 48rem; margin: 0 auto; } .page-banner__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.9); margin-bottom: 0.75rem; } .page-banner__eyebrow::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background-color: var(--color-accent); } .page-banner__title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; color: #ffffff; letter-spacing: -0.02em; } .page-banner__accent { color: var(--color-accent, #F05A28); } .page-banner__sub { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, 0.82); } @media (max-width: 640px) { .page-banner { padding: 4.75rem 1.25rem 3.5rem; } .page-banner__sub { font-size: 0.9375rem; } } /* ===== Site Footer — matches hero gradient ===== */ .site-footer { position: relative; overflow: hidden; margin-top: 3rem; color: rgba(255, 255, 255, 0.85); } .site-footer__gradient { position: absolute; inset: 0; background: linear-gradient(105deg, var(--nav-gradient-start, var(--color-brand, #000064)) 0%, var(--nav-gradient-middle, var(--color-brand-dark, #00004a)) 45%, var(--nav-gradient-end, var(--color-brand, #000064)) 100%); z-index: 0; } .site-footer__glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 1; } .site-footer__glow--1 { width: 360px; height: 360px; top: -120px; right: 10%; background: rgba(77, 208, 225, 0.12); } .site-footer__glow--2 { width: 300px; height: 300px; bottom: -80px; left: 5%; background: rgba(240, 90, 40, 0.06); } .site-footer__inner { position: relative; z-index: 2; max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem 2rem; } .site-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2rem; } } .site-footer__logo-link { display: inline-flex; flex-direction: column; gap: 0.25rem; text-decoration: none; } .site-footer__logo { font-size: 1.375rem; font-weight: 800; letter-spacing: 0.04em; color: #ffffff; } .site-footer__logo-link--image { display: inline-flex; } .site-footer__logo-badge { display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 0.875rem; padding: 0.875rem 1.375rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .site-footer__logo-img { display: block; height: 4rem; width: auto; } @media (max-width: 640px) { .site-footer__logo-badge { padding: 0.75rem 1.125rem; } .site-footer__logo-img { height: 3rem; } } .site-footer__tagline { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent, #F05A28); } .site-footer__desc { margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.7; color: rgba(255, 255, 255, 0.72); max-width: 22rem; } .site-footer__seo-desc { margin-top: 0.75rem; font-size: 0.75rem; line-height: 1.6; color: rgba(255, 255, 255, 0.5); max-width: 22rem; } .site-footer__social { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; } .site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .site-footer__social a:hover { background: linear-gradient(135deg, var(--color-accent, #F05A28), var(--color-accent-dark, #d14a1c)); border-color: transparent; transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28); } .site-footer__social a[data-platform="facebook"]:hover { background: #1877f2; box-shadow: 0 10px 22px rgba(24, 119, 242, 0.4); } .site-footer__social a[data-platform="instagram"]:hover { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); box-shadow: 0 10px 22px rgba(221, 42, 123, 0.4); } .site-footer__social a[data-platform="linkedin"]:hover { background: #0a66c2; box-shadow: 0 10px 22px rgba(10, 102, 194, 0.4); } .site-footer__social a[data-platform="youtube"]:hover { background: #ff0000; box-shadow: 0 10px 22px rgba(255, 0, 0, 0.35); } .site-footer__social svg { width: 1.125rem; height: 1.125rem; } .site-footer__heading { margin-bottom: 1rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent, #F05A28); } .site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .site-footer__links a { font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); text-decoration: none; transition: color 0.2s ease; } .site-footer__links a:hover { color: #ffffff; } .site-footer__more { display: inline-flex !important; align-items: center; gap: 0.3rem; margin-top: 0.125rem; font-weight: 600; color: var(--color-accent, #F05A28) !important; } .site-footer__more:hover { color: var(--color-accent-dark, #d14a1c) !important; } .site-footer__contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; } .site-footer__contact li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.78); } .site-footer__contact a { color: rgba(255, 255, 255, 0.78); text-decoration: none; transition: color 0.2s ease; } .site-footer__contact a:hover { color: #ffffff; } .site-footer__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--color-accent, #F05A28); } .site-footer__icon svg { width: 0.875rem; height: 0.875rem; } .site-footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } @media (min-width: 768px) { .site-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } } .site-footer__bottom p { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); margin: 0; } .site-footer__legal { display: flex; gap: 1.5rem; } .site-footer__legal a { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.2s ease; } .site-footer__legal a:hover { color: #ffffff; } /* ===== Blog ===== */ .blog-card { display: flex; flex-direction: column; height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-card:hover { transform: translateY(-4px); } .blog-card__image-link { display: block; } .blog-card__image { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-brand-light, #e6e6f0); } .blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .blog-card:hover .blog-card__image img { transform: scale(1.05); } /* ===== Event detail ===== */ .event-detail__image { width: 100%; border-radius: 1rem; overflow: hidden; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); } .event-detail__image img { width: 100%; height: auto; display: block; max-height: 480px; object-fit: cover; } .event-detail__gallery { margin-top: 2rem; } .event-detail__gallery-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--color-foreground); } .event-detail__gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .event-detail__gallery-grid { grid-template-columns: repeat(3, 1fr); } } .event-detail__gallery-item { display: block; aspect-ratio: 4 / 3; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); } .event-detail__gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .event-detail__gallery-item:hover img { transform: scale(1.06); } .blog-card__header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.5rem 1rem; } .blog-card__category { display: inline-block; padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-brand, #000064); background: rgba(0, 0, 100, 0.08); border-radius: 9999px; } .blog-card__meta { font-size: 0.75rem; color: var(--color-muted); margin-bottom: 0.75rem; } .blog-card__title { font-size: 1.125rem; font-weight: 700; line-height: 1.35; margin-bottom: 0.75rem; } .blog-card__title a { color: var(--color-foreground); text-decoration: none; transition: color 0.2s ease; } .blog-card__title a:hover { color: var(--color-brand, #000064); } .blog-card__excerpt { font-size: 0.875rem; line-height: 1.65; color: var(--color-muted); flex: 1; } .blog-card__body { display: flex; flex-direction: column; flex: 1; } .blog-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .blog-card__author { font-size: 0.8125rem; font-weight: 600; color: var(--color-foreground); } .blog-card__read { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 600; text-decoration: none; } .blog-more-note { margin-top: 3rem; text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--color-muted); } .blog-detail-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 768px) { .blog-detail-layout--with-image { grid-template-columns: minmax(260px, 380px) 1fr; } } .blog-detail-layout__image { position: relative; border-radius: 1rem; overflow: hidden; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); background: var(--color-brand-light, #e6e6f0); } .blog-detail-layout__image img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; display: block; } @media (min-width: 768px) { .blog-detail-layout__image { position: sticky; top: 6rem; } } .blog-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.8125rem; color: var(--color-muted); } .blog-detail__gallery { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .blog-detail__gallery-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; color: var(--color-foreground); } .blog-detail__gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.875rem; } @media (min-width: 640px) { .blog-detail__gallery-grid { grid-template-columns: repeat(3, 1fr); } } .blog-detail__gallery-item { display: block; aspect-ratio: 4 / 3; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); } .blog-detail__gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .blog-detail__gallery-item:hover img { transform: scale(1.06); } .blog-detail__paragraph { font-size: 1rem; line-height: 1.8; color: var(--color-muted); margin-bottom: 1.25rem; } .blog-detail__paragraph:last-child { margin-bottom: 0; } .site-nav--hero .site-nav__link--active { color: var(--color-accent, #F05A28); font-weight: 600; } .fade-in { animation: fadeIn 0.7s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .animate-float { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .animate-pulse-glow { animation: pulseGlow 5s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } .trust-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; opacity: 0.45; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.05em; color: var(--color-muted); } .feature-highlight { position: relative; overflow: hidden; } .feature-highlight::before { content: ""; position: absolute; top: -50%; right: -20%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(0, 0, 100, 0.06), transparent 70%); border-radius: 50%; } .bg-brand-light { background: var(--color-brand-light); } .hover\:bg-brand-light:hover { background: var(--color-brand-light); } .text-brand { color: var(--color-brand); } .hover\:text-brand:hover { color: var(--color-brand); } /* ===== Hero Banner — Split Layout ===== */ .hero-banner { position: relative; min-height: auto; display: flex; align-items: center; overflow: hidden; padding: 6rem 0 3rem; } @media (min-width: 1024px) { .hero-banner { min-height: 100vh; padding: 7rem 0 4rem; } } .hero-banner__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; justify-items: center; width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 768px) { .hero-banner__grid { padding: 0 2rem; gap: 3rem; } } @media (min-width: 1024px) { .hero-banner__grid { grid-template-columns: 1fr 1fr; gap: 3rem 2rem; justify-items: stretch; align-items: center; } } .hero-banner__content { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 540px; } @media (min-width: 1024px) { .hero-banner__content { align-items: flex-start; text-align: left; max-width: none; justify-self: start; } } .hero-banner__badge { align-self: center; } @media (min-width: 1024px) { .hero-banner__badge { align-self: flex-start; } } .hero-banner__title { font-size: 1.625rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--color-foreground); } @media (min-width: 640px) { .hero-banner__title { font-size: 1.875rem; } } @media (min-width: 1024px) { .hero-banner__title { font-size: 2.125rem; line-height: 1.3; } } .hero-banner__brand { display: block; margin-top: 0.25rem; font-size: 1.875rem; font-weight: 800; color: var(--color-brand); letter-spacing: -0.01em; } @media (min-width: 640px) { .hero-banner__brand { font-size: 2.125rem; } } @media (min-width: 1024px) { .hero-banner__brand { font-size: 2.375rem; } } .hero-banner__desc { margin-top: 1rem; font-size: 1rem; font-weight: 400; line-height: 1.65; color: var(--color-muted); max-width: 28rem; } @media (min-width: 1024px) { .hero-banner__desc { margin-top: 1.25rem; max-width: 32rem; } } .hero-banner__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; width: 100%; } @media (min-width: 1024px) { .hero-banner__actions { justify-content: flex-start; width: auto; } } .hero-banner__stats { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; justify-content: center; width: 100%; } @media (min-width: 1024px) { .hero-banner__stats { justify-content: flex-start; width: auto; } } .hero-mini-stat { text-align: center; min-width: 5.5rem; } @media (min-width: 1024px) { .hero-mini-stat { text-align: left; } } .hero-mini-stat strong { display: block; font-size: 1.125rem; font-weight: 700; color: var(--color-brand); } .hero-mini-stat span { font-size: 0.8125rem; color: var(--color-muted); font-weight: 400; } .hero-banner__trust { margin-top: 2rem; width: 100%; text-align: center; } @media (min-width: 1024px) { .hero-banner__trust { text-align: left; } } .hero-banner__visual { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 420px; min-height: 300px; } @media (min-width: 640px) { .hero-banner__visual { max-width: 460px; min-height: 360px; } } @media (min-width: 1024px) { .hero-banner__visual { max-width: 100%; min-height: 420px; justify-self: end; } } /* ===== AI Animation Scene ===== */ .ai-scene { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto; } .ai-scene__glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 100, 0.15) 0%, transparent 70%); animation: aiGlow 4s ease-in-out infinite; } @keyframes aiGlow { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.1); opacity: 1; } } .ai-scene__ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px dashed rgba(0, 0, 100, 0.15); transform: translate(-50%, -50%); } .ai-scene__ring--1 { width: 95%; height: 95%; animation: aiSpin 30s linear infinite; } .ai-scene__ring--2 { width: 75%; height: 75%; animation: aiSpin 20s linear infinite reverse; } .ai-scene__ring--3 { width: 55%; height: 55%; border-style: solid; border-color: rgba(0, 0, 100, 0.08); animation: aiSpin 15s linear infinite; } @keyframes aiSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .ai-scene__network { position: absolute; inset: 0; width: 100%; height: 100%; } .ai-node { fill: var(--color-brand); animation: aiNodePulse 2.5s ease-in-out infinite; } .ai-node--sm { fill: rgba(0, 0, 100, 0.6); animation-duration: 3s; } .ai-node--1 { animation-delay: 0s; } .ai-node--2 { animation-delay: 0.3s; } .ai-node--3 { animation-delay: 0.6s; } .ai-node--4 { animation-delay: 0.9s; } .ai-node--5 { animation-delay: 1.2s; } .ai-node--6 { animation-delay: 1.5s; } .ai-node--7 { animation-delay: 0.2s; } .ai-node--8 { animation-delay: 0.8s; } @keyframes aiNodePulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } .ai-line { stroke-dasharray: 200; stroke-dashoffset: 200; animation: aiLineDraw 4s ease-in-out infinite; } .ai-line--1 { animation-delay: 0s; } .ai-line--2 { animation-delay: 0.2s; } .ai-line--3 { animation-delay: 0.4s; } .ai-line--4 { animation-delay: 0.6s; } .ai-line--5 { animation-delay: 0.8s; } .ai-line--6 { animation-delay: 1s; } .ai-line--7 { animation-delay: 1.2s; } .ai-line--8 { animation-delay: 1.4s; } @keyframes aiLineDraw { 0% { stroke-dashoffset: 200; opacity: 0.1; } 50% { stroke-dashoffset: 0; opacity: 0.35; } 100% { stroke-dashoffset: -200; opacity: 0.1; } } .ai-pulse { opacity: 0.8; } .ai-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; } .ai-core__pulse { position: absolute; inset: -20px; border-radius: 50%; border: 2px solid rgba(0, 0, 100, 0.2); animation: aiCorePulse 2s ease-out infinite; } .ai-core__pulse::before, .ai-core__pulse::after { content: ""; position: absolute; inset: -15px; border-radius: 50%; border: 1px solid rgba(0, 0, 100, 0.12); animation: aiCorePulse 2s ease-out infinite 0.5s; } .ai-core__pulse::after { inset: -30px; animation-delay: 1s; } @keyframes aiCorePulse { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.4); opacity: 0; } } .ai-core__inner { position: relative; width: 130px; height: 130px; border-radius: 50%; background: var(--color-brand); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(0, 0, 100, 0.08), 0 20px 50px rgba(0, 0, 100, 0.35); animation: aiCoreFloat 4s ease-in-out infinite; } @keyframes aiCoreFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .ai-core__icon { width: 36px; height: 36px; margin-bottom: 4px; } .ai-core__icon svg { width: 100%; height: 100%; } .ai-core__label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; color: white; } .ai-core__sub { font-size: 0.55rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.05em; } .ai-float { position: absolute; display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.875rem; background: white; border: 1px solid var(--color-border); border-radius: 9999px; font-size: 0.7rem; font-weight: 600; color: var(--color-brand); box-shadow: 0 8px 24px rgba(0, 0, 100, 0.1); z-index: 20; white-space: nowrap; } .ai-float i, .ai-float svg { width: 14px; height: 14px; } .ai-float--1 { top: 8%; left: 0; animation: aiFloat1 5s ease-in-out infinite; } .ai-float--2 { top: 18%; right: -2%; animation: aiFloat2 6s ease-in-out infinite; } .ai-float--3 { bottom: 22%; left: -4%; animation: aiFloat3 5.5s ease-in-out infinite; } .ai-float--4 { bottom: 10%; right: 2%; animation: aiFloat4 4.5s ease-in-out infinite; } @keyframes aiFloat1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -10px); } } @keyframes aiFloat2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, 8px); } } @keyframes aiFloat3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, 6px); } } @keyframes aiFloat4 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -8px); } } .ai-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .ai-particle { position: absolute; width: 3px; height: 3px; background: var(--color-brand); border-radius: 50%; opacity: 0; animation: aiParticle 4s ease-in-out infinite; } .ai-particle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; } .ai-particle:nth-child(2) { top: 25%; left: 75%; animation-delay: 0.5s; } .ai-particle:nth-child(3) { top: 40%; left: 15%; animation-delay: 1s; } .ai-particle:nth-child(4) { top: 55%; left: 85%; animation-delay: 1.5s; } .ai-particle:nth-child(5) { top: 70%; left: 30%; animation-delay: 2s; } .ai-particle:nth-child(6) { top: 85%; left: 60%; animation-delay: 2.5s; } .ai-particle:nth-child(7) { top: 15%; left: 50%; animation-delay: 0.3s; } .ai-particle:nth-child(8) { top: 35%; left: 40%; animation-delay: 0.8s; } .ai-particle:nth-child(9) { top: 60%; left: 55%; animation-delay: 1.3s; } .ai-particle:nth-child(10) { top: 80%; left: 45%; animation-delay: 1.8s; } .ai-particle:nth-child(11) { top: 5%; left: 65%; animation-delay: 0.2s; } .ai-particle:nth-child(12) { top: 45%; left: 70%; animation-delay: 0.7s; } .ai-particle:nth-child(13) { top: 65%; left: 10%; animation-delay: 1.2s; } .ai-particle:nth-child(14) { top: 90%; left: 25%; animation-delay: 1.7s; } .ai-particle:nth-child(15) { top: 20%; left: 90%; animation-delay: 2.2s; } .ai-particle:nth-child(16) { top: 50%; left: 5%; animation-delay: 0.4s; } .ai-particle:nth-child(17) { top: 75%; left: 80%; animation-delay: 0.9s; } .ai-particle:nth-child(18) { top: 30%; left: 25%; animation-delay: 1.4s; } .ai-particle:nth-child(19) { top: 95%; left: 70%; animation-delay: 1.9s; } .ai-particle:nth-child(20) { top: 8%; left: 35%; animation-delay: 2.4s; } @keyframes aiParticle { 0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); } 50% { opacity: 0.7; transform: translateY(-20px) scale(1); } } @media (max-width: 1023px) { .hero-banner__visual { order: -1; } .ai-scene { max-width: min(100%, 340px); } .ai-float { font-size: 0.625rem; padding: 0.35rem 0.6rem; } .ai-float--1 { top: 5%; left: 2%; } .ai-float--2 { top: 12%; right: 0; } .ai-float--3 { bottom: 18%; left: 0; } .ai-float--4 { bottom: 5%; right: 0; } .ai-core__inner { width: 100px; height: 100px; } .ai-core__label { font-size: 0.6rem; } .ai-core__sub { font-size: 0.5rem; } } @media (max-width: 480px) { .hero-banner { padding-top: 5.5rem; } .hero-banner__title { font-size: 1.375rem; } .hero-banner__brand { font-size: 1.625rem; } .hero-banner__desc { font-size: 0.9375rem; } .hero-banner__actions .btn-primary, .hero-banner__actions .btn-outline { width: 100%; justify-content: center; } .ai-scene { max-width: min(100%, 280px); } .ai-float--3, .ai-float--4 { display: none; } } /* ===== Site Navigation ===== */ .site-nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 50; margin: 0; padding: 0; border: none; } .site-nav__inner { margin: 0 auto; max-width: 80rem; padding: 1.25rem 1.5rem; } /* White nav — matches banner on all pages */ .site-nav--hero { background: #ffffff; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); border-bottom: 1px solid var(--color-border); } .site-nav--hero .site-nav__inner { background: transparent; border: none; box-shadow: none; margin: 0 auto; max-width: 80rem; padding: 1.25rem 1.5rem; } .site-nav--hero .site-nav__link { color: var(--color-brand); } .site-nav--hero .site-nav__link::after { background-color: var(--color-accent); } .site-nav--hero .site-nav__link:hover { color: var(--color-accent); } .site-nav--hero .site-nav__link--active { color: var(--color-accent, #F05A28); font-weight: 700; } .site-nav--hero .site-nav__login-btn { color: var(--color-brand); border-color: var(--color-brand); } .site-nav--hero .site-nav__login-btn:hover { background: var(--color-brand-light); border-color: var(--color-brand); } .site-nav--hero .site-nav__menu-btn { color: var(--color-brand); } .site-nav--hero .site-nav__mobile { border-top: 1px solid var(--color-border); } .site-nav--hero .site-nav__link--mobile { color: var(--color-brand); padding: 0.75rem 1rem; } .site-nav--hero .site-nav__user { color: var(--color-brand); } /* Login page — light nav */ .site-nav:not(.site-nav--hero) .site-nav__inner { margin: 0 auto; max-width: 80rem; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-border); box-shadow: 0 4px 24px rgba(0, 0, 100, 0.06); padding: 1.25rem 1.5rem; } .site-nav__logo-text { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 800; letter-spacing: 0.04em; color: var(--color-brand); } .site-nav__logo-img { display: block; height: 4.25rem; width: auto; } @media (max-width: 640px) { .site-nav__inner, .site-nav--hero .site-nav__inner, .site-nav:not(.site-nav--hero) .site-nav__inner { padding: 0.875rem 1rem; } .site-nav__logo-img { height: 3.25rem; } .site-nav__logo .site-nav__logo-text { font-size: 1.0625rem; } .site-nav__logo .brand-tagline { font-size: 0.5rem; letter-spacing: 0.06em; } .site-nav__logo .brand-icon { width: 2rem; height: 2rem; font-size: 0.75rem; border-radius: 0.6rem; } .brand-name { font-size: 1.0625rem; } } @media (max-width: 380px) { .site-nav__logo .site-nav__logo-text { font-size: 0.9375rem; } .site-nav__logo .brand-tagline { font-size: 0.4375rem; } } .site-nav__link { position: relative; padding: 0.5rem 1rem; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-brand); border-radius: 0; transition: color 0.2s ease; } .site-nav__link::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0.15rem; height: 2px; background-color: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .site-nav__link:hover::after, .site-nav__link--active::after { transform: scaleX(1); } .site-nav__link:hover { color: var(--color-accent); } .site-nav__link--active { color: var(--color-accent); font-weight: 700; } /* Products / Clients hover mega-menu */ .site-nav__dropdown { position: relative; padding-bottom: 0.85rem; margin-bottom: -0.85rem; } .site-nav__link--has-dropdown { display: inline-flex; align-items: center; gap: 0.25rem; } .site-nav__dropdown-caret { width: 13px; height: 13px; transition: transform 0.2s ease; } .site-nav__dropdown:hover .site-nav__dropdown-caret { transform: rotate(180deg); } .site-nav__dropdown-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.35rem; width: max-content; max-width: min(90vw, 720px); background: #ffffff; border: 1px solid var(--color-border); border-radius: 1rem; box-shadow: 0 20px 45px rgba(0, 0, 60, 0.16); padding: 0.65rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 60; } .site-nav__dropdown:hover .site-nav__dropdown-panel, .site-nav__dropdown:focus-within .site-nav__dropdown-panel, .site-nav__dropdown.is-open .site-nav__dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .site-nav__dropdown-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; width: 108px; padding: 0.75rem 0.5rem 0.6rem; border-radius: 0.65rem; text-decoration: none; transition: background 0.15s ease; } .site-nav__dropdown-item:hover { background: var(--color-brand-light, #f2f4fb); } .site-nav__dropdown-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 0.6rem; background: color-mix(in srgb, var(--color-brand) 8%, white); color: var(--color-brand); overflow: hidden; } .site-nav__dropdown-icon img { width: 100%; height: 100%; object-fit: contain; padding: 3px; } .site-nav__dropdown-icon i { width: 17px; height: 17px; } .site-nav__dropdown-text { display: flex; flex-direction: column; align-items: center; min-width: 0; width: 100%; } .site-nav__dropdown-name { font-size: 0.8rem; font-weight: 700; color: var(--color-foreground, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .site-nav__dropdown-sub { font-size: 0.7rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .site-nav__dropdown-empty { padding: 0.75rem 0.6rem; font-size: 0.8rem; color: var(--color-muted); width: 100%; } .site-nav__dropdown-viewall { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-basis: 100%; margin-top: 0.35rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); font-size: 0.8rem; font-weight: 700; color: var(--color-accent); text-decoration: none; } .site-nav__dropdown-viewall:hover { text-decoration: underline; } @media (max-width: 1024px) { .site-nav__dropdown-panel { display: none; } } .site-nav__login-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: var(--color-brand); background: transparent; border: 1.5px solid var(--color-brand); border-radius: 0.375rem; cursor: pointer; transition: all 0.2s ease; text-decoration: none; } .site-nav__login-btn:hover { background: var(--color-brand-light); } .site-nav__menu-btn { padding: 0.5rem; border-radius: 0.5rem; color: var(--color-muted); background: transparent; border: none; cursor: pointer; } /* ===== Hero Ultra — Reference Layout ===== */ .page-home { background: #ffffff; color: var(--color-foreground); } .hero-ultra { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 5.25rem 0 4rem; margin-top: 0; } .hero-ultra__bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; } .hero-ultra__gradient { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(0, 0, 100, 0.88) 0%, rgba(0, 0, 74, 0.82) 45%, rgba(0, 0, 100, 0.9) 100%); z-index: 0; } .hero-ultra__container { position: relative; z-index: 2; width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .hero-ultra__container { grid-template-columns: 1.1fr 0.9fr; padding: 0 2.5rem; gap: 2rem; min-height: calc(100vh - 5rem); } } .hero-ultra__content { text-align: left; max-width: 640px; } .hero-ultra__eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.9); margin-bottom: 0.75rem; } .hero-ultra__eyebrow::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background-color: var(--color-accent); } .hero-ultra__headline { font-size: 1.625rem; font-weight: 500; line-height: 1.55; color: #ffffff; letter-spacing: -0.01em; } @media (min-width: 640px) { .hero-ultra__headline { font-size: 1.875rem; } } @media (min-width: 1024px) { .hero-ultra__headline { font-size: 2.125rem; line-height: 1.5; } } @media (min-width: 1280px) { .hero-ultra__headline { font-size: 2.375rem; } } .hero-ultra__hl { color: var(--color-accent, #F05A28); font-weight: 600; } .hero-ultra__hl-accent { color: var(--color-accent, #F05A28); font-weight: 600; } .hero-ultra__sub { margin-top: 1.25rem; font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, 0.72); max-width: 520px; } .hero-ultra__subline { margin-top: 0.75rem; font-size: 1.0625rem; font-weight: 700; color: var(--color-accent, #F05A28); letter-spacing: 0.01em; } .hero-ultra__closing { margin-top: 1.5rem; padding-left: 1rem; border-left: 3px solid rgba(255, 255, 255, 0.4); font-size: 1rem; font-weight: 700; line-height: 1.5; color: #ffffff; max-width: 480px; } .hero-ultra__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.875rem; } .hero-ultra__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; transition: all 0.3s ease; text-decoration: none; position: relative; overflow: hidden; z-index: 1; } .hero-ultra__btn::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; transition: all 0.4s ease; } .hero-ultra__btn:hover::before { width: 100%; } .hero-ultra__btn--fill { background: var(--color-accent); color: white; } .hero-ultra__btn--fill::before { background-color: #ffffff; } .hero-ultra__btn--fill:hover { color: var(--color-brand) !important; transform: translateY(-2px); } .hero-ultra__btn--ghost { color: white; border: 1.5px solid rgba(255, 255, 255, 0.55); } .hero-ultra__btn--ghost::before { background-color: var(--color-accent); } .hero-ultra__btn--ghost:hover { border-color: var(--color-accent); color: white !important; transform: translateY(-2px); } .hero-ratings { margin-top: 1.75rem; display: inline-flex; align-items: center; gap: 1.5rem; padding: 0.9rem 1.5rem; background: rgba(6, 15, 35, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.85rem; backdrop-filter: blur(6px); flex-wrap: wrap; } .hero-ratings__badge { display: flex; align-items: center; gap: 0.6rem; } .hero-ratings__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero-ratings__icon--playstore { width: 22px; height: 24px; border-radius: 0; background: none; } .hero-ratings__playstore-icon { width: 20px; height: 22px; display: block; } .hero-ratings__badge--link { text-decoration: none; cursor: pointer; transition: opacity 0.2s ease; } .hero-ratings__badge--link:hover { opacity: 0.8; } .hero-ratings__text--playstore { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; } .hero-ratings__playstore-eyebrow { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.65); } .hero-ratings__stars { display: inline-flex; gap: 0.15rem; } .hero-ratings__star { width: 15px; height: 15px; color: #FBBC05; fill: #FBBC05; } .hero-ratings__text { font-size: 0.875rem; font-weight: 500; color: #ffffff; white-space: nowrap; } .hero-ratings__text strong { font-weight: 800; } .hero-ratings__divider { width: 1px; height: 1.75rem; background: rgba(255, 255, 255, 0.2); flex-shrink: 0; } @media (max-width: 640px) { .hero-ratings { gap: 1rem; padding: 0.75rem 1.1rem; } .hero-ratings__text { font-size: 0.8rem; } } .hero-ultra__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 380px; width: 100%; } @media (min-width: 1024px) { .hero-ultra__visual { justify-content: center; align-items: center; min-height: 520px; } } /* ===== Hero Product Screenshot Showcase ===== */ .hero-showcase { position: relative; width: 100%; max-width: 460px; margin: 0 auto; } .hero-showcase__glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; } .hero-showcase__glow--1 { top: -40px; right: -30px; width: 220px; height: 220px; background: rgba(240, 90, 40, 0.35); } .hero-showcase__glow--2 { bottom: -50px; left: -30px; width: 240px; height: 240px; background: rgba(80, 90, 220, 0.28); } .hero-showcase__badge { position: absolute; top: -14px; right: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 0.4rem; background: var(--color-accent); color: #ffffff; font-family: var(--font-heading); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.45rem 0.85rem; border-radius: 999px; box-shadow: 0 10px 24px rgba(240, 90, 40, 0.45); } .hero-showcase__frame { position: relative; z-index: 1; border-radius: 1.25rem; overflow: hidden; background: #0f172a; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08); } .hero-showcase__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.9rem; background: #1e293b; } .hero-showcase__bar span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #475569; flex-shrink: 0; } .hero-showcase__bar span:nth-child(1) { background: #f87171; } .hero-showcase__bar span:nth-child(2) { background: #fbbf24; } .hero-showcase__bar span:nth-child(3) { background: #34d399; } .hero-showcase__bar-label { margin-left: 0.5rem; font-size: 0.7rem; font-weight: 600; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-showcase__slides { position: relative; width: 100%; min-height: 220px; aspect-ratio: 1914 / 900; } .hero-showcase__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; z-index: 1; transform: scale(1.03); transition: opacity 1s ease-in-out, transform 6s ease-in-out; } .hero-showcase__slide.active { opacity: 1; z-index: 2; transform: scale(1); } .hero-showcase__dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; } .hero-showcase__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.28); border: none; padding: 0; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .hero-showcase__dot.active { background: var(--color-accent); transform: scale(1.35); } @media (max-width: 640px) { .hero-showcase { max-width: 340px; } .hero-showcase__badge { right: 10px; font-size: 0.6rem; padding: 0.35rem 0.7rem; } } /* ===== AI Hero Animation (dark) ===== */ .hero-ultra .ai-scene--hero { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; } .ai-scene__hexgrid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.6; animation: hexFade 6s ease-in-out infinite; } @keyframes hexFade { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } .ai-scene--hero .ai-scene__glow { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; } .ai-scene--hero .ai-scene__glow--1 { width: 55%; height: 55%; top: 20%; left: 20%; background: rgba(77, 208, 225, 0.2); animation: aiGlow 5s ease-in-out infinite; } .ai-scene--hero .ai-scene__glow--2 { width: 45%; height: 45%; bottom: 15%; right: 10%; background: rgba(240, 90, 40, 0.12); animation: aiGlow 5s ease-in-out infinite 1.5s; } .ai-scene--hero .ai-scene__glow--3 { width: 35%; height: 35%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.08); animation: aiGlow 4s ease-in-out infinite 0.8s; } .ai-scene--hero .ai-scene__ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1px dashed rgba(255, 255, 255, 0.12); } .ai-scene--hero .ai-scene__ring--1 { width: 98%; height: 98%; animation: aiSpin 25s linear infinite; } .ai-scene--hero .ai-scene__ring--2 { width: 78%; height: 78%; animation: aiSpin 18s linear infinite reverse; } .ai-scene--hero .ai-scene__ring--3 { width: 58%; height: 58%; border-color: rgba(77, 208, 225, 0.2); animation: aiSpin 12s linear infinite; } .ai-scene--hero .ai-scene__ring--4 { width: 38%; height: 38%; border: 1px solid rgba(240, 90, 40, 0.15); animation: aiSpin 8s linear infinite reverse; } @keyframes aiSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .ai-scene--hero .ai-scene__network { position: absolute; inset: 0; width: 100%; height: 100%; } .ai-scene--hero .ai-node { fill: #ffffff; filter: drop-shadow(0 0 6px rgba(77, 208, 225, 0.8)); animation: aiNodePulse 2.5s ease-in-out infinite; } .ai-scene--hero .ai-node--sm { fill: rgba(255, 255, 255, 0.7); animation-duration: 3s; } .ai-scene--hero .ai-node--1 { animation-delay: 0s; } .ai-scene--hero .ai-node--2 { animation-delay: 0.3s; } .ai-scene--hero .ai-node--3 { animation-delay: 0.6s; } .ai-scene--hero .ai-node--4 { animation-delay: 0.9s; } .ai-scene--hero .ai-node--5 { animation-delay: 1.2s; } .ai-scene--hero .ai-node--6 { animation-delay: 1.5s; } .ai-scene--hero .ai-line { stroke-dasharray: 200; animation: aiLineDraw 3.5s ease-in-out infinite; } .ai-scene--hero .ai-line--1 { animation-delay: 0s; } .ai-scene--hero .ai-line--2 { animation-delay: 0.15s; } .ai-scene--hero .ai-line--3 { animation-delay: 0.3s; } .ai-scene--hero .ai-line--4 { animation-delay: 0.45s; } .ai-scene--hero .ai-line--5 { animation-delay: 0.6s; } .ai-scene--hero .ai-line--6 { animation-delay: 0.75s; } /* Orbiting satellites */ .ai-orbit { position: absolute; top: 50%; left: 50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.06); transform: translate(-50%, -50%); } .ai-orbit span { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--color-accent, #F05A28); box-shadow: 0 0 12px var(--color-accent, #F05A28); } .ai-orbit--1 { width: 88%; height: 88%; animation: aiSpin 10s linear infinite; } .ai-orbit--2 { width: 68%; height: 68%; animation: aiSpin 7s linear infinite reverse; } .ai-orbit--2 span { background: var(--color-accent, #F05A28); box-shadow: 0 0 12px var(--color-accent, #F05A28); } .ai-orbit--3 { width: 48%; height: 48%; animation: aiSpin 5s linear infinite; } .ai-orbit--3 span { background: #ffffff; box-shadow: 0 0 10px #ffffff; width: 6px; height: 6px; margin-left: -3px; top: -3px; } /* Hero core */ .ai-core--hero { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; } .ai-core--hero .ai-core__inner { width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(145deg, #0000aa, var(--color-brand, #000064)); border: 2px solid rgba(255, 255, 255, 0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.05), 0 0 40px rgba(77, 208, 225, 0.3), 0 20px 60px rgba(0, 0, 0, 0.4); animation: aiCoreFloat 4s ease-in-out infinite; } .ai-core--hero .ai-core__pulse { position: absolute; inset: -15px; border-radius: 50%; border: 2px solid rgba(77, 208, 225, 0.35); animation: aiCorePulse 2.5s ease-out infinite; } .ai-core--hero .ai-core__pulse--2 { inset: -30px; border-color: rgba(240, 90, 40, 0.2); animation-delay: 1.2s; } .ai-core--hero .ai-core__icon { width: 40px; height: 40px; margin-bottom: 6px; } .ai-core--hero .ai-core__label { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; color: white; } .ai-core--hero .ai-core__sub { font-size: 0.6rem; color: var(--color-accent, #F05A28); letter-spacing: 0.08em; font-weight: 600; } /* Hero chips — small horizontal pills */ .ai-chips-bar { position: absolute; inset: 0; pointer-events: none; z-index: 25; } .ai-scene--hero .ai-chip { position: absolute; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0.25rem; box-sizing: border-box; width: auto; height: auto; min-height: 0; max-height: none; padding: 0.15rem 0.45rem; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 9999px; font-size: 0.5625rem; font-weight: 600; line-height: 1; color: var(--color-brand, #000064); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); white-space: nowrap; pointer-events: auto; } .ai-scene--hero .ai-chip svg { display: block; flex-shrink: 0; width: 8px; height: 8px; color: var(--color-brand, #000064); } .ai-scene--hero .ai-chip span { display: inline; line-height: 1; } .ai-scene--hero .ai-chip--1 { top: 4%; left: 4%; animation: aiFloat1 5s ease-in-out infinite; } .ai-scene--hero .ai-chip--2 { top: 4%; right: 4%; left: auto; animation: aiFloat2 6s ease-in-out infinite; } .ai-scene--hero .ai-chip--3 { top: 46%; right: 2%; left: auto; animation: aiFloat3 5.5s ease-in-out infinite; } .ai-scene--hero .ai-chip--4 { bottom: 10%; left: 4%; right: auto; animation: aiFloat4 4.5s ease-in-out infinite; } .ai-scene--hero .ai-chip--5 { bottom: 10%; right: 4%; left: auto; animation: aiFloat2 5s ease-in-out infinite 0.5s; } /* Data bars */ .ai-bars { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 5px; height: 50px; z-index: 5; opacity: 0.7; } .ai-bar { width: 8px; height: var(--h); background: linear-gradient(to top, var(--color-brand, #000064), var(--color-accent, #F05A28)); border-radius: 4px 4px 0 0; animation: aiBarPulse 2s ease-in-out infinite; } .ai-bar:nth-child(1) { animation-delay: 0s; } .ai-bar:nth-child(2) { animation-delay: 0.15s; } .ai-bar:nth-child(3) { animation-delay: 0.3s; } .ai-bar:nth-child(4) { animation-delay: 0.45s; } .ai-bar:nth-child(5) { animation-delay: 0.6s; } .ai-bar:nth-child(6) { animation-delay: 0.75s; } .ai-bar:nth-child(7) { animation-delay: 0.9s; } @keyframes aiBarPulse { 0%, 100% { opacity: 0.5; transform: scaleY(0.85); } 50% { opacity: 1; transform: scaleY(1); } } /* Scan line */ .ai-scanline { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; pointer-events: none; z-index: 8; } .ai-scanline::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(77, 208, 225, 0.6), transparent); animation: aiScan 4s linear infinite; } @keyframes aiScan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* Hero particles */ .ai-scene--hero .ai-particles { position: absolute; inset: 0; pointer-events: none; } .ai-scene--hero .ai-particle { position: absolute; width: 3px; height: 3px; background: var(--color-accent, #F05A28); border-radius: 50%; box-shadow: 0 0 6px var(--color-accent, #F05A28); animation: aiParticle 3.5s ease-in-out infinite; } .ai-scene--hero .ai-particle:nth-child(odd) { background: #ffffff; box-shadow: 0 0 4px rgba(255, 255, 255, 0.8); } .ai-scene--hero .ai-particle:nth-child(1) { top: 8%; left: 15%; animation-delay: 0s; } .ai-scene--hero .ai-particle:nth-child(2) { top: 20%; left: 80%; animation-delay: 0.4s; } .ai-scene--hero .ai-particle:nth-child(3) { top: 35%; left: 10%; animation-delay: 0.8s; } .ai-scene--hero .ai-particle:nth-child(4) { top: 50%; left: 90%; animation-delay: 1.2s; } .ai-scene--hero .ai-particle:nth-child(5) { top: 65%; left: 20%; animation-delay: 1.6s; } .ai-scene--hero .ai-particle:nth-child(6) { top: 80%; left: 70%; animation-delay: 2s; } .ai-scene--hero .ai-particle:nth-child(7) { top: 12%; left: 45%; animation-delay: 0.2s; } .ai-scene--hero .ai-particle:nth-child(8) { top: 28%; left: 60%; animation-delay: 0.6s; } .ai-scene--hero .ai-particle:nth-child(9) { top: 55%; left: 35%; animation-delay: 1s; } .ai-scene--hero .ai-particle:nth-child(10) { top: 72%; left: 50%; animation-delay: 1.4s; } .ai-scene--hero .ai-particle:nth-child(11) { top: 5%; left: 70%; animation-delay: 0.3s; } .ai-scene--hero .ai-particle:nth-child(12) { top: 42%; left: 75%; animation-delay: 0.7s; } .ai-scene--hero .ai-particle:nth-child(13) { top: 88%; left: 30%; animation-delay: 1.1s; } .ai-scene--hero .ai-particle:nth-child(14) { top: 18%; left: 25%; animation-delay: 1.5s; } .ai-scene--hero .ai-particle:nth-child(15) { top: 60%; left: 85%; animation-delay: 1.9s; } .ai-scene--hero .ai-particle:nth-child(16) { top: 38%; left: 48%; animation-delay: 0.5s; } .ai-scene--hero .ai-particle:nth-child(17) { top: 75%; left: 12%; animation-delay: 0.9s; } .ai-scene--hero .ai-particle:nth-child(18) { top: 45%; left: 92%; animation-delay: 1.3s; } .ai-scene--hero .ai-particle:nth-child(19) { top: 92%; left: 55%; animation-delay: 1.7s; } .ai-scene--hero .ai-particle:nth-child(20) { top: 25%; left: 88%; animation-delay: 2.1s; } .ai-scene--hero .ai-particle:nth-child(21) { top: 68%; left: 65%; animation-delay: 0.1s; } .ai-scene--hero .ai-particle:nth-child(22) { top: 32%; left: 32%; animation-delay: 0.55s; } .ai-scene--hero .ai-particle:nth-child(23) { top: 58%; left: 8%; animation-delay: 1.05s; } .ai-scene--hero .ai-particle:nth-child(24) { top: 85%; left: 88%; animation-delay: 1.55s; } .ai-scene--hero .ai-particle:nth-child(25) { top: 48%; left: 22%; animation-delay: 2.05s; } .ai-scene--hero .ai-particle:nth-child(26) { top: 15%; left: 58%; animation-delay: 0.35s; } .ai-scene--hero .ai-particle:nth-child(27) { top: 78%; left: 42%; animation-delay: 0.85s; } .ai-scene--hero .ai-particle:nth-child(28) { top: 52%; left: 68%; animation-delay: 1.35s; } .ai-scene--hero .ai-particle:nth-child(29) { top: 95%; left: 18%; animation-delay: 1.85s; } .ai-scene--hero .ai-particle:nth-child(30) { top: 62%; left: 38%; animation-delay: 2.25s; } @keyframes aiParticle { 0%, 100% { opacity: 0; transform: translateY(0) scale(0.4); } 50% { opacity: 1; transform: translateY(-18px) scale(1); } } /* ===== 3D Torus (legacy) ===== */ .torus-visual { position: relative; width: 100%; max-width: 480px; height: 360px; } @media (min-width: 1024px) { .torus-visual { height: 460px; max-width: 520px; } } .torus { position: absolute; transform-style: preserve-3d; } .torus--bg { top: 10%; left: -10%; width: 260px; height: 260px; opacity: 0.18; animation: torusBgFloat 10s ease-in-out infinite; } @media (min-width: 1024px) { .torus--bg { top: 5%; left: -25%; width: 340px; height: 340px; } } .torus--fg { bottom: 0; right: 0; width: 220px; height: 220px; animation: torusFgFloat 7s ease-in-out infinite; } @media (min-width: 640px) { .torus--fg { width: 280px; height: 280px; } } @media (min-width: 1024px) { .torus--fg { bottom: 5%; right: -5%; width: 320px; height: 320px; } } .torus__ring { width: 100%; height: 100%; border-radius: 50%; border: 28px solid rgba(255, 255, 255, 0.35); transform: rotateX(68deg) rotateZ(-20deg); box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.35); } .torus--fg .torus__ring { border: none; background: repeating-conic-gradient( from 0deg, #ffffff 0deg 22deg, var(--color-brand, #000064) 22deg 44deg ); -webkit-mask: radial-gradient(circle, transparent 52%, black 53%); mask: radial-gradient(circle, transparent 52%, black 53%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 0 30px rgba(255, 255, 255, 0.15); animation: torusSpin 20s linear infinite; } @keyframes torusBgFloat { 0%, 100% { transform: translateY(0) rotateX(65deg) rotateZ(10deg); } 50% { transform: translateY(-15px) rotateX(65deg) rotateZ(15deg); } } @keyframes torusFgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes torusSpin { from { transform: rotateX(68deg) rotateZ(-20deg); } to { transform: rotateX(68deg) rotateZ(340deg); } } @media (max-width: 1023px) { .hero-ultra { min-height: auto; padding: 5.5rem 0 3rem; } .hero-ultra__content { text-align: center; margin: 0 auto; } .hero-ultra__sub { margin-left: auto; margin-right: auto; } .hero-ultra__closing { margin-left: auto; margin-right: auto; text-align: left; } .hero-ultra__actions { justify-content: center; } .hero-ultra__visual { order: -1; min-height: 340px; } .hero-ultra .ai-scene--hero { max-width: min(100%, 400px); } .ai-scene--hero .ai-chip--1 { top: 2%; left: 2%; right: auto; } .ai-scene--hero .ai-chip--2 { top: 2%; right: 2%; left: auto; } .ai-scene--hero .ai-chip--3 { top: 44%; right: 0; left: auto; } .ai-scene--hero .ai-chip--4 { bottom: 8%; left: 2%; right: auto; } .ai-scene--hero .ai-chip--5 { bottom: 8%; right: 2%; left: auto; } } @media (max-width: 768px) { .ai-chips-bar { inset: auto 0 2%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3rem; padding: 0 0.5rem; } .ai-scene--hero .ai-chip { position: static; animation: none !important; transform: none !important; font-size: 0.5rem; padding: 0.12rem 0.4rem; } .ai-scene--hero .ai-chip svg { width: 7px; height: 7px; } } @media (max-width: 640px) { .hero-ultra__visual { display: none; } .hero-ultra .ai-scene--hero { max-width: min(100%, 320px); } .ai-core--hero .ai-core__inner { width: 115px; height: 115px; } } @media (max-width: 480px) { .hero-ultra__headline { font-size: 1.375rem; } .hero-ultra__btn { width: 100%; justify-content: center; } .hero-ultra .ai-scene--hero { max-width: min(100%, 280px); } .ai-core--hero .ai-core__inner { width: 100px; height: 100px; } .ai-bars { display: none; } } /* ===== Who We Are — Journey Timeline ===== */ .timeline { position: relative; overflow: hidden; padding-top: 3.5rem; } .timeline__heading { position: relative; z-index: 2; text-align: center; padding: 0 1.5rem 2.5rem; } .timeline__watermark { position: absolute; top: 0.5rem; left: 0; right: 0; text-align: center; font-size: clamp(3rem, 11vw, 8.5rem); font-weight: 800; color: rgba(255, 255, 255, 0.06); letter-spacing: 0.04em; z-index: 0; pointer-events: none; white-space: nowrap; line-height: 1; } .timeline__band { position: relative; z-index: 1; } .timeline__band--top { position: relative; background: linear-gradient(105deg, var(--nav-gradient-start, var(--color-brand, #000064)) 0%, var(--nav-gradient-middle, var(--color-brand-dark, #00004a)) 45%, var(--nav-gradient-end, var(--color-brand, #000064)) 100%); padding-top: 3.5rem; } .timeline__band--bottom { background: #ffffff; padding-bottom: 3.5rem; } .timeline__row { position: relative; display: grid; grid-template-columns: repeat(var(--tl-count), 1fr); gap: 1.25rem; } .timeline__cell { display: flex; min-height: 6rem; position: relative; justify-content: center; } .timeline__band--top .timeline__cell { align-items: flex-end; padding-bottom: 2rem; } .timeline__band--bottom .timeline__cell { align-items: flex-start; padding-top: 2rem; } /* Connector line from each content box to its dot on the axis */ .timeline__band--top .timeline__cell::after, .timeline__band--bottom .timeline__cell::after { content: ""; position: absolute; left: 50%; width: 2px; transform: translateX(-50%); background: repeating-linear-gradient( to bottom, var(--color-accent, #F05A28), var(--color-accent, #F05A28) 4px, transparent 4px, transparent 8px ); } .timeline__band--top .timeline__cell::after { bottom: 0; height: 2rem; } .timeline__band--bottom .timeline__cell::after { top: 0; height: 2rem; } /* Only draw the connector under/over cells that actually have content */ .timeline__band--top .timeline__cell:not(:has(.timeline__content))::after, .timeline__band--bottom .timeline__cell:not(:has(.timeline__content))::after { display: none; } .timeline__content { padding: 1.25rem 1.25rem 1.25rem; border-radius: 1rem; transition: transform 0.3s ease, box-shadow 0.3s ease; max-width: 15rem; } .timeline__content:hover { transform: translateY(-5px); } .timeline__badge { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; margin-bottom: 0.75rem; background: linear-gradient(135deg, var(--color-accent, #F05A28), var(--color-accent-dark, #d14a1c)); box-shadow: 0 6px 16px rgba(240, 90, 40, 0.35); overflow: hidden; flex-shrink: 0; } .timeline__badge i { width: 1.375rem; height: 1.375rem; color: #ffffff; } .timeline__badge img { width: 100%; height: 100%; object-fit: cover; display: block; } .timeline__badge--mobile { margin-bottom: 0.5rem; } .timeline__content--top { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(2px); } .timeline__content--top:hover { border-color: rgba(240, 90, 40, 0.5); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); } .timeline__content--bottom { background: #ffffff; border: 1px solid var(--color-border); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05); } .timeline__content--bottom:hover { border-color: rgba(240, 90, 40, 0.35); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1); } .timeline__title { font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.4rem; line-height: 1.3; } .timeline__desc { font-size: 0.8125rem; line-height: 1.6; margin: 0; } .timeline__content--top .timeline__title { color: #ffffff; } .timeline__content--top .timeline__desc { color: rgba(255, 255, 255, 0.75); } .timeline__content--bottom .timeline__title { color: var(--color-brand); } .timeline__content--bottom .timeline__desc { color: var(--color-muted); } .timeline__axis { position: relative; z-index: 1; background: linear-gradient(180deg, var(--color-brand, #000064) 0%, var(--color-brand, #000064) 50%, #ffffff 50%, #ffffff 100%); } .timeline__axis .timeline__row { min-height: 4.5rem; align-items: center; } .timeline__line { position: absolute; top: 50%; left: 0; right: 0; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--color-accent, #F05A28), #ffffff 50%, var(--color-accent, #F05A28)); opacity: 0.55; transform: translateY(-1.5px); } .timeline__cell--axis { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; position: relative; } .timeline__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent, #F05A28); border: 3px solid #ffffff; box-shadow: 0 0 0 5px rgba(240, 90, 40, 0.2); z-index: 2; } .timeline__year { font-size: 1.25rem; font-weight: 800; line-height: 1; white-space: nowrap; } .timeline__year--top { color: var(--color-accent, #F05A28); order: -1; } .timeline__year--bottom { color: var(--color-brand); } .timeline-mobile { display: none; } @media (max-width: 900px) { .timeline__band, .timeline__axis, .timeline__watermark { display: none; } .timeline-mobile { display: block; background: linear-gradient(165deg, var(--nav-gradient-start, var(--color-brand, #000064)) 0%, var(--nav-gradient-middle, var(--color-brand-dark, #00004a)) 45%, var(--nav-gradient-end, var(--color-brand, #000064)) 100%); padding: 3rem 1.5rem 2rem; } .timeline-mobile__item { display: flex; gap: 1rem; max-width: 640px; margin: 0 auto; } .timeline-mobile__marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; } .timeline-mobile__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--color-accent, #F05A28); flex-shrink: 0; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15); margin-top: 0.35rem; } .timeline-mobile__line { width: 2px; flex: 1; background: rgba(255, 255, 255, 0.25); margin-top: 0.35rem; } .timeline-mobile__content { padding-bottom: 2rem; } .timeline-mobile__year { display: block; color: var(--color-accent, #F05A28); font-weight: 800; font-size: 1.1875rem; } .timeline-mobile__title { color: #ffffff; font-size: 1.0625rem; font-weight: 700; margin: 0.3rem 0 0.4rem; line-height: 1.3; } .timeline-mobile__desc { color: rgba(255, 255, 255, 0.75); font-size: 0.875rem; line-height: 1.6; margin: 0; } } /* ============ Home: staggered pop-in for grid cards (overrides base transition) ============ */ .stat-card, .brand-card, .wwd-row { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease; transition-delay: calc(var(--i, 0) * 90ms); } .home-card.in-view .stat-card, .home-card.fade-in .stat-card, .home-card.in-view .brand-card, .home-card.fade-in .brand-card, .home-card.in-view .wwd-row, .home-card.fade-in .wwd-row { opacity: 1; transform: translateY(0); } .home-card.in-view .stat-card:hover, .home-card.fade-in .stat-card:hover { transform: translateY(-4px); } .home-card.in-view .brand-card:hover, .home-card.fade-in .brand-card:hover { transform: translateY(-6px); } .stat-card:hover, .brand-card:hover, .wwd-row:hover { transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .stat-card, .brand-card, .wwd-row { opacity: 1; transform: none; transition: none; } } /* ============ Trust strip: auto-scrolling logo marquee ============ */ .trust-strip { overflow: hidden; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-surface); padding: 1.6rem 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } .trust-strip__label { text-align: center; font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-muted); margin: 0 0 1.1rem; } .trust-strip__viewport { overflow: hidden; } .trust-strip__track { display: flex; align-items: center; gap: 3.5rem; width: max-content; animation: trust-marquee 32s linear infinite; } .trust-strip:hover .trust-strip__track { animation-play-state: paused; } @keyframes trust-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .trust-strip__item { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; opacity: 1; transition: transform 0.3s ease; } .trust-strip__item:hover { transform: translateY(-2px); } .trust-strip__item img { height: 26px; width: auto; object-fit: contain; display: block; } .trust-strip__badge { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--trust-accent, var(--color-brand)); color: #fff; flex-shrink: 0; } .trust-strip__badge i, .trust-strip__badge svg { width: 14px; height: 14px; } .trust-strip__name { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-foreground); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .trust-strip__track { animation: none; } } /* ============ Product showcase: browser-frame mockups ============ */ .showcase-row { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .showcase-row--reverse { grid-template-columns: 0.9fr 1.1fr; } .showcase-row--reverse .showcase-row-media { order: 2; } .showcase-row--reverse .showcase-row-copy { order: 1; } @media (max-width: 900px) { .showcase-row, .showcase-row--reverse { grid-template-columns: 1fr; } .showcase-row--reverse .showcase-row-media, .showcase-row--reverse .showcase-row-copy { order: initial; } } .showcase-mockup { position: relative; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--color-border); box-shadow: 0 20px 50px rgba(0, 0, 100, 0.1); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; will-change: transform; } .showcase-mockup:hover { box-shadow: 0 30px 70px rgba(0, 0, 100, 0.18); } .showcase-mockup__bar { display: flex; align-items: center; gap: 6px; padding: 0.7rem 0.9rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .showcase-mockup__dot { width: 9px; height: 9px; border-radius: 50%; background: #d8dce6; } .showcase-mockup__dot:nth-child(1) { background: #f0575a; } .showcase-mockup__dot:nth-child(2) { background: #f0b429; } .showcase-mockup__dot:nth-child(3) { background: #34b566; } .showcase-mockup__url { margin-left: 0.6rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-muted); background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 0.15rem 0.75rem; } .showcase-mockup img { display: block; width: 100%; height: auto; } .showcase-mockup__fallback { display: flex; align-items: center; justify-content: center; min-height: 220px; background: var(--color-surface); color: var(--color-brand, #000064); } .showcase-mockup__fallback i { width: 3rem; height: 3rem; } .showcase-row-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tag-accent, var(--color-brand)); } .showcase-row-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tag-accent, var(--color-accent)); } .showcase-row-title { margin-top: 0.75rem; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; color: var(--color-brand); } .showcase-row-desc { margin-top: 0.9rem; font-size: 1rem; line-height: 1.75; color: var(--color-muted); max-width: 34rem; } .showcase-row-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.5rem; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-brand); text-decoration: none; transition: gap 0.25s ease, color 0.25s ease; } .showcase-row-link i, .showcase-row-link svg { transition: transform 0.25s ease; } .showcase-row-link:hover { color: var(--color-accent); gap: 0.65rem; } .showcase-row-link:hover i, .showcase-row-link:hover svg { transform: translate(2px, -2px); } @media (prefers-reduced-motion: reduce) { .showcase-mockup { transition: none; } } /* ---- Quick Lead modal (Products page) ---- */ .ql-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.25rem; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; } .ql-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; } .ql-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 12, 30, 0.55); backdrop-filter: blur(2px); } .ql-modal__panel { position: relative; width: 100%; max-width: 26rem; background: #fff; border-radius: 1.25rem; padding: 2rem 1.75rem 1.75rem; box-shadow: 0 30px 60px rgba(0, 0, 40, 0.25); transform: translateY(12px) scale(0.98); transition: transform 0.2s ease; } .ql-modal.is-open .ql-modal__panel { transform: translateY(0) scale(1); } .ql-modal__close { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; color: var(--color-muted); background: var(--color-brand-soft); border: none; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .ql-modal__close:hover { color: var(--color-brand); } .ql-modal__eyebrow { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-brand); } .ql-modal__title { margin-top: 0.6rem; font-size: 1.35rem; font-weight: 800; color: var(--color-foreground); line-height: 1.3; } .ql-modal__desc { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-muted); } .ql-modal__form { margin-top: 1.5rem; } .ql-modal__field { margin-bottom: 0.9rem; } .ql-modal__error { margin-bottom: 0.9rem; font-size: 0.8125rem; font-weight: 600; color: #dc2626; } .ql-modal__state--success { text-align: center; padding-top: 0.5rem; } .ql-modal__success-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9999px; background: color-mix(in srgb, #16a34a 15%, white); color: #16a34a; margin-bottom: 0.75rem; } .ql-modal__state--success .btn-outline { margin-top: 1.25rem; }