:root {
   --bg: #05070b;
   --bg2: #080c13;
   --panel: #0b111b;
   --panel2: #0e1622;
   --line: #172436;
   --text: #eaf5ff;
   --muted: #7f93a8;
   --cyan: #25d9ff;
   --blue: #4d7cff;
   --green: #2effa2;
   --red: #ff4f6d;
   --orange: #ffb24b;
   --shadow: 0 0 40px rgba(37, 217, 255, .08)
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   background: radial-gradient(circle at 70% 0%, rgba(32, 92, 136, .12), transparent 32%), linear-gradient(180deg, #04060a, #070b11 50%, #05070b);
   color: var(--text);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   min-height: 100vh
}

.grid-bg {
   position: fixed;
   inset: 0;
   pointer-events: none;
   opacity: .22;
   background-image: linear-gradient(rgba(46, 255, 162, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 217, 255, .04) 1px, transparent 1px);
   background-size: 42px 42px;
   mask-image: linear-gradient(to bottom, black, transparent 85%)
}

a {
   color: inherit;
   text-decoration: none
}

.shell {
   width: min(1180px, calc(100% - 36px));
   margin: auto
}

.topbar {
   height: 76px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   position: relative;
   z-index: 3
}

.topbar nav {
   display: flex;
   gap: 28px;
   color: #9db1c3;
   font-size: 14px
}

.topbar nav a:hover {
   color: var(--cyan)
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 800;
   letter-spacing: .08em
}

.brand b {
   color: var(--cyan)
}

.brand-mark {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   border: 1px solid rgba(37, 217, 255, .55);
   background: linear-gradient(135deg, rgba(37, 217, 255, .18), rgba(77, 124, 255, .08));
   color: var(--cyan);
   font-size: 12px;
   clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
   box-shadow: 0 0 22px rgba(37, 217, 255, .18)
}

.top-actions,
.hero-actions,
.status-row {
   display: flex;
   align-items: center;
   gap: 10px
}

.btn {
   border: 1px solid var(--line);
   background: #0d1520;
   color: var(--text);
   padding: 10px 16px;
   margin-top: 10px;
   border-radius: 20px;
   font-weight: 700;
   cursor: pointer;
   transition: .2s;
   display: inline-flex;
   align-items: center;
   justify-content: center
}

.btn:hover {
   transform: translateY(-1px);
   border-color: #31506e
}

.btn.primary {
   background: linear-gradient(135deg, #0d6e8c, #235ab6);
   border-color: #2ecbf1;
   box-shadow: 0 0 18px rgba(37, 217, 255, .12)
}

.btn.primary:hover {
   box-shadow: 0 0 24px rgba(37, 217, 255, .24)
}

.btn.ghost {
   background: rgba(10, 16, 25, .72)
}

.btn.danger {
   border-color: #6b2432;
   color: #ff94a6;
   background: #1b0b11
}

.btn.xl {
   padding: 14px 21px
}

.btn.wide {
   width: 100%
}

.btn.small {
   padding: 6px 10px;
   font-size: 12px
}

.hero {
   min-height: 680px;
   display: grid;
   grid-template-columns: 1.03fr .97fr;
   gap: 52px;
   align-items: center;
   position: relative
}

.hero-copy h1 {
   font-size: clamp(46px, 7vw, 76px);
   line-height: .98;
   margin: 18px 0;
   letter-spacing: -.055em
}

.hero-copy h1 span,
.cyan {
   color: var(--cyan)
}

.hero-copy p,
.lead {
   font-size: 18px;
   color: #94a8bb;
   line-height: 1.65;
   max-width: 660px
}

.eyebrow {
   font-size: 12px;
   color: var(--cyan);
   font-weight: 800;
   letter-spacing: .16em
}

.live-dot {
   display: inline-block;
   width: 7px;
   height: 7px;
   background: var(--green);
   border-radius: 50%;
   margin-right: 7px;
   box-shadow: 0 0 12px var(--green)
}

.micro {
   font-size: 12px;
   color: #6f8398;
   line-height: 1.5;
   margin-top: 14px
}

.center {
   text-align: center
}

.top-gap {
   margin-top: 22px
}

.terminal-card,
.card,
.signal-card,
.panel,
.price-card,
.auth-card,
.cta {
   background: linear-gradient(180deg, rgba(13, 20, 31, .96), rgba(8, 13, 21, .96));
   border: 1px solid var(--line);
   box-shadow: var(--shadow)
}

.terminal-card {
   border-radius: 14px;
   padding: 18px;
   transform: perspective(1100px) rotateY(-4deg)
}

.glow {
   box-shadow: 0 0 0 1px rgba(37, 217, 255, .04), 0 0 55px rgba(37, 217, 255, .12)
}

.terminal-head,
.panel-head,
.signal-top,
.view-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px
}

.terminal-head strong {
   display: block;
   font-size: 28px;
   margin-top: 5px
}

.terminal-card canvas {
   width: 100%;
   height: 310px;
   display: block
}

.terminal-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px
}

