/* ===== ObLog Brand — Minimal ===== */

/* Gold accent color */
:root {
   --brand-gold: #d4a853;
}

body[data-theme="night"] {
   --brand-gold: #c49050;

   /* Night vision: override all brand variables to red palette */
   --bg: #1a0505;
   --bg-2: #2d0a0a;
   --text: #cc4444;
   --muted: #993333;
   --brand-1: #aa2222;
   --brand-2: #881818;
   --btn-bg: #661515;
   --btn-text: #fca5a5;
   --btn-ghost: rgba(252,165,165,0.08);
   --shadow: 0 10px 30px rgba(50,0,0,0.4);
}

/* Star accent */
.brand-star {
   color: var(--brand-gold);
   font-size: 0.55em;
   position: relative;
   top: -0.18em;
   margin: 0 -0.05em;
}

/* ===== Preserved: layout & button classes from original brand.css ===== */

:root {
   --bg: #0e1224;
   --bg-2: #151a33;
   --text: #e9eefc;
   --muted: #a8b3d1;
   --brand-1: #6AA5FF;
   --brand-2: #3B5BDB;
   --btn-bg: #2b3180;
   --btn-text: #ffffff;
   --btn-ghost: rgba(233,238,252,.12);
   --shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light) {
   :root {
      --bg: #ffffff;
      --bg-2: #f3f5ff;
      --text: #101322;
      --muted: #475170;
      --btn-ghost: rgba(16,19,34,.08);
   }
}

.oblog-hero {
   position: relative;
   isolation: isolate;
   padding: clamp(2.5rem, 4vw + 2rem, 6rem) 1.25rem;
   text-align: center;
   background: radial-gradient(1200px 600px at 50% -10%, var(--bg-2), var(--bg));
   color: var(--text);
   border-radius: 1.25rem;
   box-shadow: var(--shadow);
   overflow: hidden;
}

.oblog-tagline {
   margin: .9rem auto 0;
   max-width: 42ch;
   font-size: clamp(1rem, .7vw + .8rem, 1.15rem);
   color: var(--muted);
}

.oblog-copy {
   margin: .9rem auto 1.25rem;
   max-width: 80ch;
   line-height: 1.7;
   color: var(--text);
   opacity: .9;
}

.oblog-actions {
   display: flex;
   justify-content: center;
   gap: .75rem;
   margin-top: 1rem;
}

.btn {
   display: inline-block;
   padding: .75rem 1rem;
   border-radius: 12px;
   font-weight: 700;
   text-decoration: none;
   border: 1px solid transparent;
   transition: transform .08s ease, background-color .2s ease, border-color .2s ease;
}

   .btn:hover {
      transform: translateY(-1px);
   }

   .btn:active {
      transform: translateY(0);
   }

.btn-primary {
   background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
   color: var(--btn-text);
}

.btn-ghost {
   background: var(--btn-ghost);
   color: var(--text);
   border-color: rgba(233,238,252,.16);
}

/* Decorative starfield */
.oblog-sky i {
   position: absolute;
   width: 2px;
   height: 2px;
   background: #fff;
   opacity: .75;
   border-radius: 50%;
   animation: twinkle 3.2s infinite ease-in-out;
}

body[data-theme="night"] .oblog-sky i {
   background: #662222;
   opacity: 0.4;
}

body[data-theme="night"] .btn-ghost {
   border-color: rgba(252,165,165,0.16);
}

@keyframes twinkle {
   0%,100% { opacity: .25 }
   50% { opacity: .9 }
}

/* scatter stars */
.oblog-hero .oblog-sky i:nth-child(1) { top: 10%; left: 12% }
.oblog-hero .oblog-sky i:nth-child(2) { top: 18%; left: 72% }
.oblog-hero .oblog-sky i:nth-child(3) { top: 30%; left: 25% }
.oblog-hero .oblog-sky i:nth-child(4) { top: 42%; left: 83% }
.oblog-hero .oblog-sky i:nth-child(5) { top: 55%; left: 18% }
.oblog-hero .oblog-sky i:nth-child(6) { top: 62%; left: 60% }
.oblog-hero .oblog-sky i:nth-child(7) { top: 75%; left: 35% }
.oblog-hero .oblog-sky i:nth-child(8) { top: 80%; left: 78% }
