/*
  OBSIDIAN SIGNAL — REKA STUDIO visual system
  Brand tokens and UI overrides. Content and form inputs remain untouched.
*/

:root,
:root[data-theme="dark"] {
  --signal-black: #070503;
  --signal-ink: #0d0907;
  --signal-panel: #15100d;
  --signal-panel-2: #1d1510;
  --signal-orange: #ff5a1f;
  --signal-orange-hot: #ff7a32;
  --signal-orange-soft: rgba(255, 90, 31, .12);
  --signal-cream: #f8eee8;
  --signal-smoke: #a99c95;
  --signal-line: rgba(255, 103, 46, .34);
  --signal-white-line: rgba(248, 238, 232, .12);
  --bg: var(--signal-black);
  --bg-secondary: var(--signal-panel);
  --bg-sideaabar: #0a0705;
  --border: var(--signal-white-line);
  --text: var(--signal-cream);
  --text-primary: var(--signal-cream);
  --text-secondary: #cfc2bb;
  --text-muted: var(--signal-smoke);
  --text-subtle: #6f625c;
  --accent: var(--signal-orange);
  --accent-soft: var(--signal-orange-soft);
  --accent-glow: rgba(255, 90, 31, .24);
  --green: var(--signal-orange-hot);
  --yellow: #ffb068;
  --code-bg: #0b0807;
  --callout-bg: #130d0a;
  --table-stripe: rgba(255, 90, 31, .035);
  --chip-bg: rgba(255, 255, 255, .035);
  --border-soft: var(--signal-white-line);
  --peach-500: var(--signal-orange);
  --peach-400: var(--signal-orange-hot);
  --cream-500: #ead9ce;
  --cream-100: var(--signal-cream);
  --sage-300: var(--signal-orange-hot);
  --sage-500: var(--signal-orange);
  --sage-600: #c13c13;
  --teal-700: #32150c;
  --teal-600: #5c2110;
  --pine-950: var(--signal-black);
  --pine-900: var(--signal-ink);
  --pine-800: var(--signal-panel);
  --earth-600: #ad3511;
  --earth-700: #2a130c;
  --earth-800: #160b07;
  --surface-glass: rgba(10, 7, 5, .9);
  --shadow-soft: 0 24px 72px rgba(0, 0, 0, .48);
  --shadow: var(--shadow-soft);
}

:root[data-theme="light"] {
  --bg: #eee5de;
  --bg-secondary: #fff8f2;
  --bg-sideaabar: #e7dcd4;
  --border: rgba(59, 28, 17, .16);
  --text: #24140e;
  --text-primary: #24140e;
  --text-secondary: #4e3a32;
  --text-muted: #715d54;
  --text-subtle: #9d8b82;
  --accent: #df4312;
  --accent-soft: rgba(223, 67, 18, .1);
  --green: #df4312;
  --yellow: #a44918;
  --code-bg: #e1d5cd;
  --callout-bg: #f5e9e1;
  --table-stripe: rgba(223, 67, 18, .04);
  --chip-bg: rgba(59, 28, 17, .05);
  --border-soft: rgba(59, 28, 17, .16);
  --surface-glass: rgba(255, 248, 242, .9);
  --signal-line: rgba(223, 67, 18, .32);
  --signal-white-line: rgba(59, 28, 17, .15);
  --signal-panel: #fff8f2;
  --signal-panel-2: #eadbd2;
  --signal-smoke: #715d54;
  --signal-cream: #24140e;
  --pine-950: #e7dcd4;
  --pine-900: #eee5de;
  --pine-800: #fff8f2;
  --earth-700: #ecd8cb;
  --teal-700: #f0d5c6;
  --shadow-soft: 0 24px 60px rgba(60, 28, 17, .13);
}

html,
body {
  background:
    radial-gradient(circle at 76% 4%, rgba(255, 90, 31, .11), transparent 30%),
    radial-gradient(circle at 22% 96%, rgba(255, 90, 31, .06), transparent 28%),
    var(--bg);
}