.terminal-grid div {
   padding: 10px;
   background: #091019;
   border: 1px solid #132131;
   border-radius: 6px
}

.terminal-grid span,
.mini span {
   display: block;
   color: var(--muted);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .08em
}

.terminal-grid b {
   display: block;
   margin-top: 4px
}

.badge {
   display: inline-flex;
   padding: 5px 9px;
   border-radius: 999px;
   font-size: 10px;
   font-weight: 900;
   letter-spacing: .08em
}

.badge.good {
   color: #75ffc0;
   border: 1px solid rgba(46, 255, 162, .35);
   background: rgba(46, 255, 162, .08)
}

.badge.warn {
   color: #ffd28c;
   border: 1px solid rgba(255, 178, 75, .35);
   background: rgba(255, 178, 75, .08)
}

.good-text {
   color: var(--green) !important
}

.ticker {
   border-top: 1px solid #101a27;
   border-bottom: 1px solid #101a27;
   background: rgba(7, 11, 17, .8)
}

.ticker-row {
   height: 54px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #92a5b6;
   font-size: 13px
}

.section {
   padding: 90px 0
}

.section-title {
   text-align: center;
   max-width: 760px;
   margin: 0 auto 40px
}

.section-title h1,
.section-title h2,
.split h2,
.cta h2 {
   font-size: clamp(34px, 5vw, 52px);
   letter-spacing: -.04em;
   margin: 10px 0
}

.section-title p,
.cta p {
   color: var(--muted);
   font-size: 17px
}

.feature-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px
}

.feature-grid.three {
   grid-template-columns: repeat(3, 1fr)
}

.card {
   padding: 24px;
   border-radius: 12px;
   min-height: 180px
}

.card:hover {
   border-color: #244766;
   transform: translateY(-2px);
   transition: .2s
}

.card .icon {
   font-size: 27px;
   color: var(--cyan)
}

.card h3 {
   margin: 16px 0 8px
}

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

.split {
   display: grid;
   grid-template-columns: 1fr .8fr;
   gap: 50px;
   align-items: center
}

.score-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   margin-top: 24px
}

.score-list span {
   padding: 11px 13px;
   border: 1px solid #162537;
   background: #091019;
   border-radius: 7px;
   color: #8fa3b6
}

.score-list b {
   float: right;
   color: var(--cyan)
}

.signal-card {
   border-radius: 12px;
   padding: 24px
}

.signal-card h3 {
   font-size: 28px
}

.kv {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   padding: 10px 0;
   border-bottom: 1px solid #13202d;
   color: #94a6b7
}

.kv b {
   color: #dceeff
}

.signal-note {
   margin-top: 18px;
   padding: 12px;
   background: #071019;
   border-left: 2px solid var(--cyan);
   font-size: 12px;
   color: #73889b
}

.security {
   padding-top: 50px
}

.cta {
   margin-top: 40px;
   margin-bottom: 80px;
   padding: 36px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px
}

.footer {
   min-height: 100px;
   border-top: 1px solid #111c28;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #6e8193;
   font-size: 12px
}

.footer>div:nth-child(2) {
   display: flex;
   gap: 18px
}

.footer a:hover {
   color: var(--cyan)
}

/* auth */
.auth-wrap {
   min-height: calc(100vh - 76px);
   display: grid;
   place-items: center;
   padding: 50px 0
}

.auth-card {
   width: min(460px, 100%);
   padding: 32px;
   border-radius: 14px
}

.auth-card h1 {
   font-size: 38px;
   margin: 10px 0
}

.tabs {
   display: grid;
   grid-template-columns: 1fr 1fr;
   border-bottom: 1px solid #172334;
   margin: 22px 0
}

.tab {
   padding: 12px;
   background: none;
   color: #71869a;
   border: 0;
   border-bottom: 2px solid transparent;
   cursor: pointer
}

