:root { --sky-1: #bfe8ff; --sky-2: #eaf7ff; --page: #f6fbff; --card: #ffffff; --ink: #14233a; --ink-soft: #3c5169; --ink-mute: #6b8199; --line: #d9e8f4; --accent: #ff8a3d; --accent-dark: #c9631f; --accent-soft: #ffe6d4; --grass: #7ac74f; --grass-dark: #4f9a34; --sky-blue: #38a9ff; --navy: #14233a; --navy-2: #1d3049; --display: 'Rubik', 'Manrope', 'Segoe UI', sans-serif; --body: 'Manrope', 'Segoe UI', sans-serif; --r: 14px; --r-lg: 22px; color-scheme: light; font-family: var(--body); font-synthesis: none; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; background: var(--page); color: var(--ink); font-size: 16.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: clip; } button, input, textarea, select { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, p, dl, dd { margin: 0; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; } img { display: block; max-width: 100%; height: auto; } svg { display: block; flex-shrink: 0; } canvas { display: block; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent); color: #fff; } .container { width: min(1240px, calc(100% - 72px)); margin-inline: auto; } .skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--accent); color: #fff; border-radius: 10px; font-weight: 800; } .skip-link:focus { top: 15px; } /* ---------- shared bits ---------- */ .eyebrow { display: inline-flex; align-items: flex-start; gap: 9px; font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #3d6b96; } .eyebrow::before { content: ''; width: 10px; height: 10px; margin-top: .3em; border-radius: 3px; background: var(--accent); flex-shrink: 0; } .eyebrow--light { color: #9fc2e0; } .lede { font-size: 17px; color: var(--ink-soft); line-height: 1.75; } /* Ключевое слово подчёркивается не прямой линией, а неровной дугой: один и тот же SVG растягивается под длину слова, поэтому росчерк живой. */ .mark { font-weight: 800; color: inherit; padding-bottom: .16em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2.6 8.4c15.8-5 33.6-6.6 52.9-4.9 10.4.9 20.6 2.7 31.1 3.4 10.9.7 20.9-.4 30.8-2.6' fill='none' stroke='%23ff8a3d' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% .42em; } .mark--light { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2.6 8.4c15.8-5 33.6-6.6 52.9-4.9 10.4.9 20.6 2.7 31.1 3.4 10.9.7 20.9-.4 30.8-2.6' fill='none' stroke='%23ffb27a' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); } .section { padding-block: clamp(58px, 7.5vw, 108px); } .section-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(30px, 4.5vw, 52px); } .section-top .lede { max-width: 360px; } .section-top .eyebrow { margin-bottom: 16px; } h2.big { font-size: clamp(1.9rem, 4vw, 3.1rem); } h2.big em, h1 em { font-style: normal; color: var(--accent); } /* Точка в конце заголовка — акцентом, как самостоятельный знак. */ .dot { font-style: normal; color: var(--accent); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 15px 26px; border-radius: var(--r); background: var(--accent); color: #fff; font-family: var(--display); font-weight: 700; font-size: 16px; box-shadow: 0 6px 0 var(--accent-dark); transition: transform .12s ease, box-shadow .12s ease, background .15s; } .btn:hover { background: #ff9c57; } .btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--accent-dark); } .btn-white { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 15px 26px; border-radius: var(--r); background: var(--card); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 16px; box-shadow: 0 6px 0 #c3d6e6; transition: transform .12s ease, box-shadow .12s ease; } .btn-white:hover { background: #fbfdff; } .btn-white:active { transform: translateY(4px); box-shadow: 0 2px 0 #c3d6e6; } .btn-navy { background: var(--navy); color: #fff; box-shadow: 0 6px 0 #0b1524; } .btn-navy:active { box-shadow: 0 2px 0 #0b1524; } .btn-link { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--accent-dark); } .btn-link:hover { color: var(--accent); } .btn-link span { transition: transform .15s ease; } .btn-link:hover span { transform: translate(3px, -3px); } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; height: 78px; background: rgba(234, 247, 255, .88); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(20, 35, 58, .08); transition: background .25s ease, border-color .25s ease; } /* Over the full-bleed mine the bar steps aside; it returns as soon as the page scrolls. */ .js-ready .site-header[data-top="true"] { background: transparent; backdrop-filter: none; border-bottom-color: transparent; } .js-ready .site-header[data-top="true"] .brand { color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); } .js-ready .site-header[data-top="true"] .desktop-nav a { color: #f0e6da; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); } .js-ready .site-header[data-top="true"] .desktop-nav a:hover { color: #fff; } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; } /* Language switch, CTA and the burger read as one "controls" cluster, not scattered across the bar — grouped so the gap between them stays tight regardless of which ones a breakpoint hides. */ .header-actions { display: flex; align-items: center; gap: 12px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--display); font-size: 22px; font-weight: 800; } .brand-mark { width: 32px; height: 32px; } .desktop-nav { display: flex; align-items: center; gap: 26px; } .desktop-nav a { font-weight: 600; font-size: 15px; color: var(--ink-soft); transition: color .15s; } .desktop-nav a:hover { color: var(--accent-dark); } .header-cta { min-height: 44px; padding: 10px 20px; font-size: 15px; box-shadow: 0 4px 0 var(--accent-dark); } .header-cta:active { box-shadow: 0 1px 0 var(--accent-dark); } .lang { position: relative; flex-shrink: 0; } .lang-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 13.5px; transition: background .2s ease, border-color .2s ease, color .2s ease; } .lang-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; } .js-ready .site-header[data-top="true"] .lang-btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); color: #fff; } .lang-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; min-width: 184px; list-style: none; padding: 6px; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 36px -20px rgba(20, 35, 58, .55); } .lang-menu button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); } .lang-menu button:hover { background: #eef5fb; color: var(--ink); } .lang-menu [aria-selected="true"] { background: var(--accent-soft); color: var(--accent-dark); } .menu-toggle { display: none; width: 44px; height: 44px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); } .menu-toggle span { display: block; width: 18px; height: 2px; background: currentColor; margin: 4px auto; border-radius: 2px; } #mobile-menu { background: var(--card); padding: 10px 24px 18px; border-bottom: 1px solid var(--line); } #mobile-menu a { display: flex; align-items: center; min-height: 50px; font-weight: 700; border-bottom: 1px solid var(--line); } #mobile-menu a:last-child { border-bottom: 0; } /* ---------- hero: the mine fills the screen, the copy sits on top ---------- */ /* Pulled up by the header height so the bar floats over the scene instead of sitting above it. */ .hero { position: relative; overflow: hidden; margin-top: -78px; background: #17110b; } .cave-stage { position: relative; height: min(84vh, 780px); min-height: 560px; } #cave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .cave-fallback { position: absolute; inset: 0; background: linear-gradient(160deg, #4a3a24, #2a1d12); } .cave-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 44%, rgba(14,9,4,.1) 18%, rgba(14,9,4,.55) 68%, rgba(14,9,4,.9) 100%); } .hero-overlay { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 104px 24px 72px; } .hero-overlay::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(1060px, 116%); height: 86%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(14,9,4,.72), rgba(14,9,4,.42) 58%, transparent); } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 30px; background: rgba(255, 255, 255, .93); color: var(--ink); font-family: var(--display); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 4px 0 rgba(14, 9, 4, .35); } .hero-badge::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex-shrink: 0; } h1.hero-title { margin-top: 24px; font-size: clamp(2.4rem, 6.2vw, 5rem); color: #fff; text-shadow: 0 4px 0 rgba(14, 9, 4, .5), 0 14px 40px rgba(0, 0, 0, .55); } h1.hero-title em { font-style: normal; color: var(--accent); } .hero-overlay .lede { margin-top: 20px; max-width: 600px; color: #f2e8dc; font-size: clamp(15.5px, 1.7vw, 18px); text-shadow: 0 2px 10px rgba(0, 0, 0, .75); } .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; } .hero-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; font-size: 14px; color: #e3d5c3; text-shadow: 0 2px 8px rgba(0, 0, 0, .8); } .hero-note svg { width: 18px; height: 18px; stroke: #9be07a; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } #motion-toggle { position: absolute; top: 94px; right: 20px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 13px; box-shadow: 0 4px 0 rgba(14, 9, 4, .4); } #motion-toggle:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(14, 9, 4, .4); } .scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 4px 0 rgba(14, 9, 4, .4); animation: cue-hop 2.2s ease-in-out infinite; } .scroll-cue svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } @keyframes cue-hop { 50% { transform: translate(-50%, 6px); } } html[data-motion="paused"] .scroll-cue { animation-play-state: paused; } /* ---------- loader row on a navy band ---------- */ .loaders { background: var(--navy); color: #dbe7f4; } .loaders-inner { padding-block: clamp(26px, 3.6vw, 44px); } .loaders-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; } .loaders-head p { font-size: 15px; color: #9fb6cd; } .loader-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .tilt-wrap { perspective: 750px; } .loader { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px 15px; background: var(--navy-2); border-radius: var(--r); border: 1px solid transparent; transform-style: preserve-3d; transition: opacity .45s ease, transform .22s cubic-bezier(.22, .7, .3, 1), background .25s ease, box-shadow .3s ease, border-color .3s ease; } .loader img { width: 40px; height: 40px; object-fit: contain; transition: transform .22s ease; } .loader img[src*="fabric"], .loader img[src*="neoforge"] { image-rendering: pixelated; } .loader b { font-family: var(--display); font-size: 16px; font-weight: 600; color: #fff; transition: color .25s ease; } .loader i { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7f9ab5; } .loader--plugin i { color: #7fc8ff; } /* Cursor-tracked glow, tilt and press — "вариант E" from the loader-card hover module preview. */ .loader .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(160px circle at var(--gx, 50%) var(--gy, 50%), var(--glow-rgba, rgba(255, 154, 61, .3)), transparent 66%); } .loader.live { background: #223a5c; border-color: var(--glow-border, rgba(255, 154, 61, .5)); box-shadow: inset 0 4px 12px rgba(0, 0, 0, .35), 0 18px 34px -26px #000, inset 0 0 0 1px var(--glow-border, rgba(255, 154, 61, .5)); } .loader.live .glare { opacity: 1; } .loader.live img { transform: scale(.93); } .loader.live b { color: var(--glow-solid, #fff); } .loader-row .tilt-wrap:nth-child(1) .loader { --glow-rgba: rgba(180, 190, 200, .3); --glow-border: rgba(180, 190, 200, .5); --glow-solid: #e4e9ee; } .loader-row .tilt-wrap:nth-child(2) .loader { --glow-rgba: rgba(255, 154, 61, .3); --glow-border: rgba(255, 154, 61, .55); --glow-solid: #ffb26b; } .loader-row .tilt-wrap:nth-child(3) .loader { --glow-rgba: rgba(120, 150, 255, .3); --glow-border: rgba(120, 150, 255, .55); --glow-solid: #9fb4ff; } .loader-row .tilt-wrap:nth-child(4) .loader { --glow-rgba: rgba(126, 196, 255, .3); --glow-border: rgba(126, 196, 255, .55); --glow-solid: #aedcff; } .loader-row .tilt-wrap:nth-child(5) .loader { --glow-rgba: rgba(255, 214, 90, .3); --glow-border: rgba(255, 214, 90, .55); --glow-solid: #ffe28f; } .loader-row .tilt-wrap:nth-child(6) .loader { --glow-rgba: rgba(124, 212, 90, .3); --glow-border: rgba(124, 212, 90, .55); --glow-solid: #a6e88a; } /* ---------- services ---------- */ .services { background: var(--page); } /* Idea cloud: a decorative banner above the service cards — tags "multiply" in on scroll. Full-bleed: breaks out of the 1240px container to span the whole viewport width, and the dot grid fades into the page at the top/bottom instead of sitting in a boxed card. */ .idea-cloud { position: relative; height: 320px; width: 100vw; left: 50%; transform: translateX(-50%); margin: 4px 0 clamp(24px, 3.5vw, 40px); } .idea-cloud .bg-layer { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(20, 35, 58, .08) 1.4px, transparent 1.8px); background-size: 22px 22px; /* Three masks: edge fade top/bottom, edge fade left/right, and a hole that follows the cursor, so dots vanish around the pointer too. --mx/--my are set by JS on pointermove; intersect keeps a dot only where ALL THREE masks are opaque there. */ -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent 70px, #000 130px); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent 70px, #000 130px); -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; } .tag-row { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; } .tag-row .tag { position: absolute; padding: 8px 16px; border-radius: 30px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-soft); box-shadow: 0 8px 18px -12px rgba(20, 35, 58, .3); opacity: 0; } .tag-row .t1 { top: 8%; left: 10%; --dx: 14px; --dy: 10px; } .tag-row .t2 { top: 12%; left: 58%; --dx: -12px; --dy: 14px; } .tag-row .t3 { top: 40%; left: 9%; --dx: 16px; --dy: -8px; } .tag-row .t4 { top: 68%; left: 12%; --dx: 10px; --dy: 12px; } .tag-row .t5 { top: 6%; left: 34%; --dx: -14px; --dy: 8px; } .tag-row .t6 { top: 70%; left: 62%; --dx: 12px; --dy: -10px; } .tag-row .t7 { top: 36%; left: 76%; --dx: -10px; --dy: -12px; } .tag-row .t8 { top: 78%; left: 38%; --dx: -8px; --dy: -14px; } .tag-row .t9 { top: 20%; left: 78%; --dx: -12px; --dy: 10px; } .tag-row .t10 { top: 54%; left: 44%; --dx: 10px; --dy: 10px; } @keyframes tagSpawn { 0% { opacity: 0; transform: scale(.3); background: #fff; border-color: var(--line); color: var(--ink-soft); } 45% { opacity: 1; transform: scale(1.2); background: var(--accent); border-color: var(--accent); color: #fff; } 72% { transform: scale(.92); } 100% { opacity: 1; transform: scale(1); background: #fff; border-color: var(--line); color: var(--ink-soft); } } .tag-row .tag.spawn { animation: tagSpawn .64s cubic-bezier(.24, .9, .32, 1.05) both; } @keyframes tagFloatCloud { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx, 10px), var(--dy, -10px)); } } @keyframes tagPulseCloud { 0%, 85%, 100% { background: #fff; color: var(--ink-soft); border-color: var(--line); } 90% { background: var(--accent); color: #fff; border-color: var(--accent); } } .tag-row .tag.settled { opacity: 1; animation: tagFloatCloud 7s ease-in-out infinite, tagPulseCloud 9s ease-in-out infinite; animation-delay: var(--fd, 0s), var(--pd, 0s); } @media (prefers-reduced-motion: reduce) { .tag-row .tag { animation: none !important; opacity: 1 !important; } } /* Mobile: the full 10-tag cloud doesn't fit — keep the dot-grid mood with 3 tags in a shorter strip instead of hiding the module outright. */ @media (max-width: 640px) { .idea-cloud { height: 128px; margin: 4px 0 28px; } .tag-row .tag { display: none; } .tag-row .t1, .tag-row .t2, .tag-row .t9 { display: block; } .tag-row .t1 { top: 12px; left: 6%; } .tag-row .t2 { top: 82px; left: 42%; } .tag-row .t9 { top: 34px; left: 72%; } } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { display: flex; flex-direction: column; padding: 30px 28px; background: var(--card); border-radius: var(--r-lg); box-shadow: 0 10px 0 rgba(20, 35, 58, .06); transition: transform .15s ease, box-shadow .15s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 14px 0 rgba(20, 35, 58, .08); } .card-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; margin-bottom: 22px; background: #eaf7ff; } .card:nth-child(2) .card-icon { background: #f3ecff; } .card:nth-child(3) .card-icon { background: #fff0e4; } .card-icon svg { width: 32px; height: 32px; fill: none; stroke: var(--sky-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .card:nth-child(2) .card-icon svg { stroke: #8b5cf6; } .card:nth-child(3) .card-icon svg { stroke: var(--accent-dark); } .card h3 { font-size: 21px; } .card > p { margin-top: 12px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; } .card ul { list-style: none; padding: 0; margin: 18px 0 24px; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; color: var(--ink-soft); } .card li { display: flex; gap: 10px; align-items: flex-start; } .card li::before { content: ''; width: 8px; height: 8px; margin-top: 8px; border-radius: 3px; background: var(--grass); flex-shrink: 0; } .card .btn-link { margin-top: auto; } .services-note { text-align: center; margin-top: 28px; font-size: 15px; color: var(--ink-mute); } .services-note a { color: var(--accent-dark); font-weight: 700; } .stats-note { text-align: center; margin-top: 28px; font-size: 15px; color: var(--ink-mute); } /* ---------- pipeline: idea -> .jar, lit one step at a time ---------- */ .pipeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: none; } .stage { position: relative; padding: 28px 26px 26px; background: var(--card); border-radius: var(--r-lg); box-shadow: 0 10px 0 rgba(20, 35, 58, .06); } .stage-num { position: absolute; top: 2px; right: 12px; font-family: var(--display); font-size: 88px; font-weight: 800; line-height: 1; color: #e9f2fa; letter-spacing: -.04em; transition: color .5s ease; } .stage.lit .stage-num { color: var(--accent-soft); } .stage-icon { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #eef5fb; transition: background .45s ease, transform .45s ease; } .stage-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--sky-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s ease; } .stage.lit .stage-icon { background: var(--accent); transform: scale(1.06); } .stage.lit .stage-icon svg { stroke: #fff; } .stage h3 { position: relative; margin-top: 18px; font-size: 19px; } .stage p { position: relative; margin-top: 10px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; } /* The chevron to the next step appears together with that step. */ .stage::after { content: ''; position: absolute; top: 50%; right: -20px; z-index: 2; width: 20px; height: 20px; margin-top: -10px; background: var(--accent); opacity: 0; transform: scale(.4); transition: opacity .35s ease, transform .35s ease; clip-path: polygon(0 32%, 55% 32%, 55% 8%, 100% 50%, 55% 92%, 55% 68%, 0 68%); } .stage.lit::after { opacity: 1; transform: scale(1); } .stage:nth-child(3)::after, .stage:last-child::after { content: none; } .js-ready .stage { opacity: .45; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } .js-ready .stage.lit { opacity: 1; transform: translateY(0); } /* Same treatment for the loader row on the navy band. */ .js-ready .loader { opacity: 0; transform: translateY(14px); } .js-ready .loader.lit { opacity: 1; transform: translateY(0); } /* ---------- portfolio: cards toss onto the table, then flip to show detail ---------- */ .portfolio { background: linear-gradient(var(--page), #e8f2fb 62%, var(--page)); } /* Factual badges — loader, game version, languages, where the build lives. */ .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0 0; } .chips li { padding: 6px 12px; border-radius: 30px; background: #eef5fb; color: #3d6b96; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; } .mod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .js-ready .mod-card { opacity: 0; transform: translateY(-60px) rotate(var(--rot0)) scale(.82); transition: transform .85s cubic-bezier(.34, 1.56, .64, 1), opacity .45s ease; } .js-ready .mod-card.lit { opacity: 1; transform: rotate(var(--rot)) translateY(var(--ty)); } .mod-card { position: relative; height: 430px; perspective: 1200px; } .mod-card:nth-child(1) { --rot0: -18deg; --rot: -3deg; --ty: 8px; } .mod-card:nth-child(2) { --rot0: 14deg; --rot: 2.5deg; --ty: -6px; } .mod-card:nth-child(3) { --rot0: -11deg; --rot: -2deg; --ty: 12px; } .mod-card:nth-child(4) { --rot0: 16deg; --rot: 3deg; --ty: -2px; } /* Specificity has to match (or beat) ".js-ready .mod-card.lit" — otherwise the resting rotate/translateY from the toss-in wins over hover and the straighten-on-hover never shows. */ .mod-card:hover, .mod-card:focus-within, .js-ready .mod-card.lit:hover, .js-ready .mod-card.lit:focus-within { transform: rotate(0deg) translateY(-10px) scale(1.03); z-index: 5; } .mod-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.4, .2, .2, 1); } .mod-card.flipped .mod-card-inner { transform: rotateY(180deg); } .mod-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: 0 14px 0 rgba(20, 35, 58, .08); display: flex; flex-direction: column; } .mod-front { padding: 0; border: 0; width: 100%; text-align: left; background: var(--card); } .mod-back { transform: rotateY(180deg); padding: 20px 20px 22px; justify-content: flex-start; cursor: pointer; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c7d8e6 transparent; } .mod-back::-webkit-scrollbar { width: 6px; } .mod-back::-webkit-scrollbar-track { background: transparent; } .mod-back::-webkit-scrollbar-thumb { background: #c7d8e6; border-radius: 3px; } .mod-back::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); } .mod-media { position: relative; height: 130px; flex-shrink: 0; } /* Absolute + inset, not width/height:100% — as a flex item with an intrinsic aspect-ratio (from the img's width/height attributes) the photo otherwise fights the box and stretches the whole media strip to its own ratio. */ .mod-media > img:not(.mod-media-badge) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: center 35%; } /* Each source photo frames its interesting part differently — the Screen dialog's Upload/Cancel buttons sit in the bottom third of that particular screenshot. */ .mod-card:nth-child(2) .mod-media > img:not(.mod-media-badge) { object-position: center 10%; } .mod-card:nth-child(3) .mod-media > img:not(.mod-media-badge) { object-position: center 90%; } .mod-media--icon { display: grid; place-items: center; background: linear-gradient(135deg, #eaf7ff, #f6fbff); } .mod-card--more .mod-media--icon { background: var(--accent-soft); color: var(--accent-dark); } .mod-card--more .mod-media--icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .mod-media .mod-media-badge { position: absolute; left: 10px; bottom: -10px; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 2px solid #fff; box-shadow: 0 4px 0 rgba(20, 35, 58, .18), 0 3px 10px rgba(11, 18, 32, .35); } .mod-copy { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 5px; flex: 1; min-height: 0; } .mod-copy .eyebrow { font-size: 10.5px; letter-spacing: .12em; } .mod-copy .eyebrow::before { margin-top: .2em; } .mod-copy h3 { font-size: 17px; margin-top: 2px; } .mod-copy p.short { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; } .mod-copy .chips { margin: auto 0 0; gap: 6px; } .mod-copy .chips li { font-size: 10px; padding: 4px 8px; } .mod-flip-hint { position: absolute; right: 10px; bottom: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); display: grid; place-items: center; } .mod-flip-hint svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mod-back-btn { flex-shrink: 0; align-self: flex-start; display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border: 0; border-radius: 50%; background: #eef5fb; color: var(--ink-soft); } .mod-back-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mod-back-btn:hover { background: var(--accent-soft); color: var(--accent-dark); } .mod-back .eyebrow { font-size: 10.5px; } .mod-back p.text { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; } .mod-back .btn-link { margin-top: 12px; font-size: 13px; } .mod-card--more .mod-face { border: 1.5px dashed #c3d8e8; box-shadow: none; background: #fbfeff; } /* ---------- capabilities: what the studio can take on, pitched at a prospective client ---------- */ .capabilities { background: linear-gradient(var(--page), #e8f2fb 62%, var(--page)); } .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .cap-tile { background: var(--card); border-radius: var(--r-lg); padding: 22px 24px; box-shadow: 0 10px 0 rgba(20, 35, 58, .06); display: flex; flex-direction: column; gap: 10px; } .cap-tile--hero { background: linear-gradient(120deg, #1b3358, #2a6db5 60%, #38a9ff); color: #fff; } .cap-num { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: 42px; line-height: 1; color: var(--ink); } .cap-tile--hero .cap-num, .cap-tile--accent .cap-num { color: #fff; } .cap-tile--hero .cap-num { font-size: 46px; } .cap-label { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); } .cap-tile--hero .cap-label { color: #d3e9ff; } .cap-sub { font-size: 12.5px; color: var(--ink-mute); line-height: 1.55; margin-top: auto; } .cap-tile--hero .cap-sub { color: #bcd8f2; } .cap-tile--accent { background: var(--navy); color: #fff; } .cap-tile--accent .cap-label { color: #9fc2e0; } .cap-tile--accent .cap-sub { color: #7f9ab5; } .cap-loaderrow { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .cap-loaderrow img { width: 24px; height: 24px; object-fit: contain; opacity: 0; transform: translateY(6px) scale(.6); transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); } .cap-grid.in .cap-loaderrow img { opacity: 1; transform: none; } .cap-grid.in .cap-loaderrow img:nth-child(1) { transition-delay: 0s; } .cap-grid.in .cap-loaderrow img:nth-child(2) { transition-delay: .07s; } .cap-grid.in .cap-loaderrow img:nth-child(3) { transition-delay: .14s; } .cap-grid.in .cap-loaderrow img:nth-child(4) { transition-delay: .21s; } .cap-grid.in .cap-loaderrow img:nth-child(5) { transition-delay: .28s; } .cap-grid.in .cap-loaderrow img:nth-child(6) { transition-delay: .35s; } .cap-verrange-track { height: 6px; border-radius: 4px; background: rgba(20, 35, 58, .08); overflow: hidden; } .cap-verrange-fill { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--sky-blue), var(--accent)); transition: width 1.1s cubic-bezier(.16, .8, .3, 1); } .cap-grid.in .cap-verrange-fill { width: 100%; } .cap-verrange-labels { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--ink-mute); } .cap-langchips { display: flex; gap: 5px; flex-wrap: wrap; max-width: 320px; } .cap-langchips span { padding: 3px 8px; border-radius: 30px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 10px; font-weight: 700; opacity: 0; transform: scale(.5); transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); } .cap-grid.in .cap-langchips span { opacity: 1; transform: none; } .cap-fmt-row { display: flex; align-items: center; gap: 7px; } .cap-fmt-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; text-align: center; opacity: 0; transform: scale(.8); transition: opacity .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); } .cap-grid.in .cap-fmt-card { opacity: 1; transform: none; } .cap-grid.in .cap-fmt-card--blue { transition-delay: 0s; } .cap-grid.in .cap-fmt-card--green { transition-delay: .15s; } .cap-fmt-card--blue { background: #eaf7ff; } .cap-fmt-card--green { background: #eafff1; } .cap-fmt-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: 0 3px 0 rgba(20, 35, 58, .08); } .cap-fmt-ic svg { width: 17px; height: 17px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cap-fmt-card--blue .cap-fmt-ic svg { stroke: var(--sky-blue); } .cap-fmt-card--green .cap-fmt-ic svg { stroke: var(--grass-dark); } .cap-fmt-card b { font-size: 12.5px; font-weight: 800; color: var(--ink); } .cap-fmt-card small { font-size: 9.5px; font-weight: 700; color: var(--ink-mute); } .cap-fmt-plus { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--accent); flex-shrink: 0; } .cap-channels { display: flex; flex-direction: column; gap: 7px; } .cap-channel { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); opacity: 0; transform: translateX(-6px); transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); } .cap-grid.in .cap-channel:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; } .cap-grid.in .cap-channel:nth-child(2) { opacity: 1; transform: none; transition-delay: .1s; } .cap-grid.in .cap-channel:nth-child(3) { opacity: 1; transform: none; transition-delay: .2s; } .cap-channel svg { width: 16px; height: 16px; stroke: var(--sky-blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .cap-verline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cap-ver-chip { position: relative; padding: 5px 9px; border-radius: 8px; background: #eef5fb; color: #3d6b96; font-size: 10.5px; font-weight: 700; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; opacity: .55; } .cap-ver-chip--live { background: var(--accent-soft); color: var(--accent-dark); opacity: 1; padding-right: 16px; } .cap-live-dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--grass); animation: capPulseDot 2s ease-in-out infinite; } .cap-ver-arrow { font-size: 11px; color: var(--ink-mute); } @keyframes capPulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(122, 199, 79, .55); } 50% { box-shadow: 0 0 0 6px rgba(122, 199, 79, 0); } } @media (prefers-reduced-motion: reduce) { .cap-live-dot { animation: none; } } /* ---------- faq ---------- */ .faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; } .faq-intro { margin-top: 16px; } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--card); border-radius: var(--r); box-shadow: 0 6px 0 rgba(20, 35, 58, .05); } .faq-item summary { list-style: none; display: flex; align-items: center; gap: 18px; min-height: 64px; padding: 14px 22px; cursor: pointer; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item .q-text { flex: 1; font-family: var(--display); font-weight: 600; font-size: 16.5px; } .faq-item .q-icon { position: relative; width: 22px; height: 22px; flex-shrink: 0; } .faq-item .q-icon::before, .faq-item .q-icon::after { content: ''; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .faq-item .q-icon::before { top: 9px; left: 1px; right: 1px; height: 4px; } .faq-item .q-icon::after { left: 9px; top: 1px; bottom: 1px; width: 4px; } .faq-item[open] .q-icon::after { transform: rotate(90deg); opacity: 0; } .faq-item p { padding: 0 22px 20px; color: var(--ink-soft); font-size: 15px; line-height: 1.8; } /* ---------- contact: glass card, tilts toward the cursor until a field is focused ---------- */ .contact-section { padding-bottom: 46px; } .tilt-wrap { perspective: 1400px; } .contact-glass { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 46px; padding: clamp(30px, 4vw, 56px); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), var(--navy); border: 1px solid rgba(255, 255, 255, .14); color: #e8f1fa; box-shadow: 0 14px 0 rgba(11, 21, 36, .5); transform-style: preserve-3d; transition: transform .25s cubic-bezier(.22, .7, .3, 1), border-color .3s ease; } .contact-glass .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 178, 107, .16), transparent 62%); } .contact-glass.live .glare { opacity: 1; } .contact-glass.live { border-color: rgba(255, 178, 107, .32); } .contact-glass h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); color: #fff; } .pitch > p { margin-top: 15px; max-width: 380px; color: #d7e1f3; font-size: 15.5px; line-height: 1.8; } .contact-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #dbe8f7; } .contact-list li { display: flex; gap: 11px; align-items: flex-start; } .contact-list li::before { content: ''; width: 9px; height: 9px; margin-top: 8px; border-radius: 3px; background: var(--grass); flex-shrink: 0; } .lf { display: flex; flex-direction: column; gap: 14px; } .lf-box { position: relative; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: 13px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); color: #a9b8dc; transition: background .2s, border-color .2s; } .lf-box:hover { background: rgba(255, 255, 255, .09); } .lf-box:focus-within { border-color: #ffb26b; background: rgba(255, 138, 61, .1); box-shadow: 0 0 0 4px rgba(255, 138, 61, .16); } .lf-box:focus-within .field-ic { color: #ffb26b; } .field-ic { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lf-box input, .lf-box textarea { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: 400 15px var(--body); } .lf-box input::placeholder, .lf-box textarea::placeholder { color: #8b9cc4; } .lf-box.lf-area { height: auto; align-items: flex-start; padding: 14px 16px; } .lf-box textarea { resize: none; height: 96px; line-height: 1.55; } .check-ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--grass); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .2s cubic-bezier(.3, 1.4, .4, 1); } .lf-box.lf-filled .check-ic { opacity: 1; transform: scale(1); } .lf-count { margin: -6px 2px 0; text-align: right; font-size: 11.5px; color: #93a7c7; } /* custom dropdown, replacing the native