:root {
  color-scheme: dark;
  --bg: #090c16;
  --panel: #111624;
  --line: #262d41;
  --text: #f1f3ff;
  --muted: #a5aec5;
  --accent: #aa9aff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid #c4baff; outline-offset: 5px; }
.wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.header { display: flex; justify-content: space-between; align-items: center; padding-block: 25px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; font-size: 14px; font-weight: 600; }
.brand-mark { display: grid; place-content: center; position: relative; width: 44px; height: 44px; border: 1px solid #554c84; border-radius: 13px; background: linear-gradient(135deg, #343054, #171b2a); font-size: 25px; letter-spacing: -2px; display: block; text-align: center; line-height: 40px; }
.brand-mark span { color: #b9abff; }
.brand small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); margin-top: 4px; }
nav { display: flex; align-items: center; gap: 30px; font-size: 13px; }
nav a:hover { color: #c3b7ff; }
.contact-link { border: 1px solid #45405e; padding: 12px 18px; border-radius: 8px; background: #181728; }
.contact-link span { margin-left: 18px; }
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 28px; min-height: 590px; padding: 65px 0; position: relative; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow, .label { font-size: 10px; font-weight: 600; letter-spacing: 1.6px; color: var(--muted); }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.hero .eyebrow { display: inline-flex; padding: 9px 12px; border: 1px solid #39324e; background: #211b353f; border-radius: 30px; color: #cbc0f7; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #b3a0ff; box-shadow: 0 0 0 4px #aa9aff12; }
h1 { font-size: clamp(46px, 5.4vw, 72px); line-height: 1.06; letter-spacing: -3.5px; font-weight: 650; margin: 23px 0; }
h1 span { background: linear-gradient(100deg, #bfa5ff, #919dff 60%, #73ceee); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero-description { max-width: 385px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 48px; padding: 14px 20px; border: 1px solid #b7a4ff70; border-radius: 9px; background: linear-gradient(110deg, #8565e8, #6864d9); box-shadow: 0 5px 22px #8060ed25, inset 0 1px #ffffff24; color: white; font-size: 12px; font-weight: 600; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 8px 30px #8060ed40; }
.secondary-button { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; min-height: 44px; }
.play-icon { display: grid; place-items: center; width: 28px; height: 28px; font-size: 9px; border: 1px solid #45465e; border-radius: 50%; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 27px; font-size: 10px; color: #939cb4; }
.hero-notes span { display: flex; align-items: center; gap: 7px; }
.hero-notes i { width: 5px; height: 5px; border-radius: 50%; background: #7dcbb1; }
.hero-visual { position: relative; isolation: isolate; min-width: 0; height: 430px; display: flex; align-items: center; }
.hero-visual::before { content: ''; position: absolute; z-index: -2; inset: -35px -20px; background: radial-gradient(ellipse, #6150b52f, transparent 68%); }
.orbit { position: absolute; z-index: -1; border: 1px solid #53477a40; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-25deg); width: 100%; height: 85%; }
.orbit-two { width: 80%; height: 115%; transform: translate(-50%, -50%) rotate(35deg); }
.workspace-preview { width: 100%; border: 1px solid #56506e; border-radius: 14px; background: linear-gradient(130deg, #1c2132, #111526); box-shadow: 0 30px 70px #0007, 0 0 40px #7970e010; transform: perspective(1200px) rotateY(-9deg) rotateX(4deg); overflow: hidden; }
.workspace-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid #36364c; color: #b1b4d1; font-size: 8px; letter-spacing: 1px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 5px; height: 5px; background: #73678c; border-radius: 50%; }
.window-dots i:first-child { background: #ce929c; }
.window-dots i:last-child { background: #8cb6a0; }
.workspace-body { display: flex; min-height: 262px; }
.workspace-rail { width: 49px; flex-shrink: 0; border-right: 1px solid #36364c; padding: 17px 9px; display: flex; flex-direction: column; gap: 18px; text-align: center; color: #8c94af; font-size: 18px; }
.workspace-rail b { font-size: 19px; color: white; letter-spacing: -2px; }
.workspace-rail b span { color: #b8a0ff; }
.rail-active { color: #c0aafa; border-radius: 5px; background: #6c569e55; }
.workspace-main { flex: 1; min-width: 0; padding: 23px 20px; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.workspace-heading small { display: block; color: #9b9ab8; font-size: 6px; letter-spacing: 1px; }
.workspace-heading strong { display: block; font-size: 16px; margin-top: 7px; font-weight: 500; }
.workspace-avatar { border: 1px solid #80709e; padding: 8px; border-radius: 50%; font-size: 9px; background: #443554; }
.mini-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.mini-products > div { border: 1px solid #3c3c58; border-radius: 7px; padding: 12px 8px; background: linear-gradient(140deg, #2b2842, #1c2032); }
.mini-products > div:nth-child(2) { background: linear-gradient(140deg, #203840, #1b2332); }
.mini-products > div:nth-child(3) { background: linear-gradient(140deg, #383042, #202033); }
.mini-icon { color: #c3b3ff; font-size: 20px; }
.mini-products strong, .mini-products small { display: block; font-size: 10px; margin-top: 5px; }
.mini-products small { color: #a5aac1; font-size: 7px; }
.workflow { margin-top: 13px; padding: 13px; border: 1px solid #30364b; border-radius: 7px; background: #111726; }
.workflow-title { display: flex; align-items: center; justify-content: space-between; color: #a6adc4; font-size: 6px; letter-spacing: 1px; }
.workflow-dot { height: 5px; width: 5px; background: #8cd5b0; border-radius: 50%; }
.workflow-nodes { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 14px; font-size: 8px; }
.workflow-nodes span { border: 1px solid #454059; padding: 7px 12px; border-radius: 4px; background: #252137; }
.workflow-nodes i { color: #8e80b5; font-style: normal; }
.workflow-nodes .node-done { color: #a2dec9; background: #193430; border-color: #315b50; }
.workflow-lines { height: 23px; display: flex; align-items: end; gap: 5px; margin-top: 9px; }
.workflow-lines i { flex: 1; height: 30%; background: #8371bf66; border-radius: 2px 2px 0 0; }
.workflow-lines i:nth-child(3n) { height: 65%; }.workflow-lines i:nth-child(3n + 1) { height: 45%; }.workflow-lines i:nth-child(n + 8) { height: 90%; background: #9885d888; }
.floating-tag { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; border: 1px solid #5b5073; border-radius: 10px; background: #252137; box-shadow: 0 12px 30px #0004; padding: 13px 17px; font-size: 11px; }
.tag-top { top: 12px; right: 20px; transform: rotate(3deg); }.tag-top > span { color: #bc9ffc; font-size: 24px; }
.tag-bottom { bottom: 10px; left: 12px; transform: rotate(-3deg); }.tag-bottom small { display: block; font-size: 9px; color: #b0abc2; margin-top: 4px; }
.check-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: #29443e; color: #97dfbb; }
.visual-caption { position: absolute; bottom: -25px; right: 0; font-size: 7px; letter-spacing: 1.5px; color: #838ca5; }
.collection-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-block: 1px solid var(--line); padding: 22px 0; }.collection-strip > span { font-size: 9px; letter-spacing: 1.5px; color: #9ca5be; }.collection-strip p { display: flex; align-items: center; gap: 25px; font-size: 13px; margin: 0; }.collection-strip i { color: #9d86dc; font-size: 18px; font-style: normal; }.collection-strip a { font-size: 11px; color: #c3b6ef; }.collection-strip a span { margin-left: 14px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 55px 0 25px; }.section-heading h2 { font-size: 30px; letter-spacing: -1px; font-weight: 600; margin: 12px 0 0; }.section-heading h2 span { color: #a4a6c8; }.section-heading > p { color: var(--muted); font-size: 12px; margin: 0 0 4px; }.section-heading .eyebrow { font-size: 8px; color: #afa0db; }
.featured { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 310px; border: 1px solid #3d3859; border-radius: 16px; overflow: hidden; background: linear-gradient(110deg, #1c1c32, #151c2c); }
.featured-copy { padding: 32px; display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: 24px; }.featured .label { font-size: 9px; color: #bbafe0; }.product-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #ffffff15; border-radius: 10px; background: #37304f; color: #c2acff; font-size: 24px; }.featured h3 { font-size: 31px; letter-spacing: -1px; margin: 10px 0; }.featured p, .product-card p { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 310px; margin: 0; }.light { background: #f0ecff; color: #29203d; box-shadow: none; padding: 11px 17px; min-height: 42px; font-size: 11px; }
.zoom-art { position: relative; overflow: hidden; min-height: 310px; background: radial-gradient(ellipse at 40% 30%, #7770aa, #373354 70%); }.art-grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 32px 32px; }.orb { position: absolute; border-radius: 37%; width: 210px; height: 210px; top: 50%; left: 50%; background: radial-gradient(circle at 28% 22%, #ede6ff, #b39de2 26%, #6b51a1 55%, #302044 79%); box-shadow: 25px 35px 40px #180e3b70, inset -6px -5px 12px #e4c1ff44; transform: translate(-50%, -50%) rotate(-20deg); }.orb-back { filter: blur(8px); clip-path: inset(-50px 50% -70px -50px); }.orb-front { clip-path: inset(-50px -70px -70px 50%); }.art-divider { position: absolute; left: 50%; top: 25px; bottom: 25px; width: 1px; background: #ffffff77; display: grid; place-items: center; }.art-divider span { border: 1px solid #fff8; background: #dfd5f6; color: #4c376a; padding: 7px; border-radius: 50%; font-size: 17px; }.art-caption { position: absolute; bottom: 27px; font-size: 9px; letter-spacing: 1.6px; color: #e8defa; }.before { left: 26px; }.after { right: 26px; }.illustration-label { position: absolute; left: 25px; top: 25px; font-size: 7px; letter-spacing: 1.6px; color: #e3d8ef; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }.product-card { display: flex; flex-direction: column; background: linear-gradient(150deg, #151a2a, #101520); padding: 20px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .22s, border-color .22s, box-shadow .22s; }.product-card:hover { transform: translateY(-5px); border-color: #67578d; box-shadow: 0 15px 32px #0003; }.card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 21px; }.card-top .label { font-size: 8px; letter-spacing: 1px; }.mint { background: #203c38; color: #a0dfc6; }.lilac { background: #37304b; color: #cbb3f3; }.peach { background: #41312f; color: #e8bba3; }.product-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -.5px; margin: 16px 0 8px; }.product-card p { margin-bottom: 22px; }.text-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; border-top: 1px solid var(--line); padding: 15px 0 2px; min-height: 44px; font-size: 11px; }.text-link span { display: grid; place-items: center; background: #222637; width: 25px; height: 25px; border-radius: 50%; color: #c3b2f8; transition: transform .2s; }.text-link:hover span { transform: rotate(45deg); }
.card-preview { height: 155px; flex-shrink: 0; position: relative; overflow: hidden; margin: -20px -20px 0; border-bottom: 1px solid #ffffff0c; display: flex; justify-content: center; align-items: center; }.preview-auto { background: radial-gradient(ellipse at 50% 90%, #305655, #17292f); flex-direction: column; gap: 19px; }.preview-kicker, .preview-caption { color: #a7c4cb; font-size: 7px; letter-spacing: 1.3px; }.preview-caption { letter-spacing: .4px; }.auto-route { display: flex; align-items: center; gap: 9px; }.auto-route span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #365654; color: #b1e3cf; }.auto-route b { font-size: 23px; letter-spacing: -1px; color: #ddf7ed; padding: 0 6px; }.auto-route i { width: 25px; border-top: 1px dashed #88c2b5; }
.preview-invoice { background: linear-gradient(120deg, #332847, #24243b); }.invoice-paper { width: 175px; padding: 17px; border-radius: 8px; transform: rotate(-7deg) translateY(14px); background: #efebf7; color: #48395e; box-shadow: 0 10px 25px #0004; }.invoice-paper > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 8px; margin-bottom: 11px; }.invoice-paper > div:first-child span { border: 1px solid #cec2e0; border-radius: 4px; padding: 3px; font-size: 6px; }.invoice-paper > i { display: block; width: 65%; height: 3px; background: #d4cbe3; margin: 5px 0; }.invoice-paper > i:nth-child(3) { width: 40%; margin-bottom: 12px; }.invoice-paper .invoice-line { font-size: 6px; border-block: 1px solid #dcd3e8; padding: 7px 0; margin: 8px 0; }.invoice-paper .invoice-total { font-size: 6px; margin-top: 10px; }.invoice-total b { color: #5d477b; }
.preview-form { background: linear-gradient(135deg, #23334b, #222d3e); }.form-preview { width: 195px; border: 1px solid #6a7a9555; background: #26334b; padding: 15px; border-radius: 10px; transform: rotate(5deg) translateY(12px); box-shadow: 0 12px 20px #0003; }.form-preview > b { font-size: 9px; display: block; margin-bottom: 10px; }.form-preview > span { font-size: 7px; display: block; border: 1px solid #59677f; color: #b6c0d4; border-radius: 4px; padding: 7px; margin-top: 6px; }.form-preview > strong { display: flex; justify-content: space-between; font-size: 7px; padding: 7px; border-radius: 4px; margin-top: 9px; background: #7d83c5; color: white; }.form-preview i { font-style: normal; }
.preview-chat { background: linear-gradient(140deg, #1b3634, #15292e); flex-direction: column; gap: 9px; padding: 24px; }.chat-bubble { align-self: start; padding: 10px 12px; border-radius: 8px 8px 8px 0; border: 1px solid #4d726666; background: #344d46; color: #cbded4; font-size: 9px; }.chat-bubble.reply { align-self: end; background: #426554; border-radius: 8px 8px 0 8px; }.reply b { color: #bef2cd; margin-left: 10px; }.chat-typing { display: flex; gap: 4px; align-self: end; }.chat-typing i { width: 4px; height: 4px; background: #8bb49b; border-radius: 50%; }
.preview-commerce { flex-direction: column; gap: 16px; background: linear-gradient(135deg, #413029, #2b2430); }.commerce-flow { display: flex; align-items: center; gap: 24px; }.commerce-flow > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; border: 1px solid #fff2; font-size: 29px; }.daraz-mark { background: #b05d35; color: #ffdec7; font-weight: 700; }.sheet-mark { background: #35534a; color: #b6ddc4; }.commerce-flow i { color: #c4a38e; font-style: normal; }.sync-pill { font-size: 8px; border: 1px solid #a87d6b55; padding: 6px 12px; border-radius: 20px; color: #d8baa8; }
.preview-scan { background: linear-gradient(135deg, #30304d, #22263c); gap: 20px; }.scan-illustration { position: relative; width: 77px; height: 77px; background: #dfd7ef; border-radius: 7px; padding: 8px; transform: rotate(-5deg); }.scan-illustration > span { position: absolute; width: 20px; height: 20px; border: 5px solid #584473; border-radius: 3px; }.scan-illustration > span:nth-child(2) { right: 8px; }.scan-illustration > span:nth-child(3) { bottom: 8px; }.scan-illustration b { position: absolute; right: 8px; bottom: 4px; color: #584473; font-size: 28px; }.scan-illustration i { position: absolute; inset: 38px -7px auto; height: 2px; background: #b990f6; box-shadow: 0 0 7px #b990f6; z-index: 1; }.preview-scan strong { font-size: 14px; font-weight: 500; }.preview-scan div > span:last-child:not(:first-child) { display: block; font-size: 8px; margin-top: 7px; color: #b5accb; }
.contact { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 38px; margin: 50px 0; border: 1px solid #453c64; border-radius: 16px; background: radial-gradient(ellipse at right, #4a36724d, transparent 70%), linear-gradient(115deg, #1d1c33, #141a29); }.contact .eyebrow { color: #b9a4e7; font-size: 8px; }.contact h2 { font-size: 30px; line-height: 1.25; letter-spacing: -.8px; font-weight: 550; margin: 14px 0; }.contact p:not(.eyebrow) { color: var(--muted); font-size: 12px; margin: 0; }.contact .button { flex-shrink: 0; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-block: 25px; color: var(--muted); font-size: 10px; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 10; background: var(--accent); color: var(--bg); padding: 12px; transform: translateY(-150%); }.skip-link:focus { transform: none; }
dialog { width: min(850px, calc(100% - 32px)); padding: 20px; border: 1px solid #504264; border-radius: 14px; background: var(--panel); color: var(--text); }dialog::backdrop { background: #030610de; }.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }.dialog-heading h2 { font-size: 18px; margin: 0; }.close-button { background: #24243a; color: white; border: 1px solid var(--line); border-radius: 7px; width: 44px; height: 44px; cursor: pointer; }video { display: block; width: 100%; max-height: 70vh; background: #000; }.video-error a { text-decoration: underline; }body:has(dialog[open]) { overflow: hidden; }
@keyframes enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float-top { 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes float-bottom { 50% { transform: translateY(7px) rotate(-1deg); } }
@media (prefers-reduced-motion: no-preference) { .hero-copy { animation: enter .65s ease-out both; }.hero-visual { animation: enter .85s ease-out both; }.reveal.is-visible { animation: enter .5s ease-out both; }.tag-top { animation: float-top 5s ease-in-out 3; }.tag-bottom { animation: float-bottom 5s ease-in-out 3; } }
@media (max-width: 1000px) { .hero { gap: 22px; min-height: 540px; }.hero .eyebrow { font-size: 8px; letter-spacing: 1px; }.hero-actions { gap: 14px; }.workspace-main { padding: 18px 12px; }.workspace-rail { width: 36px; padding-inline: 5px; }.workspace-heading strong { font-size: 13px; }.workflow-nodes span { padding: 6px 8px; }.collection-strip > span { display: none; }.product-grid { gap: 15px; }.card-top .label { font-size: 7px; }.section-heading > p { display: none; }.preview-scan { gap: 12px; }.preview-scan strong { font-size: 12px; } }
@media (max-width: 760px) { .wrap { width: calc(100% - 40px); }.hero { grid-template-columns: 1fr; padding: 40px 0 55px; gap: 32px; }.hero-copy { text-align: center; }.hero .eyebrow { margin-inline: auto; }h1 { font-size: clamp(48px, 9vw, 68px); }.hero-description { margin-inline: auto; }.hero-actions, .hero-notes { justify-content: center; }.hero-visual { width: min(490px, 100%); margin: 0 auto; height: 380px; }.workspace-main { padding: 22px 18px; }.workspace-heading strong { font-size: 16px; }.workspace-rail { width: 44px; }.tag-top { top: -3px; }.tag-bottom { bottom: -5px; }.collection-strip { justify-content: center; }.collection-strip p { gap: 16px; font-size: 11px; }.collection-strip a { display: none; }.section-heading { padding-top: 38px; }.section-heading h2 { font-size: 27px; }.featured { grid-template-columns: 1fr 1fr; }.featured-copy { padding: 25px; }.zoom-art { min-height: 310px; }.orb { width: 165px; height: 165px; }.product-grid { grid-template-columns: repeat(2, 1fr); }.contact { padding: 28px; }.contact h2 { font-size: 24px; }footer > span { display: none; } }
@media (max-width: 520px) { .wrap { width: calc(100% - 32px); }.header { padding-block: 18px; }.brand { gap: 8px; font-size: 12px; }.brand-mark { width: 36px; height: 36px; font-size: 23px; line-height: 32px; border-radius: 10px; }.brand small { font-size: 8px; }nav { gap: 14px; font-size: 11px; }.contact-link { padding: 10px 12px; }.contact-link span { display: none; }.hero { gap: 35px; padding-top: 32px; }h1 { font-size: clamp(43px, 12vw, 59px); letter-spacing: -2.7px; }.hero-description { font-size: 13px; max-width: 310px; }.hero-actions { gap: 16px; }.button { font-size: 11px; gap: 16px; padding-inline: 16px; }.secondary-button { font-size: 10px; gap: 6px; }.hero-notes { font-size: 9px; gap: 12px; }.hero-visual { height: 335px; }.workspace-preview { transform: none; }.workspace-bar { padding: 11px; font-size: 6px; }.workspace-body { min-height: 245px; }.workspace-main { padding: 16px 11px; }.workspace-rail { width: 32px; font-size: 15px; }.workspace-heading strong { font-size: 12px; }.workspace-heading small { font-size: 5px; }.workspace-avatar { padding: 6px; font-size: 8px; }.mini-products { gap: 6px; margin-top: 16px; }.mini-products > div { padding: 9px 6px; }.mini-products strong { font-size: 8px; }.mini-products small { font-size: 6px; }.workflow { padding: 10px; }.workflow-nodes span { font-size: 7px; padding: 6px; }.floating-tag { font-size: 9px; padding: 9px 12px; }.tag-top { right: 9px; top: -6px; }.tag-bottom { bottom: -7px; left: 8px; }.tag-bottom small { font-size: 8px; }.visual-caption { font-size: 5px; bottom: -29px; }.collection-strip p { gap: 10px; font-size: 9px; }.collection-strip i { font-size: 14px; }.section-heading h2 { font-size: 24px; }.section-heading h2 span { display: block; margin-top: 4px; }.featured { grid-template-columns: 1fr; }.featured-copy { padding: 25px; gap: 22px; }.featured h3 { font-size: 29px; }.zoom-art { min-height: 235px; }.orb { width: 170px; height: 170px; }.product-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }.card-preview { height: 165px; }.card-top .label { font-size: 8px; }.product-card h3 { font-size: 21px; }.preview-scan strong { font-size: 15px; }.contact { display: block; margin-block: 32px; padding: 26px; }.contact h2 { font-size: 24px; }.contact .button { margin-top: 24px; }footer { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*, *::before, *::after { animation: none !important; transition: none !important; } }

/* Featured development projects */
.project-banner { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 370px; border: 1px solid #355350; border-radius: 17px; overflow: hidden; background: linear-gradient(120deg, #17272c, #142029); }
.project-banner + .project-banner { margin-top: 22px; }
.banner-copy { padding: 32px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 25px; }
.project-label { display: inline-flex; align-items: center; gap: 8px; color: #b7dbcd; font-size: 8px; letter-spacing: 1.4px; }
.project-label i { width: 5px; height: 5px; background: #9cdbb6; border-radius: 50%; }
.banner-category { color: #a5c8bb; font-size: 9px; letter-spacing: 1.2px; margin: 0 0 10px; }
.banner-copy h3 { font-size: clamp(30px, 3.2vw, 43px); letter-spacing: -1.5px; margin: 0 0 12px; line-height: 1.1; }
.banner-copy h3 + p { font-size: 13px; line-height: 1.8; color: #b0c0c7; max-width: 350px; margin: 0; }
.project-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.project-tags span { border: 1px solid #ffffff1c; background: #ffffff04; padding: 6px 9px; border-radius: 5px; font-size: 9px; color: #c0cdc9; }
.courier-button { background: linear-gradient(110deg, #97d9b2, #78c6b7); color: #153c33; border-color: #b6e5c977; box-shadow: 0 5px 20px #6ea79320; }
.courier-art, .meta-art { position: relative; min-width: 0; min-height: 350px; overflow: hidden; isolation: isolate; }
.courier-art { background: radial-gradient(ellipse at 55% 40%, #4d766052, transparent 70%), linear-gradient(140deg, #223f3c, #172d30); }
.courier-art::before { content: ''; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(#c3dcc908 1px, transparent 1px), linear-gradient(90deg, #c3dcc908 1px, transparent 1px); background-size: 38px 38px; transform: rotate(-15deg) scale(1.3); }
.banner-art-label { position: absolute; top: 26px; left: 26px; color: #c4ddcf; font-size: 8px; letter-spacing: 1.7px; }
.delivery-map { position: absolute; inset: 48px 10px 45px; }
.delivery-route { position: absolute; width: 100%; height: 100%; color: #a0cbb0; }
.map-ring { position: absolute; width: 150px; height: 150px; border: 1px solid #93c7aa25; border-radius: 50%; }
.ring-a { bottom: -30px; left: -15px; }.ring-b { top: -20px; right: 0; width: 200px; height: 200px; }
.route-label { position: absolute; color: #b1cdbb; font-size: 7px; letter-spacing: 1px; }
.label-origin { bottom: 10%; left: 6%; }.label-destination { top: 8%; right: 8%; }
.parcel { position: absolute; top: 50%; left: 52%; width: 166px; height: 161px; transform: translate(-50%, -50%) rotate(-12deg); border-radius: 5px; border: 1px solid #e6c49b; background: linear-gradient(115deg, #dbc095, #bda277); box-shadow: 15px 22px 0 #101e2420, 20px 35px 40px #0a1c2455, inset -12px 0 #80674422; color: #494334; }
.parcel-tape { position: absolute; inset: 0 auto 0 69px; width: 26px; background: #f1dfb44d; border-inline: 1px solid #fbf0d22a; }
.parcel-brand { position: absolute; left: 16px; top: 30px; font-size: 21px; font-weight: 700; letter-spacing: -1px; }
.parcel-brand span { display: block; font-size: 6px; letter-spacing: 1.6px; margin-top: 3px; }
.parcel-barcode { position: absolute; width: 55px; height: 30px; bottom: 22px; left: 17px; background: repeating-linear-gradient(90deg, #4c473b 0 1px, transparent 1px 3px, #4c473b 3px 5px, transparent 5px 7px); border: 5px solid #e6d4b2; }
.parcel-arrow { position: absolute; right: 20px; bottom: 20px; font-size: 20px; }
.art-domain { position: absolute; bottom: 25px; left: 26px; display: flex; align-items: center; gap: 20px; color: #d2e3dc; font-size: 11px; }.art-domain > span { color: #a9d7b8; }
.concept-caption { position: absolute; bottom: 29px; right: 22px; font-size: 6px; letter-spacing: 1px; color: #99b3a9; }
.meta-banner { border-color: #44416a; background: linear-gradient(120deg, #222039, #192236); }
.meta-banner .project-label, .meta-banner .banner-category { color: #c0b8ee; }.meta-banner .project-label i { background: #bfa7fc; }.meta-banner .project-tags span { color: #c2c0db; }
.meta-art { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, #7770b43d, transparent 70%), linear-gradient(130deg, #30365d, #24233e); }
.meta-art .banner-art-label { color: #c4c3ef; }.meta-art .art-domain { color: #d0d4f0; }.meta-art .concept-caption { color: #adaaca; }
.api-orbit { position: absolute; width: 340px; height: 230px; border: 1px solid #b8a8ed20; border-radius: 50%; transform: rotate(-25deg); }.api-orbit::after { content: ''; position: absolute; inset: 24px -25px; border: 1px solid #b8a8ed16; border-radius: 50%; transform: rotate(45deg); }
.api-connection { display: flex; align-items: center; position: relative; margin-top: -15px; }
.api-node { width: 112px; height: 119px; border: 1px solid #bba7f359; border-radius: 20px; background: linear-gradient(145deg, #565179, #322f50); box-shadow: 0 16px 30px #100f2844, inset 0 1px #ffffff1c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transform: rotate(-6deg); }
.aki-symbol { font-size: 43px; font-weight: 700; line-height: 1; letter-spacing: -3px; color: #e7d8ff; }.api-node strong { font-size: 10px; font-weight: 500; color: #d1cbe9; }
.meta-node { transform: rotate(6deg); background: linear-gradient(145deg, #354d81, #283958); border-color: #89a6df55; }.meta-symbol { color: #8fb8ff; font-size: 68px; line-height: .7; margin: 4px 0 5px; }
.api-bridge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 40px; color: #baaee6; position: relative; }.api-bridge::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; border-top: 1px dashed #afa0d680; }.api-bridge > span { position: relative; background: #3a3658; padding: 0 5px; font-size: 19px; line-height: 14px; }.api-bridge small { font-size: 7px; letter-spacing: 2px; margin-top: 9px; }
.api-code { position: absolute; bottom: 78px; font-family: Consolas, monospace; font-size: 9px; color: #b9b4d1; padding: 9px 13px; border-radius: 6px; border: 1px solid #b6a4e722; background: #1b1c304d; }.api-code > span { color: #bda4ef; }.api-code i { display: inline-block; margin-left: 7px; height: 10px; width: 4px; background: #ab9cd1; vertical-align: middle; }
.website-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.website-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.website-preview { display: block; overflow: hidden; aspect-ratio: 1.6; background: #202638; border-bottom: 1px solid var(--line); }
.website-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .35s; }.website-preview:hover img { transform: scale(1.035); }
.website-copy { padding: 21px; }.website-copy .label { font-size: 8px; }.website-copy h3 { font-size: 21px; font-weight: 600; margin: 10px 0 18px; }
@media (prefers-reduced-motion: no-preference) { .courier-banner.is-visible .parcel { animation: parcel-arrive .75s ease-out both; } }
@keyframes parcel-arrive { from { opacity: 0; transform: translate(-50%, -40%) rotate(-5deg); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg); } }
@media (max-width: 1000px) { .banner-copy { padding: 27px; }.concept-caption { bottom: 11px; left: 26px; right: auto; }.art-domain { bottom: 29px; }.api-node { width: 92px; height: 108px; }.api-bridge { width: 55px; }.banner-category { font-size: 8px; }.website-grid { gap: 15px; } }
@media (max-width: 760px) { .hero .eyebrow { font-size: 7px; }.project-banner { grid-template-columns: 1fr; }.banner-copy { gap: 25px; }.banner-copy h3 { font-size: 36px; }.banner-copy h3 + p { max-width: 440px; }.courier-art, .meta-art { min-height: 295px; }.delivery-map { max-width: 450px; left: 50%; width: 100%; transform: translateX(-50%); }.api-node { width: 112px; height: 119px; }.api-bridge { width: 80px; }.api-code { bottom: 52px; }.website-grid { grid-template-columns: repeat(2, 1fr); }.hero-actions { flex-wrap: wrap; } }
@media (max-width: 520px) { .header { flex-wrap: wrap; gap: 18px; }.header nav { width: 100%; justify-content: space-between; gap: 12px; }.header nav a:not(.contact-link) { padding-block: 10px; }.banner-copy { padding: 25px; }.banner-copy h3 { font-size: 34px; }.project-banner + .project-banner { margin-top: 16px; }.banner-art-label { left: 22px; top: 21px; font-size: 7px; }.courier-art, .meta-art { min-height: 280px; }.parcel { width: 138px; height: 136px; }.parcel-brand { font-size: 19px; top: 24px; }.parcel-tape { left: 59px; width: 22px; }.parcel-barcode { width: 46px; height: 25px; bottom: 17px; }.api-node { width: 94px; height: 106px; }.api-bridge { width: 48px; }.api-code { font-size: 7px; }.website-grid { grid-template-columns: 1fr; }.collection-strip p { flex-wrap: wrap; justify-content: center; }.hero-notes { gap: 10px; } }

/* Fluid sizing keeps content readable between device breakpoints. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.wrap { width: min(1200px, calc(100% - clamp(28px, 5vw, 64px))); }
.hero, .featured, .project-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.hero > *, .featured > *, .project-banner > *, .product-grid > *, .website-grid > * { min-width: 0; }
.product-grid, .website-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { font-size: clamp(38px, 5.2vw, 70px); letter-spacing: -.055em; }
.button, .secondary-button, .text-link, .contact-link, .header nav a, footer a { min-height: 44px; }
.header nav a, footer a { display: inline-flex; align-items: center; }
.button { max-width: 100%; }
.hero-actions { flex-wrap: wrap; }
.hero-visual { clip-path: inset(-45px -12px -40px); }
.project-banner { box-shadow: 0 18px 45px #00000018; }
.banner-copy { padding: clamp(24px, 3vw, 40px); }
.banner-copy h3 { font-size: clamp(32px, 3.5vw, 46px); }
.banner-copy h3 + p { font-size: 14px; line-height: 1.75; }
.project-label { font-size: 9px; }
.project-tags span { font-size: 10px; }
.courier-art { background: radial-gradient(ellipse at 52% 35%, #68957b50, transparent 65%), linear-gradient(145deg, #254e46, #122b31); }
.meta-art { background: radial-gradient(ellipse at 60% 30%, #726cbd55, transparent 65%), linear-gradient(135deg, #343765, #1e2746); }
.courier-art::after, .meta-art::after { content: ''; position: absolute; inset: 12px; border: 1px solid #ffffff10; border-radius: 10px; pointer-events: none; }
.art-corner-mark { position: absolute; right: 27px; top: 23px; font-size: 12px; font-family: Consolas, monospace; color: #e4e5fa99; }
.banner-art-label { max-width: calc(100% - 90px); line-height: 1.6; }
.parcel { box-shadow: 15px 22px 0 #101e2420, 20px 35px 40px #0a1c2455, inset -12px 0 #80674422, inset 0 5px #f4deb24a; }
.shipping-note { position: absolute; right: 6%; bottom: 4%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #bfe4cb35; border-radius: 9px; background: #254d44; color: #e0f0e4; box-shadow: 0 9px 20px #091b2444; z-index: 2; transform: rotate(3deg); font-size: 10px; }
.shipping-note > span { display: grid; place-items: center; background: #a8dbb52b; width: 27px; height: 27px; border-radius: 7px; font-size: 20px; }
.shipping-note small { display: block; font-size: 8px; margin-top: 3px; color: #bdd5c8; }
.art-domain { max-width: calc(100% - 48px); overflow-wrap: anywhere; }
.api-code { font-family: inherit; display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 30px; font-size: 10px; background: #262843; color: #d1d0ec; }
.integration-dot { width: 5px; height: 5px; border-radius: 50%; background: #a1dcca; box-shadow: 0 0 0 3px #a1dcca15; }
.api-node { box-shadow: 0 20px 35px #100f2855, inset 0 1px #ffffff35; }
.contact { flex-wrap: wrap; }
dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (hover: none) { .product-card:hover, .button:hover { transform: none; }.website-preview:hover img { transform: none; } }
@media (max-width: 960px) {
  .product-grid, .website-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .eyebrow { letter-spacing: .7px; font-size: 8px; flex-wrap: wrap; justify-content: center; }
  .hero-visual { height: 385px; }
  .banner-art-label { letter-spacing: 1px; }
  .shipping-note { right: 2%; bottom: 0; }
}
@media (max-width: 760px) {
  .hero, .project-banner { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: clamp(38px, 8.5vw, 62px); }
  .hero { min-height: auto; padding-block: 35px 45px; }
  .hero-visual { width: min(490px, 100%); height: 350px; }
  .hero-description { max-width: 400px; font-size: 15px; padding-inline: 5px; }
  .courier-art, .meta-art { min-height: 310px; order: -1; }
  .banner-copy { gap: 22px; }
  .banner-copy h3 { font-size: clamp(30px, 6vw, 38px); }
  .banner-copy .button { min-width: 210px; }
  .project-label { font-size: 9px; }
  .section-heading h2 { font-size: clamp(24px, 4.5vw, 30px); }
  .shipping-note { right: 4%; bottom: 5%; }
  .api-code { bottom: 60px; }
  .contact h2 br { display: none; }
}
@media (max-width: 600px) {
  .header { flex-wrap: wrap; gap: 13px; padding-block: 17px 12px; }
  .brand { font-size: 14px; }.brand small { font-size: 10px; }
  .header nav { width: 100%; justify-content: space-between; gap: 8px; font-size: 12px; border-top: 1px solid #ffffff0a; padding-top: 9px; }
  .header nav a { padding: 10px 8px; }.header nav a:first-child { padding-left: 0; }.contact-link { padding-inline: 14px !important; }
  .product-grid, .website-grid, .featured { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 30px; }
  .hero .eyebrow { max-width: 100%; font-size: 8px; letter-spacing: .5px; line-height: 1.6; }
  .hero-actions { gap: 10px; margin-top: 23px; }
  .hero-actions .button { font-size: 12px; }
  .hero-actions .secondary-button { font-size: 12px; }
  .hero-notes { font-size: 10px; gap: 10px; margin-top: 17px; }
  .hero-visual { height: 320px; }
  .workspace-preview { transform: none; }
  .workspace-main { padding: 14px 11px; }.workspace-body { min-height: 237px; }
  .workspace-heading strong { font-size: 13px; }.workspace-heading small { font-size: 5px; }
  .workspace-rail { width: 32px; }.mini-products { gap: 5px; margin-top: 14px; }
  .mini-products > div { padding: 9px 6px; }.mini-products strong { font-size: 9px; }.mini-products small { font-size: 7px; }
  .workflow { padding: 10px; }.workflow-nodes span { padding: 6px; font-size: 8px; }
  .tag-top { top: -6px; right: 8px; }.tag-bottom { bottom: -4px; left: 6px; }.visual-caption { bottom: -24px; font-size: 6px; letter-spacing: .6px; }
  .collection-strip p { flex-wrap: wrap; justify-content: center; gap: 8px; line-height: 1.7; font-size: 10px; }
  .section-heading { padding-block: 34px 21px; }.section-heading h2 { font-size: 26px; line-height: 1.2; }.section-heading h2 span { display: block; margin-top: 3px; }
  .courier-art, .meta-art { min-height: clamp(265px, 65vw, 315px); }
  .banner-copy { padding: 24px; }.banner-copy h3 + p { font-size: 14px; }.banner-category { font-size: 9px; }
  .banner-copy .button { width: 100%; font-size: 13px; min-height: 48px; }
  .shipping-note { font-size: 9px; padding: 8px 10px; }.shipping-note small { font-size: 7px; }
  .api-code { font-size: 9px; bottom: 55px; }
  .api-connection { margin-top: -13px; }.api-node { width: 100px; height: 110px; }.api-bridge { width: 55px; }
  .art-domain { font-size: 10px; left: 23px; }.concept-caption { left: 23px; font-size: 6px; }
  .featured-copy { padding: 24px; }.featured p, .product-card p { font-size: 14px; }.featured .light { min-height: 46px; font-size: 12px; }
  .card-preview { height: 175px; }.card-top .label { font-size: 9px; }.text-link { font-size: 13px; padding-bottom: 5px; }.website-copy .label { font-size: 9px; }
  .contact { padding: 24px; }.contact h2 { font-size: 26px; }.contact p:not(.eyebrow) { font-size: 14px; }.contact .button { width: 100%; justify-content: space-between; margin-top: 4px; font-size: 13px; }
  footer { flex-wrap: wrap; gap: 6px 12px; font-size: 11px; padding-block: 17px; }
}
@media (max-width: 359px) {
  h1 { font-size: clamp(30px, 10.8vw, 38px); }
  .hero .eyebrow { font-size: 7px; letter-spacing: .2px; padding-inline: 8px; }
  .hero-description { font-size: 14px; }.hero-actions { flex-direction: column; gap: 6px; }.hero-actions .button { width: 100%; }
  .hero-notes { font-size: 9px; }.hero-visual { height: 310px; }
  .workspace-rail { display: none; }.workspace-main { padding: 14px 10px; }.workspace-bar { letter-spacing: .3px; }
  .floating-tag { max-width: 95%; font-size: 8px; }.tag-top > span { font-size: 18px; }
  .banner-copy { padding: 20px; }.banner-copy h3 { font-size: 30px; }.banner-category { font-size: 8px; }
  .project-label { font-size: 8px; letter-spacing: 1px; }.project-tags { gap: 6px; }.project-tags span { font-size: 9px; }
  .banner-art-label { font-size: 6px; }.api-node { width: 85px; height: 99px; }.api-bridge { width: 38px; }
  .shipping-note { right: 2%; bottom: 0; }.shipping-note > span { display: none; }
  .section-heading h2 { font-size: 23px; }.section-heading .eyebrow { font-size: 7px; }
  .contact h2 { font-size: 23px; }.art-caption { font-size: 8px; letter-spacing: 1px; }
}
/* Keep decorative orbits inside the visual's layout bounds on real mobile viewports. */
.hero-visual::before { inset: 0; }
.orbit-one { width: 68%; height: 60%; }
.orbit-two { width: 45%; height: 65%; }

/* The two full-size layers share one divider position. */
.zoom-art { --split: 50%; }
.comparison-layer { position: absolute; inset: 0; pointer-events: none; }
.comparison-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.comparison-after { clip-path: inset(0 0 0 var(--split)); }
.comparison-layer .orb { clip-path: none; }
.zoom-art .art-divider { left: var(--split); top: 0; bottom: 0; pointer-events: none; }
.comparison-handle { position: absolute; left: clamp(22px, var(--split), calc(100% - 22px)); top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #fff; border-radius: 50%; background: #eee8fc; color: #4c376a; box-shadow: 0 3px 18px #1d173c55; font-size: 22px; pointer-events: none; }
.comparison-slider { position: absolute; z-index: 2; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.zoom-art:focus-within { outline: 3px solid #c4baff; outline-offset: -4px; }
.zoom-art:focus-within .comparison-handle { box-shadow: 0 0 0 5px #aa9aff66; }
.comparison-help { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 9px; color: #f0e8ff; pointer-events: none; }
.zoom-art .art-caption { bottom: 35px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Route pointer gestures through the preview; the range keeps native keyboard support. */
.zoom-art { touch-action: pan-y; cursor: ew-resize; user-select: none; }
.comparison-slider { pointer-events: none; }

/* Project details are loaded into a single accessible dialog on demand. */
[hidden] { display: none !important; }
.details-button { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 44px; padding: 10px 13px; margin-top: 12px; border: 1px solid #65577766; border-radius: 8px; color: #d5c9f5; background: #a089d00b; font: inherit; font-size: 12px; cursor: pointer; transition: background .2s, border-color .2s; }
.details-button:hover { background: #a089d01f; border-color: #a089d0; }
.banner-copy > .details-button, .featured-copy > .details-button { max-width: 260px; margin-top: -8px; }
.contact-phone { display: inline-flex; align-items: center; min-height: 44px; color: #c9b9fa; font-size: 14px; margin-top: 8px; }
.project-dialog { width: min(1000px, calc(100% - 32px)); padding: 0; max-height: calc(100dvh - 32px); overscroll-behavior: contain; }
.project-dialog .dialog-heading { position: sticky; top: 0; z-index: 3; margin: 0; padding: 20px 24px; background: #151a2a; border-bottom: 1px solid var(--line); gap: 16px; }
.project-dialog .dialog-heading .eyebrow { margin: 0 0 8px; font-size: 9px; }
.project-dialog .dialog-heading h2 { font-size: 23px; letter-spacing: -.5px; }
.project-dialog .close-button { flex-shrink: 0; }
.project-dialog-body { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 28px; padding: 24px; align-items: start; }
.project-gallery { min-width: 0; }
.project-gallery figure { margin: 0; }
#project-image { display: block; width: 100%; height: 310px; object-fit: contain; background: #0c101c; border: 1px solid var(--line); border-radius: 10px; }
#project-image-caption { color: #aab2ca; font-size: 11px; line-height: 1.6; margin-top: 10px; }
.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: #bdafd9; font-size: 12px; }
.gallery-controls button { border: 1px solid #4c435f; border-radius: 8px; background: #232236; color: #dfd4f6; min-width: 44px; min-height: 44px; cursor: pointer; }
.gallery-thumbs { display: flex; gap: 8px; padding: 6px 2px; margin-top: 8px; overflow-x: auto; }
.gallery-thumbs button { width: 72px; height: 54px; flex-shrink: 0; padding: 3px; background: #101522; border: 2px solid transparent; border-radius: 7px; cursor: pointer; }
.gallery-thumbs button[aria-pressed="true"] { border-color: #bb9cff; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.project-information p, .project-information li { font-size: 14px; color: #b8c0d3; line-height: 1.75; }
.project-information p:first-child { margin-top: 0; }
.project-information h3 { margin: 23px 0 10px; font-size: 16px; }
.project-information ol { padding-left: 20px; margin: 0; }
.project-information li { padding-left: 4px; margin-bottom: 9px; }
.project-information li::marker { color: #bba8f5; }
.project-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 20px 24px; border-top: 1px solid var(--line); background: #151a2a; }
.project-dialog-actions .button { font-size: 12px; }
@media (max-width: 700px) {
  .project-dialog-body { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 20px; }
  .project-dialog .dialog-heading { padding: 18px 20px; }
  #project-image { height: clamp(190px, 60vw, 320px); }
  .project-dialog-actions { padding: 20px; }
  .project-dialog-actions .button { width: 100%; }
}
@media (max-width: 359px) {
  .project-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .project-dialog .dialog-heading, .project-dialog-body, .project-dialog-actions { padding: 16px; }
  .project-dialog .dialog-heading h2 { font-size: 20px; }
}


/* Best-effort image gesture restrictions; support varies by browser. */
img, svg, .website-preview, .gallery-thumbs button {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.project-dialog-body:has(.project-gallery[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* Interactive tag playground: a readable static layout is the no-JS fallback. */
.toolbox { background: radial-gradient(ellipse at 75% 15%, #6655a522, transparent 65%), linear-gradient(145deg, #191d32, #101622); color: #f1f3ff; border: 1px solid #413958; border-radius: 20px; overflow: hidden; }
.toolbox-top, .toolbox-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; }
.toolbox-top p { font-size: 16px; font-weight: 600; margin: 0; }
.toolbox-top p span { display: block; font-size: 11px; color: #b1b5ce; font-weight: 400; margin-top: 6px; }
.toolbox-reset { min-width: 80px; min-height: 44px; padding: 10px 13px; border: 1px solid #51466c; border-radius: 25px; background: transparent; color: #dfd4fa; cursor: pointer; font-size: 12px; }
.toolbox-reset:hover { background: #342c4c; }
.toolbox-arena { position: relative; min-height: 340px; display: flex; flex-wrap: wrap; gap: 12px; align-content: end; padding: 20px; overflow: hidden; }
.toolbox-arena.is-interactive { display: block; height: 360px; padding: 0; }
.tool-pill { display: inline-flex; justify-content: center; align-items: center; gap: 9px; border: 1px solid #ffffff1c; border-radius: 100px; background: linear-gradient(135deg, #303b5e, #212a43); color: #fff; min-height: 52px; padding: 12px 19px; white-space: nowrap; font-size: 15px; font-weight: 600; box-shadow: 0 5px 12px #03061144, inset 0 1px #ffffff12; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
.tool-pill.plum { background: linear-gradient(135deg, #6e4daa, #4d3a7d); border-color: #c4a2ff42; }
.tool-pill:nth-child(3n) { background: linear-gradient(135deg, #285a58, #203f46); border-color: #97d8c535; color: #dbfff1; }
.tool-pill > span { font-size: 21px; line-height: 1; font-weight: 500; }
.is-interactive .tool-pill { position: absolute; left: 0; top: 0; transform-origin: center; }
.tool-pill.is-grabbed { cursor: grabbing; box-shadow: 0 14px 28px #03061177, 0 0 18px #a78bfa20; }
.tool-pill:focus-visible { outline: 3px solid #cfb8ff; outline-offset: 3px; }
.toolbox-bottom { border-top: 1px solid #363249; padding-block: 17px; font-size: 10px; color: #aab1ca; letter-spacing: 1px; }
.toolbox-bottom span:last-child { letter-spacing: 0; }
@media (max-width: 600px) {
  .toolbox-top, .toolbox-bottom { padding-inline: 18px; }
  .toolbox-top { align-items: start; padding-block: 19px; gap: 10px; }
  .toolbox-top p { font-size: 14px; }.toolbox-top p span { font-size: 10px; line-height: 1.5; max-width: 190px; }
  .toolbox-reset { min-width: 68px; font-size: 11px; }
  .toolbox-arena.is-interactive { height: 420px; }
  .tool-pill { min-height: 44px; padding: 10px 13px; font-size: 12px; gap: 6px; }
  .tool-pill > span { font-size: 17px; }
  .toolbox-bottom { font-size: 8px; gap: 12px; }
}

.website-description { color: var(--muted); font-size: 13px; line-height: 1.7; margin: -6px 0 18px; }

/* Website showcase: one horizontal strip, with the next project peeking in. */
.website-carousel { min-width: 0; }
.website-carousel .website-grid { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #64517c #151a2a; padding: 4px 0 15px; overscroll-behavior-x: contain; }
.website-carousel .website-grid::after { content: ''; flex: 0 0 calc(14% - 20px); }
.website-carousel .website-card { flex: 0 0 86%; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); scroll-snap-align: start; border-radius: 16px; background: linear-gradient(135deg, #20243a, #121827); border-color: #37364e; transition: border-color .2s; }
.website-carousel .website-card.is-current { border-color: #776092; }
.website-carousel .website-preview { aspect-ratio: auto; min-width: 0; display: flex; flex-direction: column; border-bottom: 0; border-right: 1px solid #35334a; background: #1b2130; }
.website-browser { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; background: #22263a; color: #bdc2d6; font-size: 10px; }
.browser-lights { display: flex; gap: 4px; }.browser-lights i { height: 5px; width: 5px; border-radius: 50%; background: #847593; }.browser-lights i:first-child { background: #cf9baf; }.browser-lights i:last-child { background: #88bba7; }
.website-carousel .website-preview img { height: 300px; flex: 1; min-height: 0; object-fit: cover; object-position: top; }
.website-carousel .website-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 3vw, 38px); }
.website-carousel .website-copy .label { font-size: 9px; line-height: 1.7; }
.website-carousel .website-copy h3 { font-size: clamp(25px, 3vw, 38px); letter-spacing: -1px; margin-block: 13px 23px; }
.website-carousel .website-copy .text-link { margin-top: 12px; }
.website-carousel-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 10px; }
.website-position { font-size: 12px; color: #d0bdeb; font-variant-numeric: tabular-nums; min-width: 200px; }.website-position span { color: var(--muted); margin-left: 14px; }
.website-dots { display: flex; align-items: center; gap: 2px; }
.website-dots button { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; }
.website-dots button::after { content: ''; width: 6px; height: 6px; border-radius: 10px; background: #555269; transition: width .2s, background .2s; }
.website-dots button[aria-current="true"]::after { width: 24px; background: #bda3f7; }
.website-arrows { display: flex; gap: 10px; }.website-arrows button { width: 46px; height: 46px; border: 1px solid #544563; border-radius: 50%; background: #252136; color: #e2d5f9; font-size: 20px; cursor: pointer; }.website-arrows button:disabled { opacity: .35; cursor: default; }
.website-grid.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }.website-grid.is-dragging * { cursor: grabbing; }
@media (hover: hover) { .website-carousel .website-grid { cursor: grab; }.website-carousel .website-preview:hover img { transform: none; } }
@media (max-width: 760px) {
  .website-carousel .website-card { flex-basis: 88%; grid-template-columns: minmax(0, 1fr); }
  .website-carousel .website-grid { gap: 14px; }
  .website-carousel .website-grid::after { flex-basis: calc(12% - 14px); }
  .website-carousel .website-preview { border-right: 0; border-bottom: 1px solid #35334a; }
  .website-carousel .website-preview img { flex: none; height: clamp(165px, 37vw, 255px); }
  .website-carousel .website-copy { padding: 21px; justify-content: start; }
  .website-carousel .website-copy h3 { font-size: 27px; margin-block: 9px 15px; }
  .website-carousel .website-description { font-size: 12px; margin-bottom: 8px; }
  .website-carousel .website-copy .text-link { margin-top: auto; }
  .website-position { min-width: 0; }.website-position span { display: none; }
  .website-dots { gap: 0; }.website-dots button { width: 34px; }
  .website-arrows { gap: 7px; }.website-arrows button { width: 44px; height: 44px; }
  .website-carousel-controls { gap: 8px; }
}
@media (max-width: 359px) { .website-dots button { width: 25px; }.website-browser { padding: 11px; font-size: 8px; gap: 7px; }.website-carousel .website-copy { padding: 17px; } }