.tab.active {
   color: var(--cyan);
   border-color: var(--cyan)
}

form label,
.form-panel label {
   display: grid;
   gap: 7px;
   color: #9bb0c3;
   font-size: 13px;
   margin: 14px 0
}

input,
select,
textarea {
   width: 100%;
   background: #07101a;
   border: 1px solid #1a2a3b;
   border-radius: 7px;
   color: #e8f4ff;
   padding: 12px 13px;
   outline: none
}

input:focus,
select:focus,
textarea:focus {
   border-color: #2b8dac;
   box-shadow: 0 0 0 3px rgba(37, 217, 255, .07)
}

textarea {
   min-height: 90px;
   resize: vertical
}

.or {
   text-align: center;
   color: #587084;
   margin: 18px 0;
   font-size: 11px
}

.notice {
   padding: 12px 14px;
   border: 1px solid #25445e;
   background: #0a1823;
   color: #9edcf0;
   border-radius: 7px;
   margin-top: 16px;
   font-size: 13px
}

.hidden {
   display: none !important
}

code {
   color: #7ee9ff;
   background: #07101a;
   padding: 2px 5px;
   border-radius: 4px
}

/* pricing */
.pricing-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px
}

.price-card {
   padding: 25px;
   border-radius: 12px;
   position: relative;
   overflow: hidden
}

.price-card.popular {
   border-color: #255b77;
   box-shadow: 0 0 40px rgba(37, 217, 255, .1)
}

.price-card h2 {
   font-size: 38px;
   margin: 15px 0 2px
}

.price-card h2 small {
   font-size: 13px;
   color: #7890a5
}

.price-card p {
   color: var(--muted)
}

.price-card ul {
   padding-left: 18px;
   color: #a2b5c6;
   min-height: 210px;
   line-height: 2
}

.ribbon {
   position: absolute;
   right: -34px;
   top: 14px;
   transform: rotate(39deg);
   background: #0f8cb2;
   color: white;
   font-size: 10px;
   padding: 5px 40px;
   font-weight: 900
}

.plan {
   font-size: 10px;
   font-weight: 900;
   padding: 4px 7px;
   border-radius: 5px;
   letter-spacing: .08em
}

.plan.free {
   background: #162330;
   color: #a4b7c7
}

.plan.premium {
   background: #092f3a;
   color: #54e3ff
}

.plan.pro {
   background: #191d4b;
   color: #8ea3ff
}

.plan.vip {
   background: #12382e;
   color: #66ffc0
}

/* app */
.app-body {
   overflow-x: hidden
}

.app-layout {
   display: grid;
   grid-template-columns: 230px 1fr;
   min-height: 100vh
}

.sidebar {
   position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
   width: 230px;
   background: #070b11;
   border-right: 1px solid #111d2b;
   padding: 20px 14px;
   display: flex;
   flex-direction: column;
   z-index: 5
}

.user-box {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 25px 0 16px;
   padding: 12px;
   border: 1px solid #142232;
   background: #091019;
   border-radius: 8px
}

.avatar {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   background: #0e3140;
   color: var(--cyan);
   border-radius: 50%;
   font-weight: 800
}

.user-box span {
   display: block;
   margin-top: 4px;
   width: max-content
}

.side-nav {
   display: grid;
   gap: 5px
}

.side-nav button {
   background: transparent;
   border: 1px solid transparent;
   color: #8296a9;
   text-align: left;
   padding: 11px 12px;
   border-radius: 7px;
   cursor: pointer
}

.side-nav button:hover,
.side-nav button.active {
   background: #0a1620;
   border-color: #173044;
   color: #d9f4ff
}

.sidebar-foot {
   margin-top: auto;
   display: grid;
   gap: 8px
}

.terminal-main {
   grid-column: 2;
   min-width: 0
}

.terminal-bar {
   height: 62px;
   padding: 0 22px;
   border-bottom: 1px solid #111d2a;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: rgba(6, 10, 15, .8);
   position: sticky;
   top: 0;
   z-index: 4;
   backdrop-filter: blur(10px)
}

.terminal-bar span {
   font-size: 12px
}

.view {
   display: none;
   padding: 18px
}

.view.active {
   display: block
}

.dash-grid {
   display: grid;
   grid-template-columns: 2fr 1fr repeat(2, 1fr);
   gap: 12px
}

.panel {
   border-radius: 9px;
   padding: 16px;
   min-width: 0
}

.chart-panel {
   grid-column: 1/4;
   grid-row: 1/3
}

.signal-panel {
   grid-column: 4;
   grid-row: 1/3
}

.chart-panel canvas {
   width: 100%;
   height: 450px
}

.panel h2 {
   margin: 6px 0
}

.tf {
   display: flex;
   gap: 5px;
   margin-top: 4px
}

.tf button,
.mode {
   border: 1px solid #16283a;
   background: #09111b;
   color: #7f95a8;
   padding: 6px 9px;
   border-radius: 5px;
   cursor: pointer
}

.tf button.active,
.mode.active {
   color: var(--cyan);
   border-color: #24546b;
   background: #0b202a
}

.signal-big {
   font-size: 44px;
   font-weight: 900;
   margin: 20px 0
}

.checks {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin: 15px 0
}

.checks span {
   padding: 6px 8px;
   background: #08121c;
   border: 1px solid #142637;
   border-radius: 5px;
   font-size: 11px;
   color: #93a9bb
}

.mini {
   min-height: 104px
}

.mini h3 {
   font-size: 22px;
   margin: 8px 0
}

.meter {
   height: 6px;
   background: #172331;
   border-radius: 99px;
   overflow: hidden
}

.meter i {
   display: block;
   height: 100%;
   background: linear-gradient(90deg, var(--green), var(--orange))
}

.view-head {
   margin-bottom: 18px
}

.view-head h2 {
   font-size: 30px;
   margin: 5px 0
}

.table-wrap,
.table {
   border: 1px solid #132234;
   border-radius: 8px;
   overflow: hidden;
   background: #081019
}

.tr {
   display: grid;
   grid-template-columns: 1.2fr 1fr 1fr .8fr;
   gap: 10px;
   padding: 12px;
   border-bottom: 1px solid #13202d;
   align-items: center;
   color: #a3b6c7;
   font-size: 13px
}

.tr.th {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: #5f778b;
   background: #0a1420
}

.tool-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

.result-panel {
   display: grid;
   align-content: center
}

.result-panel h2 {
   font-size: 38px
}

.journal-item {
   padding: 12px;
   border-bottom: 1px solid #14202d
}

.journal-item header {
   display: flex;
   justify-content: space-between
}

.journal-item p {
   color: #8599aa;
   font-size: 12px
}

.analytics-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px
}

.analytics-grid .panel h2 {
   font-size: 32px
}

.mode-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 7px;
   margin: 18px 0
}

.mode.locked {
   opacity: .55
}

.steps {
   color: #91a6b7;
   line-height: 2
}

.legal {
   max-width: 850px;
   padding: 80px 0
}

.legal h1 {
   font-size: 46px
}

.legal h2 {
   margin-top: 35px
}

.legal p {
   color: #93a8ba;
   line-height: 1.7
}

@media(max-width:1000px) {

   .hero,
   .split {
      grid-template-columns: 1fr
   }

   .terminal-card {
      transform: none
   }

   .feature-grid,
   .pricing-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .dash-grid {
      grid-template-columns: 1fr 1fr
   }

   .chart-panel {
      grid-column: 1/3
   }

   .signal-panel {
      grid-column: 1/3;
      grid-row: auto
   }

   .analytics-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .topbar nav {
      display: none
   }
}

@media(max-width:720px) {
   .shell {
      width: min(100% - 24px, 1180px)
   }

   .topbar {
      height: 66px
   }

   .top-actions .ghost {
      display: none
   }

   .hero {
      padding: 45px 0;
      min-height: auto
   }

   .hero-copy h1 {
      font-size: 48px
   }

   .hero-actions {
      align-items: stretch;
      flex-direction: column
   }

   .terminal-grid {
      grid-template-columns: 1fr 1fr
   }

   .feature-grid,
   .feature-grid.three,
   .pricing-grid,
   .tool-grid {
      grid-template-columns: 1fr
   }

   .ticker-row {
      overflow: auto;
      gap: 30px;
      justify-content: flex-start
   }

   .cta {
      flex-direction: column;
      align-items: flex-start
   }

   .footer {
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      padding: 25px 0
   }

   .app-layout {
      display: block
   }

   .sidebar {
      position: relative;
      width: 100%;
      height: auto
   }

   .side-nav {
      grid-template-columns: repeat(2, 1fr)
   }

   .sidebar-foot {
      margin-top: 14px;
      grid-template-columns: 1fr 1fr
   }

   .terminal-main {
      grid-column: auto
   }

   .terminal-bar {
      position: relative
   }

   .dash-grid {
      display: grid;
      grid-template-columns: 1fr
   }

   .chart-panel,
   .signal-panel {
      grid-column: 1;
      grid-row: auto
   }

   .chart-panel canvas {
      height: 310px
   }

   .analytics-grid {
      grid-template-columns: 1fr 1fr
   }

   .tr {
      grid-template-columns: 1fr;
      gap: 4px
   }

   .tr.th {
      display: none
   }
}

