/* WeridARC · Arc blue theme layer
   Loads after the design's inline styles. `!important` is used only where an
   inline style="" attribute on a design element has to be overridden.
   Background art: Arc night sky gradient (assets/arc-hero.jpg), matched to the X banner. */

:root{
  --accent:#5cb4ff;            /* electric Arc blue */
  --lime:#45d6a0;              /* mint · positive / up */
  --glass:rgba(7,19,40,.58);  /* frosted panel */
  --glass-2:rgba(6,16,34,.74);
  --line:rgba(255,255,255,.09);
  --ink:#02060d;
}

html{background:var(--ink)}
body{
  margin:0;min-height:100vh;
  background:
    radial-gradient(90% 60% at 50% -10%,rgba(92,180,255,.12),transparent 60%),
    linear-gradient(rgba(3,9,20,.56),rgba(3,9,20,.56)),
    url('/assets/arc-hero.jpg') center/cover no-repeat fixed var(--ink)!important;
}
::selection{background:rgba(92,180,255,.32)!important}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)!important;border-radius:4px}

/* screens */
.screen-app{min-height:100vh;background:linear-gradient(rgba(3,9,20,.30),rgba(3,9,20,.30))}
/* landing: the hero carries its own vivid copy of the art; everything below it gets an extra dark layer */
.screen-landing{position:relative;z-index:0;background:transparent}
.screen-landing::before{content:"";position:absolute;left:0;right:0;top:92vh;bottom:0;z-index:-1;pointer-events:none;background:rgba(3,9,20,.42)}
.site-footer{background:rgba(2,7,16,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}

/* frosted glass panels: terminal panels, markets table, featured cards, hero float card */
.panel,.fade-block,.fcard,.float-card{
  background:var(--glass)!important;
  border:1px solid var(--line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 70px -40px rgba(0,0,0,.75);
  backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
}
.float-card{background:var(--glass-2)!important}
.fcard:hover{border-color:rgba(92,180,255,.45)!important}

/* hero */
.hero-l,.hero-r{text-shadow:0 2px 26px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.35)}
.hero-mark-wrap{position:absolute;left:50%;top:calc(34% + 14px);transform:translate(-50%,-50%);width:clamp(150px,19vw,290px);pointer-events:none}
.hero-mark{display:block;width:100%;filter:drop-shadow(0 26px 40px rgba(0,0,0,.5));animation:markIn 1.1s cubic-bezier(.22,1,.36,1) both .15s,floatY 7s ease-in-out 1.5s infinite}
@keyframes markIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}

/* CTA: ice white → Arc blue */
.cta-gold{background:linear-gradient(135deg,#eaf6ff 0%,#5cb4ff 48%,#3d8fe0 100%)!important;color:#03142e!important}
.cta-gold:hover{box-shadow:0 10px 28px rgba(92,180,255,.35)!important}

/* docs + methodology (class-based pages) */
header{position:sticky;top:0;z-index:5;background:rgba(4,12,26,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body>main{max-width:960px;margin:40px auto 56px;padding:52px 48px 64px;background:rgba(4,12,26,.72);border:1px solid var(--line);border-radius:26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -50px rgba(0,0,0,.8);backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15)}
body>main table,body>main .formula{background:rgba(255,255,255,.035)}
@media (max-width:700px){body>main{margin:16px 12px 32px;padding:32px 20px 40px;border-radius:18px}}
table,.formula{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.note{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

@media (max-width:900px){body{background-attachment:scroll!important}}
@media (prefers-reduced-motion:reduce){.hero-mark{animation:none}}

/* phones: stack the hero line, flag, line instead of overlapping them */
@media (max-width:700px){
  .hero-l,.hero-r{left:50%!important;right:auto!important;transform:translateX(-50%);text-align:center;letter-spacing:4px!important;animation:none!important}
  .hero-l{top:10%!important}
  .hero-r{top:62%!important}
  .hero-mark-wrap{top:36%;width:clamp(120px,38vw,170px)}
}