body::after {
  opacity: .18;
  background-image:
    linear-gradient(rgba(255, 90, 31, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 31, .03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.topbar {
  background: color-mix(in srgb, var(--bg-sideaabar) 88%, transparent);
  border-bottom-color: var(--signal-line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}

.topbar::after {
  content: '';
  position: absolute;
  left: var(--sidebar-width);
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 52%);
}

.topbar-brand {
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.topbar-brand .brand-dot {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  clip-path: polygon(0 24%, 24% 0, 100% 0, 100% 76%, 76% 100%, 0 100%);
  transform: none;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(255, 90, 31, .46);
}

.topbar-brand .brand-dot::after {
  width: 7px;
  height: 7px;
  inset: 5px;
  transform: none;
  background: var(--signal-black);
}

.reading-context { border-left-color: var(--signal-line); }
.reading-kicker { color: var(--accent); }
.version-badge { border-color: var(--signal-line); color: var(--text-muted); background: var(--accent-soft); }
.theme-toggle, .hamburger, .drawer-close { border-radius: 7px; }

.sideaabar {
  background:
    linear-gradient(180deg, rgba(255, 90, 31, .055), transparent 20%),
    var(--bg-sideaabar);
  border-right-color: var(--signal-line);
}

.sidebar-search-wrap { background: linear-gradient(var(--bg-sideaabar) 72%, transparent); }
.sidebar-search {
  border-radius: 7px;
  border-color: var(--signal-line);
  background: color-mix(in srgb, var(--signal-panel) 86%, transparent);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.sidebar-search-wrap::before { color: var(--accent); }
.sidebar-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sideaabar-section-label { color: var(--accent); }
.nav-item { border-radius: 5px; }
.nav-item:hover { color: var(--text); background: var(--accent-soft); }
.nav-item.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(255, 90, 31, .17), rgba(255, 90, 31, .025));
  border-color: var(--signal-line);
}
.nav-item.active::before { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.nav-item .nav-num, .nav-item.active .nav-num { color: var(--accent) !important; }

h1, h2, h3, .hero-title, .stat-number, .page-nav-btn {
  text-transform: uppercase;
  letter-spacing: -.025em;
}
h1 { font-size: clamp(2.65rem, 5vw, 4.9rem); line-height: .9; }
h2 { color: var(--text); }
h2::first-letter { color: var(--accent); }

.hero-intro,
.callout,
.compare-card,
.usecase-card,
.faq-item,
.flow,
.table-wrap,
.code-block,
.template-section-body,
.stat-card {
  border-radius: 4px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--signal-panel-2) 80%, transparent), color-mix(in srgb, var(--signal-panel) 84%, transparent));
  border-color: var(--signal-line);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
}

.hero-intro,
.compare-card,
.usecase-card,
.flow { padding: 28px; }
.callout { border-left: 3px solid var(--accent); }
.callout.success, .callout.warning { border-left-color: var(--accent); }
.callout strong, .callout.success strong, .callout.warning strong { color: var(--accent); }
.compare-card:nth-child(2n), .usecase-card:nth-child(n) { background: linear-gradient(145deg, var(--signal-panel-2), var(--signal-panel)); }
.usecase-card:nth-child(4n) * { color: inherit; }
.usecase-card:hover, .compare-card:hover, .faq-item:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 18px 48px rgba(255, 90, 31, .1);
}
.chip { border-radius: 3px; }
.chip.accent { color: var(--accent); border-color: var(--signal-line); }
.step-num {
  border-radius: 3px;
  clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
.page-nav-btn, .cta { border-radius: 4px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }

/* Cover: three stacked signal cards inspired by collectible display columns. */
#page-cover.hero {
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
  padding: clamp(58px, 7vw, 92px) clamp(28px, 5vw, 76px);
  background:
    linear-gradient(rgba(255, 90, 31, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 31, .025) 1px, transparent 1px);
  background-size: 56px 56px;
}

#page-cover.hero::before {
  content: 'CREATIVE OPERATING SYSTEM';
  position: absolute;
  right: 34px;
  bottom: 26px;
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: .2em;
  color: var(--text-subtle);
}