/* =========================================================
   AURUMX AI — Animated UI V2
   Motion is intentionally subtle and respects reduced-motion.
   ========================================================= */
:root {
   --ease: cubic-bezier(.22, .8, .2, 1);
   --cyan-soft: rgba(37, 217, 255, .18);
   --green-soft: rgba(46, 255, 162, .16)
}

body {
   isolation: isolate
}

body::before {
   content: "";
   position: fixed;
   inset: -30%;
   z-index: -3;
   pointer-events: none;
   background: radial-gradient(circle at 18% 20%, rgba(37, 217, 255, .09), transparent 24%), radial-gradient(circle at 82% 72%, rgba(77, 124, 255, .08), transparent 25%), radial-gradient(circle at 58% 4%, rgba(46, 255, 162, .035), transparent 18%);
   animation: ambientDrift 18s ease-in-out infinite alternate
}

body::after {
   content: "";
   position: fixed;
   inset: 0;
   z-index: 9998;
   pointer-events: none;
   opacity: .035;
   background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, .3) 1px, transparent 1px, transparent 4px);
   mix-blend-mode: overlay
}

.grid-bg {
   animation: gridTravel 24s linear infinite;
   will-change: background-position
}

.grid-bg::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(100deg, transparent 15%, rgba(37, 217, 255, .055) 48%, transparent 75%);
   transform: translateX(-120%);
   animation: gridSweep 9s ease-in-out infinite
}

.brand-mark {
   position: relative;
   animation: brandBreathe 3.2s ease-in-out infinite
}

.brand-mark::after {
   content: "";
   position: absolute;
   inset: -6px;
   border: 1px solid rgba(37, 217, 255, .16);
   clip-path: inherit;
   animation: hexPulse 2.8s ease-out infinite
}

.topbar {
   animation: dropIn .7s var(--ease) both
}

.topbar nav a {
   position: relative;
   transition: color .25s var(--ease)
}

.topbar nav a::after {
   content: "";
   position: absolute;
   left: 50%;
   right: 50%;
   bottom: -8px;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--cyan), transparent);
   transition: left .25s var(--ease), right .25s var(--ease)
}

.topbar nav a:hover::after {
   left: 0;
   right: 0
}

.hero-copy>* {
   opacity: 0;
   transform: translateY(18px);
   animation: riseIn .65s var(--ease) forwards
}

.hero-copy>*:nth-child(1) {
   animation-delay: .08s
}

.hero-copy>*:nth-child(2) {
   animation-delay: .16s
}

.hero-copy>*:nth-child(3) {
   animation-delay: .24s
}

.hero-copy>*:nth-child(4) {
   animation-delay: .32s
}

.hero-copy>*:nth-child(5) {
   animation-delay: .4s
}

.hero-copy h1 span {
   display: inline-block;
   text-shadow: 0 0 30px rgba(37, 217, 255, .18);
   animation: titleGlow 4s ease-in-out infinite
}

.live-dot {
   animation: livePulse 1.7s ease-in-out infinite
}

.terminal-card {
   position: relative;
   overflow: hidden;
   transition: transform .55s var(--ease), border-color .4s, box-shadow .4s;
   animation: terminalEnter .9s .18s var(--ease) both
}

.terminal-card::before,
.price-card::before,
.panel::before,
.card::before,
.auth-card::before,
.signal-card::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, .025) 42%, rgba(37, 217, 255, .055) 50%, transparent 58%);
   transform: translateX(-130%);
   transition: transform .85s var(--ease)
}

.terminal-card:hover::before,
.price-card:hover::before,
.panel:hover::before,
.card:hover::before,
.auth-card:hover::before,
.signal-card:hover::before {
   transform: translateX(130%)
}

.terminal-card:hover {
   transform: perspective(1100px) rotateY(-1.5deg) translateY(-5px);
   border-color: #275474;
   box-shadow: 0 22px 70px rgba(0, 0, 0, .38), 0 0 65px rgba(37, 217, 255, .13)
}

