/* K2 Baltic Hub Theme */

:root {
  --background: oklch(0.98 0.01 240);
  --foreground: oklch(0.2 0.02 240);
  --primary: oklch(0.35 0.08 240);
  --accent: oklch(0.75 0.15 75);
}

body {
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-family: 'Inter', sans-serif !important;
}

.font-serif {
  font-family: 'Playfair Display', serif;
}

.hero-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
}

.transition-all-300 {
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: oklch(0.28 0.07 240);
}

/* Workspace OS */
html { scroll-padding-top: 96px; }
.font-serif { font-family: 'Inter', sans-serif; letter-spacing: -.035em; }
.tech-hero { position: relative; overflow: hidden; background: #081820; color: #ecf5f6; padding: 76px max(24px, calc((100vw - 1200px)/2)) 0; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#8dd8d907 1px, transparent 1px), linear-gradient(90deg,#8dd8d907 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to right,transparent,#000); }
.tech-layout { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.eyebrow, .panel-heading, .console-head, .panel-foot, .platform-strip, .network-metrics span { font: 10px monospace; letter-spacing: .1em; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #72ddc9; }
.signal-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #64dac2; box-shadow: 0 0 14px #64dac260; margin-right: 4px; }
.version { color: #81949f; border: 1px solid #30434a; padding: 5px 7px; margin-left: 8px; }
.tech-copy h1 { font-size: clamp(36px,4.25vw,59px); line-height: 1.12; letter-spacing: -.055em; font-weight: 500; margin: 26px 0; }
.tech-copy h1 em { font-style: normal; color: #6fe0ca; }
.tech-copy > p { color: #9aaeb8; font-size: 15px; line-height: 1.85; max-width: 460px; }
.tech-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 30px; font-size: 12px; }
.tech-button { background: #74e6ce; color: #0a2629; padding: 16px 20px; border-radius: 5px; font-weight: 600; transition: box-shadow .2s, transform .2s; }
.tech-button:hover { transform: translateY(-3px); box-shadow: 0 8px 30px #74e6ce25; }
.tech-link { color: #c1d1d7; }
.hero-facts { display: flex; gap: 35px; margin: 44px 0; }
.hero-facts strong { display: block; font-size: 25px; font-weight: 500; letter-spacing: -.05em; }
.hero-facts span { color: #7c959f; font-size: 10px; }
.network-panel { background: #0c1e27e8; border: 1px solid #28404b; border-radius: 10px; box-shadow: 0 30px 80px #0003; overflow: hidden; min-width: 0; }
.panel-heading, .console-head, .panel-foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; color: #7996a4; }
.panel-heading { border-bottom: 1px solid #213640; font-size: 9px; }
.panel-heading > span:first-child { color: #d0e7ec; }
.network-map svg { width: 100%; height: auto; }
.network-paths { stroke-dasharray: 5 7; animation: packets 12s linear infinite; }
@keyframes packets { to { stroke-dashoffset: -120; } }
.network-metrics { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #213640; border-bottom: 1px solid #213640; padding: 18px; gap: 10px; }
.network-metrics span { color: #6e8997; font-size: 8px; display: block; margin-bottom: 8px; }
.network-metrics strong { font: 13px monospace; color: #8ae6cf; }
.console-head { font-size: 9px; }
.console-head button { color: #b4cbcF; cursor: pointer; }
.request-stream { height: 114px; padding: 0 18px; font: 9px/2.2 monospace; overflow: hidden; }
.request-stream li { display: grid; grid-template-columns: 48px 28px 1fr auto; gap: 7px; color: #7f9aa7; animation: request-in .3s ease; }
.request-stream li span:nth-child(2), .request-stream li span:last-child { color: #75d6bf; }
.request-stream li span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-stream .request-error span:last-child { color: #f7ad8f; }
@keyframes request-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.panel-foot { font-size: 8px; border-top: 1px solid #213640; }
.platform-strip { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 25px 0; margin-top: 42px; border-top: 1px solid #23353f; color: #94a9b1; }
.platform-strip span:first-child { color: #5e7c89; }
.session-save { border: 1px solid #c8ddd9; background: #f0f9f6; border-radius: 12px; padding: 15px; }
.session-save button { color: #176653; font-size: 12px; font-weight: 600; }
.session-save p { margin-top: 8px; color: #607e75; font-size: 10px; }
button:disabled { opacity: .5; cursor: wait; }
:focus-visible { outline: 2px solid #37af97; outline-offset: 4px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.reveal.revealed { opacity: 1; transform: none; }
@media(max-width: 900px) { .tech-layout { grid-template-columns: 1fr; gap: 24px; } .tech-hero { padding-top: 45px; } .tech-copy h1 { font-size: clamp(36px,7vw,58px); } .network-panel { max-width: 620px; width: 100%; } .hero-facts { margin-bottom: 12px; } }
@media(max-width: 480px) { .tech-hero { padding-left: 18px; padding-right: 18px; } .hero-facts { gap: 24px; } .request-stream { font-size: 8px; padding: 0 10px; } .request-stream li { gap: 4px; grid-template-columns: 42px 25px 1fr auto; } .platform-strip { font-size: 8px; } .version { margin-left: 0; } }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }