/* KKV LABS — midnight interface */
:root {
  color-scheme: dark;
  --paper: #080d19;
  --white: #0d1628;
  --ink: #edf7ff;
  --muted: #a8bdd0;
  --line: rgba(112, 177, 214, .2);
  --blue: #101d35;
  --blue2: #5deaff;
  --lime: #5deaff;
  --peach: #a879ff;
  --orange: #ff58d3;
  --serif: 'Segoe UI', Arial, sans-serif;
}
*, *::before, *::after { font-family: 'Segoe UI', Arial, sans-serif !important; }
em, i { font-style: normal !important; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse 70% 38% at 87% 8%, rgba(39, 75, 145, .2), transparent 70%),
    radial-gradient(ellipse 60% 25% at 8% 35%, rgba(76, 22, 111, .11), transparent 75%),
    var(--paper);
  color: var(--ink);
}
::selection { background: #5deaff; color: #08101d; }
:focus-visible { outline: 2px solid #5deaff; outline-offset: 4px; }
.site-header {
  position: sticky;
  top: 0;
  background: rgba(7, 12, 24, .9);
  border-bottom: 1px solid rgba(96, 218, 249, .18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .15);
}
.logo-mark {
  background: linear-gradient(145deg, #12243e, #0b1629);
  color: #e8faff;
  border: 1px solid rgba(93, 234, 255, .65);
  box-shadow: 0 0 18px rgba(93, 234, 255, .18), inset 0 0 18px rgba(93, 234, 255, .1);
}
.logo-mark span { color: #ff58d3; }
.logo-name { color: #ecf7ff; }
.logo-name b { color: #70ecff; }
.logo-name small { color: #889eb9; }
.desktop-nav a, .mobile-nav a { color: #b8cadb; }
.desktop-nav a:hover, .desktop-nav a[aria-current], .mobile-nav a[aria-current] { color: #5deaff; }
.menu-button span { background: #d7efff; }
.mobile-nav { background: rgba(8, 15, 29, .98); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
.eyebrow { color: #5deaff; letter-spacing: .19em; }
.eyebrow-line { width: 30px; box-shadow: 0 0 10px #5deaff; }
h1, h2, h3 { color: #f0f9ff; }
h1 { letter-spacing: -.055em; }
h1 em, h2 em {
  font-weight: inherit;
  color: #5deaff;
  background: linear-gradient(100deg, #74f3ff 7%, #9e94ff 54%, #ff67d7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lead, .section-head>p, .horizontal p, .feature-card p,
.publishing-copy p, .about-text p, .contact-grid>div:first-child p,
.legal-intro, .legal-section p, .plain-note p, .product-info p,
.service-list p, .contact-note { color: var(--muted); }
.text-link, .product-info a, .contact-email { color: #77eaff; border-color: rgba(119, 234, 255, .55); }
.text-link:hover, .product-info a:hover, .contact-email:hover { color: #ff78d9; }
.button { border-radius: 2px; transition: transform .25s, box-shadow .25s, background .25s; }
.button:hover { transform: translateY(-3px); }
.button-dark, .button-light {
  background: linear-gradient(105deg, #67eaff, #89f0ff);
  color: #06121f;
  box-shadow: 0 10px 35px rgba(61, 220, 249, .16), inset 0 1px 0 rgba(255,255,255,.7);
}
.button-dark:hover, .button-light:hover { box-shadow: 0 16px 40px rgba(61, 220, 249, .32); }
.home-hero { min-height: 710px; position: relative; }
.home-copy { position: relative; z-index: 1; }
.home-copy h1 { font-weight: 750; }
.home-copy h1 em { color: #5deaff; }
.status-note { color: #8da9bc; letter-spacing: .02em; }
.status-dot { background: #5deaff; box-shadow: 0 0 12px #5deaff; animation: statusPulse 2.8s ease-in-out infinite; }
.hero-art {
  isolation: isolate;
  border: 1px solid rgba(103, 222, 250, .35);
  border-radius: 10px;
  background:
    radial-gradient(circle at 48% 41%, rgba(61, 141, 222, .27), transparent 34%),
    radial-gradient(circle at 70% 72%, rgba(220, 64, 190, .19), transparent 30%),
    linear-gradient(145deg, #0e1d37, #091224 70%, #0f1731);
  box-shadow: 0 30px 75px rgba(0,0,0,.35), inset 0 0 80px rgba(33, 110, 170, .14);
}
.hero-art::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: 270px;
  height: 270px;
  left: 39%;
  top: 25%;
  border-radius: 50%;
  background: radial-gradient(circle at 31% 25%, rgba(255,255,255,.9) 0, #9df7ff 2%, #4a9bcf 13%, #223f87 39%, #101a41 62%, #0a1230 76%);
  box-shadow: inset -24px -20px 35px #030818b9, 0 0 25px #68e4ff77, 0 0 80px #4b83d96c, 0 0 140px #a557de30;
  animation: orbDrift 9s ease-in-out infinite;
}
.hero-art::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: 135%;
  height: 2px;
  left: -20%;
  top: 48%;
  transform: rotate(-26deg);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(93,234,255,.06) 18%, #75eeff 47%, rgba(219,137,255,.62) 65%, transparent 85%);
  box-shadow: 0 0 12px #5deaff, 0 0 34px #6c85ff;
  animation: beamSweep 7s ease-in-out infinite;
}
.art-grid {
  z-index: 0;
  opacity: .6;
  background-image: linear-gradient(rgba(101, 208, 244, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(101, 208, 244, .08) 1px, transparent 1px);
  background-size: 38px 38px;
  animation: gridShift 16s linear infinite;
}
.art-orbit { border-color: rgba(93, 234, 255, .36); box-shadow: 0 0 30px rgba(85, 185, 255, .18); animation: orbitSpin 28s linear infinite; }
.art-orbit:before { content:''; position:absolute; width:9px; height:9px; background:#8df2ff; border-radius:50%; top:18%; left:14%; box-shadow:0 0 14px #5deaff, 0 0 26px #5deaff; }
.art-orbit:after { border-color: rgba(255, 88, 211, .25); }
.art-card { z-index: 2; border: 1px solid rgba(142, 215, 250, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 55px rgba(0,0,0,.45), 0 0 26px rgba(73,192,250,.1); }
.art-browser { background: rgba(11, 25, 48, .9); animation: floatBrowser 8s ease-in-out infinite; }
.browser-dots i { background: #6de8ff; box-shadow: 0 0 7px #5deaff; }
.browser-dots i:nth-child(2) { background: #9278ff; box-shadow: 0 0 7px #9278ff; }
.browser-dots i:nth-child(3) { background: #ff62cf; box-shadow: 0 0 7px #ff62cf; }
.browser-topline { background: linear-gradient(90deg, #5deaff, #ad8dff); height: 5px; }
.browser-columns b { background: #183653; border: 1px solid #2d6380; }
.browser-columns b:first-child { background: linear-gradient(145deg, #265478, #1b2c5a); }
.browser-lines i { background: #3b6884; }
.art-document { background: rgba(13, 30, 53, .94); animation: floatDocument 10s ease-in-out infinite; }
.doc-icon { color: #ff62d2; text-shadow: 0 0 15px #ff62d2; }
.doc-line { background: #3f6480; }
.doc-highlight { background: linear-gradient(90deg, rgba(93,234,255,.35), rgba(162,110,255,.22)); border-left: 2px solid #5deaff; }
.art-book { background: linear-gradient(145deg, #352369, #161a3e 65%, #0e2443); color: #f1f6ff; border-color: rgba(206, 123, 255, .55); animation: floatBook 9s ease-in-out infinite; }
.book-rule { background: #ff62d2; box-shadow: 0 0 12px #ff62d2; }
.art-caption { z-index: 3; color: #97bcd4; }
.intro-strip { border-color: var(--line); }
.intro-strip p { font-size: 15px; font-style: normal !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #6ce8ff; }
.intro-strip span { color: #b4cce0; }
.feature-card {
  border: 1px solid rgba(93, 234, 255, .24);
  border-radius: 7px;
  overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.feature-card:before { content:''; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,#5deaff,transparent 70%); }
.feature-card:hover { transform: translateY(-6px); border-color: rgba(93,234,255,.62); box-shadow: 0 24px 50px rgba(0,0,0,.27), 0 0 30px rgba(93,234,255,.08); }
.feature-blue { background: linear-gradient(145deg, #14253c, #0d182d 70%); }
.feature-cream { background: linear-gradient(145deg, #241b3e, #11182f 70%); border-color: rgba(182, 117, 249, .28); }
.feature-cream:before { background: linear-gradient(90deg,#da70ff,transparent 70%); }
.feature-cream:hover { border-color: rgba(209,113,255,.62); }
.card-index, .product-meta>span:first-child { color: #8ca7bd; }
.feature-icon { border: 1px solid rgba(113,225,255,.35); border-radius: 8px; }
.feature-icon-doc { background: linear-gradient(135deg, #1b4861, #1a3155); color: #82edff; }
.feature-icon-book { background: linear-gradient(135deg, #51306d, #26204c); color: #e0a5ff; border-color: rgba(219,151,255,.35); }
.process-section { background: linear-gradient(155deg, #0c1a33, #101429 75%); border-block: 1px solid var(--line); }
.process-inner .eyebrow, .process-list span { color: #5deaff; }
.process-list>div { border-color: var(--line); }
.process-list p { color: #b8ccdd; }
.process-list strong { color: #f0faff; }
.cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(92, 225, 255, .35);
  border-radius: 8px;
  background: radial-gradient(circle at 80% 30%, rgba(86, 87, 194, .3), transparent 30%), linear-gradient(110deg, #14253d, #101629);
}
.cta-band:before { content:''; position:absolute; width:350px; height:350px; border:1px solid rgba(93,234,255,.17); border-radius:50%; right:-30px; top:-160px; box-shadow:0 0 40px rgba(93,234,255,.08); pointer-events:none; }
.cta-band .eyebrow { color: #5deaff; }
.cta-band p { color: #b9ccdb; }
.cta-band .button { z-index:1; }
.page-hero { border-color: var(--line); background: radial-gradient(circle at 76% 42%, rgba(55, 108, 182, .12), transparent 31%); }
.service-list, .service-list article, .principles, .product-list, .product-row, .legal-section { border-color: var(--line); }
.service-num, .service-symbol, .principle-cards span, .plain-note strong { color: #5deaff; }
.note-section {
  background: radial-gradient(circle at 10% 35%, rgba(161, 72, 210, .14), transparent 32%), linear-gradient(135deg, #171d3b, #101a31);
  border: 1px solid rgba(161, 128, 245, .32);
  border-radius: 8px;
}
.note-mark, .note-section .kicker { color: #d183ff; }
.note-section p:not(.kicker) { color: var(--muted); }
.publishing-art {
  border: 1px solid rgba(174, 127, 247, .35);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 50%, rgba(100, 68, 181, .35), transparent 38%), linear-gradient(145deg, #1a1b3e, #0d1b35);
}
.publishing-art:after { border-color: rgba(183, 128, 255, .35); animation: orbitSpin 26s linear infinite; }
.publishing-book { box-shadow: 15px 24px 45px rgba(0,0,0,.4); }
.publishing-book-back { background: linear-gradient(150deg, #a44bbe, #5c3584); }
.publishing-book-front { background: linear-gradient(150deg, #234e70, #211d56 75%); border: 1px solid rgba(153,221,255,.6); color:#f4f8ff; }
.publishing-book-front i { background: #5deaff; box-shadow: 0 0 10px #5deaff; }
.publishing-caption { color: #b8a8d5; }
.principle-cards article { border-color: var(--line); }
.product-visual { border: 1px solid rgba(106, 206, 245, .25); border-radius: 7px; }
.visual-document { background: radial-gradient(circle at 50% 45%, rgba(60, 149, 191, .28), transparent 55%), #111e33; }
.visual-web { background: radial-gradient(circle at 50% 45%, rgba(132, 94, 228, .27), transparent 55%), #141b36; }
.visual-book { background: radial-gradient(circle at 50% 45%, rgba(197, 72, 159, .22), transparent 55%), #1e1935; }
.visual-video { background: radial-gradient(circle at 50% 50%, rgba(108, 78, 245, .35), transparent 50%), #111b35; }
.video-mark { width: 95px; height: 95px; display: grid; place-items: center; padding-left: 6px; color: #aef5ff; font-size: 38px; border: 2px solid #5deaff; border-radius: 50%; box-shadow: 0 0 28px rgba(93,234,255,.35), inset 0 0 24px rgba(93,234,255,.13); }
.mini-paper { background: #192c43; border: 1px solid #4a88a4; box-shadow: 10px 18px 35px #0008; }
.mini-paper span { background: #426d87; }
.mini-paper b { background: linear-gradient(90deg, #29627a, #493f7f); }
.mini-browser { background: #172a49; border: 1px solid #5a78ae; box-shadow: 10px 18px 35px #0008; }
.mini-browser i { background: #63dbe9; }
.mini-browser span { background: #29456d; }
.mini-book { background: linear-gradient(150deg, #7b3a9a, #1f2a5f); border: 1px solid #bd75f4; box-shadow: 10px 18px 35px #0008; }
.pill { color: #8df0ff; border-color: rgba(93, 234, 255, .42); background: rgba(93,234,255,.07); }
.plain-note { border-color: #ff58d3; }
.facts-section { background: linear-gradient(135deg, #101b33, #141629); border-block: 1px solid var(--line); }
.facts-grid>div { border-color: var(--line); }
.facts-grid span, .contact-panel span { color: #8ba7be; }
.facts-grid strong { color: #e8f8ff; }
.contact-panel { background: linear-gradient(145deg, #15253c, #10192d); border: 1px solid var(--line); border-radius: 8px; }
.contact-panel>div { border-color: var(--line); }
.site-footer { background: #050a14; border-top: 1px solid rgba(93,234,255,.2); color: #eaf6ff; }
.logo-footer .logo-mark { background: linear-gradient(145deg,#12304a,#101b34); color: #e8faff; }
.logo-footer .logo-mark span { color: #ff58d3; }
.footer-brand p, .footer-links a { color: #acc1d5; }
.footer-links span { color: #5deaff; }
.footer-links a:hover { color: #ff80dd; }
.footer-bottom { border-color: var(--line); color: #7793a8; }

@keyframes orbDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14px,-22px) scale(1.035); } }
@keyframes beamSweep { 0%,100% { opacity: .35; translate: -10px 10px; } 50% { opacity: .9; translate: 30px -15px; } }
@keyframes gridShift { from { background-position: 0 0; } to { background-position: 38px 38px; } }
@keyframes orbitSpin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes floatBrowser { 0%,100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-12px); } }
@keyframes floatDocument { 0%,100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(7deg) translateY(13px); } }
@keyframes floatBook { 0%,100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-9deg) translateY(-13px); } }
@keyframes statusPulse { 0%,100% { opacity:1; box-shadow:0 0 12px #5deaff; } 50% { opacity:.55; box-shadow:0 0 4px #5deaff; } }

@media (max-width: 850px) {
  .hero-art::before { width: 230px; height: 230px; }
  .page-hero { background: radial-gradient(circle at 80% 65%, rgba(55, 108, 182, .1), transparent 40%); }
}
@media (max-width: 620px) {
  .home-hero { min-height: auto; }
  .hero-art::before { width: 190px; height: 190px; left: 37%; top: 23%; }
  .art-orbit { width: 380px; height: 380px; }
  .intro-strip p { font-size: 12px; }
  .note-section { padding: 40px 27px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art::before, .hero-art::after, .art-grid, .art-orbit, .art-card, .status-dot, .publishing-art:after { animation: none !important; }
  .button, .feature-card, .text-link span, .button span { transition: none !important; }
}