.hero-content { max-width: 690px; }
.hero-eyebrow { color: var(--accent); }
.hero-eyebrow::before { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.hero-title {
  max-width: 720px;
  font-size: clamp(4.2rem, 7.6vw, 8rem);
  line-height: .82;
  background: linear-gradient(155deg, var(--text) 10%, var(--text) 58%, var(--accent) 59%, var(--signal-orange-hot));
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-copy { color: var(--text-secondary); }
.hero-note { color: var(--accent); }
.cta-primary { border-color: var(--accent); background: var(--accent); color: #130704; box-shadow: 0 12px 32px rgba(255, 90, 31, .24); }
.cta-primary:hover { background: var(--signal-orange-hot); }
.cta-secondary { border-color: var(--signal-line); background: rgba(255, 90, 31, .04); color: var(--text); }
.cta-secondary:hover { border-color: var(--accent); background: var(--accent-soft); }
.stats { gap: 10px; }
.stat-card { min-height: 104px; }
.stat-number { color: var(--accent); }

.hero-visual {
  position: absolute;
  inset: 0 0 0 47%;
  z-index: 1;
  overflow: visible;
  perspective: 1100px;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 12%, transparent 46%);
}
.hero-visual::after {
  content: '';
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  right: 17%;
  top: 21%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 90, 31, .18), transparent 66%);
  filter: blur(12px);
}
.hero-deck {
  position: absolute;
  z-index: 3;
  width: clamp(152px, 16vw, 238px);
  aspect-ratio: .63;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--text);
  border: 1px solid var(--signal-line);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 90, 31, .15), transparent 34%),
    linear-gradient(160deg, #1b130f, #090605 72%);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(50% - 18px), calc(100% - 6px) 50%, 100% calc(50% + 18px), 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 calc(50% + 18px), 6px 50%, 0 calc(50% - 18px), 0 12px);
  box-shadow: 0 30px 64px rgba(0, 0, 0, .56), inset 0 0 0 6px rgba(255, 255, 255, .018);
}
.hero-deck::before,
.hero-deck::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px var(--accent);
}
.hero-deck::before { top: -1px; }
.hero-deck::after { bottom: -1px; }
.deck-left { left: 14%; top: 33%; transform: rotateY(12deg) rotateZ(-2deg) scale(.86); }
.deck-main { left: 42%; top: 20%; transform: translateX(-20%); z-index: 4; }
.deck-right { right: 4%; top: 34%; transform: rotateY(-12deg) rotateZ(2deg) scale(.86); }
.deck-index, .deck-status { font: 700 8px/1.3 'Space Mono', monospace; letter-spacing: .12em; color: var(--accent); }
.deck-glyph {
  align-self: center;
  display: grid;
  place-items: center;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid var(--signal-line);
  border-radius: 50%;
  font: 900 clamp(2.4rem, 5vw, 5.4rem)/1 'League Spartan', sans-serif;
  letter-spacing: -.08em;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255, 90, 31, .28);
  background: radial-gradient(circle, rgba(255, 90, 31, .08), transparent 64%);
}
.deck-copy { font: 800 clamp(1rem, 1.65vw, 1.7rem)/.9 'League Spartan', sans-serif; letter-spacing: -.02em; }
.deck-status { position: absolute; right: 15px; bottom: 18px; writing-mode: vertical-rl; }
.signal-orbit {
  position: absolute;
  z-index: 6;
  left: 29%;
  top: 43%;
  width: 58%;
  height: 20%;
  border: 1px solid rgba(255, 90, 31, .62);
  border-radius: 50%;
  transform: rotate(-8deg);
  box-shadow: 0 0 18px rgba(255, 90, 31, .1);
}
.orbit-b { left: 38%; top: 37%; width: 38%; height: 32%; transform: rotate(64deg); opacity: .55; }

/* Page headers become compact framed modules; all original page content stays intact. */
.content-page .page-inner { max-width: 1040px; padding-top: clamp(190px, 23vh, 246px); }
.content-page::before { color: rgba(255, 90, 31, .1); }
.content-page .page-inner::before {
  height: 132px;
  border-radius: 4px;
  border-color: var(--signal-line);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(255, 90, 31, .08) 48% 52%, transparent 52%),
    linear-gradient(135deg, var(--signal-panel-2), var(--signal-panel));
}
.content-page .page-inner::after {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 33%, var(--accent) 34% 36%, transparent 37% 49%, rgba(255, 90, 31, .46) 50% 51%, transparent 52%);
  box-shadow: none;
}
.content-page .page-label { border-radius: 3px; color: var(--accent) !important; }
.content-page h1::after { background: var(--accent); box-shadow: 0 0 12px rgba(255, 90, 31, .4); }
.page-variant-01 .page-inner::before,
.page-variant-02 .page-inner::before,
.page-variant-03 .page-inner::before,
.page-variant-04 .page-inner::before,
.page-variant-05 .page-inner::before,
.page-variant-06 .page-inner::before,
.page-variant-07 .page-inner::before,
.page-variant-08 .page-inner::before,
.page-variant-09 .page-inner::before,
.page-variant-10 .page-inner::before {
  left: clamp(20px, 4vw, 52px);
  right: clamp(20px, 4vw, 52px);
  top: 44px;
  height: 132px;
  border: 1px solid var(--signal-line);
  border-radius: 4px;
  outline: none;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  background:
    linear-gradient(calc(var(--shape-rotate) + 45deg), transparent 0 46%, rgba(255, 90, 31, .09) 46% 54%, transparent 54%),
    linear-gradient(135deg, var(--signal-panel-2), var(--signal-panel));
}
.page-variant-01 .page-inner::after,
.page-variant-02 .page-inner::after,
.page-variant-03 .page-inner::after,
.page-variant-04 .page-inner::after,
.page-variant-05 .page-inner::after,
.page-variant-06 .page-inner::after,
.page-variant-07 .page-inner::after,
.page-variant-08 .page-inner::after,
.page-variant-09 .page-inner::after,
.page-variant-10 .page-inner::after {
  left: var(--shape-x);
  top: var(--shape-y);
  width: 116px;
  height: 116px;
  transform: translateX(-50%) rotate(var(--shape-rotate));
  background: radial-gradient(circle, transparent 33%, var(--accent) 34% 36%, transparent 37% 49%, rgba(255, 90, 31, .46) 50% 51%, transparent 52%);
}
.page-variant-03 h1, .page-variant-05 h1, .page-variant-08 h1 { padding: 0; margin-left: 0; max-width: 820px; background: none; border: 0; }

.drawer, .drawer-header { background: var(--bg-sideaabar); }

@media (prefers-reduced-motion: no-preference) {
  .hero-content { animation: signal-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .deck-main { animation: deck-main-float 5.4s ease-in-out infinite; }
  .deck-left { animation: deck-left-float 6.2s ease-in-out infinite -1.7s; }
  .deck-right { animation: deck-right-float 5.8s ease-in-out infinite -3s; }
  .orbit-a { animation: orbit-pulse 4s ease-in-out infinite; }
  .orbit-b { animation: orbit-pulse-b 5.4s ease-in-out infinite reverse; }
  .content-page.active .page-inner { animation: signal-page .42s ease-out both; }
  .usecase-card, .compare-card, .faq-item { animation: signal-card-in .48s ease-out both; }
  .usecase-card:nth-child(2n), .compare-card:nth-child(2n), .faq-item:nth-child(2n) { animation-delay: .07s; }
  @keyframes signal-rise { from { opacity: 0; transform: translateY(18px); } }
  @keyframes signal-page { from { opacity: 0; transform: translateY(12px); } }
  @keyframes signal-card-in { from { opacity: 0; transform: translateY(10px); } }
  @keyframes deck-main-float { 50% { transform: translateX(-20%) translateY(-12px); } }
  @keyframes deck-left-float { 50% { transform: rotateY(12deg) rotateZ(-2deg) scale(.86) translateY(-9px); } }
  @keyframes deck-right-float { 50% { transform: rotateY(-12deg) rotateZ(2deg) scale(.86) translateY(-10px); } }
  @keyframes orbit-pulse { 50% { transform: rotate(-4deg) scale(1.04); opacity: .58; } }
  @keyframes orbit-pulse-b { 50% { transform: rotate(70deg) scale(.96); opacity: .28; } }
}

@media (max-width: 1120px) {
  #page-cover.hero { grid-template-columns: 1fr; padding-right: 33%; }
  .hero-visual { left: 44%; opacity: .78; }
}

@media (max-width: 768px) {
  .topbar::after { left: 0; }
  #page-cover.hero.active { padding-top: 46px; }
  .hero-title { font-size: clamp(3.8rem, 18vw, 6.2rem); }
  .hero-visual { position: relative; inset: auto; width: calc(100% + 40px); height: 440px; margin: 50px -20px 0; opacity: 1; overflow: hidden; }
  .hero-visual::before { background: linear-gradient(180deg, var(--bg), transparent 30%, transparent 82%, var(--bg)); }
  .hero-deck { width: 42%; min-width: 132px; }
  .deck-left { left: 3%; top: 25%; }
  .deck-main { left: 41%; top: 12%; }
  .deck-right { right: 0; top: 28%; }
  .signal-orbit { left: 18%; width: 70%; }
  .content-page .page-inner { padding-top: 154px; }
  .content-page .page-inner::before,
  .page-variant-01 .page-inner::before,
  .page-variant-02 .page-inner::before,
  .page-variant-03 .page-inner::before,
  .page-variant-04 .page-inner::before,
  .page-variant-05 .page-inner::before,
  .page-variant-06 .page-inner::before,
  .page-variant-07 .page-inner::before,
  .page-variant-08 .page-inner::before,
  .page-variant-09 .page-inner::before,
  .page-variant-10 .page-inner::before { top: 24px; height: 104px; left: 14px; right: 14px; }
  .content-page .page-inner::after { width: 84px; height: 84px; }
}

@media (max-width: 440px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat-card { padding: 14px 10px; min-height: 108px; flex-direction: column; align-items: flex-start; }
  .stat-number { font-size: 1.5rem; }
  .deck-index { font-size: 6px; }
  .deck-copy { font-size: .9rem; }
}