:root {
  --ink: #20231e;
  --paper: #f6f4ef;
  --acid: #d7ff3f;
  --lilac: #ba9eff;
  --orange: #fd8157;
  --line: rgba(32, 35, 30, .16);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: Iowan Old Style, Baskerville, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); margin: 0; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
.noise { pointer-events: none; position: fixed; z-index: 15; inset: 0; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.site-header { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1500px; padding: 27px 4vw; position: relative; z-index: 10; }
.brand { font-size: 1.18rem; font-weight: 800; letter-spacing: -.085em; }
.brand span { color: var(--orange); }
.main-nav { align-items: center; display: flex; gap: 2rem; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.main-nav > a:not(.nav-cta) { position: relative; }
.main-nav > a:not(.nav-cta)::after { background: var(--ink); bottom: -5px; content: ''; height: 1px; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; width: 100%; }
.main-nav > a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { background: var(--ink); border-radius: 99px; color: var(--paper); padding: .75rem 1rem .75rem 1.2rem; transition: background .25s, transform .25s; }
.nav-cta span { color: var(--acid); font-size: 1rem; margin-left: .6rem; }
.nav-cta:hover { background: #41463b; transform: translateY(-2px); }
.menu-toggle { background: transparent; border: 0; display: none; height: 38px; padding: 8px 0 8px 12px; width: 40px; }
.menu-toggle i { background: var(--ink); display: block; height: 2px; margin: 5px 0; transition: transform .25s; width: 23px; }

.hero { display: grid; grid-template-columns: .94fr 1.06fr; margin: 0 auto; max-width: 1500px; min-height: calc(100svh - 89px); overflow: hidden; padding: 5.5vw 4vw 2.3rem; position: relative; }
.hero-copy { align-self: center; padding-bottom: 8vw; position: relative; z-index: 2; }
.eyebrow { align-items: center; display: flex; font-family: var(--mono); font-size: .68rem; gap: .58rem; letter-spacing: .065em; margin: 0 0 1.75rem; text-transform: uppercase; }
.eyebrow span { background: var(--orange); border-radius: 50%; height: 8px; width: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.65rem, 7.45vw, 8.1rem); font-weight: 700; letter-spacing: -.083em; line-height: .86; margin-bottom: 2.2rem; }
h1 em, h2 em { font-family: var(--serif); font-weight: 500; letter-spacing: -.075em; }
.hero-text { font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.58; max-width: 415px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; max-width: 460px; }
.hero-proof span { border: 1px solid rgba(29,31,27,.18); border-radius: 100px; font-family: var(--mono); font-size: .56rem; letter-spacing: .03em; padding: .44rem .65rem; text-transform: uppercase; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1.65rem; margin-top: 2.45rem; }
.button { align-items: center; border: 0; border-radius: 100px; display: inline-flex; font-size: .8rem; font-weight: 800; gap: 2.5rem; justify-content: space-between; letter-spacing: .01em; padding: 1rem 1.05rem 1rem 1.4rem; transition: transform .25s, box-shadow .25s, background .25s; }
.button span { font-size: 1.2rem; line-height: .6; }
.button-bright { background: var(--acid); color: var(--ink); }
.button-bright:hover { background: #e6ff83; box-shadow: 0 10px 25px rgba(32,35,30,.17); transform: translateY(-3px) rotate(-1deg); }
.text-link { border-bottom: 1px solid var(--ink); font-size: .77rem; font-weight: 800; padding: .3rem 0; }
.text-link span { display: inline-block; font-size: 1rem; margin-left: .5rem; transition: transform .2s; }
.text-link:hover span { transform: translateY(3px); }
.hero-art { align-items: center; display: flex; height: min(42vw, 630px); justify-content: center; margin: 0 0 0 auto; position: relative; width: min(53vw, 720px); }
.hero-art::before { background: var(--lilac); border-radius: 48% 52% 60% 40% / 42% 42% 58% 58%; content: ''; filter: blur(1px); height: 68%; position: absolute; transform: rotate(-19deg); width: 59%; }
.hero-orbit { border: 1px solid rgba(32,35,30,.22); border-radius: 50%; position: absolute; }
.orbit-one { height: 75%; transform: rotate(34deg); width: 75%; }
.orbit-two { height: 102%; transform: rotate(-25deg); width: 47%; }
.hero-card { box-shadow: 16px 20px 35px rgba(36, 27, 50, .18); position: absolute; }
.hero-card-back { background: #e5ffe5; height: 50%; padding: 1.2rem; right: 5%; top: 8%; transform: rotate(11deg); width: 47%; }
.hero-card-back p { font-family: var(--mono); font-size: .56rem; margin: 0; text-transform: uppercase; }
.mini-grid { display: grid; gap: 5px; grid-template-columns: repeat(2, 1fr); margin-top: 20%; }
.mini-grid b { aspect-ratio: 1; display: block; }
.mini-grid b:nth-child(1) { background: #7b55e6; border-radius: 0 50% 0 0; }.mini-grid b:nth-child(2) { background: #ff8265; border-radius: 50% 0 50% 0; }.mini-grid b:nth-child(3) { background: #242a42; border-radius: 50%; }.mini-grid b:nth-child(4) { background: #e9d4ff; border-radius: 100% 0 0 0; }
.hero-card-main { background: var(--ink); color: var(--paper); display: flex; flex-direction: column; height: 61%; justify-content: space-between; left: 28%; padding: 1.3rem; top: 22%; transform: rotate(-8deg); width: 45%; }
.card-top { align-items: center; display: flex; font-family: var(--mono); font-size: .48rem; justify-content: space-between; text-transform: uppercase; }.card-top i { background: var(--acid); border-radius: 50%; height: 5px; width: 5px; }
.hero-symbol { color: var(--acid); font-size: clamp(4rem, 7vw, 7rem); line-height: .5; text-align: center; }.hero-card-main p { font-size: clamp(1.05rem, 1.7vw, 1.7rem); font-weight: 700; letter-spacing: -.075em; line-height: .9; margin: 0; }.hero-card-main small { color: #c3c6bf; font-family: var(--mono); font-size: .45rem; letter-spacing: .05em; text-transform: uppercase; }
.hero-sticker { align-items: center; background: var(--orange); border-radius: 50%; bottom: 3%; display: flex; font-size: .57rem; font-weight: 800; height: 104px; justify-content: center; line-height: 1.1; position: absolute; right: 3%; text-align: center; transform: rotate(15deg); width: 104px; }.hero-sticker span { font-size: 1.2rem; margin-left: .25rem; }
.hero-meta { align-items: center; bottom: 1.2rem; display: flex; font-family: var(--mono); font-size: .58rem; justify-content: space-between; left: 4vw; letter-spacing: .03em; position: absolute; right: 4vw; text-transform: uppercase; }

.marquee { background: var(--ink); color: var(--paper); font-size: clamp(1.4rem, 2.3vw, 2.5rem); font-weight: 700; letter-spacing: -.07em; overflow: hidden; padding: .8rem 0 1rem; white-space: nowrap; }.marquee div { animation: move 24s linear infinite; display: inline-block; }.marquee b { color: var(--acid); font-family: var(--serif); font-weight: 400; margin: 0 1.7rem; }
@keyframes move { to { transform: translateX(-50%); } }

.section-space { margin-left: auto; margin-right: auto; max-width: 1500px; padding: clamp(6rem, 12vw, 12rem) 4vw; }
.intro { display: grid; grid-template-columns: .9fr 1.1fr; }.intro > div { display: grid; gap: 2rem; grid-template-columns: 1.2fr .8fr; }.intro h2, .section-heading h2, .services-intro h2, .process-heading h2, .contact h2 { font-size: clamp(2.8rem, 5.7vw, 6.25rem); font-weight: 700; letter-spacing: -.085em; line-height: .88; margin-bottom: 0; }.intro > div > p { align-self: end; font-size: .92rem; line-height: 1.7; margin: 0; max-width: 280px; }

.conversion-strip { background: var(--acid); color: var(--ink); padding: clamp(4.5rem, 8vw, 8rem) max(4vw, calc((100vw - 1500px) / 2 + 4vw)); position: relative; }
.conversion-strip::after { border: 1px solid rgba(29,31,27,.3); border-radius: 50%; content: ''; height: min(48vw, 680px); position: absolute; right: -15vw; top: -23vw; width: min(48vw, 680px); }
.conversion-strip .eyebrow { position: relative; z-index: 1; }
.conversion-grid { align-items: end; display: grid; gap: 2rem; grid-template-columns: .42fr 1.15fr .65fr; position: relative; z-index: 1; }
.conversion-mark { align-self: start; font-family: var(--mono); font-size: .65rem; letter-spacing: .06em; margin: .55rem 0 0; }
.conversion-grid h2 { font-size: clamp(3.2rem, 6.4vw, 7.2rem); font-weight: 700; letter-spacing: -.09em; line-height: .82; margin: 0; }
.conversion-grid h2 em { font-family: var(--serif); font-weight: 400; }
.conversion-grid > div { align-self: end; }
.conversion-grid > div p { font-size: .94rem; line-height: 1.65; margin-bottom: 1.7rem; max-width: 300px; }

.works { background: #dedbd3; max-width: none; padding-left: max(4vw, calc((100vw - 1500px)/2 + 4vw)); padding-right: max(4vw, calc((100vw - 1500px)/2 + 4vw)); }.section-heading { align-items: end; display: flex; justify-content: space-between; }.section-heading > p { font-size: .92rem; line-height: 1.7; margin: 0 5vw .7rem 0; max-width: 260px; }.filters { border-bottom: 1px solid var(--line); display: flex; gap: 1.4rem; margin: 5rem 0 2rem; overflow-x: auto; padding-bottom: .85rem; scrollbar-width: none; }.filters::-webkit-scrollbar { display: none; }.filter { background: transparent; border: 0; color: #777973; font-family: var(--mono); font-size: .68rem; flex: 0 0 auto; padding: .3rem 0; position: relative; text-transform: uppercase; }.filter::after { background: var(--ink); bottom: -.86rem; content: ''; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: right; transition: transform .3s; width: 100%; }.filter.active { color: var(--ink); }.filter.active::after { transform: scaleX(1); transform-origin: left; }.filter span { color: var(--orange); font-size: .55rem; margin-left: .15rem; }
.work-grid { display: grid; gap: clamp(.8rem, 1.6vw, 1.7rem); grid-auto-flow: dense; grid-auto-rows: minmax(170px, 17vw); grid-template-columns: repeat(4, 1fr); }.work-card { background: #7c86a0; color: white; min-height: 210px; overflow: hidden; position: relative; transition: opacity .3s, transform .4s; }.work-card.size-wide { grid-column: span 2; }.work-card.size-tall { grid-row: span 2; }.work-card.is-hidden { display: none; }.work-card img { height: 100%; object-fit: cover; position: absolute; transition: transform .7s cubic-bezier(.2,.7,.2,1); width: 100%; }.work-card::after { background: linear-gradient(0deg, rgba(16,18,14,.72), rgba(16,18,14,0) 58%); content: ''; inset: 0; opacity: .9; pointer-events: none; position: absolute; }.work-card:hover img { transform: scale(1.07); }.work-overlay { bottom: 0; left: 0; padding: clamp(1rem, 1.8vw, 1.7rem); position: absolute; right: 0; transform: translateY(5px); transition: transform .35s; z-index: 2; }.work-card:hover .work-overlay { transform: translateY(0); }.work-overlay span { font-family: var(--mono); font-size: .53rem; letter-spacing: .07em; text-transform: uppercase; }.work-overlay h3 { font-size: clamp(1rem, 1.55vw, 1.55rem); letter-spacing: -.065em; line-height: .93; margin: .45rem 0 .2rem; }.work-overlay p { font-size: .62rem; margin: 0; opacity: .78; }
.work-native { background: #f5dfe4; }.work-native::after { background: linear-gradient(0deg, rgba(31,20,23,.72), rgba(31,20,23,.06) 68%); }.phone-ui { background: #f6f2ea; border: 5px solid #29271f; border-radius: 17px; box-shadow: 9px 11px 0 rgba(41,39,31,.25); color: #30332c; height: 82%; left: 31%; overflow: hidden; padding: .65rem; position: absolute; top: 9%; transform: rotate(7deg); width: 45%; }.phone-head { align-items: center; display: flex; font-family: var(--mono); font-size: .45rem; justify-content: space-between; }.phone-head b { background: var(--acid); border-radius: 50%; display: grid; height: 15px; place-items: center; width: 15px; }.chat-bubble { background: #e1f6cb; border-radius: 9px 9px 9px 0; font-size: .49rem; line-height: 1.35; margin-top: 20%; padding: .45rem; }.quick-options { display: grid; font-size: .43rem; gap: 4px; margin-top: 10px; }.quick-options span { background: #f2d4c3; border-radius: 5px; padding: .32rem; text-align: center; }.chat-input { border-top: 1px solid #cfcec6; bottom: 4px; color: #999; font-size: .42rem; left: .5rem; padding-top: .35rem; position: absolute; right: .5rem; }.bot-blue { background: #8fbbff; }.bot-blue .quick-options span { background: #d7e8ff; }.calendar-row { display: flex; font-size: .45rem; gap: 4px; margin-top: 9px; }.calendar-row i { background: #e4e2d8; border-radius: 50%; font-style: normal; padding: .29rem; }.calendar-row .picked { background: var(--orange); }.bot-lilac { background: #b8a4df; }.bot-lilac .quick-options span { background: #e4d7f8; }
.social-card { background: #c6d8b8; }.insta-ui { background: #fbf6ec; color: #20231e; height: 84%; left: 14%; position: absolute; top: 8%; transform: rotate(-4deg); width: 70%; }.insta-top { align-items: center; display: flex; font-family: var(--mono); font-size: .45rem; justify-content: space-between; padding: .45rem; }.insta-top span { background: #d27e58; border-radius: 50%; height: 12px; width: 12px; }.insta-main { align-items: center; background: radial-gradient(circle at 68% 24%, #ffbe82 0 13%, transparent 13.3%), linear-gradient(135deg,#d26f4c,#e9c2a6 60%,#294332); display: flex; height: 62%; justify-content: center; }.insta-main em { color: #fff8e9; font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 2rem); line-height: .75; text-align: center; }.insta-bottom { font-size: .55rem; padding: .45rem; }.insta-bottom small { display: block; font-size: .42rem; margin-top: .4rem; }.social-sun { background: #f2ca3f; }.social-sun .insta-main { background: radial-gradient(circle at 35% 30%,#fff9cf 0 9%, transparent 9.3%), linear-gradient(140deg,#b9802d,#f8df95 62%,#b76143); }
.portfolio-note { color: #686963; font-family: var(--mono); font-size: .62rem; line-height: 1.6; margin: 2rem 0 0 auto; max-width: 480px; }

.site-showcase { border-top: 1px solid var(--line); margin-top: 5rem; padding-top: 1.5rem; }.site-showcase-intro { align-items: end; display: flex; justify-content: space-between; }.site-showcase-intro .eyebrow { margin-bottom: 0; }.site-showcase-intro h3 { font-size: clamp(1.7rem, 3.4vw, 3.6rem); letter-spacing: -.09em; line-height: .84; margin: 1.2rem 0 0; }.site-showcase-intro h3 em { font-family: var(--serif); font-weight: 400; }.site-showcase-intro > p { font-size: .74rem; line-height: 1.65; margin: 0 4vw .2rem 0; max-width: 265px; }.site-preview-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); margin-top: 3.2rem; }.site-preview { background: #f4f1ea; box-shadow: 0 12px 22px rgba(36,34,29,.08); overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s; }.site-preview:hover { box-shadow: 0 18px 32px rgba(36,34,29,.15); transform: translateY(-7px); }.browser-top { align-items: center; background: #e4e1d9; display: flex; gap: 5px; height: 28px; padding: 0 10px; }.browser-top i { background: #bdbab3; border-radius: 50%; height: 6px; width: 6px; }.browser-top span { color: #77756f; font-family: var(--mono); font-size: .42rem; margin-left: .4rem; text-transform: uppercase; }.site-screen { aspect-ratio: 1.14 / 1; overflow: hidden; position: relative; }.site-screen::after { background: linear-gradient(0deg,rgba(24,25,20,.58),transparent 64%); content: ''; inset: 0; pointer-events: none; position: absolute; }.site-screen > img { height: 100%; object-fit: cover; position: absolute; transition: transform .65s cubic-bezier(.2,.7,.2,1); width: 100%; }.site-preview:hover .site-screen > img { transform: scale(1.05); }.site-nav { align-items: center; color: #fffdf6; display: flex; font-family: var(--mono); font-size: .43rem; justify-content: space-between; left: 7%; position: absolute; right: 7%; top: 7%; z-index: 2; }.site-nav b { font-size: .62rem; letter-spacing: .06em; }.site-nav em { border: 1px solid rgba(255,255,255,.7); font-style: normal; padding: .32rem .42rem; }.site-hero-copy { bottom: 8%; color: #fffdf6; left: 7%; position: absolute; z-index: 2; }.site-hero-copy p { font-family: var(--mono); font-size: .46rem; letter-spacing: .05em; margin-bottom: .55rem; text-transform: uppercase; }.site-hero-copy h4 { font-size: clamp(1.15rem, 2vw, 2rem); letter-spacing: -.08em; line-height: .85; margin: 0; }.site-hero-copy h4 em { font-family: var(--serif); font-weight: 400; }.site-caption { align-items: center; display: flex; justify-content: space-between; padding: .85rem .95rem; }.site-caption span { font-family: var(--mono); font-size: .5rem; letter-spacing: .05em; text-transform: uppercase; }.site-caption button { background: transparent; border: 0; border-bottom: 1px solid var(--ink); font-size: .55rem; font-weight: 700; padding: 0 0 .2rem; }.moments { background: #e8e0d1; max-width: none; padding-left: max(4vw, calc((100vw - 1500px)/2 + 4vw)); padding-right: max(4vw, calc((100vw - 1500px)/2 + 4vw)); }.moments-heading { align-items: end; display: flex; justify-content: space-between; }.moments-heading > p { font-size: .9rem; line-height: 1.7; margin: 0 5vw .5rem 0; max-width: 275px; }.moments-grid { display: grid; gap: clamp(.8rem, 1.5vw, 1.5rem); grid-template-columns: repeat(2, 1fr); margin-top: 4.5rem; }.moment-card { background: var(--paper); display: flex; flex-direction: column; min-height: 475px; overflow: hidden; }.moment-feature { grid-column: span 1; min-height: 540px; }.moment-media { background: #34302e; min-height: 250px; overflow: hidden; position: relative; }.moment-feature .moment-media { flex: 1; min-height: 350px; }.moment-media::after { background: linear-gradient(0deg,rgba(20,17,16,.43),transparent 47%); content: ''; inset: 0; pointer-events: none; position: absolute; }.moment-media img { height: 100%; object-fit: cover; position: absolute; width: 100%; }.moment-greeting .moment-media img { object-position: center; }.moment-story .moment-media img { object-position: center; }.moment-copy { padding: 1rem 1.1rem 1.15rem; }.moment-copy > span { color: #77776f; font-family: var(--mono); font-size: .54rem; letter-spacing: .05em; text-transform: uppercase; }.moment-copy h3 { font-size: clamp(1.15rem, 1.7vw, 1.75rem); letter-spacing: -.073em; line-height: .93; margin: .55rem 0 .65rem; }.moment-feature .moment-copy h3 { font-size: clamp(1.55rem, 2.8vw, 3rem); }.moment-copy p { color: #686862; font-size: .69rem; line-height: 1.58; margin-bottom: 1.1rem; }.moment-order { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--ink); display: flex; font-size: .63rem; font-weight: 800; gap: .65rem; justify-content: space-between; padding: 0 0 .35rem; width: 100%; }.moment-order b { font-size: .9rem; }.moment-order:hover { color: #667b1b; }.moment-play { align-items: center; background: var(--acid); border: 0; border-radius: 50%; bottom: .8rem; color: var(--ink); display: flex; font-size: .75rem; height: 34px; justify-content: center; left: .8rem; padding-left: 3px; position: absolute; transition: transform .25s, background .25s; width: 34px; z-index: 2; }.moment-play:hover { background: #efff9c; transform: scale(1.12); }.moment-progress { background: rgba(255,255,255,.55); bottom: .95rem; height: 2px; left: 3.3rem; position: absolute; right: .9rem; z-index: 2; }.moment-progress i { background: var(--acid); display: block; height: 100%; width: 34%; }.moment-duration { bottom: 1.25rem; color: white; font-family: var(--mono); font-size: .42rem; position: absolute; right: .9rem; z-index: 3; }.moments-note { color: #6c6c64; font-family: var(--mono); font-size: .58rem; line-height: 1.5; margin: 1.2rem 0 0 auto; max-width: 550px; }
.bot-showcase { background: #c6e0ff; max-width: none; overflow: hidden; padding-left: max(4vw, calc((100vw - 1500px)/2 + 4vw)); padding-right: max(4vw, calc((100vw - 1500px)/2 + 4vw)); position: relative; }.bot-showcase::before { border: 1px solid rgba(32,35,30,.16); border-radius: 50%; content: ''; height: 73vw; left: -33vw; position: absolute; top: -38vw; width: 73vw; }.bot-heading { align-items: end; display: flex; justify-content: space-between; position: relative; z-index: 1; }.bot-heading > p { font-size: .9rem; line-height: 1.7; margin: 0 5vw .5rem 0; max-width: 285px; }.bot-stage { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: .72fr 1.28fr; margin-top: 5rem; min-height: 570px; position: relative; z-index: 1; }.bot-scenarios { border-right: 1px solid rgba(246,244,239,.22); display: flex; flex-direction: column; }.bot-scenario { align-items: center; background: transparent; border: 0; border-bottom: 1px solid rgba(246,244,239,.18); color: #bfc1ba; display: grid; gap: .35rem .65rem; grid-template-columns: 28px 1fr; padding: 1.2rem clamp(1rem, 2.1vw, 2rem); text-align: left; transition: background .25s, color .25s; }.bot-scenario span { color: var(--acid); font-family: var(--mono); font-size: .55rem; grid-row: span 2; }.bot-scenario b { font-size: .84rem; }.bot-scenario small { font-size: .61rem; line-height: 1.3; opacity: .7; }.bot-scenario.active, .bot-scenario:hover { background: var(--acid); color: var(--ink); }.bot-scenario.active span { color: var(--orange); }.bot-demo { align-items: center; display: grid; gap: clamp(1.5rem, 4vw, 5rem); grid-template-columns: minmax(185px, .68fr) 1fr; padding: clamp(1.6rem, 4vw, 4rem); }.demo-phone { background: #efeae0; border: 8px solid #10120e; border-radius: 25px; box-shadow: 11px 14px 0 rgba(178,207,238,.24); color: #242821; margin: 0 auto; max-width: 250px; min-height: 425px; overflow: hidden; padding: .6rem; position: relative; transform: rotate(3deg); width: 100%; }.demo-status { align-items: center; display: flex; font-family: var(--mono); font-size: .48rem; gap: .3rem; justify-content: space-between; padding: .1rem .3rem .5rem; }.demo-status i { background: #2d332a; border-radius: 50%; height: 5px; width: 5px; }.demo-status span { margin-right: auto; }.demo-profile { align-items: center; border-bottom: 1px solid #dad4ca; display: flex; gap: .45rem; padding: .35rem 0 .55rem; }.demo-avatar { align-items: center; background: var(--acid); border-radius: 50%; display: flex; font-size: .75rem; height: 25px; justify-content: center; width: 25px; }.demo-profile b { display: block; font-size: .56rem; }.demo-profile small { color: #8b8c83; display: block; font-size: .45rem; }.demo-profile > span { font-size: .6rem; margin-left: auto; }.demo-chat { display: flex; flex-direction: column; gap: .45rem; min-height: 194px; padding: .75rem 0; }.demo-time { color: #999b94; font-family: var(--mono); font-size: .43rem; margin: 0; text-align: center; }.demo-bubble { background: #fffdf7; border-radius: 8px 8px 8px 1px; box-shadow: 0 2px 6px rgba(47,45,39,.06); font-size: .55rem; line-height: 1.37; max-width: 88%; padding: .5rem; }.demo-bubble.user { align-self: end; background: #d9efb8; border-radius: 8px 8px 1px 8px; }.demo-choices { display: grid; gap: .35rem; }.demo-choices button { background: #deeefa; border: 1px solid #b7d5ee; border-radius: 5px; color: #294459; font-size: .51rem; padding: .45rem; transition: background .2s, transform .2s; }.demo-choices button:hover { background: var(--acid); transform: translateY(-1px); }.demo-input { align-items: center; border-top: 1px solid #dad4ca; bottom: .45rem; color: #999b94; display: flex; font-size: .47rem; justify-content: space-between; left: .6rem; padding-top: .45rem; position: absolute; right: .6rem; }.demo-input b { color: #5d93b4; font-size: .75rem; }.bot-demo-copy .eyebrow { margin-bottom: 1.4rem; }.bot-demo-copy h3 { font-size: clamp(1.65rem, 3vw, 3.25rem); letter-spacing: -.08em; line-height: .88; margin: 0 0 1.15rem; }.bot-demo-copy > p:not(.eyebrow) { color: #c8cbc3; font-size: .76rem; line-height: 1.65; max-width: 340px; }.bot-demo-copy ul { color: #c8cbc3; font-size: .65rem; line-height: 1.65; list-style: none; margin: 1.2rem 0 2rem; padding: 0; }.bot-demo-copy li::before { color: var(--acid); content: '✦'; font-size: .55rem; margin-right: .45rem; }.bot-order { align-items: center; background: var(--acid); border: 0; display: flex; font-size: .68rem; font-weight: 800; justify-content: space-between; padding: .85rem 1rem; width: min(100%, 305px); }.bot-order span { font-size: 1.05rem; }.bot-order:hover { background: #eeff9b; }.bot-benefits { border-top: 1px solid rgba(32,35,30,.18); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; position: relative; z-index: 1; }.bot-benefits p { align-items: center; border-right: 1px solid rgba(32,35,30,.18); display: flex; gap: 1rem; margin: 0; padding: 1.1rem 1rem 1.1rem 0; }.bot-benefits p:not(:first-child) { padding-left: 1rem; }.bot-benefits p:last-child { border-right: 0; }.bot-benefits b { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; letter-spacing: -.08em; }.bot-benefits span { font-family: var(--mono); font-size: .55rem; line-height: 1.4; text-transform: uppercase; }
.services { align-items: start; display: grid; grid-template-columns: .72fr 1.28fr; gap: 7vw; }.services-intro { position: sticky; top: 2rem; }.services-intro > p:last-child { font-size: .9rem; line-height: 1.72; margin: 2rem 0 0; max-width: 310px; }.price-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }.price-card { background: #e8e6df; display: flex; flex-direction: column; min-height: 575px; padding: clamp(1.25rem, 2vw, 2rem); position: relative; }.price-card:nth-child(1) { background: #f3d6c9; }.price-card:nth-child(3) { background: #d3e5c5; }.price-card.featured { background: var(--ink); color: var(--paper); transform: translateY(-1.5rem); }.popular { background: var(--acid); color: var(--ink); font-family: var(--mono); font-size: .52rem; letter-spacing: .06em; padding: .45rem .6rem; position: absolute; right: 0; top: 0; text-transform: uppercase; }.price-top { align-items: center; border-bottom: 1px solid currentColor; display: flex; font-family: var(--mono); font-size: .58rem; justify-content: space-between; padding-bottom: 1.1rem; }.price-top p { margin: 0; text-transform: uppercase; }.price-card h3 { font-size: clamp(1.38rem, 2vw, 2.1rem); letter-spacing: -.08em; line-height: .94; margin: 2.3rem 0 1rem; }.price-copy { font-size: .75rem; line-height: 1.55; margin-bottom: 2.2rem; }.price-card ul { font-size: .69rem; line-height: 1.6; list-style: none; margin: 0; padding: 0; }.price-card li { border-top: 1px solid rgba(32,35,30,.16); padding: .7rem 0; }.featured li { border-color: rgba(246,244,239,.22); }.price-card li::before { content: '✦'; font-size: .55rem; margin-right: .45rem; }.price { font-size: clamp(1.6rem, 2.5vw, 2.45rem); font-weight: 700; letter-spacing: -.08em; margin: auto 0 1.2rem; }.price small { font-family: var(--mono); font-size: .55rem; font-weight: 400; letter-spacing: 0; margin-right: .3rem; text-transform: uppercase; }.price-button { background: transparent; border: 1px solid currentColor; border-radius: 0; display: flex; font-size: .7rem; font-weight: 800; justify-content: space-between; padding: .8rem; transition: background .25s, color .25s, transform .25s; }.price-button:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }.featured .price-button:hover { background: var(--acid); color: var(--ink); }

.finder { background: #f1b554; display: grid; gap: 8vw; grid-template-columns: .8fr 1.2fr; max-width: none; padding-left: max(4vw, calc((100vw - 1500px)/2 + 4vw)); padding-right: max(4vw, calc((100vw - 1500px)/2 + 4vw)); }.finder-copy > p:not(.eyebrow) { font-size: .9rem; line-height: 1.7; margin: 2rem 0 0; max-width: 290px; }.finder-panel { background: var(--ink); color: var(--paper); min-height: 460px; padding: clamp(1.1rem, 2.3vw, 2.3rem); position: relative; }.finder-tabs { display: flex; gap: .35rem; position: relative; z-index: 1; }.finder-tab { background: transparent; border: 1px solid rgba(246,244,239,.37); border-radius: 100px; color: var(--paper); font-size: .66rem; font-weight: 700; padding: .55rem .7rem; transition: background .2s, color .2s; }.finder-tab.active, .finder-tab:hover { background: var(--acid); border-color: var(--acid); color: var(--ink); }.finder-result { min-height: 380px; padding-top: 4.6rem; position: relative; transition: opacity .2s, transform .2s; }.finder-result.is-switching { opacity: 0; transform: translateY(8px); }.route-number { color: var(--acid); font-family: var(--mono); font-size: .63rem; }.route-label { color: #bfc1ba; font-family: var(--mono); font-size: .55rem; letter-spacing: .08em; margin: .45rem 0 1rem; text-transform: uppercase; }.finder-result h3 { font-size: clamp(2rem, 3.4vw, 3.7rem); letter-spacing: -.08em; line-height: .85; margin: 0; }.route-copy { font-size: .78rem; line-height: 1.6; margin: 1.2rem 0; max-width: 390px; }.finder-result ul { color: #c5c7c0; font-size: .65rem; line-height: 1.7; list-style: none; margin: 0; padding: 0; }.finder-result li::before { color: var(--acid); content: '✦'; margin-right: .5rem; }.route-button { align-items: center; border-bottom: 1px solid var(--paper); bottom: 0; display: flex; font-size: .72rem; font-weight: 800; justify-content: space-between; left: 0; padding: 0 0 .55rem; position: absolute; right: 0; transition: color .2s; }.route-button:hover { color: var(--acid); }.route-button span { font-size: 1.2rem; }
.extras { padding-bottom: clamp(6rem, 11vw, 11rem); }.extras-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 4rem; }.extras-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }.extra-card { border-right: 1px solid var(--line); min-height: 250px; padding: 1.25rem 1.25rem 1.25rem 0; position: relative; }.extra-card:not(:first-child) { padding-left: 1.25rem; }.extra-card:last-child { border-right: 0; }.extra-card > span { color: var(--orange); font-family: var(--serif); font-size: 1.6rem; }.extra-card h3 { font-size: 1.1rem; letter-spacing: -.06em; margin: 4rem 0 .8rem; }.extra-card p { color: #666961; font-size: .72rem; line-height: 1.6; margin: 0; max-width: 205px; }
.motion-card { background: #d85978; }.motion-card::after { background: linear-gradient(0deg, rgba(18,14,20,.7), rgba(18,14,20,.04) 72%); }.clip-frame { background: radial-gradient(circle at 72% 20%,#ffc5b3 0 8%,transparent 8.2%), linear-gradient(130deg,#261d3e,#e16176); inset: 0; overflow: hidden; position: absolute; }.clip-glow { background: #a7e359; border-radius: 50%; filter: blur(4px); height: 60%; left: 13%; position: absolute; top: 15%; width: 60%; }.clip-person { background: #20192b; border-radius: 50% 50% 20% 20%; bottom: -9%; height: 64%; left: 32%; position: absolute; transform: rotate(-10deg); width: 36%; }.clip-person::before { background: #d8856f; border-radius: 46% 46% 43% 43%; content: ''; height: 47%; left: 20%; position: absolute; top: -24%; transform: rotate(8deg); width: 62%; }.clip-person::after { background: #44355f; border-radius: 50% 50% 20% 20%; content: ''; height: 36%; left: 12%; position: absolute; top: -29%; width: 77%; }.clip-name { color: #fff3dc; font-size: clamp(1.3rem, 2.2vw, 2.4rem); font-weight: 800; left: 9%; letter-spacing: -.09em; line-height: .74; position: absolute; top: 10%; }.clip-name em { font-family: var(--serif); font-size: .55em; font-weight: 400; }.play-icon { align-items: center; background: var(--acid); border: 0; border-radius: 50%; bottom: 29%; color: var(--ink); display: flex; font-size: .7rem; height: 32px; justify-content: center; left: 10%; padding-left: 3px; position: absolute; transition: transform .25s; width: 32px; z-index: 1; }.motion-card:hover .play-icon { transform: scale(1.18); }.clip-timeline { background: rgba(255,255,255,.4); bottom: 19%; height: 2px; left: 10%; position: absolute; right: 10%; }.clip-timeline i { background: var(--acid); display: block; height: 100%; width: 52%; }.motion-blue { background: #5d8ee7; }.motion-blue .clip-frame { background: radial-gradient(circle at 25% 20%,#f0f4c7 0 9%,transparent 9.2%), linear-gradient(130deg,#1a3b75,#67a4ef); }.motion-blue .clip-glow { background: #ff8b55; left: 42%; top: 18%; }.motion-blue .clip-person { background: #d5efef; transform: rotate(9deg); }.motion-blue .clip-person::before { background: #714740; }.motion-blue .clip-person::after { background: #1c253d; }.motion-peach { background: #e58f71; }.motion-peach .clip-frame { background: radial-gradient(circle at 70% 23%,#fff2bd 0 10%,transparent 10.2%), linear-gradient(130deg,#7e2846,#f0a074); }.motion-peach .clip-glow { background: #bd93ed; }.motion-peach .clip-person { background: #fff4d5; }.motion-peach .clip-person::before { background: #8a5a47; }.motion-peach .clip-person::after { background: #f6d290; }
.process { background: var(--ink); color: var(--paper); max-width: none; padding-left: max(4vw, calc((100vw - 1500px)/2 + 4vw)); padding-right: max(4vw, calc((100vw - 1500px)/2 + 4vw)); }.process-list { counter-reset: steps; list-style: none; margin: 5rem 0 0 auto; max-width: 870px; padding: 0; }.process-list li { align-items: start; border-top: 1px solid rgba(246,244,239,.25); display: grid; gap: 1rem; grid-template-columns: 75px 1fr 30px; padding: 1.5rem 0; }.process-list li:last-child { border-bottom: 1px solid rgba(246,244,239,.25); }.process-list span { color: var(--acid); font-family: var(--mono); font-size: .65rem; padding-top: .25rem; }.process-list h3 { font-size: clamp(1.3rem, 2vw, 2.2rem); letter-spacing: -.07em; margin: 0 0 .5rem; }.process-list p { color: #c8c9c4; font-size: .8rem; line-height: 1.6; margin: 0; max-width: 415px; }.process-list b { color: var(--acid); font-size: 1.1rem; font-weight: 400; text-align: right; }

.contact { background: #b9a1ff; display: grid; gap: 10vw; grid-template-columns: .75fr 1.25fr; max-width: none; overflow: hidden; padding-left: max(4vw, calc((100vw - 1500px)/2 + 4vw)); padding-right: max(4vw, calc((100vw - 1500px)/2 + 4vw)); position: relative; }.contact::after { border: 1px solid rgba(32,35,30,.35); border-radius: 50%; content: ''; height: 50vw; min-height: 570px; position: absolute; right: -19vw; top: -19vw; width: 50vw; }.contact-left { position: relative; z-index: 1; }.contact-left > p:not(.eyebrow) { font-size: .9rem; line-height: 1.6; margin: 2rem 0; max-width: 305px; }.direct-telegram { border-bottom: 1px solid var(--ink); display: inline-flex; font-family: var(--mono); font-size: .59rem; gap: .5rem; letter-spacing: .02em; padding-bottom: .35rem; text-transform: uppercase; transition: transform .2s; }.direct-telegram:hover { transform: translateX(4px); }.direct-telegram span { font-size: .85rem; }.contact-spark { align-items: center; background: var(--acid); border-radius: 50%; display: flex; font-size: 3rem; height: 110px; justify-content: center; margin-top: 5rem; transform: rotate(15deg); width: 110px; }.contact-form { background: var(--paper); display: grid; gap: 1.3rem; padding: clamp(1.4rem, 3vw, 3rem); position: relative; z-index: 2; }.contact-form label { color: #5e605c; display: grid; font-family: var(--mono); font-size: .58rem; gap: .55rem; letter-spacing: .05em; text-transform: uppercase; }.form-row.two-cols { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }.contact-form input:not([type="checkbox"]), .contact-form textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); font-family: var(--sans); font-size: .95rem; outline: none; padding: .5rem 0 .75rem; resize: vertical; transition: border-color .2s; }.contact-form input:focus, .contact-form textarea:focus { border-color: var(--ink); }.contact-form input::placeholder, .contact-form textarea::placeholder { color: #9c9d98; }.consent { align-items: start; font-family: var(--sans) !important; font-size: .67rem !important; gap: .6rem !important; letter-spacing: 0 !important; line-height: 1.45; text-transform: none !important; }.consent input { accent-color: var(--ink); margin: .1rem 0 0; }.submit-button { justify-content: space-between; margin-top: .5rem; width: 100%; }.submit-button:disabled { cursor: wait; opacity: .55; }.form-status { font-size: .72rem; line-height: 1.45; margin: -.45rem 0 0; min-height: 1.1rem; }.form-status.success { color: #287521; }.form-status.error { color: #b23e28; }
.site-footer { align-items: center; background: var(--ink); color: var(--paper); display: grid; font-size: .68rem; gap: 1rem; grid-template-columns: 1fr 2fr 1fr auto; padding: 1.4rem 4vw; }.site-footer .brand { font-size: 1.1rem; }.site-footer p { color: #a5a7a0; margin: 0; }.site-footer > a:not(.brand) { border-bottom: 1px solid var(--paper); font-weight: 700; justify-self: start; padding-bottom: .2rem; }.site-footer small { color: #a5a7a0; font-family: var(--mono); font-size: .52rem; text-align: right; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }.reveal.is-visible { opacity: 1; transform: translateY(0); }.work-card.reveal { transform: translateY(25px); }.work-card.reveal.is-visible { transform: translateY(0); }.work-card:nth-child(2), .price-card:nth-child(2) { transition-delay: .08s; }.work-card:nth-child(3), .price-card:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1020px) { .hero { min-height: auto; }.hero-art { width: 48vw; }.intro, .services, .contact { gap: 4vw; }.services { grid-template-columns: .7fr 1.3fr; }.price-grid { grid-template-columns: 1fr; }.price-card { min-height: 440px; }.price-card.featured { transform: none; }.price-card h3 { margin-top: 1.5rem; }.work-grid { grid-auto-rows: 23vw; grid-template-columns: repeat(3, 1fr); }.work-card.size-tall { grid-row: span 2; }.site-footer { grid-template-columns: 1fr 1.5fr 1fr; }.site-footer small { display: none; } }
@media (max-width: 700px) { .site-header { padding: 20px 5vw; }.menu-toggle { display: block; position: relative; z-index: 2; }.main-nav { align-items: stretch; background: var(--paper); display: flex; flex-direction: column; gap: 1.5rem; inset: 0; justify-content: center; opacity: 0; padding: 6rem 8vw 3rem; pointer-events: none; position: fixed; transform: translateY(-8px); transition: opacity .25s, transform .25s; }.main-nav > a { font-size: 1.35rem; }.main-nav .nav-cta { font-size: .85rem; padding: 1rem 1.1rem; text-align: center; }.menu-open { overflow: hidden; }.menu-open .main-nav { opacity: 1; pointer-events: auto; transform: translateY(0); }.menu-open .menu-toggle i:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-open .menu-toggle i:last-child { transform: translateY(-3.5px) rotate(-45deg); }.hero { display: flex; flex-direction: column; padding: 12vw 5vw 2rem; }.hero-copy { padding: 0; }.hero-text { max-width: 380px; }.hero-art { height: 90vw; margin: 9vw auto 0; width: 90vw; }.hero-meta { bottom: 1rem; font-size: .47rem; left: 5vw; right: 5vw; }.hero-meta span:last-child { display: none; }.hero-sticker { height: 84px; width: 84px; }.section-space { padding: 5.5rem 5vw; }.intro { display: block; }.intro .eyebrow { margin-bottom: 3rem; }.intro > div { display: block; }.intro > div > p { margin-top: 2rem; }.section-heading { align-items: start; display: block; }.section-heading > p { margin: 2rem 0 0; }.filters { margin-top: 3.5rem; }.work-grid { grid-auto-rows: 52vw; grid-template-columns: repeat(2, 1fr); }.work-card.size-wide { grid-column: span 2; }.work-card.size-tall { grid-row: span 2; }.work-overlay { padding: .9rem; }.work-overlay h3 { font-size: 1.05rem; }.services { display: block; }.services-intro { position: static; }.services-intro > p:last-child { margin-bottom: 3.5rem; }.price-grid { gap: .8rem; }.price-card { min-height: 405px; }.process-list { margin-top: 3.5rem; }.process-list li { grid-template-columns: 38px 1fr 20px; }.contact { display: block; }.contact-left { margin-bottom: 3.5rem; }.contact-spark { display: none; }.contact::after { height: 80vw; min-height: 0; right: -26vw; top: -18vw; width: 80vw; }.form-row.two-cols { grid-template-columns: 1fr; }.site-footer { align-items: start; grid-template-columns: 1fr 1fr; padding: 1.5rem 5vw; }.site-footer p { display: none; }.site-footer > a:not(.brand) { justify-self: end; }.site-footer small { display: block; grid-column: 1 / -1; text-align: left; } }
@media (max-width: 1020px) { .finder { gap: 4vw; grid-template-columns: .75fr 1.25fr; }.extras-grid { grid-template-columns: repeat(2, 1fr); }.extra-card:nth-child(2) { border-right: 0; }.extra-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 700px) { .finder { display: block; }.finder-copy { margin-bottom: 3.5rem; }.finder-result { min-height: 360px; padding-top: 3.5rem; }.finder-tabs { overflow-x: auto; }.extras-heading { display: block; margin-bottom: 3rem; }.extras-heading h2 { margin-top: 2rem; }.extras-grid { grid-template-columns: 1fr; }.extra-card, .extra-card:not(:first-child) { border-bottom: 1px solid var(--line); border-right: 0; min-height: 0; padding: 1.2rem 0; }.extra-card h3 { margin: 1.2rem 0 .6rem; } }
.motion-card.is-playing .clip-glow { animation: pulse 1.1s ease-in-out infinite alternate; }.motion-card.is-playing .clip-person { animation: sway .75s ease-in-out infinite alternate; }.motion-card.is-playing .clip-timeline i { animation: progress 2.8s linear infinite; }@keyframes pulse { to { transform: scale(1.3); } }@keyframes sway { to { transform: rotate(8deg) translateY(-5px); } }@keyframes progress { from { width: 5%; } to { width: 100%; } }
@media (max-width: 1020px) { .bot-stage { grid-template-columns: .75fr 1.25fr; }.bot-demo { gap: 2rem; grid-template-columns: minmax(170px, .66fr) 1fr; }.demo-phone { min-height: 400px; }.bot-scenario { padding: 1rem; } }
@media (max-width: 700px) { .bot-heading { display: block; }.bot-heading > p { margin: 2rem 0 0; }.bot-stage { display: block; margin-top: 3rem; }.bot-scenarios { border-bottom: 1px solid rgba(246,244,239,.22); border-right: 0; }.bot-scenario { grid-template-columns: 27px 1fr; padding: .85rem 1rem; }.bot-scenario small { display: none; }.bot-demo { display: block; padding: 1.25rem; }.demo-phone { margin: 0 auto 2.5rem; max-width: 245px; min-height: 400px; }.bot-demo-copy { text-align: left; }.bot-benefits { grid-template-columns: 1fr; }.bot-benefits p, .bot-benefits p:not(:first-child) { border-bottom: 1px solid rgba(32,35,30,.18); border-right: 0; padding: 1rem 0; }.bot-benefits p:last-child { border-bottom: 0; } }
.moment-card.is-playing .moment-progress i { animation: moment-progress 2.5s linear infinite; }.moment-card.is-playing .moment-media img { animation: soft-zoom 2.5s ease-in-out infinite alternate; }.moment-card.is-playing .reel-figure { animation: reel-sway .8s ease-in-out infinite alternate; }.moment-card.is-playing .invite-card { animation: invite-float 1.2s ease-in-out infinite alternate; }@keyframes moment-progress { from { width: 5%; } to { width: 100%; } }@keyframes soft-zoom { to { transform: scale(1.07); } }@keyframes reel-sway { to { transform: rotate(7deg) translateY(-5px); } }@keyframes invite-float { to { transform: rotate(5deg) translateY(-7px); } }
@media (max-width: 1020px) { .case-film { grid-template-columns: .3fr .7fr; }.case-film-main { grid-template-columns: 1fr 1fr; }.case-visual { min-height: 520px; }.moments-grid { grid-template-columns: repeat(2, 1fr); }.moment-card { min-height: 470px; }.moment-feature { grid-row: span 1; min-height: 560px; }.moment-feature .moment-media { min-height: 330px; }.moments-heading { align-items: start; } }
@media (max-width: 700px) { .case-film { display: block; margin-top: 3.5rem; }.case-switcher { border-bottom: 1px solid rgba(246,244,239,.2); border-right: 0; }.case-tab { grid-template-columns: 25px 1fr; padding: .9rem 1rem; }.case-tab small { display: none; }.case-film-main { display: block; }.case-visual { min-height: 64vw; }.case-story { min-height: 450px; padding: 1.3rem; }.case-story h3 { font-size: 2.6rem; }.case-facts { margin: 1.3rem 0; }.moments-heading { display: block; }.moments-heading > p { margin: 2rem 0 0; }.moments-grid { grid-template-columns: 1fr; margin-top: 3rem; }.moment-card,.moment-feature { min-height: auto; }.moment-media,.moment-feature .moment-media { min-height: 75vw; }.moment-copy { padding: 1.1rem; }.moment-feature .moment-copy h3 { font-size: 1.8rem; }.moments-note { margin-left: 0; }.direct-telegram { font-size: .52rem; } }
/* Calm premium refinement: restrained palette, clear hierarchy, generous whitespace. */
:root { --ink: #1d1f1b; --paper: #f3f1ec; --acid: #cbd6a6; --lilac: #c7c1b7; --orange: #85966d; --line: rgba(29,31,27,.14); }
body { background: #f3f1ec; }
.noise { opacity: .018; }
.hero-art::before { background: #c8cfb8; }.hero-card-back { background: #e4e0d7; }.mini-grid b:nth-child(1) { background: #798a70; }.mini-grid b:nth-child(2) { background: #c9a88c; }.mini-grid b:nth-child(3) { background: #40463b; }.mini-grid b:nth-child(4) { background: #d9d4ca; }.hero-sticker { background: #b2bd98; }.eyebrow span { background: #71835c; }
.marquee { background: #1d1f1b; }.marquee b { color: #cbd6a6; }
.works { background: #e4e1d9; }.work-grid { gap: 1rem; grid-auto-rows: clamp(240px, 23vw, 330px); grid-template-columns: repeat(3, minmax(0,1fr)); }.work-card.size-wide, .work-card.size-tall { grid-column: span 1; grid-row: span 1; }.work-card { background: #8d9288; }.work-overlay { background: linear-gradient(0deg,rgba(18,20,17,.35),transparent 75%); transform: translateY(0); }.portfolio-note { color: #676963; }
.site-showcase { border-color: rgba(29,31,27,.18); }.site-preview { box-shadow: 0 8px 20px rgba(26,28,24,.08); }.site-preview:hover { box-shadow: 0 15px 27px rgba(26,28,24,.12); }.site-caption { background: #f6f4ef; }
.bot-showcase { background: #e0ddd5; }.bot-showcase::before { border-color: rgba(29,31,27,.12); }.bot-stage { box-shadow: 0 10px 26px rgba(28,30,25,.12); }.bot-benefits p { border-color: rgba(29,31,27,.15); }
.moments { background: #e7e3dc; }.moment-card { background: #f7f5f0; }.moment-order:hover { color: #58644d; }
.services { background: #f3f1ec; }.price-card,.price-card:nth-child(1),.price-card:nth-child(3) { background: #e7e4dc; }.price-card.featured { background: #1d1f1b; }.popular { background: #cbd6a6; }.finder { background: #d8dbcf; }.finder-panel,.process,.site-footer { background: #1d1f1b; }.extras { background: #f3f1ec; }.extra-card > span { color: #71835c; }.contact { background: #ddd9d0; }.contact-spark { background: #cbd6a6; }
.button-bright,.bot-order { background: #cbd6a6; }.button-bright:hover,.bot-order:hover { background: #dbe5be; }.nav-cta { background: #1d1f1b; }.nav-cta span { color: #cbd6a6; }
.section-heading > p,.moments-heading > p,.bot-heading > p { color: #5f625b; }.hero-text { color: #4f534c; }
@media (max-width: 1020px) { .work-grid { grid-auto-rows: 29vw; grid-template-columns: repeat(3, minmax(0,1fr)); }.work-card.size-wide,.work-card.size-tall { grid-column: span 1; grid-row: span 1; } }
@media (max-width: 700px) { .work-grid { grid-auto-rows: 58vw; grid-template-columns: repeat(2, minmax(0,1fr)); }.work-card.size-wide,.work-card.size-tall { grid-column: span 1; grid-row: span 1; }.work-card:first-child { grid-column: span 2; }.filters { gap: 1.15rem; }.site-showcase-intro { display: block; }.site-showcase-intro > p { margin: 1.5rem 0 0; }.site-preview-grid { grid-template-columns: 1fr; }.site-screen { aspect-ratio: 1.3 / 1; }.moments-grid { grid-template-columns: 1fr; } }
.bot-card { background: #dfe9ee; }.bot-blue { background: #e0ebf1; }.bot-lilac { background: #e7e5e0; }.bot-card::after { background: linear-gradient(0deg,rgba(22,33,38,.72),rgba(22,33,38,0) 58%); }.tg-preview { background: #e8f0f5; box-shadow: 0 7px 16px rgba(29,44,52,.15); color: #273038; inset: 7% 13% 13%; overflow: hidden; position: absolute; }.tg-header { align-items: center; background: #fff; display: flex; gap: .35rem; height: 18%; padding: .4rem .45rem; }.tg-header > b { color: #6e8b9a; font-size: 1.1rem; font-weight: 400; }.tg-header > i { align-items: center; background: #a8d7d1; border-radius: 50%; display: flex; font-size: .65rem; font-style: normal; height: 22px; justify-content: center; width: 22px; }.tg-header span { display: grid; line-height: 1.2; }.tg-header strong { font-size: .5rem; }.tg-header small { color: #89969b; font-size: .39rem; }.tg-header em { color: #71838b; font-size: .75rem; font-style: normal; margin-left: auto; }.tg-chat { background-color: #e7eff3; background-image: radial-gradient(rgba(123,154,167,.13) 1px,transparent 1px); background-size: 9px 9px; height: 72%; overflow: hidden; padding: .55rem .4rem; }.tg-chat > p { color: #78909a; font-family: var(--mono); font-size: .35rem; margin: 0 0 .4rem; text-align: center; }.tg-chat > div { background: white; border-radius: 5px 5px 5px 1px; box-shadow: 0 1px 2px rgba(29,44,52,.08); font-size: .4rem; line-height: 1.35; margin: .3rem 0; padding: .37rem; width: fit-content; max-width: 88%; }.tg-chat > .tg-user { background: #d9f2ca; border-radius: 5px 5px 1px 5px; margin-left: auto; }.tg-user small { color: #6b8a76; display: block; font-size: .28rem; margin-top: .14rem; text-align: right; }.tg-chat section { display: grid; gap: 3px; grid-template-columns: 1fr 1fr; margin: .3rem 0; }.tg-chat section button { background: #fff; border: 1px solid #9ac7df; border-radius: 3px; color: #3980a6; font-size: .35rem; line-height: 1.15; padding: .3rem .15rem; }.tg-input { align-items: center; background: #fff; bottom: 0; color: #95a0a3; display: flex; font-size: .4rem; height: 10%; left: 0; padding: .3rem .4rem; position: absolute; right: 0; }.tg-input b { color: #50a3ca; font-size: .7rem; margin-left: auto; }.social-card { background: #e6e3dc; }.social-sun { background: #e9e2d6; }.social-card::after { background: linear-gradient(0deg,rgba(21,23,20,.75),rgba(21,23,20,0) 48%); }.social-profile { background: #fff; color: #1f201e; inset: 6% 7% 16%; overflow: hidden; padding: .45rem; position: absolute; }.social-top { align-items: center; display: flex; font-size: .45rem; justify-content: space-between; }.social-top b { font-size: .5rem; }.social-top span { font-size: .45rem; }.social-info { align-items: center; display: grid; gap: .2rem; grid-template-columns: 1.1fr repeat(3,1fr); margin-top: .45rem; text-align: center; }.social-info > img { aspect-ratio: 1; border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }.social-info p { font-size: .38rem; margin: 0; }.social-info b,.social-info small { display: block; }.social-info small { color: #767771; font-size: .3rem; }.social-profile > strong { display: block; font-size: .38rem; margin-top: .4rem; }.social-bio { color: #52534d; display: block; font-size: .32rem; margin-top: .12rem; }.social-actions { display: flex; gap: .2rem; margin-top: .35rem; }.social-actions button { background: #eef0ec; border: 0; border-radius: 3px; font-size: .31rem; font-weight: 600; padding: .28rem; }.social-actions button:first-child { flex: 1; }.social-highlights { display: flex; gap: .3rem; margin: .35rem 0; }.social-highlights span { display: grid; font-size: .27rem; gap: .1rem; text-align: center; width: 23%; }.social-highlights i { border: 1px solid #ddd; border-radius: 50%; display: block; overflow: hidden; padding: 1px; }.social-highlights img { aspect-ratio: 1; border-radius: 50%; display: block; height: 100%; object-fit: cover; width: 100%; }.social-grid { display: grid; gap: 1px; grid-template-columns: repeat(3,1fr); }.social-grid img { aspect-ratio: 1; display: block; object-fit: cover; width: 100%; }.demo-phone { background: #e8f0f5; border: 1px solid #b8c7cf; border-radius: 15px; box-shadow: 0 9px 20px rgba(35,54,62,.14); transform: none; }.demo-status { background: #fff; padding: .25rem .35rem .42rem; }.demo-status i { display: none; }.demo-avatar { background: #a8d7d1; color: #31545a; font-size: .55rem; font-weight: 700; }.demo-profile { background: #fff; }.demo-chat { background-color: #e7eff3; background-image: radial-gradient(rgba(123,154,167,.13) 1px,transparent 1px); background-size: 9px 9px; margin: 0 -.6rem; min-height: 194px; padding: .75rem .6rem; }.demo-bubble { box-shadow: 0 1px 2px rgba(29,44,52,.08); }.demo-choices button { background: #fff; border-color: #9ac7df; color: #3980a6; }.demo-input { background: #fff; bottom: 0; left: 0; padding: .5rem; right: 0; }
.moment-frame { background: rgba(20,22,18,.66); bottom: .8rem; color: #fff; font-family: var(--mono); font-size: .42rem; left: .8rem; letter-spacing: .06em; padding: .38rem .45rem; position: absolute; text-transform: uppercase; z-index: 2; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
.form-status a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.form-status.info { color: #5c6258; }
.nav-telegram { color: #596254; font-family: var(--mono); font-size: .65rem; }
.nav-telegram span { color: #425039; font-weight: 700; }
.portfolio-image-trigger { background: transparent; border: 0; cursor: zoom-in; inset: 0; padding: 0; position: absolute; width: 100%; }
.portfolio-image-trigger img { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; transition: transform .7s cubic-bezier(.2,.7,.2,1); width: 100%; }
.portfolio-image-card:hover .portfolio-image-trigger img { transform: scale(1.07); }
.portfolio-image-card .work-overlay, .portfolio-video-card .work-overlay { pointer-events: none; }
.portfolio-video-card { background: #181a17; }
.portfolio-video-card video { background: #111; height: 100%; left: 0; object-fit: contain; position: absolute; top: 0; width: 100%; }
.portfolio-video-card::after { background: linear-gradient(180deg,rgba(12,13,11,.65),transparent 42%); }
.portfolio-video-card .work-overlay { bottom: auto; top: 0; }
.portfolio-viewer { background: #181a17; border: 0; max-height: 90vh; max-width: min(92vw, 1060px); padding: .7rem; width: min(92vw, 1060px); }
.portfolio-viewer::backdrop { background: rgba(14,16,13,.78); backdrop-filter: blur(5px); }
.portfolio-viewer figure { margin: 0; position: relative; }
.portfolio-viewer img { display: block; height: min(78vh, 920px); object-fit: contain; width: 100%; }
.portfolio-viewer figcaption { color: #f3f1ec; font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; padding: .7rem .2rem .15rem; text-transform: uppercase; }
.portfolio-viewer-close { align-items: center; background: #f3f1ec; border: 0; border-radius: 50%; color: #1d1f1b; display: flex; font-size: 1.35rem; height: 34px; justify-content: center; line-height: 1; padding: 0 0 .12rem; position: absolute; right: 1.15rem; top: 1.15rem; width: 34px; z-index: 2; }
.portfolio-viewer-close:hover { background: #cbd6a6; }
@media (max-width: 700px) { .nav-telegram { font-size: .8rem; }.portfolio-viewer { padding: .45rem; }.portfolio-viewer img { height: min(78vh, 780px); }.portfolio-viewer-close { right: .8rem; top: .8rem; } }
.tg-chat section span { background: #fff; border: 1px solid #9ac7df; border-radius: 3px; color: #3980a6; font-size: .35rem; line-height: 1.15; padding: .3rem .15rem; text-align: center; }
.social-actions span { background: #eef0ec; border-radius: 3px; display: block; font-size: .31rem; font-weight: 600; padding: .28rem; text-align: center; }.social-actions span:first-child { flex: 1; }

/* Interactive Telegram case study. */
.bot-lab { --bot-accent: #d7ef78; --bot-muted: #afb8ba; background: #121b1f; color: #f4f6ed; max-width: none; overflow: hidden; padding: clamp(4.5rem, 8vw, 8rem) max(4vw, calc((100vw - 1380px) / 2)); scroll-margin-top: 1rem; }
.bot-lab * { min-width: 0; }
.bot-lab .eyebrow { color: #bac4c5; font-size: .8rem; letter-spacing: .08em; }
.bot-lab .eyebrow span { background: var(--bot-accent); }
.bot-lab-heading { align-items: end; display: grid; gap: 2.5rem; grid-template-columns: 1.5fr 1fr; margin-bottom: 3rem; }
.bot-lab-heading h2 { font-size: clamp(2.8rem, 6vw, 6.4rem); font-weight: 600; letter-spacing: -.065em; line-height: 1.02; margin: 0; }
.bot-lab-heading h2 em { color: var(--bot-accent); font-family: var(--serif); font-weight: 400; }
.bot-lab-intro { max-width: 350px; padding-bottom: .35rem; }
.bot-lab-intro p { color: #c0c9ca; font-size: 1.0625rem; line-height: 1.65; margin: 0 0 1.4rem; }
.bot-lab-hint { color: var(--bot-accent); font-size: .875rem; }
.bot-lab-board { border: 1px solid #3c4649; border-radius: 22px; overflow: hidden; }
.bot-lab-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bot-tab { background: #1b2529; border: 0; border-bottom: 1px solid #3c4649; border-right: 1px solid #3c4649; color: #f4f6ed; display: grid; gap: .5rem .85rem; grid-template-columns: auto 1fr; padding: 1.5rem; text-align: left; transition: background .2s, color .2s; }
.bot-tab:last-child { border-right: 0; }
.bot-tab > span { color: #a9b5b8; font-family: var(--mono); font-size: .75rem; grid-row: span 2; padding-top: .25rem; }
.bot-tab b { font-size: 1.1rem; font-weight: 600; }
.bot-tab small { color: #adb9bc; font-size: .875rem; line-height: 1.3; }
.bot-tab:hover { background: #2a373c; }
.bot-tab.active { background: var(--bot-accent); color: #172025; }
.bot-tab.active > span, .bot-tab.active small { color: #3f4f25; }
.bot-lab-scene { align-items: center; display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: clamp(1.5rem, 4vw, 4rem); }
.bot-lab-kicker { color: var(--bot-accent); font-family: var(--mono); font-size: .75rem; letter-spacing: .07em; margin: 0 0 1.7rem; text-transform: uppercase; }
.bot-lab-copy h3 { font-size: clamp(2rem, 3.6vw, 3.8rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; margin: 0 0 1.4rem; }
.bot-lab-copy > p:not(.bot-lab-kicker):not(.bot-lab-note) { color: #bec8ca; font-size: 1rem; line-height: 1.7; max-width: 420px; }
.bot-lab-copy ul { border-top: 1px solid #344247; color: #dde4e5; font-size: .9375rem; line-height: 1.5; list-style: none; margin: 1.6rem 0 2rem; padding: 1rem 0 0; }
.bot-lab-copy li { align-items: baseline; display: flex; gap: .75rem; padding: .4rem 0; }
.bot-lab-copy li::before { color: var(--bot-accent); content: '↗'; }
.bot-lab-order { align-items: center; background: var(--bot-accent); border: 0; border-radius: 9px; color: #172025; display: flex; font-size: .9375rem; font-weight: 650; gap: 1rem; justify-content: space-between; min-height: 54px; padding: .9rem 1.2rem; text-align: left; transition: background .2s; width: min(100%, 350px); }
.bot-lab-order:hover { background: #e5f9a1; }
.bot-lab-order span { font-size: 1.5rem; }
.bot-lab-copy .bot-lab-note { color: #aebabc; font-size: .8125rem; line-height: 1.5; margin: .85rem 0 0; }
.bot-lab-preview { justify-self: center; max-width: 440px; width: 100%; }
.bot-lab-preview-label { align-items: center; color: #b9c6c9; display: flex; font-size: .8125rem; gap: 1rem; justify-content: space-between; margin-bottom: .8rem; }
.bot-lab-demo-badge { border: 1px solid #556268; border-radius: 5px; color: #e2ebed; font-size: .75rem; padding: .25rem .5rem; }
.bot-window { background: #eaf1f5; border: 1px solid #4c626b; border-radius: 15px; box-shadow: 0 22px 50px #060d104d; color: #172e3b; overflow: hidden; }
.bot-window-header { align-items: center; background: #fff; border-bottom: 1px solid #d9e3e9; display: flex; gap: .75rem; padding: 1rem; }
.bot-window-avatar { align-items: center; background: #d7ef78; border-radius: 13px; color: #244234; display: flex; flex: 0 0 42px; font-size: 1.5rem; height: 42px; justify-content: center; }
.bot-window-header b { display: block; font-size: .9375rem; }
.bot-window-header small { color: #607683; display: block; font-size: .75rem; margin-top: .2rem; }
.bot-window-header button { background: #edf3f6; border: 0; border-radius: 50%; color: #456171; font-size: 1.6rem; height: 44px; margin-left: auto; width: 44px; }
.bot-window-header button:hover { background: #d8e7ee; }
.bot-window-chat { display: flex; flex-direction: column; gap: .6rem; height: 275px; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; scrollbar-color: #a1b7c3 transparent; scrollbar-width: thin; }
.bot-window-date { color: #607683; font-size: .75rem; line-height: 1.4; margin: 0 0 .4rem; text-align: center; }
.bot-message { align-self: start; background: #fff; border-radius: 12px 12px 12px 3px; box-shadow: 0 1px 2px #193e4e0d; flex-shrink: 0; font-size: .9375rem; line-height: 1.5; max-width: 92%; overflow-wrap: anywhere; padding: .65rem .85rem; }
.bot-message.is-user { align-self: end; background: #d7ebd0; border-radius: 12px 12px 3px 12px; }
.bot-window-choices { display: grid; gap: .5rem; grid-template-columns: 1fr; padding: .5rem 1rem 1rem; }
.bot-window-choices button { background: #fff; border: 1px solid #bed0da; border-radius: 8px; color: #255a77; font-size: .9375rem; font-weight: 550; line-height: 1.35; min-height: 44px; padding: .65rem .9rem; }
.bot-window-choices button:hover { background: #dbeefa; border-color: #75a5bf; }
.bot-window-footer { align-items: center; background: #f7fafc; border-top: 1px solid #d7e4ea; color: #607683; display: flex; flex-wrap: wrap; font-size: .75rem; gap: .5rem; justify-content: space-between; padding: .8rem 1rem; }
.bot-window-footer > span:first-child { color: #315a70; font-weight: 650; }
.bot-receipt { align-items: start; border: 1px solid #3a4c53; border-radius: 11px; color: #b3c4ca; display: flex; gap: .85rem; margin-top: 1rem; min-height: 100px; padding: 1rem; transition: background .2s, border-color .2s; }
.bot-receipt-icon { color: var(--bot-accent); flex-shrink: 0; font-size: 1.5rem; line-height: 1.2; }
.bot-receipt b { color: #e0e9ed; font-size: .875rem; font-weight: 600; }
.bot-receipt p { font-size: .8125rem; line-height: 1.5; margin: .4rem 0 0; }
.bot-receipt.is-ready { background: #23352b; border-color: #8dba63; }
.bot-receipt.is-ready b { color: var(--bot-accent); }
.bot-lab-bottom { align-items: center; border-top: 1px solid #3c4649; color: #bec9cb; display: flex; flex-wrap: wrap; font-size: .875rem; gap: 1.5rem; justify-content: center; padding: 1.4rem; }
.bot-lab-bottom i { color: #73868e; font-style: normal; }
.bot-lab button:focus-visible, .bot-lab [tabindex]:focus-visible { outline: 3px solid #63bcee; outline-offset: -4px; }
@media (max-width: 960px) {
  .bot-lab-heading { gap: 2rem; grid-template-columns: 1fr; }
  .bot-lab-intro { max-width: 500px; }
  .bot-tab { gap: .4rem .65rem; padding: 1.1rem; }
  .bot-tab small { grid-column: 1 / -1; }
  .bot-tab > span { grid-row: auto; }
  .bot-lab-scene { gap: 2rem; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
@media (max-width: 700px) {
  .bot-lab { padding-left: 5vw; padding-right: 5vw; }
  .bot-lab-heading { margin-bottom: 2rem; }
  .bot-lab-heading h2 { font-size: clamp(2.8rem, 11vw, 4.8rem); }
  .bot-lab-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bot-tab:nth-child(2) { border-right: 0; }
  .bot-tab { padding: 1rem; }
  .bot-lab-scene { display: flex; flex-direction: column; padding: 1.25rem; }
  .bot-lab-copy, .bot-lab-preview { width: 100%; }
  .bot-lab-copy h3 { font-size: clamp(1.9rem, 7.6vw, 3rem); }
  .bot-lab-copy ul { margin-bottom: 1.3rem; }
  .bot-lab-kicker { margin-bottom: 1rem; }
  .bot-lab-order { width: 100%; }
  .bot-lab-preview-label { gap: .5rem; }
  .bot-window-chat { height: 285px; padding: .85rem; }
  .bot-window-header { gap: .55rem; padding: .85rem; }
  .bot-window-header small { font-size: .75rem; }
  .bot-window-choices { padding: .25rem .85rem .85rem; }
  .bot-lab-bottom { gap: .65rem; font-size: .75rem; line-height: 1.5; padding: 1.1rem; }
}

/* The sales path stays visible, but never competes with the work itself. */
.work-card { border-radius: 2px; }
.work-card::before { background: var(--acid); content: ''; height: 7px; left: 0; position: absolute; top: 0; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); width: 100%; z-index: 3; }
.work-card:hover::before { transform: scaleX(1); }
.site-preview { border-radius: 2px; }
.price-card { transition: transform .3s ease, box-shadow .3s ease; }
.price-card:hover { box-shadow: 0 18px 30px rgba(29,31,27,.12); transform: translateY(-6px); }
.finder-tab { transition: color .2s, background .2s, transform .2s; }
.finder-tab:hover { transform: translateY(-2px); }
@media (max-width: 800px) {
  .conversion-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .conversion-mark { margin: 0; }
  .conversion-grid > div p { max-width: 420px; }
  .conversion-strip::after { height: 90vw; right: -35vw; top: -35vw; width: 90vw; }
}
@media (max-width: 700px) {
  .hero-proof { margin-top: 1.2rem; }
  .hero-proof span { font-size: .53rem; }
  .conversion-strip { padding-bottom: 4.5rem; padding-top: 4.5rem; }
  .conversion-grid h2 { font-size: clamp(3.1rem, 16vw, 5.2rem); }
}

/* Leave the last action above the floating helper at the end of the page. */
body:has(.assistant-launcher) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.menu-open .assistant-launcher { visibility: hidden; }
@media (max-width: 700px) {
  .main-nav { visibility: hidden; }
  .menu-open .main-nav { visibility: visible; }
}