.card,
.price-card,
.panel,
.auth-card,
.signal-card,
.cta {
   position: relative;
   overflow: hidden;
   transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
   background-image: linear-gradient(180deg, rgba(13, 20, 31, .96), rgba(8, 13, 21, .96)), radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(37, 217, 255, .08), transparent 32%)
}

.card:hover,
.price-card:hover,
.panel:hover,
.signal-card:hover {
   transform: translateY(-4px);
   border-color: #284d6c;
   box-shadow: 0 16px 42px rgba(0, 0, 0, .24), 0 0 32px rgba(37, 217, 255, .07)
}

.btn {
   position: relative;
   overflow: hidden;
   transition: transform .2s var(--ease), box-shadow .25s, border-color .25s, filter .25s
}

.btn:hover {
   transform: translateY(-2px);
   filter: brightness(1.08)
}

.btn:active {
   transform: translateY(0) scale(.975)
}

.btn .ripple {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, .2);
   transform: scale(0);
   animation: ripple .62s ease-out;
   pointer-events: none
}

.btn.primary {
   background-size: 180% 180%;
   animation: buttonGradient 6s ease infinite
}

.badge.good {
   animation: badgeGlow 2.6s ease-in-out infinite
}

.eyebrow {
   animation: eyebrowPulse 4s ease-in-out infinite
}

.ticker-row {
   animation: tickerFade .9s .25s var(--ease) both
}

.ticker-row b {
   transition: text-shadow .25s
}

.ticker-row b:hover {
   text-shadow: 0 0 16px currentColor
}

.reveal {
   opacity: 0;
   transform: translateY(24px) scale(.985);
   transition: opacity .65s var(--ease), transform .65s var(--ease)
}

.reveal.in-view {
   opacity: 1;
   transform: none
}

.feature-grid .card:nth-child(2),
.pricing-grid .price-card:nth-child(2) {
   transition-delay: .045s
}

.feature-grid .card:nth-child(3),
.pricing-grid .price-card:nth-child(3) {
   transition-delay: .09s
}

.feature-grid .card:nth-child(4),
.pricing-grid .price-card:nth-child(4) {
   transition-delay: .135s
}

.feature-grid .card:nth-child(5) {
   transition-delay: .18s
}

.feature-grid .card:nth-child(6) {
   transition-delay: .225s
}

.price-card.popular {
   animation: popularAura 3.4s ease-in-out infinite
}

.price-card.popular::after {
   content: "";
   position: absolute;
   inset: -1px;
   border-radius: 12px;
   padding: 1px;
   background: conic-gradient(from 0deg, transparent, rgba(37, 217, 255, .55), transparent 28%, transparent 70%, rgba(77, 124, 255, .45), transparent);
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   animation: borderSpin 6s linear infinite;
   pointer-events: none
}

.ribbon {
   animation: ribbonGlow 2.6s ease-in-out infinite
}

.auth-card {
   animation: authFloatIn .75s var(--ease) both
}

.tabs .tab {
   transition: color .25s, background .25s
}

.tabs .tab.active {
   background: linear-gradient(180deg, transparent, rgba(37, 217, 255, .04))
}

input,
select,
textarea {
   transition: border-color .25s, box-shadow .25s, background .25s, transform .2s
}

input:focus,
select:focus,
textarea:focus {
   transform: translateY(-1px);
   background: #08131f
}

.sidebar {
   animation: sideIn .55s var(--ease) both;
   box-shadow: 12px 0 40px rgba(0, 0, 0, .18)
}

.side-nav button {
   position: relative;
   overflow: hidden;
   transition: background .25s, border-color .25s, color .25s, transform .22s var(--ease)
}

.side-nav button::before {
   content: "";
   position: absolute;
   left: 0;
   top: 20%;
   bottom: 20%;
   width: 2px;
   background: var(--cyan);
   box-shadow: 0 0 12px var(--cyan);
   transform: scaleY(0);
   transition: transform .25s var(--ease)
}

.side-nav button:hover {
   transform: translateX(3px)
}

.side-nav button.active::before {
   transform: scaleY(1)
}

.terminal-bar {
   animation: dropIn .55s .08s var(--ease) both
}

.view.active {
   animation: viewIn .42s var(--ease) both
}

.chart-panel canvas {
   filter: drop-shadow(0 0 10px rgba(37, 217, 255, .05));
   animation: chartAppear .75s var(--ease) both
}

