:root {
      color-scheme: dark;
      --bg: #0f1114;
      --panel: rgba(18, 18, 18, .58);
      --panel-solid: rgba(23, 20, 18, .88);
      --line: rgba(210, 140, 78, .22);
      --line-strong: rgba(210, 140, 78, .42);
      --copper: #cd7b3b;
      --copper-soft: #e5aa79;
      --text: #f6efe8;
      --muted: #c9b7a8;
      --accent: #ffd7bb;
      --good: #9fd39f;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      
      background:
        radial-gradient(circle at 20% 20%, rgba(232, 131, 57, 0.20), transparent 28rem),
        radial-gradient(circle at 80% 80%, rgba(255, 180, 100, 0.10), transparent 26rem),
        linear-gradient(135deg, #0f0c09 0%, #18120d 45%, #120f0d 100%);
    
    }

    .shell {
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .noise {
      position:absolute; inset:0; opacity:.05; pointer-events:none;
      background-image:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,.8) 0 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,.6) 0 1px, transparent 1px);
      background-size: 3rem 3rem, 4rem 4rem;
      mix-blend-mode: screen;
    }

    .container {
      position: relative;
      z-index: 2;
      min-height: 100vh;
      width: min(1180px, calc(100% - 2rem));
      margin: 0 auto;
      display:grid;
      grid-template-columns: 1.2fr .9fr;
      gap: clamp(1.25rem, 2vw, 2.25rem);
      align-items:center;
      padding: clamp(1.5rem, 3vw, 3rem) 0;
    }

    .hero {
      position:relative;
      padding: clamp(1.5rem, 3vw, 3rem);
    }

    .kicker {
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.45rem .8rem;
      border-radius:999px;
      background: rgba(255,255,255,.045);
      border:1px solid var(--line);
      color: var(--copper-soft);
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: .78rem;
      font-weight: 700;
    }

    .kicker .dot {
      width:.45rem; height:.45rem; border-radius:50%;
      background: linear-gradient(180deg, #ffcf9b, #c86f30);
      box-shadow: 0 0 10px rgba(200,111,48,.45);
    }

    h1 {
      margin: 1.2rem 0 .65rem;
      font-size: clamp(3.25rem, 8vw, 6.4rem);
      line-height: .93;
      letter-spacing: -.08em;
      max-width: 12ch;
    }


    .copperforge-logo {
      margin: 1.25rem 0 1rem;
      width: min(100%, 680px);
      filter: drop-shadow(0 18px 44px rgba(0,0,0,.35));
    }

    .copperforge-logo svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    .logo-word {
      font-size: 88px;
      font-weight: 900;
      letter-spacing: -0.075em;
      fill: url(#wordCopper);
    }

    .logo-subline {
      font-size: 15px;
      font-weight: 750;
      letter-spacing: .36em;
      text-transform: uppercase;
      fill: rgba(246, 239, 232, .72);
    }

    .logo-mark-outer {
      fill: url(#markCopper);
      stroke: rgba(255, 218, 178, .48);
      stroke-width: 1.2;
    }

    .logo-mark-inner {
      fill: rgba(32, 19, 12, .86);
    }

    .logo-flame {
      fill: url(#flameCopper);
      transform-origin: 64px 58px;
      animation: flameBreath 3.8s ease-in-out infinite;
    }

    .logo-c {
      fill: none;
      stroke: rgba(255, 232, 207, .90);
      stroke-width: 7.5;
      stroke-linecap: round;
      stroke-dasharray: 118 44;
      transform-origin: 64px 64px;
      animation: logoRing 9s linear infinite;
    }

    .logo-hammer {
      fill: rgba(22, 14, 10, .92);
    }

    .logo-spark {
      fill: #ffd7a8;
      opacity: .78;
      animation: sparkBlink 2.8s ease-in-out infinite;
    }

    .logo-spark:nth-of-type(2) { animation-delay: .55s; }
    .logo-spark:nth-of-type(3) { animation-delay: 1.1s; }

    @keyframes flameBreath {
      0%, 100% { transform: scale(1) translateY(0); opacity: .94; }
      50% { transform: scale(1.035) translateY(-1px); opacity: 1; }
    }

    @keyframes logoRing {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes sparkBlink {
      0%, 100% { opacity: .35; transform: scale(.88); }
      50% { opacity: 1; transform: scale(1.08); }
    }

    @media (max-width: 640px) {
      .logo-word { font-size: 74px; }
      .logo-subline { font-size: 13px; letter-spacing: .28em; }
    }

    .subtitle {
      color: var(--accent);
      font-size: clamp(1.08rem, 2vw, 1.38rem);
      font-weight: 550;
      margin-bottom: .75rem;
      max-width: 40rem;
    }

    .tagline {
      margin: 0;
      max-width: 40rem;
      color: var(--muted);
      line-height: 1.7;
      font-size: 1rem;
    }

    .hero-footer {
      display:flex;
      flex-wrap:wrap;
      gap: .9rem 1.25rem;
      margin-top: 1.75rem;
      color: rgba(246,239,232,.7);
      font-size: .92rem;
    }

    .hero-footer span {
      display:inline-flex;
      align-items:center;
      gap:.5rem;
    }

    .hero-footer span::before {
      content:"";
      width:.5rem; height:.5rem; border-radius:50%;
      background: var(--copper);
      box-shadow: 0 0 12px rgba(205,123,59,.35);
    }

    .panel {
      position:relative;
      margin: 0 auto;
      width:min(100%, 430px);
      border-radius: 28px;
      padding: 1.25rem;
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        var(--panel-solid);
      border:1px solid rgba(255,255,255,.08);
      box-shadow: 0 24px 80px rgba(0,0,0,.38);
      backdrop-filter: blur(16px);
    }

    .panel-inner {
      border-radius: 22px;
      border:1px solid var(--line);
      padding: 1.3rem;
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    }

    .brand-row {
      display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem;
    }

    .logo {
      display:flex; align-items:center; gap:.8rem;
    }

    .logo-mark {
      width: 3rem; height:3rem; border-radius: 14px;
      display:grid; place-items:center;
      color:#1d130d; font-weight: 900; font-size:1.18rem;
      background: linear-gradient(135deg, #ebb27e 0%, #c56b2d 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 24px rgba(197,107,45,.18);
    }

    .logo-text strong {
      display:block; font-size:1.02rem; letter-spacing:-.03em;
    }

    .logo-text span {
      display:block; color: var(--muted); font-size:.85rem; margin-top:.08rem;
    }

    .status-pill {
      padding:.45rem .7rem;
      border-radius: 999px;
      font-size:.76rem;
      text-transform: uppercase;
      letter-spacing: .11em;
      font-weight:700;
      color: #e6bc95;
      background: rgba(205,123,59,.09);
      border:1px solid rgba(205,123,59,.18);
    }

    .coming-soon, .login-card {
      display:none;
    }

    .panel h2 {
      margin: .4rem 0 .45rem;
      font-size: 1.9rem;
      letter-spacing: -.04em;
    }

    .panel p {
      margin: 0;
      color: var(--muted);
      line-height: 1.65;
    }

    .feature-list {
      margin: 1.2rem 0 0;
      display:grid;
      gap:.8rem;
    }

    .feature {
      display:flex; gap:.8rem; align-items:flex-start;
      padding:.9rem .95rem;
      border-radius: 16px;
      background: rgba(255,255,255,.025);
      border:1px solid rgba(255,255,255,.055);
    }

    .feature i {
      display:grid; place-items:center;
      width:1.85rem; height:1.85rem;
      font-style:normal; border-radius:50%;
      color:#20140d;
      background: linear-gradient(180deg, #f5c390, #c56c30);
      box-shadow: 0 0 16px rgba(197,108,48,.2);
      flex: none;
      font-size:.82rem; font-weight:800;
    }

    .feature strong {
      display:block; margin-bottom:.18rem; color:#f8eee6; font-size:.96rem;
    }

    .feature span {
      color: var(--muted); font-size: .9rem; line-height:1.5;
    }

    .cta-row {
      margin-top: 1.2rem;
      display:flex; gap:.85rem; flex-wrap:wrap;
    }

    .btn {
      appearance:none; border:none; cursor:pointer;
      padding:.9rem 1.08rem; border-radius:14px;
      font-weight:700; letter-spacing: -.01em; font-size:.96rem;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      text-decoration:none;
      display:inline-flex; align-items:center; justify-content:center;
    }

    .btn:hover { transform: translateY(-1px); }
    .btn-primary {
      color:#1f120a;
      background: linear-gradient(180deg, #f3c594 0%, #c86f31 100%);
      box-shadow: 0 10px 24px rgba(200,111,49,.24);
    }
    .btn-secondary {
      color: var(--text);
      background: rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.08);
    }

    .login-card label {
      display:block; margin-top:1rem; margin-bottom:.38rem;
      color:#e9d5c4; font-size:.9rem; font-weight:600;
    }

    .login-card input {
      width:100%;
      padding:.9rem .95rem;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.04);
      color: var(--text);
      outline:none;
    }

    .login-card input:focus {
      border-color: var(--line-strong);
      box-shadow: 0 0 0 4px rgba(205,123,59,.12);
    }

    .login-meta {
      display:flex; justify-content:space-between; gap:1rem; margin-top:.9rem;
      color: var(--muted); font-size: .88rem;
    }

    .helper {
      margin-top: 1.1rem; color: var(--muted); font-size:.88rem;
    }

    .helper a, .login-meta a {
      color: #f0c39a; text-decoration: none;
    }

    .badge-row, .pulse-stack, .mini-stats, .meta {}

    @media (max-width: 920px) {
      .container {
        grid-template-columns: 1fr;
        align-items: start;
        padding: 1.2rem 0 2.5rem;
      }

      .hero {
        padding-bottom: .2rem;
      }

      .panel {
        width: min(100%, 560px);
      }
    }

    
    .forge-ring {
      position:absolute; inset:auto;
      width: 26rem; height:26rem; border-radius:50%;
      border:1px solid rgba(229,140,73,.20);
      box-shadow: 0 0 40px rgba(229,140,73,.10), inset 0 0 40px rgba(229,140,73,.06);
      right: -6rem; top: -5rem;
      filter: blur(.1px);
      animation: slowSpin 32s linear infinite;
    }
    .forge-ring::before, .forge-ring::after {
      content:""; position:absolute; inset: 2.2rem; border-radius:50%;
      border:1px dashed rgba(255,183,119,.14);
    }
    .forge-ring::after { inset: 5rem; border-style: solid; opacity:.45; }
    .ember {
      position: absolute;
      width: .34rem; height: .34rem;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,220,160,1) 0%, rgba(233,122,45,1) 60%, rgba(233,122,45,0) 70%);
      box-shadow: 0 0 16px rgba(255,154,72,.8);
      opacity: .75;
      animation: floatUp linear infinite;
    }
    @keyframes floatUp {
      0%   { transform: translateY(0) translateX(0) scale(.6); opacity:0; }
      10%  { opacity:.8; }
      100% { transform: translateY(-38rem) translateX(var(--drift)) scale(1.1); opacity:0; }
    }
    @keyframes slowSpin { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }