/* Kyrex Studio: a dark development workspace, with restrained violet light. */
:root {
  color-scheme: dark;
  --paper: #080b12;
  --ink: #f0f2ff;
  --muted: #a3adc3;
  --line: #242c40;
  --accent: #ad93ff;
  --accent-dark: #9978fa;
  --lavender: #1c1831;
  --panel: #0f1421;
  --mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
}
body { position: relative; isolation: isolate; background: var(--paper); font-family: 'Segoe UI', Arial, sans-serif; }
body::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 920px; z-index: -1;
  background: radial-gradient(ellipse at 80% 24%, #6b43d528, transparent 48%),
    linear-gradient(#727ead09 1px, transparent 1px), linear-gradient(90deg, #727ead09 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  mask-image: linear-gradient(#000 40%, transparent); pointer-events: none;
}
em { font-family: inherit; font-weight: inherit; font-style: normal; }
::selection { background: #7850d6; color: #fff; }
.skip-link { background: #aa8bff; color: #080b12; }
.scroll-progress { height: 2px; background: linear-gradient(90deg, #7247ee, #c9b6ff, #6ce6d9); box-shadow: 0 0 14px #ac83ff90; }
.site-header { height: 88px; background: #080b12de; border-bottom-color: #9b8be51c; backdrop-filter: blur(20px); }
.brand { gap: 12px; }
.brand-mark { color: #b49aff; filter: drop-shadow(0 0 10px #9666ff33); }
.brand>span { font-family: 'Segoe UI', Arial, sans-serif; font-weight: 700; letter-spacing: -1.4px; }
.brand-studio { color: #a4adc4; font-family: var(--mono); letter-spacing: 3.4px; }
.primary-nav { color: #adb6cc; font-size: 13px; }
.nav-cta { background: #161a29; border: 1px solid #3c355b; color: #e8ddff; border-radius: 6px; }
.nav-cta:hover { background: #29203d; border-color: #a78bfa; }
.hero { padding-top: 92px; padding-bottom: 82px; gap: 47px; min-height: 705px; }
.hero-copy .eyebrow { color: #c6b3ff; font: 10px/1.5 var(--mono); letter-spacing: 1.4px; margin-bottom: 27px; }
.tiny-symbol { color: #af8dff; }
.hero h1 { font-size: clamp(60px, 5.35vw, 78px); font-weight: 650; letter-spacing: -4.3px; line-height: 1.1; }
.hero h1 em { letter-spacing: -3.8px; color: #b398ff; }
.hero-description { max-width: 420px; color: #aab3c8; line-height: 1.85; font-size: 16px; margin-top: 26px; }
.hero-actions { margin-top: 31px; }
.button { border-radius: 6px; font-weight: 600; }
.button-primary, .button-light { color: #fff; background: linear-gradient(135deg, #8056e5, #6941ca); border-color: #bc9cff55; box-shadow: inset 0 1px 0 #dfd0ff24, 0 5px 22px #7840e521; }
.button-primary:hover, .button-light:hover { background: linear-gradient(135deg, #8b65ec, #794fd7); box-shadow: inset 0 1px 0 #ffffff25, 0 7px 28px #8051ea38; }
.button-outline { color: #d2c7ed; border-color: #3a3451; background: #121625; }
.button-outline:hover { background: #242039; }
.text-link { color: #bbc3d8; }
.hero-note { color: #8490aa; font-size: 11px; margin-top: 30px; }
.note-line { background: #514d79; }
.hero-capabilities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hero-capabilities li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid #252d42; border-radius: 4px; font: 10px/1.5 var(--mono); color: #aab6ce; background: #0e1322a6; }
.hero-capabilities li>span { color: #aa8cf1; }
.hero-visual { padding: 20px; border: 1px solid #34304b; border-radius: 12px; background: linear-gradient(155deg, #181629e6, #0e1321e6 58%); box-shadow: 0 28px 80px #0006, inset 0 1px 0 #dfcfff0b; }
.hero-visual::before { inset: 0; width: auto; height: auto; background: radial-gradient(ellipse, #784ddd29, transparent 67%); filter: blur(20px); }
.visual-topline, .visual-bottomline { font-family: var(--mono); color: #a6a6c2; letter-spacing: .8px; }
.visual-topline { padding: 0 0 17px; font-size: 8px; }
.visual-cross { font-size: 16px; color: #a89acf; }
.visual-bottomline { padding: 16px 0 0; font-size: 6px; }
.visual-bottomline>span:last-child { color: #b597ff; }
.demo-tabs { border: 0; border-radius: 0; background: transparent; padding: 0; gap: 2px; width: 100%; margin: 0; }
.demo-tabs button { border: 1px solid transparent; border-bottom: 0; font: 9px/1.5 var(--mono); border-radius: 5px 5px 0 0; padding: 10px 12px; color: #8c97b5; }
.demo-tabs button::before { content: '//'; margin-right: 6px; opacity: .65; }
.demo-tabs button[aria-selected=true] { background: #151b2c; border-color: #30364c; color: #c9b5ff; box-shadow: inset 0 2px 0 #a37cfa; }
.demo-stage { border: 1px solid #30364c; border-radius: 0 7px 7px 7px; background: #0b1120; box-shadow: 0 14px 30px #0003; }
.browser-bar { background: #111727; border-bottom-color: #252d41; color: #8995b0; font-family: var(--mono); font-size: 7px; }
.browser-dots i:nth-child(1) { background: #9b71c6; }
.browser-dots i:nth-child(2) { background: #76659c; }
.browser-dots i:nth-child(3) { background: #4d807e; }
.browser-bar svg { stroke: #838cab; }
.demo-caption { background: #111727; border-top: 1px solid #242b41; color: #a6b2c9; font-family: var(--mono); font-size: 7px; }
.small-dot { background: #80c5b5; }
.web-demo { background: radial-gradient(ellipse at 80% 45%, #58309038, transparent 65%), #0b1020; padding-left: 21px; padding-right: 21px; }
.web-demo-nav strong { color: #f0edff; font-family: 'Segoe UI', Arial, sans-serif; font-weight: 700; letter-spacing: -.8px; }
.web-demo-nav>span { color: #a1aec9; }
.web-demo-nav b { color: #be9cff; }
.web-demo-copy .mini-eyebrow { color: #9985cc; font-family: var(--mono); letter-spacing: .6px; }
.web-demo-copy h2 { font-family: 'Segoe UI', Arial, sans-serif; font-weight: 650; color: #e9eafd; font-size: 29px; line-height: 1.15; letter-spacing: -1.2px; }
.web-demo-copy h2 i { color: #b396ff; font-style: normal; font-weight: inherit; }
.mini-button { background: #7450ce; border: 1px solid #b497ff47; border-radius: 4px; color: #fff; }
.web-demo-bottom { color: #8291ac; }
.architecture { height: 197px; background: radial-gradient(ellipse, #66429d26, transparent 70%); border-radius: 0; box-shadow: none; overflow: visible; }
.system-links { position: absolute; inset: 0; height: 100%; width: 100%; overflow: visible; color: #7962b9; }
.system-links path { fill: none; stroke: #8e6ace; stroke-width: 1; opacity: .6; }
.system-links circle { fill: none; stroke: #8e6ace; stroke-width: 1; stroke-dasharray: 3 8; opacity: .35; }
.system-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); width: 56px; height: 56px; display: grid; place-items: center; color: #e4d6ff; font-size: 25px; font-weight: 650; border: 1px solid #b08feaba; background: linear-gradient(140deg, #504072, #1f1c39); border-radius: 12px; box-shadow: 0 0 33px #8e54f542, inset 0 1px 0 #e2cfff40; }
.system-core::after { content: ''; position: absolute; inset: -7px; border: 1px solid #946bec35; border-radius: 16px; }
.system-node { position: absolute; transform: translate(-50%, -50%); padding: 7px 9px; color: #bac5e0; background: #121b2b; border: 1px solid #4e4270; border-radius: 5px; font: 7px/1 var(--mono); box-shadow: 0 6px 18px #0003; }
.node-api { left: 24%; top: 18.5%; }
.node-data { left: 85%; top: 27%; }
.node-app { left: 24%; top: 85%; }
.system-caption { position: absolute; right: 0; bottom: 7px; color: #8d83ab; font: 5px/1.4 var(--mono); letter-spacing: 1px; }
.discord-demo { background: #161b2b; }
.discord-rail { background: #101422; }
.discord-rail b, .bot-avatar, .bot-name>span, .bot-demo-buttons span { background: #7651cf; }
.discord-rail>span { background: #2a3044; }
.discord-rail>span:last-child { background: #1c2c32; color: #82c5b3; }
.discord-channel { border-bottom-color: #2a3146; color: #c0c9de; }
.discord-channel small { color: #8d98b2; }
.bot-embed { background: #0f1424; border-left-color: #aa86fb; }
.bot-embed p { color: #aab4ca; }
.bot-footnote { color: #929db8; }
.bot-demo-buttons span+span { background: #33364e; }
.software-demo { background: #0c1221; }
.software-sidebar { background: #101726; border-right-color: #293047; }
.software-sidebar>strong { color: #e0e4f6; }
.software-nav { color: #9eaac2; }
.software-nav.active { color: #ceb8ff; background: #2a2142; }
.workspace-label { color: #909cb7; }
.software-top h2 { color: #e4e9fd; }
.demo-badge { color: #b7a5db; background: #2b233f; }
.software-subtitle { color: #95a3bf; }
.software-stat { background: linear-gradient(120deg, #171a2e, #261e3b); border-color: #39304e; }
.software-stat>span { color: #b29bda; }
.software-stat strong { color: #e2d8fa; }
.workflow-bars { opacity: .3; }
.workflow-row { border-bottom-color: #242d42; }
.workflow-row b { color: #c9d3e9; }
.workflow-row small { color: #98a3be; }
.workflow-icon { background: #2d2349; color: #b598ed; }
.workflow-icon.peach { background: #1e3436; color: #8fcfc4; }
.workflow-status { color: #85bfb1; }
.discipline-strip { background: #0c101b; border-color: #222a3e; }
.discipline-strip>.container { min-height: 81px; }
.discipline-strip>.container>span { color: #8993b0; font-family: var(--mono); letter-spacing: 1px; }
.discipline-strip .container>div>span { color: #b5bfd6; font-family: var(--mono); font-size: 13px; letter-spacing: -.2px; }
.discipline-strip i { color: #68558d; font-size: 13px; }
.eyebrow { font-family: var(--mono); color: #a796cd; font-weight: 400; }
section h2 { font-weight: 600; letter-spacing: -2px; }
.section-heading>p, .approach-intro>p { color: var(--muted); }
.service-grid { gap: 18px; border: 0; }
.service-card, .service-card:first-child, .service-card:last-child { position: relative; border: 1px solid #293046; border-radius: 9px; padding: 28px 26px; background: linear-gradient(145deg, #14192a, #0d1220 65%); transition: border-color .25s, transform .25s, box-shadow .25s; }
.service-card:hover { transform: translateY(-5px); border-color: #71608d; box-shadow: 0 12px 40px #0004; }
.service-card::before { content: ''; position: absolute; height: 1px; inset: -1px 20% auto; background: linear-gradient(90deg, transparent, #a47fe6, transparent); opacity: .7; }
.service-card-top { margin-bottom: 29px; }
.service-icon { background: #2a2140; border: 1px solid #4a3a67; border-radius: 8px; width: 45px; height: 45px; }
.service-icon svg { stroke: #b99afa; }
.service-number { font: 10px/1 var(--mono); color: #95a0bb; font-style: normal; }
.service-number::before { content: '/ '; color: #655786; }
.service-card h3 { font-size: 25px; font-weight: 550; line-height: 1.25; }
.service-card>p { max-width: none; min-height: 82px; font-size: 14px; }
.service-card ul { color: #a7b1c9; margin-bottom: 32px; }
.service-card li { font-size: 11px; }
.service-card li::before { color: #a18acb; }
.service-link { padding-top: 20px; border-top: 1px solid #2b2d44; font-size: 12px; color: #c1a5fa; }
.services-footnote { color: #929eb9; }
.services-footnote button { color: #cbc4de; }
.approach-section { background: linear-gradient(160deg, #111421, #0b101c); border-top: 1px solid #252b3e; border-bottom: 1px solid #252b3e; }
.approach-intro h2 em { color: #b49de5; }
.process-number { font: 24px/1 var(--mono); color: #ad8ee4; border-color: #34314a; }
.process-number span { color: #7c6b9c; }
.process-step h3 { font-weight: 550; color: #d5dbed; font-size: 16px; }
.process-step p { color: #9da7bf; }
.studio-art { background: radial-gradient(ellipse at 50% 50%, #5f329f32, transparent 63%), #0d1320; border-color: #342943; border-radius: 10px; isolation: isolate; }
.art-grid { background-image: linear-gradient(#a882e511 1px, transparent 1px), linear-gradient(90deg, #a882e511 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(#000, #0002); }
.art-k { position: relative; display: grid; place-items: center; width: 145px; height: 145px; font-size: inherit; top: 0; left: 0; color: #c0a0fc; background: linear-gradient(140deg, #32284c, #17162a); border: 1px solid #776090; border-radius: 27px; transform: rotate(-8deg); box-shadow: 0 0 0 8px #9d79d609, 0 0 60px #9359e826, inset 0 1px 0 #d6bcf43b; text-shadow: none; z-index: 2; }
.art-k>svg { width: 69px; height: 69px; filter: drop-shadow(0 0 16px #a775ff65); transform: rotate(8deg); }
.art-orbit { position: absolute; width: 295px; height: 295px; border: 1px solid #65518158; border-radius: 50%; transform: rotate(-24deg); }
.art-orbit::before, .art-orbit::after { content: ''; position: absolute; width: 5px; height: 5px; background: #b99bec; border-radius: 50%; box-shadow: 0 0 13px #a58ad3a0; top: 14%; left: 14%; }
.art-orbit::after { top: auto; left: auto; right: 14%; bottom: 14%; background: #7cc4be; }
.art-orbit>span:first-child { position: absolute; inset: 25px; border: 1px dashed #6a548144; border-radius: 50%; }
.art-orbit>span:last-child { position: absolute; inset: -33px; border: 1px solid #56416428; border-radius: 50%; }
.art-label { color: #a595c1; font-family: var(--mono); font-size: 7px; letter-spacing: .75px; z-index: 3; }
.studio-copy>.eyebrow { color: #b3a0d1; }
.studio-copy h2 { font-size: 39px; line-height: 1.2; }
.principle h3 { color: #d6dcef; font-weight: 600; }
.principle p { color: #9ca8c1; }
.faq-list summary { color: #d6ddef; }
.faq-list summary>span { color: #ae8be8; }
.faq-list details[open] summary { color: #c9abff; }
.faq-list details>p { color: #a8b4ce; }
.contact-section { background: radial-gradient(ellipse at 65% 50%, #57298123, transparent 60%), #111021; border-top: 1px solid #352941; color: #eff0ff; }
.contact-section::after { border-color: #64507940; box-shadow: 0 0 0 90px #643b9610, 0 0 0 180px #643b9608; }
.contact-inner .eyebrow { color: #bba6db; }
.contact-inner h2 { font-weight: 600; font-size: 65px; }
.contact-inner h2 em { color: #b595f2; }
.contact-inner>div>p { color: #abb0ca; }
.contact-symbol { color: #aa87e6; }
.contact-label, .contact-aside small { color: #a9a5c4; font-family: var(--mono); }
.contact-aside>div>p { color: #dddaf2; }
.discord-handle { color: #c6b7e8; border-color: #534268; font-family: var(--mono); }
.discord-handle svg { stroke: #b09acd; }
.site-footer { border-top-color: #252b3e; background: #080b12; }
.footer-copyright, .footer-inner>a:last-child { color: #8f9ab4; }
.brief-dialog { background: #0f1422; color: #edf0ff; border-color: #524263; box-shadow: 0 25px 100px #000b; }
.brief-dialog::backdrop { background: #03050bbd; backdrop-filter: blur(9px); }
.close-dialog { color: #bbc3d8; }
.dialog-inner h2 { font-weight: 600; }
.dialog-inner label { color: #b9c4de; }
.dialog-inner input, .dialog-inner select, .dialog-inner textarea { background: #0a0f1a; border-color: #313b52; color: #e6ebfa; }
.dialog-inner input::placeholder, .dialog-inner textarea::placeholder { color: #8591ad; }
.dialog-inner #generatedBrief { background: #0a0e1a; border-color: #3d3352; color: #d3c7ed; font-family: var(--mono); }
.form-privacy { color: #99a5bf; }
.result-bottom button { color: #bca7df; }
@media (prefers-reduced-motion: no-preference) {
  .art-orbit { animation: orbit-trace 50s linear infinite; }
  .system-core { animation: core-float 7s ease-in-out infinite; }
  @keyframes orbit-trace { to { transform: rotate(336deg); } }
  @keyframes core-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
}
@media (min-width: 1440px) {
  .hero { gap: 55px; }
  .hero h1 { font-size: 80px; }
  .hero-visual { padding: 22px; }
}
@media (max-width: 1190px) {
  .hero { gap: 28px; padding-top: 73px; padding-bottom: 73px; }
  .hero h1 { font-size: 65px; letter-spacing: -3.5px; }
  .hero h1 em { letter-spacing: -3.2px; }
  .hero-description { font-size: 15px; }
  .hero-visual { padding: 15px; }
  .demo-tabs button { padding: 10px; font-size: 8px; }
  .web-demo { padding-left: 15px; padding-right: 15px; }
  .web-demo-copy h2 { font-size: 25px; }
  .system-core { width: 47px; height: 47px; font-size: 22px; }
  .system-node { padding: 6px; font-size: 6px; }
  .service-card, .service-card:first-child, .service-card:last-child { padding: 25px 20px; }
  .service-card h3 { font-size: 23px; }
  .service-card>p { font-size: 13px; }
  .service-card li { font-size: 10px; }
  .service-link { font-size: 11px; }
  .studio-copy h2 { font-size: 35px; }
}
@media (max-width: 960px) {
  .primary-nav { gap: 22px; }
  .hero { gap: 48px; padding-top: 64px; padding-bottom: 64px; }
  .hero h1 { font-size: 78px; letter-spacing: -4px; }
  .hero-copy { max-width: 760px; }
  .hero-description { max-width: 460px; font-size: 16px; }
  .hero-visual { max-width: 670px; padding: 22px; }
  .visual-topline { display: flex; }
  .demo-tabs { display: flex; }
  .demo-tabs button { font-size: 10px; padding: 12px 17px; }
  .web-demo { padding-left: 27px; padding-right: 27px; }
  .web-demo-copy h2 { font-size: 33px; }
  .architecture { height: 218px; }
  .system-core { width: 66px; height: 66px; font-size: 30px; }
  .system-node { font-size: 8px; padding: 9px 11px; }
  .system-caption { font-size: 6px; }
  .service-grid { grid-template-columns: 1fr; gap: 18px; }
  .service-card, .service-card:first-child, .service-card:last-child { padding: 27px; }
  .service-card h3 { font-size: 27px; }
  .service-card h3 br { display: none; }
  .service-card>p { max-width: 100%; min-height: 0; font-size: 14px; }
  .service-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 25px; }
  .service-card li, .service-link { font-size: 12px; }
  .service-card-top { margin-bottom: 20px; }
  .section-heading>p, .approach-intro>p { font-size: 14px; }
  .studio-copy h2 { font-size: 31px; }
  .process-step h3 { font-size: 14px; }
  .contact-inner h2 { font-size: 54px; }
}
@media (max-width: 640px) {
  .site-header { height: 78px; }
  .primary-nav { background: #0e1220; border-color: #353045; gap: 0; }
  .nav-cta { padding: 14px 17px; }
  .hero { padding-top: 50px; padding-bottom: 45px; gap: 36px; }
  .hero h1 { font-size: clamp(40px, 10.7vw, 64px); letter-spacing: -2.4px; line-height: 1.13; }
  .hero h1 em { letter-spacing: -2.4px; }
  .hero-copy .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .hero-description { font-size: 15px; max-width: 370px; margin-top: 22px; }
  .hero-actions { gap: 22px; }
  .hero-actions .button { font-size: 12px; }
  .hero-actions .text-link { font-size: 11px; }
  .hero-note { font-size: 10px; }
  .hero-capabilities { gap: 6px; margin-top: 20px; }
  .hero-capabilities li { font-size: 8px; padding: 5px 8px; }
  .hero-visual { padding: 13px; border-radius: 9px; }
  .visual-topline { font-size: 6px; padding-bottom: 14px; letter-spacing: .4px; }
  .demo-tabs { display: grid; grid-template-columns: repeat(3,1fr); }
  .demo-tabs button { font-size: 7px; padding: 10px 3px; white-space: nowrap; }
  .demo-tabs button::before { margin-right: 4px; }
  .visual-bottomline { font-size: 5px; letter-spacing: .4px; padding-top: 11px; }
  .visual-bottomline>span:last-child { font-size: 12px; }
  .web-demo { padding: 16px 12px 10px; }
  .web-demo-copy h2 { font-size: 24px; letter-spacing: -.8px; }
  .web-demo-copy .mini-eyebrow { font-size: 4.5px; }
  .architecture { height: 166px; }
  .system-core { width: 43px; height: 43px; font-size: 21px; border-radius: 9px; }
  .system-core::after { inset: -5px; border-radius: 13px; }
  .system-node { font-size: 5px; padding: 5px; border-radius: 3px; }
  .system-caption { font-size: 4px; letter-spacing: .5px; bottom: 4px; }
  .browser-bar { font-size: 6px; }
  .demo-caption { font-size: 5.5px; }
  .discipline-strip>.container { min-height: 65px; }
  .discipline-strip .container>div>span { font-size: 9px; }
  .discipline-strip i { font-size: 9px; }
  .section-heading h2, .approach-intro h2 { font-size: 37px; line-height: 1.16; letter-spacing: -1.5px; }
  .service-card, .service-card:first-child, .service-card:last-child { padding: 25px 21px; }
  .service-card h3 { font-size: 25px; }
  .service-card ul { grid-template-columns: 1fr; gap: 12px; }
  .service-card li { font-size: 12px; }
  .services-footnote { gap: 7px; flex-wrap: wrap; }
  .process-grid { gap: 30px 21px; }
  .process-step h3 { font-size: 14px; }
  .process-step p { font-size: 12px; }
  .studio-art { height: 328px; }
  .art-k { height: 115px; width: 115px; border-radius: 23px; }
  .art-k>svg { height: 54px; width: 54px; }
  .art-orbit { width: 235px; height: 235px; }
  .art-label { font-size: 6px; }
  .studio-copy h2 { font-size: 36px; }
  .contact-aside { border-top-color: #3d3153; }
  .contact-inner h2 { font-size: 50px; letter-spacing: -2px; }
  .contact-inner .eyebrow { font-size: 7px; }
  .contact-label { font-size: 6px; }
  .contact-aside small { font-size: 9px; }
  .dialog-inner input, .dialog-inner select, .dialog-inner textarea { font-size: 16px; }
}
@media (max-width: 374px) {
  .hero-actions { gap: 15px; }
  .hero-actions .button { gap: 16px; padding: 12px; font-size: 11px; }
  .hero-actions .text-link { font-size: 10px; gap: 7px; }
  .hero-visual { padding: 10px; }
  .web-demo-copy h2 { font-size: 21px; }
  .web-demo-nav>span { font-size: 4px; }
  .service-card h3 { font-size: 23px; }
  .service-card>p { font-size: 13px; }
  .service-card li { font-size: 11px; }
  .contact-inner h2 { font-size: 45px; }
}