:root {
  color-scheme: dark;
  --bg: #111014;
  --panel: #19171d;
  --panel-light: #211e26;
  --text: #f1eff4;
  --muted: #9c98a4;
  --line: #302d35;
  --purple: #a68aff;
  --purple-light: #c2b1ff;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.page-shell { overflow: hidden; }
.page-hidden { display: none !important; }
.section-wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.site-header { height: 78px; padding: 0 max(32px, calc((100vw - 1380px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07); position: sticky; top: 0; z-index: 20; background: rgba(17,16,20,.91); backdrop-filter: blur(18px); }
.brand { display: inline-flex; gap: 10px; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.brand-mark { width: 30px; height: 30px; border: 1px solid #625477; color: var(--purple-light); display: grid; place-items: center; font: 11px var(--mono); letter-spacing: -.08em; }
.brand-light { color: #a9a4b0; font-weight: 500; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.65vw, 25px); }
.nav-link { color: #bbb7c1; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: .08em; transition: color .2s; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-cta { padding: 11px 14px; border: 1px solid #6c5a91; font-size: 9px; font-weight: 700; letter-spacing: .04em; transition: background .2s; }
.nav-cta:hover { background: #302740; }
.nav-cta span { color: var(--purple-light); padding-left: 5px; }
.menu-toggle { display: none; }
.hero { position: relative; min-height: 590px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-top: 38px; padding-bottom: 54px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 28px; }
.eyebrow { margin: 0 0 21px; color: var(--purple-light); font: 10px var(--mono); letter-spacing: .12em; }
.status-dot, .legend-dot { display: inline-block; width: 6px; height: 6px; background: #a3d8a8; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 12px #a3d8a8aa; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 0; font-size: clamp(58px, 8vw, 100px); font-weight: 600; line-height: .98; letter-spacing: -.075em; }
.accent { color: var(--purple); }
.hero-text { max-width: 430px; margin: 25px 0 29px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.button { display: inline-flex; align-items: center; gap: 22px; padding: 14px 17px; font-size: 10px; font-weight: 700; }
.button-primary { background: #a78aff; color: #17131e; }
.button-primary:hover { background: #c0adff; }
.button-primary span { font-size: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 11px; color: #d3ced9; font-size: 10px; font-weight: 700; }
.text-link span { color: var(--purple-light); font-size: 15px; transition: transform .2s; }
.text-link:hover span { transform: translate(3px, -2px); }
.hero-note { display: flex; align-items: center; gap: 12px; position: absolute; bottom: -59px; color: #797580; font: 8px var(--mono); letter-spacing: .12em; }
.note-line { display: block; width: 34px; height: 1px; background: var(--purple); }
.hero-art { position: relative; height: 460px; overflow: hidden; background: radial-gradient(ellipse at 50% 48%, #292231 0, #18151d 42%, #111014 76%); }
.art-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(196,177,255,.23) 1px, transparent 1px), linear-gradient(90deg, rgba(196,177,255,.23) 1px, transparent 1px); background-size: 47px 47px; mask-image: radial-gradient(ellipse, black, transparent 72%); }
.orb { position: absolute; width: 238px; height: 238px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle at 34% 30%, #e1d3ff 0, #bba2ff 11%, #8565c5 33%, #393050 67%, #17141e 82%); box-shadow: inset -26px -18px 55px #08070b99, inset 11px 10px 24px #fff3, 0 0 100px #9a72ff45; }
.orb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, transparent 0 8px, #100e1718 9px 10px); }
.orbit { position: absolute; top: 50%; left: 50%; width: 330px; height: 118px; border: 1px solid #bba6ff66; border-radius: 50%; transform: translate(-50%,-50%) rotate(-24deg); }
.orbit-two { width: 310px; height: 165px; transform: translate(-50%,-50%) rotate(54deg); border-color: #bba6ff38; }
.orbit-one::after { content: ""; position: absolute; width: 7px; height: 7px; right: 33px; top: 17px; border-radius: 50%; background: #d1c2ff; box-shadow: 0 0 12px #d1c2ff; }
.art-label, .art-index { position: absolute; z-index: 1; bottom: 23px; left: 23px; right: 23px; display: flex; justify-content: space-between; color: #827d89; font: 8px var(--mono); letter-spacing: .1em; }
.art-index { top: 24px; bottom: auto; left: auto; color: var(--purple-light); }
.art-index span { color: #716b79; }
.scroll-cue { position: absolute; right: 0; bottom: 32px; display: flex; align-items: center; gap: 10px; color: #77727e; font: 8px var(--mono); letter-spacing: .12em; writing-mode: vertical-rl; }
.scroll-cue span { width: 1px; height: 34px; background: #716281; }
.intro-strip { background: #1b1820; border-block: 1px solid #29242f; }
.strip-inner { min-height: 78px; display: flex; align-items: center; gap: 20px; }
.strip-symbol { color: var(--purple); font-size: 20px; }
.strip-inner p { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.strip-inner p span { color: var(--purple-light); }
.strip-caption { margin-left: auto; color: #817c88; font: 8px var(--mono); letter-spacing: .12em; }
.portal-promo { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 26px 30px; border: 1px solid #393144; background: linear-gradient(110deg,#1d1925,#151319); }
.portal-promo .eyebrow { margin-bottom: 8px; }
.portal-promo h2 { margin: 0 0 8px; font-size: 23px; letter-spacing: -.04em; }
.portal-promo p:not(.eyebrow) { max-width: 520px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.content-section { padding-top: 100px; padding-bottom: 100px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 40px; }
.section-heading .eyebrow { margin-bottom: 13px; }
.section-heading h2, .feature-copy h2, .contact-heading h2 { margin: 0; font-size: clamp(39px, 5vw, 57px); font-weight: 600; line-height: 1.07; letter-spacing: -.065em; }
.section-lead { max-width: 375px; margin: 0 0 5px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service-card { position: relative; min-height: 230px; padding: 24px; border: 1px solid var(--line); background: linear-gradient(145deg, #1b191f, #151318); }
.card-number { position: absolute; right: 22px; top: 23px; color: #77727e; font: 9px var(--mono); }
.service-icon { display: grid; place-items: center; width: 37px; height: 37px; margin-bottom: 26px; border: 1px solid #514366; color: var(--purple-light); font-size: 17px; }
.service-card h3 { margin-bottom: 10px; font-size: 15px; }
.service-card p { max-width: 260px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.service-price { display: block; margin-top: 16px; color: var(--purple-light); font-size: 15px; }
.service-price span { color: #aaa4b0; font-size: 10px; font-weight: 500; }
.service-extra { display: block; max-width: 220px; margin-top: 5px; color: #aaa4b0; font-size: 9px; line-height: 1.6; }
.service-card > a { position: absolute; right: 22px; bottom: 20px; color: var(--purple-light); }
.pricing-note { margin: 22px 0 0; padding: 16px 18px; border-left: 2px solid var(--purple); background: #19171d; color: #c4becb; font-size: 10px; line-height: 1.7; }
.projects-section { background: #17151a; border-block: 1px solid #242129; }
.project-count { margin-bottom: 7px; color: #898490; font: 8px var(--mono); letter-spacing: .1em; }
.project-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.project-card { min-width: 0; }
.project-visual { position: relative; display: grid; place-items: center; min-height: 290px; overflow: hidden; background: #25212d; }
.visual-tag { position: absolute; top: 16px; left: 16px; color: #d7cdf0; font: 8px var(--mono); letter-spacing: .08em; }
.visual-dashboard { background: radial-gradient(ellipse at 50% 50%, #423653, #25212d 65%); }
.dashboard-ui { width: 64%; height: 61%; padding: 15px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 12px 1fr 1fr; gap: 9px; border: 1px solid #a68aff55; background: #17141dbd; transform: perspective(700px) rotateY(-12deg) rotateX(5deg); box-shadow: 18px 20px 50px #09080c80; }
.dashboard-ui i { background: #a68aff; opacity: .65; height: 5px; }
.dashboard-ui b { background: linear-gradient(145deg,#6e5c8d55,#b8a4ff33); border: 1px solid #b8a4ff28; }
.visual-commerce { background: linear-gradient(135deg,#3b333b,#29242d 52%,#503b55); }
.commerce-shape { position: absolute; width: 190px; height: 190px; border: 1px solid #d5c6e144; border-radius: 50%; background: radial-gradient(circle at 35% 35%,#d1b3d5,#805d8b 37%,#392c42 70%); box-shadow: 0 0 65px #c19ad233; }
.commerce-card { position: relative; z-index: 1; margin: 86px 0 0 115px; padding: 12px; background: #ece5e7; color: #352c38; font: 11px var(--mono); letter-spacing: .16em; transform: rotate(-8deg); box-shadow: 0 10px 30px #120e1680; }
.commerce-card small { font-size: 7px; line-height: 1.4; }
.project-meta { display: flex; justify-content: space-between; align-items: start; padding: 16px 2px 0; }
.project-meta h3 { margin-bottom: 5px; font-size: 13px; }
.project-meta p { margin: 0; color: var(--muted); font-size: 10px; }
.project-meta > span { color: var(--purple-light); }
.concept-note { margin: 26px 0 0; color: #77727e; font-size: 9px; }
.feature-section { background: linear-gradient(115deg,#1b1721,#17151b 58%,#211b29); border-block: 1px solid #30283a; }
.feature-grid { min-height: 415px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 70px; padding-block: 74px; }
.feature-copy .eyebrow { margin-bottom: 14px; }
.feature-copy h2 { font-size: clamp(38px, 4.8vw, 55px); }
.feature-copy > p:not(.eyebrow) { max-width: 330px; margin: 18px 0 23px; color: var(--muted); font-size: 11px; line-height: 1.9; }
.button-outline { border: 1px solid #685784; color: #eee9f5; }
.button-outline:hover { background: #30263d; }
.button-outline span { color: var(--purple-light); font-size: 14px; }
.code-window { border: 1px solid #403748; background: #111014; box-shadow: 0 24px 70px #08070a77; }
.window-top { height: 43px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #28242d; color: #9993a0; font: 8px var(--mono); }
.window-top > span:last-child { color: #8bc59b; font-size: 7px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; background: #625a69; border-radius: 50%; }
.window-dots i:first-child { background: #aa7a9c; }
.code-window pre { min-height: 228px; padding: 23px; margin: 0; overflow-x: auto; color: #ddd6e7; font: 10px/1.9 var(--mono); }
.code-muted { color: #77727e; }.code-purple { color: #bb9cff; }.code-green { color: #a3d3b0; }.code-blue { color: #8fb9ec; }
.code-cursor { display: inline-block; width: 6px; height: 12px; background: var(--purple); vertical-align: middle; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.code-footer { display: flex; justify-content: space-between; padding: 12px 15px; border-top: 1px solid #28242d; color: #77727e; font: 7px var(--mono); letter-spacing: .1em; }
.extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 76px; }
.extra-card { position: relative; min-height: 245px; padding: 26px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg,#1e1a25,#17151a); }
.extra-card .eyebrow { margin-bottom: 18px; }
.extra-icon { position: absolute; top: 25px; right: 28px; color: #c1aaff; font-size: 24px; }
.extra-card h2 { margin: 0 0 10px; font-size: 28px; letter-spacing: -.05em; }
.extra-card p:not(.eyebrow) { max-width: 340px; margin-bottom: 20px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.extra-decoration { position: absolute; right: 24px; bottom: 18px; color: #716a79; font: 7px var(--mono); letter-spacing: .12em; }
.shop-card { background: linear-gradient(135deg,#24202a,#17151a); }
.calendar-section { background: #19171d; border-block: 1px solid #29252f; }
.calendar-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; padding-block: 88px; }
.calendar-copy h2 { margin: 0; font-size: clamp(34px,4vw,47px); line-height: 1.12; letter-spacing: -.06em; }
.calendar-copy > p:not(.eyebrow) { max-width: 330px; margin: 20px 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
.calendar-legend { color: #aaa4b0; font-size: 9px; line-height: 1.8; }
.legend-dot { width: 6px; height: 6px; background: var(--purple); box-shadow: 0 0 10px #a68aff88; }
.calendar-card { padding: 24px; background: #121115; border: 1px solid #37313f; }
.calendar-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.calendar-top .eyebrow { margin-bottom: 7px; font-size: 8px; }
.calendar-top h3 { margin: 0; font-size: 17px; }
.calendar-controls { display: flex; gap: 7px; }
.calendar-controls button { width: 30px; height: 30px; color: #ddd6e7; background: #211e26; border: 1px solid #38323f; cursor: pointer; }
.calendar-controls button:hover { color: var(--purple-light); border-color: #8471a0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.calendar-day-label, .calendar-day { display: grid; place-items: center; min-height: 33px; color: #77727e; font: 8px var(--mono); }
.calendar-day { position: relative; color: #c8c3ce; background: #1a181e; border: 1px solid transparent; cursor: default; }
.calendar-day.empty { background: transparent; }
button.calendar-day { cursor: pointer; }
button.calendar-day:hover, button.calendar-day.selected { border-color: var(--purple); color: #fff; background: #30263d; }
button.calendar-day.has-event::after { content: ""; position: absolute; bottom: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--purple-light); }
.calendar-day.today { color: var(--purple-light); }
.calendar-selection { min-height: 38px; padding: 14px 0 7px; color: #aaa4b0; font-size: 9px; }
.calendar-contact { display: flex; align-items: center; justify-content: space-between; padding-top: 13px; border-top: 1px solid #2b2730; color: #dfd9e7; font-size: 9px; font-weight: 700; }
.calendar-contact span { color: var(--purple-light); font-size: 15px; }
.contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 60px; align-items: start; padding-block: 100px; }
.contact-heading { grid-column: 1; }
.contact-heading .eyebrow { margin-bottom: 14px; }
.contact-heading h2 { font-size: clamp(49px,6.2vw,72px); }
.contact-heading > p:last-child { max-width: 340px; margin: 19px 0 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
.contact-options { display: grid; grid-column: 1; gap: 12px; }
.contact-card { display: flex; flex-direction: column; padding: 30px; border: 1px solid #494052; background: linear-gradient(140deg,#211c29,#18161c); transition: border-color .2s, transform .2s; }
.contact-card:hover { border-color: var(--purple); transform: translateY(-3px); }
.contact-card-label { margin-bottom: 32px; color: var(--purple-light); font: 8px var(--mono); letter-spacing: .12em; }
.contact-card-title { display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 700; }
.contact-card-title span { color: var(--purple-light); }
.contact-card-note { margin-top: 12px; color: #96909c; font-size: 9px; }
.contact-form { grid-column: 2; grid-row: 1 / span 2; padding: 26px; border: 1px solid #494052; background: linear-gradient(140deg,#17151e,#100f16); }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-fields label { display: grid; gap: 8px; color: #d1cbd7; font: 8px var(--mono); letter-spacing: .1em; }
.contact-fields input, .contact-fields select, .contact-fields textarea { width: 100%; min-width: 0; border: 1px solid #383340; border-radius: 0; padding: 12px; background: #0e0d14; color: var(--text); font: 11px/1.6 var(--sans); }
.contact-fields input:focus, .contact-fields select:focus, .contact-fields textarea:focus { outline: 1px solid var(--purple); border-color: var(--purple); }
.contact-fields textarea { resize: vertical; }
.contact-subject, .contact-message { grid-column: 1 / -1; }
.contact-submit { display: inline-flex; align-items: center; gap: 16px; margin-top: 20px; padding: 13px 17px; border: 1px solid #8471a0; background: #292333; color: var(--text); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.contact-submit:hover { background: #352b45; }
.contact-submit span { color: var(--purple-light); }
.contact-form-note { margin: 16px 0 0; color: #96909c; font-size: 9px; line-height: 1.7; }
.site-footer { border-top: 1px solid #2b2730; background: #0e0d10; }
.footer-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #8d8793; font: 8px var(--mono); letter-spacing: .08em; }
.footer-inner > a:not(.brand) { color: #c6c0cc; }
.footer-brand { color: var(--text); font: 9px var(--sans); }
.footer-brand .brand-mark { width: 26px; height: 26px; }
.legal-note { padding: 0 0 18px; color: #6f6a75; font-size: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.team-access { position: fixed; z-index: 30; top: 50%; left: 0; display: inline-flex; align-items: center; gap: 9px; padding: 15px 11px; transform: translateY(-50%); border: 1px solid #6c5a91; border-left: 0; background: #211c29; color: var(--purple-light); font: 9px var(--mono); letter-spacing: .12em; writing-mode: vertical-rl; }
.team-access:hover { background: #302740; }
.team-page { min-height: calc(100vh - 153px); display: grid; place-items: center; padding-block: 70px; }
.team-notice { width: min(560px, 100%); padding: 36px; border: 1px solid #494052; background: linear-gradient(140deg,#211c29,#18161c); }
.team-notice .eyebrow { margin-bottom: 14px; }
.team-notice h1 { margin-bottom: 16px; font-size: clamp(32px, 5vw, 48px); letter-spacing: -.06em; }
.team-notice p:not(.eyebrow) { margin-bottom: 24px; color: var(--muted); font-size: 12px; line-height: 1.9; }

@media (max-width: 1050px) {
  .site-header { padding-inline: 24px; }
  .site-nav { gap: 12px; }
  .nav-link { font-size: 8px; }
  .nav-cta { padding: 10px; font-size: 8px; }
  .section-wrap { width: min(100% - 48px, 900px); }
}
@media (max-width: 800px) {
  .site-header { height: 68px; }
  .menu-toggle { display: flex; width: 38px; height: 38px; flex-direction: column; justify-content: center; gap: 6px; align-items: center; border: 1px solid #49434e; background: transparent; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { width: 15px; height: 1px; background: #eee9f5; }
  .site-nav { position: absolute; top: 67px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 24px 20px; background: #151319; border-bottom: 1px solid #39333f; }
  .site-nav.open { display: flex; }
  .nav-link { padding: 13px 0; border-bottom: 1px solid #29252f; font-size: 10px; }
  .nav-cta { margin-top: 13px; text-align: center; font-size: 9px; }
  .hero { min-height: 0; grid-template-columns: 1fr; padding-top: 80px; padding-bottom: 70px; }
  .hero-copy { padding-bottom: 0; }
  .hero-art { position: absolute; width: 54%; height: 340px; top: 65px; right: -14%; opacity: .55; }
  .team-access { padding: 13px 9px; }
  .hero h1 { font-size: clamp(58px, 12vw, 88px); }
  .hero-text { max-width: 390px; }
  .hero-note { position: static; margin-top: 50px; }
  .scroll-cue { display: none; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { gap: 35px; }
  .calendar-layout { gap: 40px; }
}
@media (max-width: 580px) {
  html { scroll-padding-top: 70px; }
  .section-wrap { width: calc(100% - 36px); }
  .site-header { padding-inline: 18px; }
  .brand { font-size: 9px; }
  .hero { padding-top: 69px; padding-bottom: 56px; }
  .hero-art { width: 76%; height: 280px; top: 84px; right: -34%; opacity: .38; }
  .orb { width: 170px; height: 170px; }
  .orbit { width: 250px; height: 85px; }
  .orbit-two { width: 235px; height: 125px; }
  .hero h1 { font-size: clamp(54px, 15vw, 76px); }
  .hero-text { max-width: 320px; font-size: 12px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 19px; }
  .hero-note { margin-top: 40px; font-size: 7px; }
  .strip-inner { min-height: 70px; gap: 12px; }
  .strip-inner p { font-size: 9px; }
  .strip-caption { display: none; }
  .content-section { padding-block: 68px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 28px; }
  .section-heading h2 { font-size: 43px; }
  .section-lead { font-size: 11px; }
  .service-grid, .project-grid, .extra-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 195px; }
  .project-visual { min-height: 230px; }
  .feature-grid { grid-template-columns: 1fr; gap: 34px; padding-block: 60px; }
  .feature-copy h2 { font-size: 44px; }
  .code-window pre { min-height: 205px; padding: 17px; font-size: 9px; }
  .extra-grid { gap: 12px; padding-block: 56px; }
  .extra-card { min-height: 220px; padding: 22px; }
  .calendar-layout { grid-template-columns: 1fr; gap: 30px; padding-block: 62px; }
  .calendar-copy h2 { font-size: 38px; }
  .calendar-card { padding: 17px; }
  .calendar-day-label, .calendar-day { min-height: 31px; }
  .contact-section { grid-template-columns: 1fr; gap: 28px; padding-block: 68px; }
  .contact-heading h2 { font-size: 58px; }
  .contact-card { padding: 23px; }
  .footer-inner { padding-block: 18px; flex-wrap: wrap; }
  .footer-inner .back-top { margin-left: auto; }
  .legal-note { line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

:root {
  --bg: #07101e;
  --panel: #0c1728;
  --panel-light: #111f34;
  --text: #eef4ff;
  --muted: #9baac0;
  --line: #1b2b42;
  --purple: #547cff;
  --purple-light: #81b9ff;
}

body {
  background:
    radial-gradient(ellipse at 86% 9%, #0c2650 0, transparent 34rem),
    var(--bg);
}

.page-shell { overflow: clip; }
.site-header { border-color: #15243a; background: rgba(5, 13, 25, .96); }
.brand-mark { border-color: #315eb7; color: #8bc7ff; background: #10203a; }
.brand-light, .nav-link { color: #aab8cd; }
.nav-link:hover, .nav-link.active { color: #fff; }
.nav-cta { border-color: #2857a1; background: #102347; }
.nav-cta:hover { background: #173465; }
.button-primary { background: linear-gradient(120deg, #237dec, #5857f5); color: #fff; box-shadow: 0 8px 26px #145be455; }
.button-primary:hover { background: linear-gradient(120deg, #3994ff, #7168ff); }
.button-outline { border-color: #315484; background: #10203a; }
.button-outline:hover { background: #172d4e; }
.service-card, .extra-card, .contact-card, .team-notice, .code-window, .calendar-card {
  border-color: #1a2c44;
  border-radius: 14px;
  background: linear-gradient(145deg, #0d1a2d, #091322);
  box-shadow: 0 12px 32px #02081238, inset 0 1px #ffffff08;
}
.service-card { transition: transform .2s, border-color .2s, box-shadow .2s; }
.service-card:hover, .extra-card:hover {
  transform: translateY(-3px);
  border-color: #3266b2;
  box-shadow: 0 16px 36px #02081266, 0 0 24px #1875eb18;
}
.service-icon { border-color: #294a79; border-radius: 11px; background: #102747; color: #8bc7ff; }
.card-number, .project-count, .extra-decoration { color: #778aa5; }
.service-price, .service-card > a, .contact-card-title span { color: #81b9ff; }
.service-extra { color: #b6c4d9; }
.pricing-note { border: 1px solid #1b2c45; border-left: 3px solid #438cff; border-radius: 10px; background: #0d1a2d; color: #c2cfe2; }
.projects-section, .feature-section, .calendar-section { border-color: #172740; background: #091525; }
.project-visual { border-radius: 13px; background-color: #101f35; }
.visual-dashboard { background: radial-gradient(ellipse at 50% 50%, #174b84, #101f35 67%); }
.visual-commerce { background: linear-gradient(135deg,#102b4b,#162339 52%,#263868); }
.commerce-shape { background: radial-gradient(circle at 35% 35%,#9ad9ff,#3577bd 37%,#17294a 70%); }
.feature-section { background: linear-gradient(115deg,#0d1d32,#091525 58%,#111d38); }
.code-window { box-shadow: 0 20px 55px #02081280; }
.window-top, .code-footer { border-color: #1a2c44; }
.shop-card { background: linear-gradient(135deg,#102442,#0a1424); }
.calendar-card { background: #081322; }
.calendar-controls button { border-color: #263c5a; border-radius: 8px; background: #11233d; }
.calendar-controls button:hover { border-color: #438cff; color: #91c6ff; }
.calendar-day { border-radius: 7px; background: #10203a; }
button.calendar-day:hover, button.calendar-day.selected { border-color: #438cff; background: #183966; }
.contact-card:hover { border-color: #438cff; }
.site-footer { border-color: #1b2b42; background: #060d18; }
.footer-inner > a:not(.brand) { color: #a8c8f3; }
.team-access { border-color: #2857a1; background: #102347; color: #a1ceff; }
.team-access:hover { background: #173465; }
.team-notice .eyebrow { color: #8fc4ff; }

@media (min-width: 801px) {
  html { scroll-padding-top: 24px; }
  .site-header {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    width: 164px;
    height: 100vh;
    padding: 22px 12px 16px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-right: 1px solid #172740;
    border-bottom: 0;
    background: rgba(5, 13, 25, .97);
  }
  .brand { gap: 7px; padding: 0 2px 22px; font-size: 8px; letter-spacing: .04em; }
  .brand-mark { width: 29px; height: 29px; flex: 0 0 29px; border-radius: 9px; }
  .menu-toggle { display: none; }
  .site-nav {
    width: 100%;
    height: calc(100vh - 82px);
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .nav-link {
    display: flex;
    align-items: center;
    padding: 13px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 9px;
    letter-spacing: .06em;
  }
  .nav-link::before {
    width: 18px;
    flex: 0 0 18px;
    color: #8ebeff;
    font-size: 13px;
    text-align: left;
  }
  .nav-link:nth-child(1)::before { content: "⌂"; }
  .nav-link:nth-child(2)::before { content: "▦"; }
  .nav-link:nth-child(3)::before { content: "♟"; }
  .nav-link:nth-child(4)::before { content: "⌘"; }
  .nav-link:nth-child(5)::before { content: "◇"; }
  .nav-link:nth-child(6)::before { content: "✉"; }
  .nav-link:hover { background: #0e1e33; }
  .nav-link.active {
    border-color: #1f67bd;
    background: linear-gradient(100deg, #1264bd, #14356c);
    box-shadow: 0 0 22px #1478ed43;
  }
  .nav-cta {
    margin-top: auto;
    padding: 13px 10px;
    border-radius: 9px;
    text-align: center;
    font-size: 9px;
  }
  main, .site-footer { margin-left: 164px; }
  .section-wrap { width: min(1120px, calc(100% - 40px)); }
  .hero {
    min-height: min(660px, 100vh);
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-top: 55px;
    padding-bottom: 55px;
  }
  .hero-art {
    height: min(440px, 62vh);
    border: 1px solid #1c3455;
    border-radius: 18px;
    background: radial-gradient(ellipse at 50% 48%, #153e6b 0, #0c1a2d 52%, #091322 82%);
    box-shadow: 0 20px 60px #02081280, inset 0 1px #ffffff0d;
  }
  .orb {
    background: radial-gradient(circle at 34% 30%, #c8efff 0, #7ec6ff 11%, #397fcd 33%, #1b3c70 67%, #101a2d 82%);
    box-shadow: inset -26px -18px 55px #08070b99, inset 11px 10px 24px #fff3, 0 0 100px #318bff55;
  }
  .orbit { border-color: #7ab8ff66; }
  .orbit-two { border-color: #7ab8ff38; }
  .intro-strip {
    margin-inline: 20px;
    border: 1px solid #1a2c44;
    border-radius: 12px;
    background: linear-gradient(100deg,#0e1c30,#0a1525);
  }
  .content-section { padding-top: 64px; padding-bottom: 64px; }
  .section-heading { align-items: center; margin-bottom: 28px; }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
  .service-card { min-height: 214px; padding: 20px; }
  .service-icon { margin-bottom: 20px; }
  .project-grid { gap: 14px; }
  .project-visual { min-height: 250px; }
  .feature-grid, .contact-section { padding-block: 64px; }
  .contact-section { grid-template-columns: 1fr; gap: 18px; }
  .contact-section .contact-heading, .contact-options, .contact-form { grid-column: 1; }
  .contact-form { grid-row: auto; }
  .extra-grid { padding-block: 54px; }
}

@media (max-width: 800px) {
  .site-header { background: rgba(5, 13, 25, .96); }
  .site-nav { background: #091525; border-bottom-color: #1b2b42; }
  .nav-link { border-bottom-color: #1a2c44; }
  .menu-toggle { border-color: #294a79; border-radius: 9px; background: #10203a; }
  .team-access { border-color: #2857a1; background: #102347; }
}

@media (max-width: 580px) {
  .service-card, .extra-card { border-radius: 13px; }
  .intro-strip { border-color: #1a2c44; }
  .contact-section { gap: 14px; }
  .portal-promo { align-items: flex-start; flex-direction: column; margin-top: 24px; padding: 22px; }
}

.bot-packages { padding-block: 74px 48px; }
.bot-packages .section-heading { margin-bottom: 30px; }
.bot-package-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.bot-package {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 20px;
  border: 1px solid #1a2c44;
  border-radius: 14px;
  background: linear-gradient(155deg, #10213a, #091322 78%);
  box-shadow: 0 12px 32px #02081238, inset 0 1px #ffffff08;
}
.bot-package-featured { border-color: #3266b2; background: linear-gradient(155deg, #11294a, #091322 78%); box-shadow: 0 12px 36px #1264bd26, inset 0 1px #ffffff12; }
.bot-package-enterprise { background: linear-gradient(155deg, #1a2336, #091322 78%); }
.bot-package-heading { display: flex; align-items: center; gap: 11px; min-height: 43px; }
.bot-package-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid #294a79; border-radius: 11px; background: #102747; color: #8bc7ff; font-size: 19px; }
.bot-package-heading h3 { margin: 0 0 4px; font-size: 14px; line-height: 1.3; }
.bot-package-tag { color: #8bc7ff; font: 7px var(--mono); letter-spacing: .1em; }
.bot-package-description { min-height: 38px; margin: 15px 0 2px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.bot-package-price { margin: 0 0 14px; color: #a7d2ff; font-size: 25px; font-weight: 800; letter-spacing: -.05em; }
.bot-package-price span { color: #aab8cd; font-size: 10px; font-weight: 500; letter-spacing: 0; }
.bot-package h4 { margin: 0; padding: 12px 0 9px; border-top: 1px solid #29405e; font-size: 10px; }
.bot-package-features { display: grid; gap: 9px; margin: 0 0 18px; padding: 0; list-style: none; }
.bot-package-features li { position: relative; padding-left: 15px; color: #c2cfe2; font-size: 9px; line-height: 1.55; }
.bot-package-features li::before { position: absolute; left: 0; color: #70b7ff; content: "↗"; font-size: 9px; }
.bot-package-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 10px 0; border-top: 1px solid #29405e; }
.bot-package-summary > strong { font-size: 11px; white-space: nowrap; }
.bot-package-summary > span { color: #9baac0; font-size: 8px; line-height: 1.7; text-align: right; white-space: nowrap; }
.bot-package-summary b { display: inline-block; padding: 2px 6px; border-radius: 999px; background: #12663f; color: #b6ffd8; font-size: 8px; font-weight: 700; }
.package-cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 11px 12px; border: 1px solid #2857a1; border-radius: 8px; background: #102347; color: #c3ddff; font-size: 9px; font-weight: 700; transition: background .2s, border-color .2s; }
.package-cta span { color: #8bc7ff; font-size: 14px; }
.package-cta:hover { border-color: #438cff; background: #173465; }

@media (max-width: 1100px) {
  .bot-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  main, .site-footer { margin-left: 0; }
}
@media (max-width: 580px) {
  .bot-packages { padding-block: 58px 34px; }
  .bot-package-grid { grid-template-columns: 1fr; }
  .bot-package { padding: 20px; }
}