.signal-panel {
   border-color: rgba(46, 255, 162, .18);
   box-shadow: 0 0 45px rgba(46, 255, 162, .045)
}

.signal-big {
   display: inline-block;
   text-shadow: 0 0 24px rgba(46, 255, 162, .22);
   animation: signalPulse 2.2s ease-in-out infinite
}

.score-ring {
   --score: 92;
   position: relative;
   width: 58px;
   height: 58px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: conic-gradient(var(--cyan) calc(var(--score)*1%), #122231 0);
   box-shadow: 0 0 20px rgba(37, 217, 255, .15);
   animation: ringPop .7s .25s var(--ease) both
}

.score-ring::before {
   content: "";
   position: absolute;
   inset: 5px;
   border-radius: 50%;
   background: #08111b;
   border: 1px solid #14283a
}

.score-ring span {
   position: relative;
   z-index: 1;
   color: #9cecff;
   font-size: 11px;
   font-weight: 900;
   line-height: 1;
   text-align: center
}

.score-ring small {
   display: block;
   font-size: 7px;
   color: #66869b;
   margin-top: 2px
}

.meter i {
   position: relative;
   background-size: 160% 100%;
   animation: meterFlow 2.8s linear infinite
}

.meter i::after {
   content: "";
   position: absolute;
   right: 0;
   top: -3px;
   width: 10px;
   height: 12px;
   border-radius: 50%;
   background: #dfffee;
   box-shadow: 0 0 16px var(--green);
   animation: meterSpark 1.6s ease-in-out infinite
}

.price-up {
   color: var(--green) !important;
   text-shadow: 0 0 18px rgba(46, 255, 162, .32);
   animation: priceTickUp .45s var(--ease)
}

.price-down {
   color: var(--red) !important;
   text-shadow: 0 0 18px rgba(255, 79, 109, .28);
   animation: priceTickDown .45s var(--ease)
}

.status-row .good-text {
   animation: statusBlink 2.2s ease-in-out infinite
}

.journal-item {
   animation: listIn .42s var(--ease) both
}

.tr:not(.th) {
   transition: background .22s, transform .22s
}

.tr:not(.th):hover {
   background: #0a1722;
   transform: translateX(2px)
}

.mode {
   transition: all .25s var(--ease)
}

.mode.active {
   box-shadow: 0 0 20px rgba(37, 217, 255, .1);
   transform: translateY(-1px)
}

.notice:not(.hidden) {
   animation: noticeIn .4s var(--ease) both
}

.ui-orb {
   position: fixed;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   pointer-events: none;
   z-index: -2;
   filter: blur(70px);
   opacity: .055;
   background: var(--cyan);
   transform: translate(-50%, -50%);
   transition: left .18s linear, top .18s linear
}

.page-wipe {
   position: fixed;
   inset: 0;
   z-index: 10000;
   pointer-events: none;
   background: linear-gradient(120deg, #05080d 0%, #091723 46%, #0a2930 50%, #091723 54%, #05080d 100%);
   transform: translateY(100%)
}

.page-wipe.out {
   animation: pageWipeOut .48s var(--ease) forwards
}

.toast-stack {
   position: fixed;
   right: 18px;
   bottom: 18px;
   z-index: 9000;
   display: grid;
   gap: 10px;
   pointer-events: none
}

.ui-toast {
   min-width: 230px;
   max-width: 340px;
   padding: 12px 14px;
   border: 1px solid #1e465e;
   border-radius: 9px;
   background: rgba(7, 17, 27, .94);
   box-shadow: 0 18px 50px rgba(0, 0, 0, .34), 0 0 30px rgba(37, 217, 255, .08);
   backdrop-filter: blur(16px);
   animation: toastIn .42s var(--ease) both
}

.ui-toast b {
   display: block;
   color: #dff8ff;
   font-size: 12px
}

.ui-toast span {
   display: block;
   color: #7e9aab;
   font-size: 11px;
   margin-top: 3px
}

@keyframes ambientDrift {
   to {
      transform: translate3d(2%, 1.4%, 0) scale(1.05)
   }
}

@keyframes gridTravel {
   to {
      background-position: 42px 42px
   }
}

@keyframes gridSweep {

   0%,
   25% {
      transform: translateX(-120%)
   }

   55%,
   100% {
      transform: translateX(120%)
   }
}

@keyframes brandBreathe {
   50% {
      box-shadow: 0 0 32px rgba(37, 217, 255, .3)
   }
}

@keyframes hexPulse {
   0% {
      transform: scale(.82);
      opacity: 0
   }

   45% {
      opacity: .8
   }

   100% {
      transform: scale(1.35);
      opacity: 0
   }
}

@keyframes livePulse {

   0%,
   100% {
      transform: scale(1);
      box-shadow: 0 0 10px var(--green)
   }

   50% {
      transform: scale(1.35);
      box-shadow: 0 0 20px var(--green)
   }
}

@keyframes riseIn {
   to {
      opacity: 1;
      transform: none
   }
}

@keyframes dropIn {
   from {
      opacity: 0;
      transform: translateY(-12px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes terminalEnter {
   from {
      opacity: 0;
      transform: perspective(1100px) rotateY(-8deg) translateX(24px) scale(.98)
   }

   to {
      opacity: 1;
      transform: perspective(1100px) rotateY(-4deg)
   }
}

@keyframes titleGlow {
   50% {
      text-shadow: 0 0 42px rgba(37, 217, 255, .34)
   }
}

@keyframes buttonGradient {

   0%,
   100% {
      background-position: 0 50%
   }

   50% {
      background-position: 100% 50%
   }
}

@keyframes ripple {
   to {
      transform: scale(4);
      opacity: 0
   }
}

@keyframes badgeGlow {
   50% {
      box-shadow: 0 0 18px rgba(46, 255, 162, .11)
   }
}

@keyframes eyebrowPulse {
   50% {
      text-shadow: 0 0 12px rgba(37, 217, 255, .25)
   }
}

@keyframes tickerFade {
   from {
      opacity: 0;
      transform: translateY(8px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes popularAura {
   50% {
      box-shadow: 0 0 58px rgba(37, 217, 255, .17)
   }
}

@keyframes borderSpin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes ribbonGlow {
   50% {
      filter: brightness(1.25);
      box-shadow: 0 0 20px rgba(37, 217, 255, .22)
   }
}

@keyframes authFloatIn {
   from {
      opacity: 0;
      transform: translateY(20px) scale(.98)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes sideIn {
   from {
      opacity: 0;
      transform: translateX(-18px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes viewIn {
   from {
      opacity: 0;
      transform: translateY(8px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes chartAppear {
   from {
      opacity: 0;
      filter: blur(3px)
   }

   to {
      opacity: 1;
      filter: drop-shadow(0 0 10px rgba(37, 217, 255, .05))
   }
}

@keyframes signalPulse {
   50% {
      transform: translateY(-1px) scale(1.015);
      text-shadow: 0 0 34px rgba(46, 255, 162, .38)
   }
}

@keyframes ringPop {
   from {
      opacity: 0;
      transform: scale(.68) rotate(-30deg)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes meterFlow {
   to {
      background-position: 160% 0
   }
}

@keyframes meterSpark {
   50% {
      transform: scale(.75);
      opacity: .55
   }
}

@keyframes priceTickUp {
   0% {
      transform: translateY(3px)
   }

   50% {
      transform: translateY(-2px)
   }

   100% {
      transform: none
   }
}

@keyframes priceTickDown {
   0% {
      transform: translateY(-3px)
   }

   50% {
      transform: translateY(2px)
   }

   100% {
      transform: none
   }
}

@keyframes statusBlink {
   50% {
      opacity: .58
   }
}

@keyframes listIn {
   from {
      opacity: 0;
      transform: translateX(-8px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes noticeIn {
   from {
      opacity: 0;
      transform: translateY(6px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes toastIn {
   from {
      opacity: 0;
      transform: translateX(18px) scale(.98)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes pageWipeOut {
   0% {
      transform: translateY(100%)
   }

   45% {
      transform: translateY(0)
   }

   100% {
      transform: translateY(-100%)
   }
}

@media(max-width:1000px) {
   .terminal-card:hover {
      transform: translateY(-4px)
   }
}

@media(max-width:720px) {
   body::after {
      display: none
   }

   .ui-orb {
      display: none
   }

   .terminal-card,
   .card,
   .price-card,
   .panel {
      transform: none !important
   }

   .sidebar {
      animation: none
   }

   .side-nav button:hover {
      transform: none
   }
}

@media(prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .001ms !important
   }

   .ui-orb {
      display: none
   }

   .reveal {
      opacity: 1;
      transform: none
   }
}