/* Restrained technical layer: cool surfaces, precise lines, a luminous data diagram. */
:root {
  --ink: #172632;
  --muted: #5d6e7a;
  --paper: #f6f9fc;
  --line: #dce5ed;
  --cyan: #7fe2ee;
  --night: #101e2b;
}
body {
  background-image: radial-gradient(ellipse at 85% 6%, #dceef550, transparent 30%);
}
.announcement { background: #101e2b; border-bottom: 1px solid #84e0ee22; }
.announcement-detail { color: #b0beca; }
.brand-dot { color: #447d87; }
.header nav a:hover { color: #226978; }
.header { border-bottom: 1px solid #dce5ed70; }
.button {
  border-radius: 6px;
  transition: background .2s, transform .2s, box-shadow .2s, border-color .2s;
}
.button-dark {
  background: linear-gradient(125deg, #243747, #142431);
  border-color: #334b5a;
  box-shadow: inset 0 1px 0 #ffffff12;
}
.button-dark:hover {
  background: #233c4d;
  border-color: #507d8c;
  box-shadow: 0 5px 22px #397c9120, inset 0 1px 0 #a2edf72b;
}
.button:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline-color: #318a9b;
}
.eyebrow, .art-label, .art-bottom, .workspace-label, .demo-pill, .outline-badge,
.scenario-top > span:last-child, .steps li > span, .code-file {
  font-family: Consolas, 'Courier New', monospace;
}
.section-heading .eyebrow, .connect-copy > .eyebrow, .faq-section .eyebrow { color: #587382; }
.mini-square { background: #4896a4; box-shadow: 0 0 0 3px #75c7d018; }
.highlight:before {
  height: 27%; bottom: 5px; transform: none;
  background: linear-gradient(90deg, #c0f579, #b6eed8);
  border-left: 2px solid #90bc54;
}
.hero-note { color: #6b7b88; }

/* The existing storage schema becomes the main hi-tech visual. */
.hero-art {
  isolation: isolate;
  border: 1px solid #345060;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 52% 49%, #367c8345 0, transparent 52%),
    radial-gradient(ellipse at 93% 0%, #34528045, transparent 60%),
    linear-gradient(145deg, #152939, #0c1825 85%);
  box-shadow: 0 22px 60px #1e415512, inset 0 1px 0 #c0eeff16;
}
.hero-art:before, .hero-art:after {
  content: ''; position: absolute; z-index: 9; pointer-events: none;
  width: 21px; height: 21px; border-color: #8fdae386; border-style: solid;
}
.hero-art:before { left: 12px; top: 12px; border-width: 1px 0 0 1px; }
.hero-art:after { right: 12px; bottom: 12px; border-width: 0 1px 1px 0; }
.art-grid {
  background-image: linear-gradient(#94dff011 1px, transparent 1px), linear-gradient(90deg, #94dff011 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.art-label { color: #a4c5d3; letter-spacing: 1.5px; }
.art-bottom { color: #96b4c4; }
.art-cross { color: #b9f48a; }
.orbit { border-color: #82d3e736; }
.orbit-one { box-shadow: 0 -1px 0 #8ce4ed30; }
.orbit-two { border-style: dashed; border-color: #95d9e32e; }
.storage-layer {
  border-radius: 11px;
  border-color: #67a9b373;
  background: linear-gradient(115deg, #294655e8, #152c3be8);
  box-shadow: inset 0 -14px 0 #101f2ee0, inset 0 -15px 0 #76d1dc65, 0 15px 25px #030f1c45;
}
.layer-top {
  background: linear-gradient(120deg, #e0ffc2, #a6ecc8 65%, #8ddae0);
  border-color: #c3f4db;
  box-shadow: inset 0 -17px 0 #72b8ae, inset 0 -18px 0 #dbffee, 0 0 45px #8bdfe71b;
}
.layer-face { border-color: #3579784f; border-radius: 6px; }
.cube-symbol { color: #244846; }
.layer-caption { color: #396b65; font-family: Consolas, monospace; }
.storage-layer i { border-radius: 1px; background: #bff793; box-shadow: 0 0 7px #acff8240; }
.storage-layer i + i { background: #83cdd7; }
.stack-shadow { background: #75d5e52b; filter: blur(25px); }
.data-tag {
  color: #e8f3f6; background: #193242e8;
  border-color: #719eaf65; border-radius: 7px;
  box-shadow: 0 7px 24px #020c1635, inset 0 1px 0 #b8e7fa0c;
  backdrop-filter: blur(12px);
}
.data-tag div > span { color: #a1bdca; }
.tag-icon { color: #c5f88d; background: #82d4db12; border: 1px solid #7dc1d226; border-radius: 4px; }
.compatibility > span { color: #637582; }
.compatibility p { color: #697d89; }

.feature {
  position: relative; background: linear-gradient(145deg, #ffffffb8, #edf3f8);
  border: 1px solid #dce6ee; border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.feature:before {
  content: ''; position: absolute; top: -1px; left: 28px; width: 36px; height: 2px;
  background: #66a8b9;
}
.feature:hover { border-color: #a1c2cd; box-shadow: 0 8px 25px #2d668609; }
.feature-icon { border: 1px solid #c5dce5; border-radius: 7px; background: #e6eff4; color: #3b7485; }
.feature-foot { color: #627b89; border-color: #d8e4eb; }
.solutions {
  position: relative;
  background:
    linear-gradient(90deg, #a0d1e106 1px, transparent 1px) center / 80px 100%,
    radial-gradient(ellipse at 100% 0, #244b6260, transparent 65%), #11212f;
  border-top: 1px solid #3d596a; border-bottom: 1px solid #3d596a;
}
.solutions .eyebrow { color: #b9ef91; }
.solutions .section-heading > p, .scenario p { color: #afc0cc; }
.scenario { border-color: #466272; }
.scenario-top { color: #88a6ba; }
.scenario-tags span { border-color: #415e6c; color: #bbced9; border-radius: 4px; }

.console { border-color: #c8dbe6; border-radius: 11px; box-shadow: 0 18px 50px #284d6210; }
.console-sidebar {
  background:
    linear-gradient(#8aced608 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(155deg, #1c3445, #102231);
  color: #e5eff5; border-right-color: #305165;
}
.console-logo > span:last-child { color: #bbf483; }
.workspace-label { color: #92aebf; }
.sidebar-current { background: #365260; border: 1px solid #7ecbd840; color: #ecf5f8; }
.sidebar-current > span { color: #bdf58c; }
.sidebar-note { color: #9bb2c0; }
.demo-pill { border-color: #5f879b; color: #badbe7; }
.console-topline { color: #54798b; }
.console-main { border-top: 2px solid #76b9c8; }
.breadcrumb, .readonly-label, .console-title p { color: #6d8492; }
.bucket-count { font-family: Consolas, monospace; color: #9db7c6; }
.bucket-tabs button { border-color: #d4e1e9; background: #f7fafc; border-radius: 6px; }
.bucket-tabs button[aria-selected=true] {
  background: linear-gradient(130deg, #eff9e7, #e7f3f6);
  border-color: #88b4bc; box-shadow: inset 0 2px 0 #8bbfa6;
}
.bucket-tabs button:hover { background: #ebf5f7; }
.bucket-tabs button > span { color: #4b8392; }
.bucket-tabs small, .file-path span:last-child, .file-row > span:not(:first-child) { color: #627b8a; }
.file-row { border-color: #e8eff4; }
.file-head { color: #647e8e; }
.file-mark { color: #6495a7; }
.demo-caption { color: #6b8190; }

.pricing {
  background:
    linear-gradient(110deg, #edf4f7, #e6f0f5);
  border: 1px solid #d4e3eb; border-radius: 13px;
}
.pricing-copy .eyebrow { color: #50788b; }
.pricing-copy > p:not(.eyebrow) { color: #5c7280; }
.pricing-card { border-color: #cbdfe9; border-radius: 8px; box-shadow: 0 10px 30px #466f8010; }
.outline-badge { border-color: #b5cdd9; color: #567b8c; }
.price-line { border-color: #e0eaf0; }
.price-line small, .price-line > span, .price-note { color: #637e8b; }
.price-note > span { border-color: #91afbd; }
.steps li > span { color: #3e889d; }
.steps p { color: #6a7e8b; }
.code-card {
  border: 1px solid #3c5a6e; border-radius: 9px;
  background: linear-gradient(135deg, #172d3d, #102131); color: #d6e9ee;
  box-shadow: 0 15px 35px #254f6710;
}
.code-top { background: #0f202d; border-color: #335568; }
.code-tabs button { color: #9bb6c7; }
.code-tabs button[aria-selected=true] { color: #bdf58b; border-color: #bdf58b; }
#copy-code { border-color: #446b80; color: #b8d2de; border-radius: 4px; }
#copy-code:hover { background: #264659; }
.code-file { color: #8daec1; }
.code-note { border-color: #34566a; background: #1c3546; color: #b9d8e2; }
.faq-list details, .faq-list details:first-child { border-color: #d4e2eb; }
.faq-list summary > span { color: #4c8b9d; }
.faq-list details[open] summary { color: #285d74; }
.closing {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(115deg, #d1f6a8, #b9eee0 70%, #b6e2ec);
  border: 1px solid #abd1c7; border-radius: 12px;
}
.closing:before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#23576809 1px, transparent 1px), linear-gradient(90deg, #23576809 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, transparent 25%, #000);
}
.closing .eyebrow { color: #416d68; }
.footer p, .footer > span { color: #687d8c; }

/* A single settling motion, with a still version for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .hero-art .art-grid { animation: grid-arrive 1.6s ease-out both; }
  .hero-art .orbit { animation: orbit-arrive 2s ease-out both; }
  @keyframes grid-arrive { from { opacity: 0; } to { opacity: 1; } }
  @keyframes orbit-arrive { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
}
@media (max-width: 850px) {
  .header nav { background: #f6f9fcf7; border-color: #cfdee8; backdrop-filter: blur(16px); }
}
@media (max-width: 620px) {
  .hero-art { border-radius: 12px; }
  .data-tag { backdrop-filter: none; background: #193242; }
  .art-label { letter-spacing: 1.2px; }
  .console { border-radius: 9px; }
}