/* Graceful Digitex v3 — shared styles (v4 design pass) Brand: navy + Digitex blue on white, electric-cyan glow used sparingly. Type: Bricolage Grotesque (display), Manrope (body), JetBrains Mono (data labels). */ :root { --ink: #071330; --ink-2: #1B2A4E; --muted: #4A5878; --navy: #071330; --navy-2: #0B1E52; --blue-800: #0E2E86; --blue-700: #1440C0; --blue-600: #1F56E0; --blue-500: #3D7BFF; --cyan: #38D6F5; --sky: #9CC2FF; --ice: #EAF1FF; --ice-2: #F5F8FF; --white: #FFFFFF; --line: #D9E3F5; --wa: #0F7A3D; --wa-hover: #0B6331; --wa-bright: #25D366; --radius: 20px; --radius-sm: 12px; --shadow: 0 1px 2px rgba(7,19,48,.05), 0 10px 30px rgba(7,19,48,.07); --shadow-lg: 0 30px 70px rgba(7,19,48,.18); --max: 1200px; --gutter: clamp(16px, 4vw, 32px); --font-head: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --font-body: "Manrope", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --ease-out: cubic-bezier(.16, 1, .3, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.65; overflow-x: hidden; } img, svg, video, canvas { max-width: 100%; display: block; } a { color: var(--blue-700); text-underline-offset: 3px; } a:hover { color: var(--blue-800); } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 .5em; color: var(--ink); font-weight: 700; font-variation-settings: "opsz" 96; } h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); font-weight: 800; } h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); } h3 { font-size: 1.28rem; line-height: 1.2; letter-spacing: -0.02em; font-variation-settings: "opsz" 24; } p { margin: 0 0 1em; } ul { padding-left: 1.2em; } :focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--blue-600); color: #fff; } .skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; } .skip:focus { left: 8px; color: #fff; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: clamp(72px, 10vw, 128px) 0; position: relative; } .section.tint { background: var(--ice-2); } .section.navy { background: var(--navy); color: #C9D7F5; overflow: clip; } /* clip (not hidden) so the sticky story visual keeps following the steps */ .section.navy h2, .section.navy h3 { color: #fff; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 600; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-700); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } .navy .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow { color: var(--cyan); } .lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); color: var(--muted); max-width: 60ch; } .navy .lead { color: #B7C8EC; } .section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 60px); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head.center .lead { margin-left: auto; margin-right: auto; } .section-head.center .eyebrow::before { display: none; } .hl { background: linear-gradient(100deg, var(--blue-600), var(--blue-500) 50%, #20B8E0); -webkit-background-clip: text; background-clip: text; color: transparent; } .navy .hl, .hero .hl { background: linear-gradient(100deg, #9CC2FF, var(--cyan)); -webkit-background-clip: text; background-clip: text; } /* Scroll progress */ .progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--blue-600), var(--cyan)); z-index: 60; pointer-events: none; } /* Buttons */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; overflow: hidden; isolation: isolate; transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease-out); } .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease-out); z-index: -1; } .btn:hover::after { transform: translateX(120%); } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: var(--blue-700); color: #fff; box-shadow: 0 10px 24px rgba(20,64,192,.28); } .btn-primary:hover { background: var(--blue-800); color: #fff; box-shadow: 0 14px 30px rgba(20,64,192,.36); } .btn-light { background: #fff; color: var(--blue-800); box-shadow: 0 10px 30px rgba(0,0,0,.18); } .btn-light:hover { background: var(--ice); color: var(--blue-800); } .btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; } .btn-ghost:hover { border-color: var(--blue-600); color: var(--blue-700); } .btn-ghost-light { border-color: rgba(255,255,255,.3); color: #fff; background: rgba(255,255,255,.04); backdrop-filter: blur(6px); } .btn-ghost-light:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); } .btn-wa { background: var(--wa); color: #fff; } .btn-wa:hover { background: var(--wa-hover); color: #fff; } .btn svg { width: 20px; height: 20px; flex: none; } .btn .arrow { transition: transform .3s var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } [data-magnetic] { will-change: transform; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s, background .25s; } .site-header.scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,.94); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 74px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; white-space: nowrap; } .brand svg { width: 38px; height: 38px; transition: transform .5s var(--ease-out); } .brand:hover svg { transform: rotate(-8deg) scale(1.06); } .brand span { color: var(--blue-600); } .nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav-links a { position: relative; display: block; padding: 8px 11px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .94rem; transition: color .2s, background .2s; } .nav-links a:hover { background: var(--ice); color: var(--blue-800); } .nav-links a[aria-current="page"] { color: var(--blue-700); background: var(--ice); } .nav-cta { margin-left: 8px; min-height: 44px; padding: 8px 18px; font-size: .94rem; } .nav-links a.nav-cta, .nav-links a.nav-cta:hover { color: #fff; } .nav-links a.nav-cta { background: var(--blue-700); } .nav-links a.nav-cta:hover { background: var(--blue-800); } .menu-btn { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); } .menu-btn svg { width: 22px; height: 22px; } @media (max-width: 1100px) { .menu-btn { display: inline-flex; } .nav-panel { position: fixed; inset: 74px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 12px var(--gutter) 24px; display: none; max-height: calc(100vh - 74px); overflow-y: auto; } .nav-panel.open { display: block; animation: drop .35s var(--ease-out); } .nav-links { flex-direction: column; align-items: stretch; gap: 2px; } .nav-links a { padding: 13px 14px; font-size: 1.05rem; border-radius: 12px; } .nav-cta { margin: 12px 0 0; width: 100%; } } @keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* ===== Atmosphere: aurora + interactive grid (hero, page heroes, CTA) ===== */ .atmos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .aurora { position: absolute; border-radius: 50%; opacity: .7; will-change: transform; } .aurora.a1 { width: 58vw; height: 58vw; max-width: 820px; max-height: 820px; left: -14%; top: -30%; background: radial-gradient(circle, #1F56E0 0%, transparent 65%); animation: drift1 18s ease-in-out infinite alternate; } .aurora.a2 { width: 46vw; height: 46vw; max-width: 680px; max-height: 680px; right: -10%; top: -18%; background: radial-gradient(circle, #38D6F5 0%, transparent 62%); opacity: .38; animation: drift2 22s ease-in-out infinite alternate; } .aurora.a3 { width: 52vw; height: 52vw; max-width: 760px; max-height: 760px; left: 30%; bottom: -45%; background: radial-gradient(circle, #5B3DF5 0%, transparent 62%); opacity: .42; animation: drift3 26s ease-in-out infinite alternate; } @keyframes drift1 { to { transform: translate(14%, 18%) scale(1.15); } } @keyframes drift2 { to { transform: translate(-18%, 22%) scale(.9); } } @keyframes drift3 { to { transform: translate(-20%, -12%) scale(1.1); } } .gridlines { position: absolute; inset: 0; background-image: linear-gradient(rgba(156,194,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(156,194,255,.09) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 85%); } .gridglow { position: absolute; inset: 0; background-image: linear-gradient(rgba(56,214,245,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(56,214,245,.55) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(260px circle at var(--gx, 70%) var(--gy, 40%), #000, transparent 70%); mask-image: radial-gradient(260px circle at var(--gx, 70%) var(--gy, 40%), #000, transparent 70%); opacity: 0; transition: opacity .4s; } .has-pointer .gridglow { opacity: 1; } .noise { position: absolute; inset: 0; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ===== Hero ===== */ .hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(170deg, #050E26 0%, #081A4A 55%, #0C2A7A 100%); isolation: isolate; } .hero-3d { position: absolute; right: -6%; top: 50%; width: min(64vw, 900px); aspect-ratio: 1; transform: translateY(-50%); opacity: .5; z-index: 0; pointer-events: none; } .hero-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; } .hero-3d.is-3d canvas { opacity: 1; } .hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 40px; min-height: min(820px, calc(100vh - 74px)); padding-top: 56px; padding-bottom: 120px; } .hero h1 { color: #fff; margin-bottom: 22px; } .hero h1 .line { display: block; } .rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; height: 1.08em; } .rotator > span { grid-area: 1 / 1; transition: transform .7s var(--ease-out), opacity .7s var(--ease-out); padding-bottom: .06em; } .rotator > span:not(.on) { transform: translateY(100%); opacity: 0; } .rotator > span.out { transform: translateY(-100%); opacity: 0; } .hero .lead { color: #C3D3F5; margin-bottom: 30px; } .hero-note { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: .92rem; color: #A9BFEA; } .hero-note span { display: inline-flex; align-items: center; gap: 8px; } .hero-note svg { width: 18px; height: 18px; color: var(--cyan); } .intro > * { animation: rise .9s var(--ease-out) both; } .intro > *:nth-child(2) { animation-delay: .08s; } .intro > *:nth-child(3) { animation-delay: .16s; } .intro > *:nth-child(4) { animation-delay: .24s; } .intro > *:nth-child(5) { animation-delay: .32s; } @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* Phone demo */ .stage { position: relative; justify-self: center; width: 100%; max-width: 420px; perspective: 1200px; } .phone { position: relative; width: 300px; max-width: 78vw; margin: 0 auto; aspect-ratio: 9 / 18.5; border-radius: 44px; padding: 11px; background: linear-gradient(145deg, #2A3A66, #0B1430 60%); box-shadow: 0 50px 90px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(156,194,255,.35), 0 0 0 1px rgba(0,0,0,.4); transform: rotateY(var(--ry, -10deg)) rotateX(var(--rx, 6deg)); transform-style: preserve-3d; transition: transform .6s var(--ease-out); animation: float 7s ease-in-out infinite; } @keyframes float { 50% { translate: 0 -12px; } } .screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: #0B141A; display: flex; flex-direction: column; } .wa-top { display: flex; align-items: center; gap: 10px; padding: 34px 14px 12px; background: #1F2C34; color: #E9EDEF; } .wa-top .av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-600), var(--cyan)); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: #fff; } .wa-top b { display: block; font-size: .88rem; line-height: 1.2; } .wa-top small { font-size: .72rem; color: #8696A0; } .notch { position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 90px; height: 22px; background: #000; border-radius: 20px; z-index: 3; } .chat { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; background: #0B141A radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 14px 14px; overflow: hidden; } .bubble { max-width: 84%; padding: 7px 10px 18px; border-radius: 10px; font-size: .8rem; line-height: 1.4; position: relative; color: #E9EDEF; animation: pop .45s var(--ease-out) both; } .bubble time { position: absolute; right: 8px; bottom: 3px; font-size: .62rem; color: rgba(233,237,239,.6); font-family: var(--font-mono); } .bubble.in { align-self: flex-start; background: #202C33; border-top-left-radius: 2px; } .bubble.out { align-self: flex-end; background: #005C4B; border-top-right-radius: 2px; } .bubble.typing { padding: 10px 14px; display: inline-flex; gap: 4px; } .bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; animation: blink 1.2s infinite; } .bubble.typing i:nth-child(2) { animation-delay: .15s; } .bubble.typing i:nth-child(3) { animation-delay: .3s; } @keyframes blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } .wa-input { display: flex; gap: 8px; align-items: center; padding: 8px 10px 14px; background: #0B141A; } .wa-input span { flex: 1; height: 34px; border-radius: 20px; background: #202C33; } .wa-input i { width: 34px; height: 34px; border-radius: 50%; background: #00A884; } .chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(156,194,255,.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; font-size: .82rem; font-weight: 600; box-shadow: 0 16px 40px rgba(0,0,0,.3); white-space: nowrap; opacity: 0; transform: translateY(10px) scale(.95); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); z-index: 4; } .chip.show { opacity: 1; transform: none; } .chip small { display: block; font-family: var(--font-mono); font-size: .66rem; color: var(--sky); font-weight: 500; } .chip .dot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(56,214,245,.18); color: var(--cyan); flex: none; } .chip .dot svg { width: 16px; height: 16px; } .chip.c1 { left: -8%; top: 16%; } .chip.c2 { right: -10%; top: 42%; } .chip.c3 { left: -4%; bottom: 14%; } .timer { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .demo-label { text-align: center; margin-top: 18px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #8FA6D6; } @media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 48px; gap: 48px; } .hero-3d { width: 120vw; right: -40%; top: 62%; opacity: .35; } .chip.c1 { left: 0; } .chip.c2 { right: 0; } .chip.c3 { left: 2%; } .phone { width: 250px; } } @media (max-width: 420px) { .chip { font-size: .74rem; padding: 8px 10px; } .chip .dot { display: none; } } /* ===== Proof counters ===== */ .proof { position: relative; z-index: 5; margin-top: -76px; } .proof-panel { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); overflow: hidden; backdrop-filter: blur(10px); } .proof-item { position: relative; padding: 32px 28px 28px; border-right: 1px solid var(--line); } .proof-item:last-child { border-right: 0; } .proof-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 3.6rem); color: var(--ink); letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 96; } .proof-num .u { color: var(--blue-600); } .proof-label { color: var(--ink-2); font-weight: 600; margin-top: 10px; } .proof-src { color: var(--muted); font-size: .8rem; margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .proof-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--blue-600), var(--cyan)); transform: scaleX(0); transform-origin: 0; transition: transform 1.6s var(--ease-out); } .counted .proof-bar { transform: scaleX(1); } .proof-foot { font-size: .86rem; color: var(--muted); margin: 18px 6px 0; } .tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; vertical-align: middle; } .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .tag-real { background: #E3F4EA; color: #0B6331; } .tag-target { background: #FFF1D6; color: #7A4B00; } .tag-demo { background: rgba(156,194,255,.16); color: #CFE0FF; } @media (max-width: 800px) { .proof { margin-top: -56px; } .proof-panel { grid-template-columns: 1fr; } .proof-item { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 22px; } .proof-item:last-child { border-bottom: 0; } } /* ===== Marquee ===== */ .marquee { padding: 46px 0 10px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-label { text-align: center; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .marquee-track { display: flex; gap: 14px; width: max-content; animation: scroll-x 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; color: var(--ink-2); white-space: nowrap; } .marquee-track span i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-600); } @keyframes scroll-x { to { transform: translateX(-50%); } } /* ===== Spotlight cards (all cards get this) ===== */ .spot { position: relative; isolation: isolate; } .spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(61,123,255,.9), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; pointer-events: none; z-index: 2; } .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(61,123,255,.08), transparent 45%); opacity: 0; transition: opacity .35s; pointer-events: none; z-index: -1; } .spot:hover::before, .spot:hover::after { opacity: 1; } .navy .spot::after { background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(56,214,245,.12), transparent 45%); } [data-tilt] { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--lift, 0px)); transition: transform .5s var(--ease-out), box-shadow .35s, border-color .35s; } [data-tilt]:hover { --lift: -4px; } /* Cards & grids */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .card:hover { box-shadow: 0 24px 50px rgba(7,19,48,.12); } .card h3 { margin-bottom: .45em; } .card p:last-child, .card ul:last-child { margin-bottom: 0; } .icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ice), #fff); border: 1px solid var(--line); color: var(--blue-700); margin-bottom: 20px; transition: transform .5s var(--ease-out), background .3s, color .3s; } .icon svg { width: 24px; height: 24px; } .card:hover .icon, .tile:hover .icon { transform: rotate(-6deg) scale(1.08); background: var(--blue-700); color: #fff; border-color: var(--blue-700); } .ticks { list-style: none; padding: 0; margin: 0; } .ticks li { position: relative; padding-left: 28px; margin: 0 0 10px; } .ticks li::before { content: ""; position: absolute; left: 0; top: .42em; width: 18px; height: 18px; border-radius: 50%; background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231440C0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; } .navy .ticks li::before { background-color: rgba(156,194,255,.18); } .card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; margin-top: 14px; } .card-link::after { content: "→"; transition: transform .3s var(--ease-out); } .card-link:hover::after, .card:hover .card-link::after { transform: translateX(4px); } /* ===== Wait-time simulator ===== */ .sim { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .sim-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 18px; } .sim-controls button { font: inherit; font-weight: 700; padding: 12px 18px; min-height: 48px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; transition: all .25s var(--ease-out); } .sim-controls button:hover { border-color: var(--blue-600); color: var(--blue-700); } .sim-controls button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; } .sim-verdict { font-family: var(--font-head); font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.2; min-height: 2.6em; color: var(--ink); } .sim-verdict b { color: var(--blue-700); } .sim-verdict.bad b { color: #B42318; } .sim-phone { background: #0B141A radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 14px 14px; border-radius: 28px; padding: 22px 16px; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; box-shadow: var(--shadow-lg); border: 8px solid #16213E; } .sim-phone .bubble { font-size: .92rem; max-width: 80%; } .sim-gap { align-self: center; font-family: var(--font-mono); font-size: .7rem; color: #8696A0; background: #182229; padding: 4px 10px; border-radius: 8px; animation: pop .45s var(--ease-out) both; } @media (max-width: 860px) { .sim { grid-template-columns: 1fr; } } /* ===== Story (how it works) ===== */ .story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; } .story-visual { position: sticky; top: 110px; height: min(520px, 70vh); border-radius: 28px; background: linear-gradient(160deg, #0B1E52, #071330); border: 1px solid rgba(156,194,255,.2); overflow: hidden; } .story-visual .atmos .aurora { opacity: .45; } .scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; opacity: 0; transform: scale(.94) translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .scene.on { opacity: 1; transform: none; } .story-track { position: relative; } .story-steps { list-style: none; margin: 0; padding: 0; position: relative; } .story-track::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: rgba(156,194,255,.18); } .story-track .rail { position: absolute; left: 21px; top: 10px; width: 2px; height: calc((100% - 20px) * var(--sp, 0)); background: linear-gradient(var(--cyan), var(--blue-500)); transition: height .2s linear; } .story-step { position: relative; padding: 0 0 0 70px; min-height: 40vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .5s; } .story-step.on { opacity: 1; } .story-step .num { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: .85rem; background: var(--navy); border: 2px solid rgba(156,194,255,.35); color: var(--sky); transition: all .4s var(--ease-out); } .story-step.on .num { background: var(--blue-600); border-color: var(--cyan); color: #fff; box-shadow: 0 0 0 8px rgba(56,214,245,.12); } .story-step h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .story-step p { color: #B7C8EC; max-width: 46ch; margin: 0; } .story-step .mini { display: none; } /* scene mockups */ .mock { width: 100%; max-width: 330px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px rgba(0,0,0,.35); overflow: hidden; font-size: .86rem; } .mock-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; } .mock-head .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-600), var(--cyan)); } .mock-head b { display: block; font-size: .84rem; } .mock-head small { color: var(--muted); font-size: .72rem; } .mock-img { height: 150px; background: linear-gradient(135deg, #1440C0, #38D6F5); position: relative; overflow: hidden; } .mock-img::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 18%; height: 34%; border-radius: 40px 60px 14px 14px; background: rgba(255,255,255,.88); box-shadow: 0 10px 0 -4px rgba(7,19,48,.25); } .mock-cta { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--ice-2); font-weight: 700; } .mock-cta span:last-child { background: var(--blue-700); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: .78rem; } .mock-form { padding: 18px; display: grid; gap: 10px; } .mock-form label { font-size: .72rem; margin: 0; color: var(--muted); } .mock-form div { height: 34px; border-radius: 8px; border: 1.5px solid var(--line); display: flex; align-items: center; padding: 0 10px; font-size: .8rem; color: var(--ink-2); } .mock-form .send { background: var(--blue-700); color: #fff; justify-content: center; font-weight: 700; border: 0; } .mock-chat { background: #0B141A; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; } .mock-report { padding: 18px; } .mock-report .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .8rem; } .mock-report .row b { font-family: var(--font-mono); } .bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: 14px; } .bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--blue-500), var(--blue-700)); height: 10%; transition: height 1s var(--ease-out); } .scene.on .bars i:nth-child(1) { height: 35%; } .scene.on .bars i:nth-child(2) { height: 52%; } .scene.on .bars i:nth-child(3) { height: 44%; } .scene.on .bars i:nth-child(4) { height: 70%; } .scene.on .bars i:nth-child(5) { height: 88%; } .scene-caption { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #8FA6D6; } @media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story-visual { display: none; } .story-step { min-height: 0; padding-bottom: 40px; opacity: 1; } .story-step .num { top: 0; translate: 0 0; } .story-step .mini { display: block; margin-top: 18px; } .story-step .mini .mock { max-width: 100%; box-shadow: 0 16px 30px rgba(0,0,0,.3); } } /* ===== Bento services ===== */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(220px, auto); gap: 18px; } .tile { grid-column: span 2; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); } .tile.wide { grid-column: span 3; } .tile.full { grid-column: 1 / -1; } .tile.dark { background: linear-gradient(160deg, #0B1E52, #071330); color: #B7C8EC; border-color: transparent; } .tile.dark h3 { color: #fff; } .tile.dark .icon { background: rgba(156,194,255,.12); border-color: rgba(156,194,255,.2); color: var(--cyan); } .tile p { margin: 0; } .tile .art { margin-top: auto; padding-top: 22px; } .flow { position: relative; height: 70px; } .flow svg { width: 100%; height: 70px; overflow: visible; } .flow .path { fill: none; stroke: rgba(156,194,255,.35); stroke-width: 2; stroke-dasharray: 4 6; } .flow .pulse { fill: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); } .flow .node { fill: #0B1E52; stroke: var(--sky); stroke-width: 2; } .slides { position: relative; height: 96px; } .slides i { position: absolute; left: 50%; bottom: 0; width: 120px; height: 76px; margin-left: -60px; border-radius: 10px; background: linear-gradient(135deg, #fff, var(--ice)); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .6s var(--ease-out); } .slides i:nth-child(1) { background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); } .slides i:nth-child(2) { transform: rotate(-4deg); } .slides i:nth-child(3) { transform: rotate(4deg); } .tile:hover .slides i:nth-child(1) { transform: translateY(-6px); } .tile:hover .slides i:nth-child(2) { transform: translateX(-70px) rotate(-12deg); } .tile:hover .slides i:nth-child(3) { transform: translateX(70px) rotate(12deg); } .slides i:nth-child(1) { z-index: 3; } .slides i:nth-child(2) { z-index: 1; } .slides i:nth-child(3) { z-index: 2; } .adcard { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--ice-2); } .adcard .thumb { width: 54px; height: 54px; border-radius: 10px; background: linear-gradient(135deg, var(--blue-700), var(--cyan)); flex: none; } .adcard .lines { flex: 1; display: grid; gap: 6px; } .adcard .lines i { height: 8px; border-radius: 4px; background: #D3DEF3; } .adcard .lines i:nth-child(2) { width: 70%; } .adcard .go { font-size: .74rem; font-weight: 800; color: #fff; background: var(--blue-700); padding: 6px 10px; border-radius: 8px; } .speed { display: flex; align-items: center; gap: 14px; } .speed .meter { flex: 1; height: 10px; border-radius: 10px; background: var(--ice); overflow: hidden; } .speed .meter i { display: block; height: 100%; width: 20%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-600), var(--cyan)); transition: width 1.4s var(--ease-out); } .in .speed .meter i, .tile:hover .speed .meter i { width: 94%; } .speed b { font-family: var(--font-mono); font-size: .8rem; color: var(--blue-700); } .reel { display: flex; gap: 10px; } .reel i { width: 46px; aspect-ratio: 9/16; border-radius: 8px; background: linear-gradient(160deg, var(--ice), #C9D8F6); transition: transform .5s var(--ease-out); } .reel i:nth-child(2) { background: linear-gradient(160deg, var(--blue-600), var(--cyan)); } .tile:hover .reel i:nth-child(1) { transform: translateY(-8px); } .tile:hover .reel i:nth-child(2) { transform: translateY(-14px); } .tile:hover .reel i:nth-child(3) { transform: translateY(-6px); } .compass { display: flex; flex-wrap: wrap; gap: 8px; } .compass span { font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(156,194,255,.12); color: #DCE6FA; border: 1px solid rgba(156,194,255,.2); } @media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); } .tile, .tile.wide { grid-column: span 1; } .tile.full { grid-column: 1 / -1; } } @media (max-width: 620px) { .bento { grid-template-columns: 1fr; } } /* ===== Work cards (home) ===== */ .work-card { position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; color: inherit; } .work-card:hover { color: inherit; } .work-card .cover { position: relative; height: 200px; overflow: hidden; background: linear-gradient(140deg, #0B1E52, #1F56E0); display: grid; place-items: center; } .work-card .cover img, .work-card .cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .work-card:hover .cover img { transform: scale(1.06); } .work-card .cover .name { position: relative; font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.04em; color: #fff; transition: transform .8s var(--ease-out); } .work-card:hover .cover .name { transform: scale(1.06); } .work-card .cover .ring { position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(156,194,255,.25); transition: transform 1.2s var(--ease-out); } .work-card .cover .ring + .ring { width: 380px; height: 380px; } .work-card:hover .cover .ring { transform: scale(1.15); } .work-card .body { padding: 26px; display: flex; flex-direction: column; flex: 1; } .work-card .big { font-family: var(--font-head); font-weight: 800; font-size: 2.1rem; letter-spacing: -0.04em; color: var(--blue-700); line-height: 1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; } .work-card .card-link { margin-top: auto; padding-top: 14px; } .case-meta { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--blue-700); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; } /* Page hero (inner pages) */ .page-hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(170deg, #050E26 0%, #0B1E52 100%); color: #fff; padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 7vw, 88px); } .page-hero .wrap { position: relative; z-index: 2; } .page-hero h1 { color: #fff; max-width: 18ch; font-size: clamp(2.4rem, 5.4vw, 4.2rem); } .page-hero .lead { color: #C3D3F5; } .crumbs { font-family: var(--font-mono); font-size: .78rem; color: #8FA6D6; margin-bottom: 18px; } .crumbs a { color: #C3D3F5; } /* Case studies (portfolio page) */ .case { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--shadow); } .case + .case { margin-top: 32px; } .case-media { background: linear-gradient(150deg, #0E2E86, #1F56E0); position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; } .case-media img, .case-media video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .case-media video { object-fit: contain; background: #04070F; } .case-media .media-label { position: relative; z-index: 1; font-family: var(--font-head); font-weight: 800; font-size: 2.2rem; letter-spacing: -0.04em; text-align: center; padding: 24px; line-height: 1.1; } .case-media .ring { position: absolute; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(156,194,255,.28); animation: breathe 6s ease-in-out infinite; } .case-media .ring + .ring { width: 440px; height: 440px; animation-delay: -3s; } @keyframes breathe { 50% { transform: scale(1.08); opacity: .6; } } .case-body { padding: clamp(26px, 4vw, 44px); } .case h3 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); } .case dl { margin: 18px 0 0; display: grid; gap: 16px; } .case dt { font-family: var(--font-mono); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .case dd { margin: 4px 0 0; } .results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin-top: 22px; } .result { background: var(--ice-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; min-width: 0; overflow-wrap: anywhere; } .result b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.35rem, 2vw, 1.65rem); color: var(--blue-700); letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; } .result span { font-size: .9rem; color: var(--ink-2); } .source { font-size: .82rem; color: var(--muted); margin-top: 14px; } @media (max-width: 860px) { .case { grid-template-columns: 1fr; } .case-media { min-height: 230px; } } /* Pricing */ .pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; } .plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 30px 24px; box-shadow: var(--shadow); position: relative; } .plan.featured { background: linear-gradient(170deg, #0B1E52, #071330); color: #C3D3F5; border-color: transparent; box-shadow: 0 30px 70px rgba(20,64,192,.35); } .plan.featured h3, .plan.featured .price { color: #fff; } .plan.featured .plan-for, .plan.featured .price-note, .plan.featured .price small { color: #A9BFEA; } .plan.featured .ticks li::before { background-color: rgba(156,194,255,.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338D6F5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } .plan-badge { position: absolute; top: -13px; left: 24px; background: linear-gradient(90deg, var(--blue-600), var(--cyan)); color: #fff; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } .plan h3 { font-size: 1.4rem; margin-bottom: 4px; } .plan-for { color: var(--muted); font-size: .95rem; min-height: 3.2em; } .price { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 2vw, 2rem); white-space: nowrap; letter-spacing: -0.04em; color: var(--ink); margin: 12px 0 2px; font-variant-numeric: tabular-nums; } .price small { font-family: var(--font-body); font-size: .92rem; font-weight: 600; color: var(--muted); letter-spacing: 0; } .price-note { font-size: .84rem; color: var(--muted); margin-bottom: 18px; } .plan .ticks { margin-bottom: 24px; font-size: .95rem; } .plan .btn { margin-top: auto; width: 100%; } .plan.featured .btn-primary { background: #fff; color: var(--blue-800); } @media (max-width: 1100px) { .pricing { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .pricing { grid-template-columns: 1fr; } } .plan-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 34px; } .plan-strip a { display: block; padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); } .plan-strip a b { display: block; font-family: var(--font-head); font-size: 1.15rem; letter-spacing: -0.02em; } .plan-strip a span { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.04em; color: var(--blue-700); } .plan-strip a small { display: block; color: var(--muted); font-size: .84rem; margin-top: 4px; } @media (max-width: 900px) { .plan-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .plan-strip { grid-template-columns: 1fr; } } /* Founder */ .founder { display: grid; grid-template-columns: 400px 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; } .founder-photo { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 576 / 614; background: var(--ice); } .founder-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .founder-photo:hover img { transform: scale(1.04); } .founder-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); } @media (max-width: 860px) { .founder { grid-template-columns: 1fr; } .founder-photo { max-width: 360px; } } blockquote.pull { margin: 0 0 22px; font-family: var(--font-head); font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.2; letter-spacing: -0.03em; color: var(--ink); font-weight: 600; } blockquote.pull::before { content: "\201C"; display: block; font-size: 4rem; line-height: .6; color: var(--blue-600); margin-bottom: 10px; } /* CTA band */ .cta-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(140deg, #0B1E52, #071330); color: #fff; border-radius: 32px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; } .cta-band > div:not(.atmos) { position: relative; z-index: 2; } .cta-band h2 { color: #fff; } .cta-band p { color: #C3D3F5; margin: 0; } .cta-band .btn-row { justify-content: flex-end; } @media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } .cta-band .btn-row { justify-content: flex-start; } } /* Forms */ .form-card { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: clamp(22px, 4vw, 38px); box-shadow: var(--shadow-lg); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } } label { display: block; font-weight: 700; font-size: .93rem; margin-bottom: 6px; color: var(--ink-2); } .opt { font-weight: 500; color: var(--muted); } input, select, textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--ice-2); border: 1.5px solid #C7D4EE; border-radius: 14px; padding: 12px 14px; min-height: 50px; transition: border-color .2s, box-shadow .2s, background .2s; } textarea { min-height: 120px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; background: #fff; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(31,86,224,.15); } .field-error { color: #B42318; font-size: .86rem; margin-top: 5px; display: none; } .invalid input, .invalid select, .invalid textarea { border-color: #B42318; } .invalid .field-error { display: block; } .hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } .form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; } .form-foot small { color: var(--muted); max-width: 46ch; } .form-status { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: #E3F4EA; color: #0B4F28; display: none; } .form-status.show { display: block; animation: pop .45s var(--ease-out); } .form-status.warn { background: #FFF1D6; color: #5C3900; } /* FAQ */ .faq { max-width: 880px; } .faq details { border: 1px solid var(--line); border-radius: 18px; background: #fff; margin-bottom: 12px; transition: box-shadow .3s, border-color .3s; } .faq details:hover { border-color: #B9CBEF; } .faq details[open] { box-shadow: var(--shadow); border-color: #B9CBEF; } .faq summary { cursor: pointer; list-style: none; padding: 22px 60px 22px 24px; font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ice); color: var(--blue-700); font-family: var(--font-body); font-weight: 700; transition: transform .35s var(--ease-out), background .3s, color .3s; } .faq details[open] summary::after { transform: rotate(45deg); background: var(--blue-700); color: #fff; } .faq .answer { padding: 0 24px 22px; color: var(--ink-2); animation: pop .4s var(--ease-out); } /* Blog */ .post-card { display: flex; flex-direction: column; } .post-card .meta { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em; } .post-card h3 a { color: var(--ink); text-decoration: none; } .post-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .post-card h3 a:hover { color: var(--blue-700); } .article { max-width: 720px; margin: 0 auto; } .article h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 1.6em; } .article p, .article li { font-size: 1.08rem; } .article .byline { color: var(--muted); font-size: .95rem; margin-bottom: 28px; } .callout { background: var(--ice-2); border-left: 4px solid var(--blue-600); padding: 18px 20px; border-radius: 0 14px 14px 0; margin: 24px 0; } /* Team */ .person .avatar { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--ice); color: var(--blue-700); margin-bottom: 16px; transition: transform .5s var(--ease-out); } .person:hover .avatar { transform: rotate(-6deg) scale(1.06); } .person .avatar svg { width: 30px; height: 30px; } .role { color: var(--blue-700); font-weight: 700; font-size: .92rem; margin-bottom: 8px; } /* Footer */ .site-footer { position: relative; overflow: hidden; background: var(--navy); color: #A9BFEA; padding: 72px 0 28px; } .site-footer::before { content: ""; position: absolute; width: 700px; height: 700px; right: -260px; top: -380px; border-radius: 50%; background: radial-gradient(circle, rgba(31,86,224,.45), transparent 65%); pointer-events: none; } .site-footer .wrap { position: relative; } .site-footer a { color: #DCE6FA; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; } .footer-grid h4 { color: #fff; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: 10px; } .site-footer .brand { color: #fff; } .site-footer .brand span { color: var(--sky); } .footer-big { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.6rem, 9vw, 7.5rem); letter-spacing: -0.05em; line-height: .9; margin: 56px 0 0; background: linear-gradient(180deg, rgba(156,194,255,.35), rgba(156,194,255,.04)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; } .footer-bottom { border-top: 1px solid rgba(156,194,255,.15); margin-top: 28px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .88rem; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } /* Floating WhatsApp */ .wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(15,122,61,.45); transition: transform .3s var(--ease-out), background .2s; } .wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa-bright); animation: ping 2.6s var(--ease-out) infinite; } @keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } } .wa-float:hover { background: var(--wa-hover); color: #fff; transform: translateY(-3px) scale(1.04); } .wa-float svg { width: 30px; height: 30px; } /* Misc */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } .note { font-size: .9rem; color: var(--muted); } .pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; } .pill-list li { background: var(--ice); color: var(--blue-800); font-weight: 600; font-size: .9rem; padding: 7px 14px; border-radius: 999px; transition: background .25s, color .25s, transform .25s var(--ease-out); } .pill-list li:hover { background: var(--blue-700); color: #fff; transform: translateY(-2px); } .contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .contact-list li { display: flex; gap: 14px; align-items: flex-start; } .contact-list .icon { margin: 0; flex: none; } .center { text-align: center; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } /* Reveal animation (only when JS + motion allowed) */ .js .reveal { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease-out) var(--d, 0s), translate .9s var(--ease-out) var(--d, 0s), transform .5s var(--ease-out), box-shadow .35s, border-color .35s; } .js .reveal.in { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; translate: 0 0; transition: none; } .aurora, .phone, .marquee-track, .wa-float::before, .case-media .ring { animation: none !important; } .intro > * { animation: none; } .scene { transition: none; } * { transition-duration: .01ms !important; } [data-tilt] { transform: none !important; } } /* ===== Round 2 fixes: interactive case cards, finished bento art, story, simulator ===== */ /* Our Work: interactive panels inside the blue cards */ .case-demo { padding: clamp(18px, 3vw, 32px); align-items: center; } .demo-panel { position: relative; z-index: 1; width: 100%; max-width: 420px; display: grid; gap: 14px; } .demo-brand { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.1; } .demo-brand small { display: block; margin-top: 2px; font-family: var(--font-body); font-weight: 600; font-size: .85rem; letter-spacing: 0; color: #C9D7F5; } .demo-kicker { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #CFE0FF; } .demo-kicker .tap { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(56,214,245,.6); animation: tapPulse 1.8s infinite; flex: none; } @keyframes tapPulse { 70% { box-shadow: 0 0 0 10px rgba(56,214,245,0); } 100% { box-shadow: 0 0 0 0 rgba(56,214,245,0); } } .demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .demo-tabs button { font: inherit; font-size: .85rem; font-weight: 700; color: #DCE7FF; background: rgba(255,255,255,.08); border: 1.5px solid rgba(156,194,255,.35); border-radius: 999px; padding: 9px 14px; min-height: 40px; cursor: pointer; transition: all .25s var(--ease-out); } .demo-tabs button:hover { background: rgba(255,255,255,.16); } .demo-tabs button[aria-selected="true"] { background: #fff; color: var(--blue-800); border-color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.25); } .demo-view { display: none; } .demo-view.on { display: block; animation: demoIn .5s var(--ease-out) both; } @keyframes demoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .flow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 6px; } .fs { background: rgba(255,255,255,.1); border: 1px solid rgba(156,194,255,.3); border-radius: 14px; padding: 10px 8px; text-align: center; min-width: 0; backdrop-filter: blur(6px); } .fs small { display: block; font-size: .66rem; font-weight: 700; color: #BFD3F7; line-height: 1.2; min-height: 2.4em; } .fs b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.05rem, 2.2vw, 1.4rem); letter-spacing: -0.03em; line-height: 1.15; color: #fff; overflow-wrap: anywhere; } .fs span { font-size: .7rem; color: #BFD3F7; } .fs.hi { background: #fff; border-color: #fff; } .fs.hi small, .fs.hi span { color: var(--muted); } .fs.hi b { color: var(--blue-700); } .fs-arrow { align-self: center; width: 14px; height: 14px; border-top: 3px solid var(--cyan); border-right: 3px solid var(--cyan); rotate: 45deg; margin-inline: -2px; animation: nudge 1.4s ease-in-out infinite; } @keyframes nudge { 50% { translate: 4px -4px; } } .demo-cap { margin: 0; font-size: .85rem; color: #D6E2FA; line-height: 1.45; } .auto-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .auto-flow li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(156,194,255,.3); border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: .92rem; opacity: .55; animation: flowStep 6s infinite; } .auto-flow li span { width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); color: var(--navy); display: grid; place-items: center; font-family: var(--font-mono); font-size: .75rem; flex: none; } .auto-flow li:nth-child(2) { animation-delay: 1.5s; } .auto-flow li:nth-child(3) { animation-delay: 3s; } .auto-flow li:nth-child(4) { animation-delay: 4.5s; } @keyframes flowStep { 0%, 100% { opacity: .55; transform: none; } 6%, 22% { opacity: 1; transform: translateX(6px); background: rgba(56,214,245,.22); } 28% { opacity: .55; transform: none; } } .browser { background: #fff; color: var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.3); } .browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #EEF3FC; border-bottom: 1px solid var(--line); } .browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #C5D2EC; } .browser-bar span { margin-left: 8px; flex: 1; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); background: #fff; border-radius: 999px; padding: 3px 10px; } .browser-body { padding: 16px; min-height: 230px; } .est-step { display: none; gap: 12px; align-content: start; } .est-step.on { display: grid; animation: demoIn .45s var(--ease-out) both; } .est-step > b { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: -0.02em; } .est-step p { margin: 0; font-size: .9rem; color: var(--ink-2); } .est-ok { color: #0B6331; } .est-chips { display: flex; flex-wrap: wrap; gap: 8px; } .est-chips button { font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink-2); background: var(--ice-2); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 12px; min-height: 38px; cursor: pointer; transition: all .2s; } .est-chips button:hover { border-color: var(--blue-600); } .est-chips button[aria-pressed="true"] { background: var(--blue-700); border-color: var(--blue-700); color: #fff; } .est-card { border-radius: 14px; padding: 14px; color: #fff; background: linear-gradient(135deg, var(--blue-800), var(--blue-500)); display: grid; gap: 2px; } .est-name { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; } .est-card small { color: #DCE7FF; } .est-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .est-book { font: inherit; font-weight: 800; font-size: .88rem; color: #fff; background: var(--blue-700); border: 0; border-radius: 999px; padding: 10px 18px; min-height: 42px; cursor: pointer; animation: tapGlow 2s infinite; } .est-book:hover { background: var(--blue-600); } @keyframes tapGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,86,224,.45); } 60% { box-shadow: 0 0 0 9px rgba(31,86,224,0); } } .est-back { font: inherit; font-weight: 700; font-size: .85rem; color: var(--blue-700); background: none; border: 0; padding: 8px 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .est-wa { font-size: .75rem; font-weight: 800; color: #fff; background: var(--wa); border-radius: 999px; padding: 6px 12px; } /* Home: bento tiles show finished mini-previews (no empty placeholder shapes) */ .adcard .thumb { display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .62rem; text-align: center; line-height: 1.1; padding: 4px; } .adcard .lines { gap: 2px; min-width: 0; } .adcard .lines b { font-size: .82rem; line-height: 1.25; color: var(--ink); } .adcard .lines small { font-size: .7rem; color: var(--muted); } .adcard .go { animation: tapGlow 2s infinite; white-space: nowrap; } .speed { align-items: flex-end; justify-content: space-between; } .speed .pg { flex: 1; max-width: 220px; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--ice-2); } .speed .pg b { font-family: var(--font-head); font-size: .9rem; color: var(--ink); } .speed .pg-btn { justify-self: start; font-size: .72rem; font-weight: 800; color: #fff; background: var(--blue-700); padding: 5px 10px; border-radius: 8px; opacity: .3; transition: opacity .4s 1.2s; } .in .speed .pg-btn, .tile:hover .speed .pg-btn { opacity: 1; } .speed .ready { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .75rem; font-weight: 600; color: #0B6331; background: #E3F4EA; padding: 5px 10px; border-radius: 999px; opacity: 0; transition: opacity .4s 1.4s; } .speed .ready svg { width: 14px; height: 14px; } .in .speed .ready, .tile:hover .speed .ready { opacity: 1; } .reel { gap: 10px; align-items: flex-end; } .reel span { width: 64px; aspect-ratio: 9/14; border-radius: 10px; padding: 8px 6px; display: flex; flex-direction: column; justify-content: space-between; font-size: .68rem; font-weight: 800; line-height: 1.15; color: var(--ink-2); background: linear-gradient(160deg, var(--ice), #C9D8F6); transition: transform .5s var(--ease-out); } .reel span em { font-style: normal; font-family: var(--font-mono); font-size: .62rem; color: var(--blue-700); } .reel span:nth-child(2) { background: linear-gradient(160deg, var(--blue-600), var(--cyan)); color: #fff; } .reel span:nth-child(2) em { color: #fff; } .reel span:nth-child(3) { background: linear-gradient(160deg, var(--navy-2), var(--blue-600)); color: #fff; } .reel span:nth-child(3) em { color: var(--cyan); } .tile:hover .reel span:nth-child(1) { transform: translateY(-8px); } .tile:hover .reel span:nth-child(2) { transform: translateY(-14px); } .tile:hover .reel span:nth-child(3) { transform: translateY(-6px); } .slides i { display: flex; align-items: flex-end; padding: 8px 10px; font-style: normal; font-size: .72rem; font-weight: 800; color: var(--ink-2); line-height: 1.1; } .slides i:nth-child(1) { color: #fff; } /* Home: the "reply problem" simulator is obviously tappable */ .sim-hint { display: flex; align-items: center; gap: 10px; margin: 22px 0 0; font-weight: 800; color: var(--blue-700); font-size: 1.02rem; } .sim-hint .hand { display: inline-block; animation: nudgeX 1.2s ease-in-out infinite; } @keyframes nudgeX { 50% { transform: translateX(7px); } } .sim-controls { margin-top: 14px; } .sim-controls button { border: 2px solid var(--blue-600); color: var(--blue-700); box-shadow: 0 6px 16px rgba(31,86,224,.15); } .sim-controls button[aria-pressed="false"] { animation: tapGlow 2s infinite; } .sim.touched .sim-controls button[aria-pressed="false"], .sim.touched .sim-hint .hand { animation: none; } .sim.touched .sim-hint { color: var(--muted); } .sim-controls button:hover { background: var(--ice); transform: translateY(-2px); } .sim-controls button[aria-pressed="true"] { color: #fff; box-shadow: 0 10px 24px rgba(7,19,48,.3); } @media (max-width: 520px) { .flow-steps { grid-template-columns: 1fr; } .fs-arrow { rotate: 135deg; justify-self: center; } .fs small { min-height: 0; } } @media (prefers-reduced-motion: reduce) { .demo-kicker .tap, .fs-arrow, .auto-flow li, .est-book, .adcard .go, .sim-hint .hand, .sim-controls button { animation: none !important; } .auto-flow li { opacity: 1; } } .sim-controls button[aria-pressed="true"]:hover { background: var(--ink); transform: none; } .results:has(.result:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slides i:nth-child(2) { transform: translateX(-62px) rotate(-7deg); } .slides i:nth-child(3) { transform: translateX(62px) rotate(7deg); } .slides i { width: 112px; margin-left: -56px; } .tile:hover .slides i:nth-child(2) { transform: translateX(-78px) rotate(-12deg); } .tile:hover .slides i:nth-child(3) { transform: translateX(78px) rotate(12deg); } .slides i:nth-child(2) { transform: translateX(-104px) rotate(-6deg); } .slides i:nth-child(3) { transform: translateX(104px) rotate(6deg); } .tile:hover .slides i:nth-child(2) { transform: translateX(-112px) rotate(-10deg); } .tile:hover .slides i:nth-child(3) { transform: translateX(112px) rotate(10deg); } @media (max-width: 420px) { .slides i:nth-child(2) { transform: translateX(-84px) rotate(-6deg); } .slides i:nth-child(3) { transform: translateX(84px) rotate(6deg); } } /* ===== "Ask us" helper chat (FAQ-style, not AI) ===== */ .gd-chat-btn { position: fixed; left: 18px; bottom: 18px; z-index: 41; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); box-shadow: 0 14px 34px rgba(20,64,192,.45); cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s; } .gd-chat-btn svg { width: 24px; height: 24px; } .gd-chat-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(20,64,192,.55); } .gd-chat-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--cyan); animation: ping 2.6s var(--ease-out) infinite; pointer-events: none; } .gd-chat-btn.on::after { display: none; } .gd-chat { position: fixed; left: 18px; bottom: 88px; z-index: 42; width: min(380px, calc(100vw - 36px)); height: min(560px, calc(100vh - 176px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 80px rgba(7,19,48,.35); overflow: hidden; animation: demoIn .35s var(--ease-out) both; } .gd-chat[hidden] { display: none; } .gd-chat header { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; color: #fff; background: linear-gradient(135deg, var(--navy-2), var(--blue-700)); } .gd-chat header b { display: block; font-family: var(--font-head); font-size: 1rem; line-height: 1.2; } .gd-chat header small { display: block; font-size: .72rem; color: #CFE0FF; line-height: 1.3; } .gd-av { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--blue-700); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; flex: none; } .gd-x { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; flex: none; } .gd-x:hover { background: rgba(255,255,255,.28); } .gd-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--ice-2); } .gd-msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.5; animation: pop .35s var(--ease-out) both; } .gd-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink); } .gd-msg.me { align-self: flex-end; background: var(--blue-700); color: #fff; border-bottom-right-radius: 4px; } .gd-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .gd-links a { font-size: .82rem; font-weight: 800; text-decoration: none; color: var(--blue-700); background: var(--ice); border-radius: 999px; padding: 7px 12px; } .gd-links a:hover { background: var(--blue-700); color: #fff; } .gd-links a.wa { background: var(--wa); color: #fff; } .gd-links a.wa:hover { background: var(--wa-hover); } .gd-dots { display: inline-flex; gap: 4px; padding: 4px 0; } .gd-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8AA0C8; animation: blink 1.2s infinite; } .gd-dots i:nth-child(2) { animation-delay: .15s; } .gd-dots i:nth-child(3) { animation-delay: .3s; } .gd-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 4px; background: var(--ice-2); } .gd-chips:empty { display: none; } .gd-chips button { font: inherit; font-size: .82rem; font-weight: 700; color: var(--blue-700); background: #fff; border: 1.5px solid var(--blue-600); border-radius: 999px; padding: 7px 12px; min-height: 36px; cursor: pointer; transition: background .2s, color .2s; } .gd-chips button:hover { background: var(--blue-700); color: #fff; } .gd-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; } .gd-form input { flex: 1; min-width: 0; font: inherit; font-size: .95rem; padding: 10px 14px; min-height: 44px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--ice-2); color: var(--ink); } .gd-form input:focus { outline: 2px solid var(--blue-600); border-color: transparent; } .gd-form button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--blue-700); color: #fff; font-size: 1.1rem; cursor: pointer; flex: none; } .gd-form button:hover { background: var(--blue-600); } .gd-wa { display: block; text-align: center; padding: 10px; font-size: .8rem; font-weight: 800; color: #fff; background: var(--wa); text-decoration: none; } .gd-wa:hover { background: var(--wa-hover); color: #fff; } @media (max-width: 520px) { .gd-chat-btn span { display: none; } .gd-chat-btn { padding: 0; width: 56px; justify-content: center; } .gd-chat { left: 10px; right: 10px; width: auto; bottom: 84px; height: min(70vh, calc(100vh - 176px), 560px); } } @media (prefers-reduced-motion: reduce) { .gd-chat-btn::after, .gd-dots i { animation: none !important; } } .brand .brand-mark { width: auto; height: 38px; display: block; transition: transform .5s var(--ease-out); } .brand:hover .brand-mark { transform: scale(1.05); } .site-footer .brand .brand-mark { height: 40px; } .footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; } .page-hero .note { margin-top: 10px; } /* ===== New Look (from the Claude redesign canvas): premium glass cards, glass buttons, dark mode ===== */ :root { --bg: #F3F6FD; --radius: 24px; --glass-bg: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.62)); --glass-border: rgba(255,255,255,.95); --glass-inset: inset 0 1px 0 #FFFFFF; --card-shadow: 0 1px 2px rgba(7,19,48,.05), 0 24px 60px rgba(20,40,110,.1); --card-shadow-hover: 0 2px 4px rgba(7,19,48,.05), 0 40px 80px rgba(20,64,192,.16); --navy-card: linear-gradient(160deg, #0E2266, #071330); } body { background: var(--bg); } .section.tint { background: #EDF2FC; } /* Cards become glass: soft white gradient, milk-glass edge, deep blue-tinted shadow */ .card, .tile, .work-card, .plan, .plan-strip a, .faq details, .result, .case, .form-card, .proof-panel { background: var(--glass-bg); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: var(--glass-inset), var(--card-shadow); } .card:hover, .tile:hover, .work-card:hover, .plan:hover, .plan-strip a:hover { box-shadow: var(--glass-inset), var(--card-shadow-hover); } .tile.dark, .plan.featured { background: var(--navy-card); border-color: rgba(156,194,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px rgba(7,19,48,.25); } .marquee-track span { background: rgba(255,255,255,.7); border-color: var(--glass-border); box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(7,19,48,.06); } .sim-controls button { background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* Spotlight ring: blue-to-cyan glow that follows the pointer, faintly visible at rest */ .spot::before { padding: 1.5px; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(61,123,255,.95), rgba(56,214,245,.55) 30%, rgba(56,214,245,0) 62%); opacity: .35; } .spot:hover::before { opacity: 1; } .spot::after { background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 0%), rgba(61,123,255,.1), rgba(61,123,255,0) 45%); } /* Buttons become glass pills: translucent fill, top sheen, lift on hover */ .btn { min-height: 52px; padding: 12px 26px; border-width: 1px; -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); } .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 55%); z-index: -1; pointer-events: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: rgba(20,64,192,.88); border-color: rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 34px rgba(20,64,192,.3); } .btn-primary:hover { background: rgba(14,46,134,.92); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 20px 44px rgba(20,64,192,.38); } .btn-light { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(7,19,48,.18); } .btn-light:hover { background: #fff; } .btn-ghost { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.95); box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(7,19,48,.08); } .btn-ghost:hover { border-color: var(--blue-600); } .btn-ghost-light { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 24px rgba(7,19,48,.2); } .btn-ghost-light:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.14); } .btn-wa { background: rgba(15,122,61,.88); border-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px rgba(15,122,61,.25); } .btn-wa:hover { background: rgba(11,99,49,.92); } .nav-cta { min-height: 44px; } /* Header: room for the day/night switch at the far right */ @media (min-width: 1101px) { .nav-panel { margin-left: auto; } } .nav-tools { display: flex; align-items: center; gap: 10px; } .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.95); background: rgba(255,255,255,.62); color: var(--ink); cursor: pointer; -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(7,19,48,.08); transition: background .25s, color .25s, border-color .25s, box-shadow .3s, transform .3s var(--ease-out); } .theme-btn:hover { color: var(--blue-700); transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(20,64,192,.18); } .theme-btn svg { width: 20px; height: 20px; } .theme-btn .ico-sun { display: none; } /* ===== Dark mode (the switch flips data-theme on ) ===== */ [data-theme="dark"] { --bg: #050B1F; --ink: #F2F6FF; --ink-2: #C9D7F5; --muted: #8FA6D6; --line: rgba(156,194,255,.16); --ice: rgba(156,194,255,.14); --ice-2: rgba(12,26,70,.45); --glass-bg: linear-gradient(165deg, rgba(24,48,120,.5), rgba(8,18,50,.78) 55%, rgba(6,14,40,.9)); --glass-border: rgba(156,194,255,.14); --glass-inset: inset 0 1px 0 rgba(255,255,255,.14); --card-shadow: 0 30px 70px rgba(0,0,0,.38); --card-shadow-hover: 0 40px 90px rgba(10,30,90,.55); color-scheme: dark; } [data-theme="dark"] .theme-btn .ico-sun { display: block; } [data-theme="dark"] .theme-btn .ico-moon { display: none; } [data-theme="dark"] .theme-btn { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.35); } [data-theme="dark"] .theme-btn:hover { color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.25), 0 16px 34px rgba(31,86,224,.4); } [data-theme="dark"] .card-link, [data-theme="dark"] .answer a, [data-theme="dark"] .article a, [data-theme="dark"] .callout a, [data-theme="dark"] .note a, [data-theme="dark"] .lead a, [data-theme="dark"] p > a:not(.btn) { color: #9CC2FF; } [data-theme="dark"] .card-link:hover, [data-theme="dark"] .answer a:hover, [data-theme="dark"] .article a:hover, [data-theme="dark"] .note a:hover, [data-theme="dark"] p > a:not(.btn):hover { color: #fff; } [data-theme="dark"] .section.tint { background: rgba(12,26,70,.3); } [data-theme="dark"] .spot::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(56,214,245,.95), rgba(61,123,255,.4) 35%, rgba(61,123,255,0) 65%); opacity: .45; } [data-theme="dark"] .spot:hover::before { opacity: 1; } [data-theme="dark"] .spot::after { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(61,123,255,.18), rgba(61,123,255,0) 45%); } [data-theme="dark"] .site-header { background: rgba(5,11,31,.7); } [data-theme="dark"] .site-header.scrolled { background: rgba(5,11,31,.92); border-bottom-color: var(--line); } [data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a[aria-current="page"] { background: rgba(156,194,255,.12); color: #fff; } [data-theme="dark"] .menu-btn { background: rgba(12,26,70,.6); color: #fff; } @media (max-width: 1100px) { [data-theme="dark"] .nav-panel { background: #081536; } } [data-theme="dark"] .eyebrow { color: var(--cyan); } [data-theme="dark"] .hl { background: linear-gradient(100deg, #9CC2FF, var(--cyan)); -webkit-background-clip: text; background-clip: text; } [data-theme="dark"] .hero { background: linear-gradient(170deg, #050B1F 0%, #081A4A 60%, #0C2A7A 115%); } [data-theme="dark"] .marquee-track span { background: rgba(12,26,70,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); } [data-theme="dark"] .sim-controls button { background: rgba(12,26,70,.55); color: #DCE7FF; border-color: rgba(156,194,255,.35); } [data-theme="dark"] .sim-controls button:hover { background: rgba(156,194,255,.16); color: #fff; } [data-theme="dark"] .sim-controls button[aria-pressed="true"] { background: var(--blue-600); border-color: var(--blue-600); color: #fff; } [data-theme="dark"] .sim-controls button[aria-pressed="true"]:hover { background: var(--blue-600); } [data-theme="dark"] .sim-verdict.bad b { color: #FF8A7A; } [data-theme="dark"] .sim-hint { color: #9CC2FF; } [data-theme="dark"] .icon { background: rgba(156,194,255,.12); border-color: rgba(156,194,255,.2); color: var(--cyan); } [data-theme="dark"] .card:hover .icon, [data-theme="dark"] .tile:hover .icon { background: var(--blue-600); border-color: var(--blue-600); color: #fff; } [data-theme="dark"] .work-card .big, [data-theme="dark"] .plan-strip a span, [data-theme="dark"] .case-meta { color: #9CC2FF; } [data-theme="dark"] .adcard { background: rgba(12,26,70,.5); border-color: var(--line); } [data-theme="dark"] .adcard .lines i { background: rgba(156,194,255,.25); } [data-theme="dark"] .adcard .lines b { color: #fff; } [data-theme="dark"] .speed .pg { background: rgba(12,26,70,.5); border-color: var(--line); } [data-theme="dark"] .speed .pg b { color: #fff; } [data-theme="dark"] .reel span { background: linear-gradient(160deg, rgba(156,194,255,.2), rgba(31,86,224,.35)); color: #DCE7FF; } [data-theme="dark"] .reel span:nth-child(2) { background: linear-gradient(160deg, var(--blue-600), var(--cyan)); color: #fff; } [data-theme="dark"] .reel span:nth-child(3) { background: linear-gradient(160deg, var(--navy-2), var(--blue-600)); color: #fff; } [data-theme="dark"] .slides i { background: linear-gradient(135deg, rgba(12,26,70,.9), rgba(31,86,224,.4)); border-color: var(--line); color: #DCE7FF; } [data-theme="dark"] .slides i:nth-child(1) { background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); color: #fff; } [data-theme="dark"] .founder-photo { background: rgba(12,26,70,.5); } [data-theme="dark"] .site-footer { background: #040916; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { border-color: rgba(156,194,255,.25); } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { background: #081536; } [data-theme="dark"] .gd-chat { background: #0A1733; border-color: var(--line); } [data-theme="dark"] .gd-log { background: rgba(5,11,31,.6); } [data-theme="dark"] .gd-msg.bot { background: rgba(12,26,70,.8); border-color: var(--line); color: #E6EEFF; } [data-theme="dark"] .gd-chips { background: transparent; } [data-theme="dark"] .gd-chips button { background: rgba(12,26,70,.6); color: #CFE0FF; border-color: rgba(156,194,255,.35); } [data-theme="dark"] .gd-form { background: #0A1733; border-top-color: var(--line); } [data-theme="dark"] .gd-form input { background: rgba(5,11,31,.6); border-color: rgba(156,194,255,.25); color: #fff; } [data-theme="dark"] .gd-links a { background: rgba(156,194,255,.14); color: #CFE0FF; } /* ===== Dark mode polish for the inner pages (services, consulting, work, FAQ, blog, team) ===== */ [data-theme="dark"] .faq summary::after { color: #9CC2FF; } [data-theme="dark"] .faq details:hover, [data-theme="dark"] .faq details[open] { border-color: rgba(156,194,255,.35); } [data-theme="dark"] .person .avatar { background: rgba(156,194,255,.12); color: var(--cyan); } [data-theme="dark"] .role { color: #9CC2FF; } [data-theme="dark"] .result b { color: #9CC2FF; } [data-theme="dark"] .pill-list li { background: rgba(156,194,255,.14); color: #CFE0FF; } [data-theme="dark"] .post-card h3 a:hover { color: #9CC2FF; } [data-theme="dark"] .callout { background: rgba(12,26,70,.45); } [data-theme="dark"] .plan-badge { color: #fff; } [data-theme="dark"] .est-chips button:hover { border-color: #9CC2FF; } [data-theme="dark"] .est-back { color: #9CC2FF; } /* Little phone/ad/report mock-ups stay light in dark mode: they picture real apps */ [data-theme="dark"] .mock-cta { background: #F5F8FF; } [data-theme="dark"] .mock-form div { border-color: #D9E3F5; color: #1B2A4E; } [data-theme="dark"] .mock-form label { color: #4A5878; } [data-theme="dark"] .mock-head small { color: #4A5878; } [data-theme="dark"] .mock-report .row { border-bottom-color: #D9E3F5; } [data-theme="dark"] .browser-bar span { color: #4A5878; } [data-theme="dark"] .est-step p { color: #1B2A4E; } [data-theme="dark"] .est-chips button { background: #F5F8FF; border-color: #D9E3F5; color: #1B2A4E; } /* ===== Fonts: Inter (AdMind) + Instrument Serif accents ===== */ :root { --font-head: "Inter", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; } /* ===== Light mode = the Claude redesign; dark mode = original layout ===== */ .home-light { display: none; } [data-theme="light"] .home-light { display: block; } [data-theme="light"] .home-dark { display: none; } [data-theme="light"] body:has(.home-light) .site-footer, [data-theme="light"] body:has(.home-light) .gd-chat-btn { display: none; } /* Light mode: floating glass pill header (from the redesign) */ [data-theme="light"] .site-header, [data-theme="light"] .site-header.scrolled { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 14px var(--gutter) 6px; } [data-theme="light"] .site-header .nav { height: auto; min-height: 58px; max-width: 1240px; padding: 7px 8px 7px 16px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 1px 0 #fff, 0 20px 50px rgba(7,19,48,.08); } [data-theme="light"] .nav-links a { font-weight: 500; } @media (max-width: 1100px) { [data-theme="light"] .nav-panel { inset: 86px 12px auto 12px; border-radius: 24px; border: 1px solid rgba(255,255,255,.9); } } /* Serif italic accent (the redesign's highlight style) */ .lh-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; } .lh-hl { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; padding-right: .06em; background: linear-gradient(90deg, var(--blue-700), var(--blue-500)); -webkit-background-clip: text; background-clip: text; color: transparent; } .home-light .rotator > span { font-family: var(--font-serif); font-style: italic; font-weight: 400; background: linear-gradient(90deg, var(--blue-700), var(--blue-500)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Building blocks */ .home-light { position: relative; overflow: hidden; } .lh-wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .lh-blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; animation: lhDrift 18s ease-in-out infinite alternate; } @keyframes lhDrift { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,40px) scale(1.15); } } .lh-eye { margin: 0 0 14px; font-family: var(--font-mono); font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-700); } .lh-h2 { margin: 0; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1; font-weight: 700; letter-spacing: -0.05em; color: var(--ink); font-family: var(--font-head); } .lh-lead { margin: 0; font-size: 1.1rem; line-height: 1.65; color: var(--muted); max-width: 58ch; } .lh-glass { background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 #fff, 0 20px 50px rgba(7,19,48,.08); } .lh-navy { background: linear-gradient(160deg, #0E2266, #071330) !important; border-color: rgba(156,194,255,.25) !important; color: #fff; } .lh-demo { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--ice); color: var(--ink-2); font-family: var(--font-mono); font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .lh-float { animation: lhFloat 6s ease-in-out infinite; } @keyframes lhFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .lh-in { animation: lhIn .55s var(--ease-out) both; } @keyframes lhIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .btn-ink { background: rgba(7,19,48,.9); color: #fff; border-color: rgba(255,255,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 24px rgba(7,19,48,.2); } .btn-ink:hover { background: rgba(7,19,48,.97); color: #fff; } /* Hero */ .lh-hero { position: relative; padding-top: clamp(56px, 7vw, 96px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; } .lh-hero h1 { margin: 0; max-width: 16ch; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .98; font-weight: 700; letter-spacing: -0.055em; color: var(--ink); } .lh-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--ink-2); } .lh-badge b { padding: 4px 10px; border-radius: 999px; background: var(--blue-700); color: #fff; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; } .lh-trust { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: .9rem; color: var(--muted); } /* 3D stage: sphere + orbit rings + floating proof chips */ .lh-stage { position: relative; width: 100%; max-width: 1100px; height: clamp(420px, 44vw, 540px); perspective: 1400px; margin: 8px auto 0; } .lh-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s var(--ease-out); } .lh-sphere { position: absolute; left: 50%; top: 50%; width: clamp(170px, 21vw, 270px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #CFE0FF 14%, #1F56E0 52%, #071330 100%); box-shadow: inset -26px -34px 60px rgba(7,19,48,.55), inset 12px 16px 30px rgba(255,255,255,.4), 0 50px 120px rgba(31,86,224,.45); animation: lhBreathe 6s ease-in-out infinite; } @keyframes lhBreathe { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.04); } } .lh-ring { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(20,64,192,.28); pointer-events: none; } .lh-ring::after { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan), 0 0 4px #fff; } .lh-r1 { width: clamp(320px, 40vw, 520px); animation: lhSpin1 14s linear infinite; } .lh-r2 { width: clamp(260px, 32vw, 420px); border-color: rgba(56,180,245,.5); animation: lhSpin2 18s linear infinite; } .lh-r2::after { background: var(--blue-600); box-shadow: 0 0 16px var(--blue-500); } .lh-r3 { width: clamp(380px, 50vw, 660px); border-style: dashed; border-color: rgba(20,64,192,.18); animation: lhSpin3 30s linear infinite; } .lh-r3::after { display: none; } @keyframes lhSpin1 { from { transform: translate(-50%,-50%) rotateX(74deg) rotateZ(0); } to { transform: translate(-50%,-50%) rotateX(74deg) rotateZ(360deg); } } @keyframes lhSpin2 { from { transform: translate(-50%,-50%) rotateY(66deg) rotateZ(0); } to { transform: translate(-50%,-50%) rotateY(66deg) rotateZ(-360deg); } } @keyframes lhSpin3 { from { transform: translate(-50%,-50%) rotateX(62deg) rotateY(-22deg) rotateZ(0); } to { transform: translate(-50%,-50%) rotateX(62deg) rotateY(-22deg) rotateZ(360deg); } } .lh-chip { position: absolute; text-align: left; } .lh-chip > div { border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } @media (max-width: 760px) { .lh-stage { height: 420px; } .lh-chip.c2 { display: none; } } /* Marquee (big words, every third in italic serif) */ .lh-marq-wrap { position: relative; padding: 26px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.5); } .lh-marq { display: flex; width: max-content; gap: 48px; padding-left: 48px; animation: scroll-x 34s linear infinite; } .lh-marq span.w { display: flex; align-items: center; gap: 48px; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink-2); white-space: nowrap; } .lh-marq span.w i { font-style: normal; color: var(--blue-500); font-size: 1rem; } .lh-marq span.w .lh-serif { font-weight: 400; } /* Proof rows */ .lh-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--line); } .lh-row:last-child { border-bottom: 0; } .lh-num { font-size: clamp(2.4rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .lh-row > span:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; max-width: 280px; } /* Reply simulator */ .lh-reply-btn { font: inherit; min-height: 46px; padding: 0 20px; font-size: .94rem; font-weight: 600; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.08); color: #E6EEFF; border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); transition: all .25s var(--ease-out); } .lh-reply-btn[aria-pressed="true"] { background: rgba(255,255,255,.92); color: var(--navy); border-color: rgba(255,255,255,.8); box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(0,0,0,.25); } .lh-bubble-in { margin: 0; align-self: flex-start; max-width: 84%; padding: 11px 14px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid #E3EAF8; font-size: .94rem; line-height: 1.45; color: #1B2A4E; } .lh-bubble-out { margin: 0; align-self: flex-end; max-width: 84%; padding: 11px 14px; border-radius: 16px 16px 4px 16px; background: var(--wa); font-size: .94rem; line-height: 1.45; color: #fff; } .lh-delay { margin: 4px 0; align-self: center; padding: 5px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; } .lh-outcome { margin: auto 0 0; padding: 14px 18px; border-radius: 16px; font-size: 1rem; font-weight: 600; line-height: 1.5; } /* Steps timeline */ .lh-line { position: absolute; left: 28px; right: 28px; top: 28px; height: 2px; background: var(--line); } .lh-line span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-700), var(--cyan)); transition: width .8s var(--ease-out); } .lh-step { width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; color: inherit; display: flex; flex-direction: column; gap: 16px; } .lh-dot { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; background: rgba(255,255,255,.8); color: var(--blue-700); border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(7,19,48,.06); transition: background .4s, color .4s, box-shadow .4s; } .lh-step.done .lh-dot { background: var(--blue-700); color: #fff; border-color: var(--blue-700); box-shadow: 0 10px 24px rgba(20,64,192,.35), inset 0 1px 0 rgba(255,255,255,.35); } .lh-step b { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); } .lh-step span.t { font-size: .97rem; line-height: 1.55; color: var(--muted); } .lh-bar { display: block; height: 3px; border-radius: 3px; background: #E3EAF8; overflow: hidden; } .lh-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-700), var(--cyan)); animation: lhBarGo 4.4s linear both; } @keyframes lhBarGo { from { width: 0; } to { width: 100%; } } .lh-view { display: none; } .lh-view.on { display: flex; animation: lhIn .5s var(--ease-out) both; } .lh-flowdot { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 12px var(--blue-500); animation: lhDot 2.6s cubic-bezier(.6,0,.4,1) infinite; } @keyframes lhDot { from { left: 0%; } to { left: 100%; } } .lh-fan > div { transition: transform .6s var(--ease-out); } .card:hover .lh-fan > div:nth-child(1) { transform: rotate(-12deg) translateX(-34px) !important; } .card:hover .lh-fan > div:nth-child(3) { transform: rotate(12deg) translateX(34px) !important; } /* Work cards: real screenshots */ .lh-media { height: 170px; margin: 10px 10px 0; border-radius: 20px; overflow: hidden; position: relative; background: var(--ice-2); } .lh-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease-out); } .card:hover .lh-media img { transform: scale(1.05); } /* Light footer */ .lh-foot-big { margin: 0; font-size: clamp(3rem, 11vw, 9.5rem); font-weight: 700; letter-spacing: -0.06em; line-height: .9; color: #DCE6FF; user-select: none; } .lh-foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); } .lh-foot-row a { text-decoration: none; } @media (prefers-reduced-motion: reduce) { .lh-sphere, .lh-ring, .lh-float, .lh-blob, .lh-marq, .lh-in, .lh-bar i, .lh-flowdot { animation: none !important; } .lh-tilt, .lh-fan > div { transition: none; } }