:root{
  --ink:#071326;
  --muted:#65748b;
  --blue:#1769ff;
  --blue-soft:#eaf3ff;
  --line:#e2e8f0;
  --surface:#f7faff;
  --max:1260px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;

  background:
    radial-gradient(
      circle at 0% 100%,
      rgba(23,105,255,.13),
      transparent 38%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(120,90,255,.11),
      transparent 38%
    ),
    #fff;

  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;

  background-attachment:fixed;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}

.container{
  width:min(var(--max),calc(100% - 72px));
  margin:0 auto;
}

/* =========================================================
   NAVBAR
========================================================= */
.nav{
  height:78px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  position:sticky;
  top:0;
  z-index:50;
}

.nav-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  position:relative;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:18px;
  font-weight:760;
  letter-spacing:-.035em;
}

.brand-logo{
  width:34px;
  height:34px;
  object-fit:contain;
  flex-shrink:0;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  color:#526178;
  font-size:14px;
  font-weight:500;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
}

.nav-links a:hover{color:var(--ink)}

.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:20px;
}

.chain-pill{
  border:1px solid var(--line);
  padding:10px 14px;
  border-radius:999px;
  color:#526178;
  font-size:12px;
  white-space:nowrap;
}

.green-dot{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:#18a873;
}

.btn{
  appearance:none;
  border:0;
  cursor:pointer;
  border-radius:100px;
  padding:10px 24px;
  font-family: 'Inter', sans-serif;
  font-weight:600;
  transition:transform .2s ease,box-shadow .2s ease;
  font-size: .9rem;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 20, 57, 0.447);
}

.btn-dark{
  color:#fff;
  background:var(--ink);
}



.btn-white{
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
}

/* =========================================================
   HERO
========================================================= */
.hero{
  min-height:690px;
  display:grid;
  grid-template-columns:48% 52%;
  align-items:center;
  gap:12px;
  margin-top:50px;
}

.hero-copy{
  padding-top:28px;
}



.eyebrow{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:24px;
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.19em;
}

.eyebrow:before{
  content:"";
  width:42px;
  height:1px;
  background:var(--blue);
}

.hero h1{
  margin:0;
  max-width:680px;
  font-size:clamp(58px,6vw,88px);
  line-height:.94;
  letter-spacing:-.065em;
  font-weight:760;
}

.hero h1 span{
  color:var(--blue);
}

.hero-lead{
  max-width:610px;
  margin:28px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.58;
}

.hero-actions{
  display:flex;
  gap:11px;
  margin-top:30px;
}

.hero-proof{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  margin-top:34px;
  color:#718096;
  font-size:12px;
}

.hero-visual{
  min-height:620px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hero-visual:before{
  content:"";
  position:absolute;
  width:570px;
  height:570px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(214,231,255,.72) 0%,rgba(242,248,255,.8) 42%,rgba(255,255,255,0) 70%);
}

.tech-grid{
  position:absolute;
  inset:70px 0 70px 30px;
  opacity:.48;
  background-image:
    linear-gradient(#dfe9f7 1px,transparent 1px),
    linear-gradient(90deg,#dfe9f7 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 58% 50%,#000 5%,transparent 72%);
}


/* This is the image slot the user can replace later. */
.hero-image-slot{
  width:min(92%,640px);
  aspect-ratio:1 / .88;
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  isolation:isolate;
}

.robot-ground{
  position:absolute;
  left:50%;
  bottom:5%;

  width:58%;
  height:55px;

  transform:translateX(-50%);

  background:
    radial-gradient(
      ellipse at center,
      rgba(91,145,215,.22) 0%,
      rgba(120,166,220,.13) 35%,
      rgba(170,200,235,.06) 58%,
      transparent 76%
    );

  filter:blur(9px);

  z-index:1;
  pointer-events:none;
}

/* =========================================
   MAIN ROBOT
========================================= */

.hero-image-slot{
  width:90%;
  height:90%;

  object-fit:contain;
  object-position:center bottom;

  position:relative;
  z-index:3;

  filter:
    drop-shadow(0 15px 10px rgba(35,75,125,.12))
    drop-shadow(0 4px 5px rgba(35,75,125,.08));
}


/* =========================================
   ROBOT FLOOR REFLECTION
========================================= */

.robot-reflection{
  position:absolute;

  width:90%;
  height:90%;

  left:50%;
  bottom:-2%;

  transform:
    translateX(-50%)
    scaleX(-1)
    scaleY(-0.20);

  transform-origin:center bottom;

  object-fit:contain;
  object-position:center bottom;

  opacity:.16;

  mix-blend-mode:multiply;

  filter:
    blur(2px)
    saturate(.65);

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.22) 35%,
      rgba(0,0,0,.06) 70%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.22) 35%,
      rgba(0,0,0,.06) 70%,
      transparent 100%
    );

  z-index:2;
  pointer-events:none;
}

.hero-image-slot{
  position:relative;
  z-index:3;

  filter:
    drop-shadow(0 18px 12px rgba(35,75,125,.13))
    drop-shadow(0 4px 4px rgba(35,75,125,.10));
}



/*
  TO ADD THE REAL ROBOT LATER:
  Replace the .placeholder-box element inside .hero-image-slot with:

  <img src="assets/hero-robot.jpg"
       alt="Industrial robot"
       class="real-image">

  and keep the same slot dimensions.
*/
.placeholder-box{
  width:100%;
  height:100%;
  border:1px dashed #cfdbea;
  border-radius:26px;
  background:linear-gradient(145deg,#fbfdff,#f2f7fd);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#a0adbe;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.real-image{
  transform:scaleX(-1);
  display:block;
  width:90%;
  height:90%;
  object-fit:contain;
  object-position:center bottom;
  position:relative;
  z-index:3;

  filter:
    drop-shadow(0 16px 12px rgba(42,78,125,.12))
    drop-shadow(0 5px 5px rgba(42,78,125,.08));
}

.data-tag{
  position:absolute;
  z-index:10;
  width:126px;
  min-height:86px;
  padding:11px 12px;
  background:rgba(255,255,255,.97);
  border:1px solid #d9e3ef;
  box-shadow:0 14px 32px rgba(35,81,140,.12);
  backdrop-filter:blur(12px);
}

.data-tag small{
  display:block;
  color:#7a889b;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.data-tag strong{
  display:block;
  margin-top:4px;
  font-size:20px;
  letter-spacing:-.035em;
}

/* =========================
   MINI BAR CHART
========================= */

.mini-bars{
  height:30px;
  margin-top:10px;
  display:flex;
  align-items:flex-end;
  gap:4px;
}

.mini-bars i{
  display:block;
  width:7px;
  border-radius:2px 2px 0 0;
  background:#1769ff;
  opacity:.75;
}


/* =========================
   MINI LINE CHART
========================= */

.mini-line{
  width:100%;
  height:27px;
  margin-top:7px;
  color:#1769ff;
}


/* =========================
   MINI PIE CHART
========================= */

.mini-pie{
  width:38px;
  height:38px;
  margin-top:8px;
  border-radius:50%;
  background:
    conic-gradient(
      #1769ff 0deg 72deg,
      #dce9ff 72deg 360deg
    );
  position:relative;
}

.mini-pie::after{
  content:"";
  position:absolute;
  inset:8px;
  background:#fff;
  border-radius:50%;
}

.data-tag small{
  display:block;
  color:#7a889b;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.data-tag strong{
  display:block;
  margin-top:5px;
  font-size:23px;
  letter-spacing:-.035em;
}

.tag-performance{
  top:185px;
  left:25px;
}

.tag-revenue{
  top:330px;
  right:435px;
}

.tag-share{
  bottom:185px;
  left:440px;
}

/* =========================================
   REVENUE SHARE CARD
========================================= */

.tag-share{
  width:126px;
  min-height:86px;
  padding:11px 12px;
}

.tag-share .share-value{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  margin-top:7px;
}

.tag-share .share-value strong{
  display:block;
  margin:0;
  font-size:20px;
  line-height:1;
  letter-spacing:-.035em;
}

.tag-share .share-value .mini-pie{
  position:relative;
  right:auto;
  bottom:auto;

  flex-shrink:0;

  width:32px;
  height:32px;
  margin:0;
}

.onchain{
  position:absolute;
  z-index:5;
  bottom: 85px;
  right:10px;
  padding:11px 14px;
  border:1px solid #d9e3ef;
  background:#fff;
  color:#3e5570;
  font:700 10px/1 monospace;
  letter-spacing:.11em;
}

/* =========================================================
   REMOVED PARTNER LOGOS SECTION
========================================================= */
/* Intentionally omitted. No partner logos in the MVP. */

/* =========================================================
   PROBLEM
========================================================= */
.section{
  padding:112px 0;
}

.problem{
  display:grid;
  grid-template-columns:46% 54%;
  gap:76px;
  align-items:center;
}

.kicker{
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin-bottom:18px;
}

h2{
  margin:0;
  font-size:48px;
  line-height:1.03;
  letter-spacing:-.055em;
}

.copy{
  margin:22px 0 0;
  max-width:580px;
  color:var(--muted);
  font-size:18px;
  line-height:1.65;
}

.problem-image{
  transform: translateX(-40px);
  min-height:330px;
  border:1px solid #e1e8f1;
  border-radius:24px;
  background:linear-gradient(145deg,#f8fbff,#edf5ff);
  overflow:hidden;
  position:relative;
}

.problem-image .real-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Replace this area later with the real problem image. */
.problem-image .placeholder-box{
  border:0;
  border-radius:0;
  background:
    linear-gradient(160deg,rgba(255,255,255,.86),rgba(232,241,252,.94));
}

/* =========================================================
   MINI POINTS
========================================================= */
.points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:38px;
  border-top:1px solid var(--line);
}

.point{
  padding:22px 22px 0 0;
  border-right:1px solid var(--line);
}

.point:not(:first-child){padding-left:22px}
.point:last-child{
  border-right:0;
  padding-right:0;
}

.point-num{
  color:var(--blue);
  font:700 15px monospace;
}

.point p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.45;
}

/* =========================================================
   HOW IT WORKS
========================================================= */
.how-head{
  max-width:760px;
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:52px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.step{
  min-height:218px;
  padding:28px 24px 24px 0;
  position:relative;
  border-right:1px solid var(--line);
}

.step:not(:first-child){padding-left:24px}
.step:last-child{
  border-right:0;
  padding-right:0;
}

.step-index{
  color:var(--blue);
  font:700 16px monospace;
  margin-bottom:26px;
}

.step h3{
  margin:0;
  font-size:18px;
  letter-spacing:-.025em;
}

.step p{
  margin:11px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}

/* STYLE LOGO BOTCCHAIN */
.built-chain{
  display:flex;
  align-items:center;
  gap:6px;
}

.botchain-logo{
  width:78px;
  height:auto;
  object-fit:contain;
}

/* =========================================================
   FEATURED MACHINE
========================================================= */
.machine-section{
  background:transparent;
}

.featured{
  display:grid;
  grid-template-columns:45% 55%;
  gap:10px;
  align-items:center;
}

.machine-copy h2{
  margin-top:0;
}

.machine-meta{
  color:#68788d;
  font:600 12px/1.6 monospace;
  margin-top:10px;
}

.machine-copy .copy{
  max-width:470px;
}

.machine-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:27px;
  color:var(--blue);
  font-size:14px;
  font-weight:700;
}

.machine-image{
  position:relative;
  min-height:390px;
  border:1px solid #dfe7f1;
  border-radius:24px;
  background:linear-gradient(145deg,#fafdff,#eef5fd);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.machine-image .placeholder-box{
  width:86%;
  height:82%;
  border:1px dashed #cfdbea;
}

.machine-image .real-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
}

.machine-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}

.metric{
  background:#fff;
  border:1px solid #dfe7f1;
  border-radius:14px;
  padding:19px;
  min-height:120px;
}

.metric-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height:100%;
}

.metric-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.metric small{
  color:#7b8a9d;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:9px;
}

.metric strong{
  display:block;
  margin-top:6px;
  font-size:24px;
  letter-spacing:-.04em;
}

/* Mini visual di kanan */
.metric-chart{
  flex-shrink:0;
  width:58px;
  height:38px;
}

/* Performance bars */
.metric-bars{
  height:38px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:3px;
}

.metric-bars i{
  display:block;
  width:5px;
  border-radius:2px 2px 0 0;
  background:#1769ff;
  opacity:.75;
}

/* Revenue sparkline */
.metric-line{
  width:58px;
  height:32px;
  color:#1769ff;
}

/* Revenue share donut */
.metric-pie{
  width:38px;
  height:38px;
  border-radius:50%;
  background:
    conic-gradient(
      #1769ff 0deg 72deg,
      #dce9ff 72deg 360deg
    );
  position:relative;
}

.metric-pie::after{
  content:"";
  position:absolute;
  inset:9px;
  background:#fff;
  border-radius:50%;
}

/* =========================================================
   PROTOCOL
========================================================= */
.protocol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.protocol-card{
  border:1px solid var(--line);
  background:#fff;
  padding:30px;
  border-radius:22px;
  box-shadow:0 18px 50px rgba(34,72,120,.05);
}

.protocol-flow{
  display:grid;
  gap:0;
}

.flow-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
}

.flow-box{
  padding:16px;
  background:var(--surface);
  border:1px solid #e0e8f2;
  border-radius:13px;
}

.flow-label{
  color:#7c899b;
  font:700 9px monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.flow-value{
  margin-top:7px;
  font-weight:760;
}

.arrow{
  color:var(--blue);
  font-size:18px;
}

/* =========================================================
   CTA
========================================================= */
.cta{
  padding:86px 0 105px;
}

.cta-box{
  position:relative;
  overflow:hidden;
  min-height:330px;
  border:1px solid #dce7f5;
  border-radius:28px;
  background:#edf5ff;
  padding:65px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
}

/*
  Replace this placeholder with the future globe image.

  Example:
  <img src="assets/machine-globe.jpg"
       alt="Global machine economy"
       class="cta-globe-image">
*/
.cta-globe-slot{
  position:absolute;
  width:900px;
  height:510px;
  right:-110px;
  top:100px;
  opacity:.25;
}

.cta-globe-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cta-globe-slot .placeholder-box{
  border-radius:50%;
  border:1px dashed #bfd5ef;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.25),rgba(218,232,250,.15) 55%,transparent 70%);
}

.cta-content{
  position:relative;
  z-index:2;
  max-width:760px;
}

.cta h2{
  max-width:760px;
  font-size:47px;
}

.cta-actions{
  display:flex;
  gap:11px;
  margin-top:28px;
}

/* =========================================================
   FOOTER
========================================================= */
footer{
  position:relative;
  overflow:hidden;

  border-top:1px solid #e2e8f0;
  padding:64px 0 24px;

  background:transparent;

  color:var(--ink);
}


.footer-grid{
  display:grid;
  grid-template-columns:4fr 1fr 1fr 1fr;
  gap:10px;
}

.footer-desc{
  max-width:380px;
  margin-top:17px;
  color:var(--muted);
  font-size:15px;
  font-weight: 450;
  line-height:1.55;
}

footer h4{
  margin:0 0 18px;
  color:#7f8b9b;
  font-size:15px;
  font-weight:650;
  text-transform:none;
  letter-spacing:.14em;
}

footer a{
  display:block;
  margin:11px 0;
  color:var(--muted);
  font-size:13px;
  font-weight:450;
}

footer a:hover{color:var(--blue)}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:52px;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:#8a97a8;
  font-size:11px;
}

.footer-network{
  display:flex;
  align-items:center;
  gap:8px;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:1000px){
  .nav-links{display:none}
  .hero,.problem,.featured,.protocol{grid-template-columns:1fr}
  .hero{padding-top:45px}
  .hero-visual{min-height:530px}
  .featured{gap:40px}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:0}
  .step:nth-child(3){border-top:1px solid var(--line)}
  .step:nth-child(4){border-top:1px solid var(--line)}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr;row-gap:34px}
}

@media(max-width:680px){
  .container{width:min(100% - 28px,var(--max))}
  .nav{height:68px}
  .network{display:none}
  .hero{min-height:auto}
  .hero h1{font-size:54px}
  .hero-lead{font-size:16px}
  .hero-visual{min-height:450px;margin-top:25px}
  .hero-image-slot{width:100%}
  .tag-performance{top:55px;left:0}
  .tag-revenue{top:185px;right:0}
  .tag-share{bottom:45px;left:10px}
  .onchain{bottom:20px;right:5px}
  section{padding:78px 0}
  h2,.cta h2{font-size:38px}
  .points,.machine-metrics{grid-template-columns:1fr}
  .point{border-right:0;border-bottom:1px solid var(--line);padding:16px 0}
  .point:not(:first-child){padding-left:0}
  .point:last-child{border-bottom:0}
  .steps{grid-template-columns:1fr}
  .step,.step:not(:first-child){padding:23px 0;border-right:0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .cta-box{padding:42px 28px;display:block}
  .cta-actions{flex-wrap:wrap}
  .cta-globe-slot{right:-200px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > div:first-child{grid-column:1/-1}
  .footer-bottom{display:block}
  .footer-bottom > *{margin-top:10px}
}

/* ================= MVP LAUNCH APP ================= */
.app-screen{display:none;min-height:calc(100vh - 78px);background:#f7faff}
.app-screen.active{display:block}
.app-shell{width:min(1320px,calc(100% - 56px));margin:auto;padding:34px 0 70px}
.app-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.app-kicker{color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.app-title{margin:0;font-size:42px;line-height:1;letter-spacing:-.055em}
.app-subtitle{margin:11px 0 0;color:var(--muted);font-size:15px}
.app-actions{display:flex;gap:10px}
.app-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}
.app-metric{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;min-height:112px}
.app-metric small{display:block;color:#7b8a9d;text-transform:uppercase;letter-spacing:.09em;font-size:9px}
.app-metric strong{display:block;margin-top:9px;font-size:27px;letter-spacing:-.045em}
.app-metric span{display:block;margin-top:5px;color:#8491a3;font-size:11px}
.app-panel{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.app-panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;border-bottom:1px solid var(--line)}
.app-panel-head h3{margin:0;font-size:17px}
.app-panel-head p{margin:5px 0 0;color:var(--muted);font-size:12px}
.machine-table{width:100%;border-collapse:collapse}
.machine-table th{padding:13px 24px;text-align:left;color:#8491a3;font-size:9px;text-transform:uppercase;letter-spacing:.09em;background:#fbfcfe}
.machine-table td{padding:18px 24px;border-top:1px solid #edf1f6;font-size:13px;color:#526178}
.machine-name{color:var(--ink);font-weight:750}
.machine-type{margin-top:4px;color:#8491a3;font:600 10px monospace}
.status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700}
.status-dot{width:7px;height:7px;border-radius:50%;background:#18a873}
.status.open .status-dot{background:var(--blue)}
.table-link{color:var(--blue);font-weight:700;cursor:pointer;white-space:nowrap}
.app-lower{display:grid;grid-template-columns:1.4fr .6fr;gap:12px;margin-top:12px}
.activity{padding:22px 24px}
.activity-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid #edf1f6}
.activity-row:last-child{border-bottom:0}
.activity-main strong{display:block;font-size:13px}.activity-main span{display:block;margin-top:4px;color:#8491a3;font-size:11px}
.activity-value{font-weight:750;white-space:nowrap}
.machine-detail{display:none}.machine-detail.active{display:block}.dashboard-view.hidden{display:none}
.app-back{display:inline-flex;gap:7px;margin-bottom:25px;color:#5c6d84;font-size:12px;font-weight:700;cursor:pointer}
.detail-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:12px}
.detail-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px}
.detail-head{display:flex;justify-content:space-between;gap:20px}
.detail-title{margin:0;font-size:29px;letter-spacing:-.045em}
.detail-meta{margin-top:7px;color:#7d8b9e;font:600 10px monospace}
.detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
.detail-stat{padding:16px;background:#f8faff;border:1px solid #e7edf5;border-radius:12px}
.detail-stat small{color:#8491a3;font-size:8px;text-transform:uppercase}.detail-stat strong{display:block;margin-top:7px;font-size:20px}
.chart-wrap{margin-top:20px;padding:18px;border:1px solid #e7edf5;border-radius:13px}.chart-label{color:#7b8a9d;font-size:9px;text-transform:uppercase}
.fake-chart{width:100%;height:150px;margin-top:12px}
.financing-box{background:#f8faff;border:1px solid #e1e9f3;border-radius:14px;padding:20px}
.financing-box h4{margin:0;font-size:13px}.financing-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #e3eaf3;font-size:12px}.financing-row span{color:#7b8a9d}
.modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(7,19,38,.32);backdrop-filter:blur(7px);align-items:center;justify-content:center;padding:20px}.modal.active{display:flex}
.modal-card{width:min(520px,100%);background:#fff;border:1px solid #dfe7f1;border-radius:20px;box-shadow:0 28px 80px rgba(7,19,38,.18);padding:26px}
.modal-head{display:flex;justify-content:space-between;margin-bottom:22px}.modal-head h3{margin:0;font-size:23px}.modal-head p{margin:7px 0 0;color:var(--muted);font-size:12px}
.modal-close{border:0;background:#f4f7fb;width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-field.full{grid-column:1/-1}.form-field label{display:block;margin-bottom:7px;color:#526178;font-size:10px;font-weight:700;text-transform:uppercase}
.form-field input,.form-field select{width:100%;border:1px solid #dce4ee;border-radius:10px;padding:12px 13px;outline:0;font:inherit;font-size:13px}.modal-submit{width:100%;margin-top:20px}
.toast{position:fixed;right:22px;bottom:22px;z-index:120;background:var(--ink);color:#fff;padding:14px 17px;border-radius:11px;opacity:0;transform:translateY(20px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:900px){.app-metrics{grid-template-columns:1fr 1fr}.app-lower,.detail-grid{grid-template-columns:1fr}.machine-table{min-width:760px}.app-panel{overflow-x:auto}}
@media(max-width:680px){.app-shell{width:calc(100% - 28px)}.app-top{display:block}.app-actions{margin-top:18px}.app-title{font-size:34px}.form-grid,.detail-stats{grid-template-columns:1fr}.form-field.full{grid-column:auto}}


/* ================= MACHINECREDIT MVP — DISCOVER APP ================= */
.app-screen{
  display:none;
  min-height:calc(100vh - 78px);
  background:#f7faff;
}
.app-screen.active{display:block}

.app-shell{
  width:min(1320px,calc(100% - 56px));
  margin:0 auto;
  padding:34px 0 80px;
}

.app-main{min-width:0}

.app-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:26px;
}
.app-welcome small{
  color:var(--blue);
  font-size:10px;
  font-weight:800;
  letter-spacing:.19em;
  text-transform:uppercase;
}
.app-welcome h1{
  margin:10px 0 0;
  font-size:42px;
  line-height:1.02;
  letter-spacing:-.055em;
}
.app-welcome p{
  margin:10px 0 0;
  color:#65748b;
  font-size:15px;
}

.app-hero{
  position:relative;
  overflow:hidden;
  min-height:280px;
  border:1px solid #dfe9f5;
  border-radius:22px;
  background:linear-gradient(110deg,#fbfdff 0%,#eef6ff 58%,#e6f1ff 100%);
  padding:38px 42px;
  display:flex;
  align-items:center;
  margin-bottom:18px;
}
.app-hero-copy{
  position:relative;
  z-index:2;
  max-width:610px;
}
.app-hero-copy h2{
  margin:0;
  font-size:39px;
  line-height:1.04;
  letter-spacing:-.055em;
}
.app-hero-copy p{
  max-width:560px;
  margin:14px 0 22px;
  color:#65748b;
  font-size:15px;
  line-height:1.6;
}
.app-globe{
  position:absolute;
  right:-65px;
  top:-90px;
  width:650px;
  height:440px;
  object-fit:contain;
  opacity:.78;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.app-hero-float{
  position:absolute;
  z-index:3;
  right:34px;
  bottom:27px;
  width:205px;
  padding:15px 17px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(220,231,244,.95);
  border-radius:14px;
  box-shadow:0 15px 45px rgba(39,76,126,.08);
  backdrop-filter:blur(10px);
}
.app-hero-float small{display:block;color:#78879b;font-size:10px}
.app-hero-float strong{display:block;margin-top:6px;font-size:17px}
.app-float-line{
  height:1px;
  background:#dce7f3;
  margin-top:13px;
  position:relative;
}
.app-float-line:after{
  content:"";
  position:absolute;
  left:15%;
  top:-4px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1769ff;
  box-shadow:0 0 0 5px #e3efff;
}

.app-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:34px;
}
.app-stat{
  background:#fff;
  border:1px solid #e1e9f3;
  border-radius:15px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:15px;
}
.app-stat-icon{
  width:43px;
  height:43px;
  border-radius:50%;
  background:#edf5ff;
  color:#1769ff;
  display:grid;
  place-items:center;
  font-size:19px;
}
.app-stat small{
  display:block;
  color:#77869b;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.app-stat strong{
  display:block;
  margin-top:5px;
  font-size:23px;
  letter-spacing:-.04em;
}
.app-stat-arrow{margin-left:auto;color:#8795a7;font-size:18px}

.discover-market-layout{
  display:grid;
  grid-template-columns:67% 29%;
  gap:4%;
  align-items:start;
}

.catalog-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.catalog-head h2{
  margin:0;
  font-size:29px;
  letter-spacing:-.04em;
}
.catalog-head p{
  margin:7px 0 0;
  color:#65748b;
  font-size:13px;
}
.catalog-link{
  color:#1769ff;
  font-size:13px;
  font-weight:700;
}

.machine-catalog{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.machine-card{
  background:#fff;
  border:1px solid #e0e8f2;
  border-radius:17px;
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.machine-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 45px rgba(36,73,120,.09);
}
.machine-photo{
  height:210px;
  position:relative;
  overflow:hidden;
  background:#eef5fc;
}
.machine-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.machine-status{
  position:absolute;
  left:13px;
  top:13px;
  padding:7px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(220,231,244,.9);
  font-size:9px;
  font-weight:750;
  color:#4f6279;
}
.machine-status .status-dot{display:inline-block;margin-right:5px}
.machine-card-body{padding:16px}
.machine-card-title{
  font-size:16px;
  font-weight:780;
  letter-spacing:-.025em;
}
.machine-card-type{
  margin-top:4px;
  color:#7d8b9e;
  font:600 9px monospace;
  text-transform:uppercase;
}
.machine-card-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:16px;
  border-top:1px solid #edf1f6;
  padding-top:14px;
}
.machine-card-metric{
  padding-right:8px;
  border-right:1px solid #edf1f6;
}
.machine-card-metric:not(:first-child){padding-left:11px}
.machine-card-metric:last-child{border-right:0}
.machine-card-metric strong{
  display:block;
  font-size:16px;
  letter-spacing:-.025em;
}
.machine-card-metric span{
  display:block;
  margin-top:4px;
  color:#8592a4;
  font-size:9px;
  line-height:1.25;
}
.machine-card-button{
  width:100%;
  margin-top:16px;
  border:1px solid #e0e7f0;
  background:#fff;
  border-radius:10px;
  padding:11px;
  color:#13223a;
  font-weight:720;
  font-size:12px;
  cursor:pointer;
}
.machine-card-button:hover{background:#f7faff}

.app-section-panel{
  margin-top:28px;
  background:#fff;
  border:1px solid #e0e8f2;
  border-radius:17px;
  overflow:hidden;
}
.app-section-panel .app-panel-head{padding:20px 22px}

/* App top navigation */
.app-nav-right{
  display:none;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
body.app-mode .landing-nav-right{display:none}
body.app-mode .app-nav-right{display:flex}

.landing-nav-right{
  display:flex;
  align-items:center;
  margin-left:auto;
}

.app-nav-links{
  display:flex;
  align-items:center;
  gap:4px;
  margin-right:10px;
}
.app-nav-link{
  border:0;
  background:transparent;
  color:#607089;
  padding:9px 11px;
  border-radius:9px;
  font:600 12px inherit;
  cursor:pointer;
}
.app-nav-link:hover,
.app-nav-link.active{
  color:#1769ff;
  background:#edf5ff;
}
.app-search{
  width:190px;
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px solid #dfe7f1;
  background:#f8fbff;
  border-radius:10px;
  color:#8795a7;
}
.app-search span{font-size:15px}
.app-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#1a2a42;
  font:500 12px inherit;
}
.app-search input::placeholder{color:#9aa7b8}

.site-wallet-btn{
  border:0;
  background:#071326;
  color:#fff;
  border-radius:10px;
  min-height:42px;
  padding:0 16px;
  font-weight:720;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
}
.site-wallet-btn img{width:16px;height:16px;object-fit:contain;filter:brightness(0) invert(1)}
.site-profile{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#eef3f9;
  display:grid;
  place-items:center;
  color:#64738a;
  font-size:12px;
  font-weight:800;
}
.app-notification{
  width:38px;
  height:38px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#64738a;
  font-size:17px;
  cursor:pointer;
}
.app-notification:hover{background:#f1f5fa}

@media(max-width:1120px){
  .app-nav-links{gap:0;margin-right:2px}
  .app-nav-link{padding:8px 7px}
  .app-search{width:150px}
  .machine-catalog{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .app-search{display:none}
}
@media(max-width:760px){
  .app-shell{width:calc(100% - 28px);padding-top:24px}
  .app-welcome h1{font-size:34px}
  .app-hero{padding:30px 25px;min-height:340px}
  .app-hero-copy h2{font-size:34px}
  .app-globe{width:520px;right:-210px;top:-45px;opacity:.55}
  .app-hero-float{right:20px;bottom:20px}
  .app-stats{grid-template-columns:1fr}
  .machine-catalog{grid-template-columns:1fr}
  .app-nav-link:nth-child(2){display:none}
  .app-nav-link{padding:8px 6px;font-size:11px}
}

/* =========================================================
   MACHINECREDIT APP
   ========================================================= */
.app-page{
  background:#f7faff;
  color:var(--ink);
  min-height:100vh;
}

.app-nav{
  position:sticky;
  top:0;
  z-index:50;
  height:72px;
  background:f7faff;
  backdrop-filter:blur(18px);
}

.app-nav-inner{
  width:min(1380px,calc(100% - 48px));
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:26px;
}

.app-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:780;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.app-brand .brand-logo{
  width:32px;
  height:32px;
}

.app-tabs{
  display:flex;
  align-items:center;
  gap:3px;
  margin-left:25px;
}

.app-tab{
  border:0;
  background:transparent;
  color:#65748b;
  padding:9px 12px;
  border-radius:9px;
  font:600 12px inherit;
  cursor:pointer;

  transition:
    color 0.3s ease,
    background 0.3s ease;
}

.app-tab:hover,
.app-tab.active{
  color:var(--blue);
  background:#edf5ff;
}

.app-nav-spacer{flex:1}

.app-search{
  width:205px;
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px solid #dfe7f1;
  background:#f8fbff;
  border-radius:10px;
  color:#8795a7;
}

.app-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:500 12px inherit;
}

.app-icon-btn{
  width:38px;
  height:38px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#64738a;
  cursor:pointer;
  font-size:17px;
}

.app-icon-btn:hover{background:#f1f5fa}

.app-network{
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#526178;
  font-size:11px;
  white-space:nowrap;
}

.app-wallet{
  height:40px;
  border:0;
  border-radius:10px;
  padding:0 14px;
  background:var(--ink);
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:720;
  cursor:pointer;
}

.app-wallet img{
  width:16px;
  height:16px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.app-main{
  width:min(1380px,calc(100% - 48px));
  margin:0 auto;
  padding:15px 0 80px;
}

.app-view{display:none}
.app-view.active{display:block}

.app-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  margin-bottom:26px;
}

.app-kicker{
  color:var(--blue);
  font-size:10px;
  font-weight:800;
  letter-spacing:.19em;
  text-transform:uppercase;
}

.app-page-head h1{
  margin:9px 0 0;
  font-size:42px;
  line-height:1;
  letter-spacing:-.055em;
}

.app-page-head p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:18px;
}

.app-head-actions{
  display:flex;
  gap:9px;
}

.app-hero{
  position:relative;
  overflow:hidden;
  min-height:270px;
  border:1px solid #dfe9f5;
  border-radius:22px;
  background:linear-gradient(110deg,#fbfdff 0%,#eef6ff 58%,#e6f1ff 100%);
  padding:38px 42px;
  display:flex;
  align-items:center;
  margin-bottom:16px;
}

.app-hero-copy{
  position:relative;
  z-index:2;
  max-width:620px;
}

.app-hero-copy h2{
  margin:0;
  font-size:39px;
  line-height:1.04;
  letter-spacing:-.055em;
}

.app-hero-copy p{
  max-width:570px;
  margin:14px 0 22px;
  color:#65748b;
  font-size:15px;
  line-height:1.6;
}

.app-globe{
  position:absolute;
  right:-75px;
  top:-90px;
  width:650px;
  height:440px;
  object-fit:contain;
  opacity:.72;
  pointer-events:none;
  mix-blend-mode:multiply;
}

.app-hero-float{
  position:absolute;
  z-index:3;
  right:30px;
  bottom:25px;
  width:205px;
  padding:15px 17px;
  background:rgba(255,255,255,.92);
  border:1px solid #dce7f4;
  border-radius:14px;
  box-shadow:0 15px 45px rgba(39,76,126,.08);
}

.app-hero-float small{display:block;color:#78879b;font-size:10px}
.app-hero-float strong{display:block;margin-top:6px;font-size:17px}
.float-line{height:1px;background:#dce7f3;margin-top:13px;position:relative}
.float-line:after{
  content:"";
  position:absolute;
  left:15%;
  top:-4px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 5px #e3efff;
}

.app-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:34px;
}

.app-stat{
  background:#fff;
  border:1px solid #e1e9f3;
  border-radius:15px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:15px;
}

.app-stat-icon{
  width:43px;
  height:43px;
  border-radius:50%;
  background:#edf5ff;
  color:var(--blue);
  display:grid;
  place-items:center;
  font-size:18px;
}

.app-stat small{
  display:block;
  color:#77869b;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.app-stat strong{
  display:block;
  margin-top:5px;
  font-size:23px;
  letter-spacing:-.04em;
}

.catalog-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}

.catalog-head h2{
  margin:0;
  font-size:29px;
  letter-spacing:-.04em;
}

.catalog-head p{
  margin:7px 0 0;
  color:#65748b;
  font-size:13px;
}

.catalog-tools{
  display:flex;
  align-items:center;
  gap:8px;
}

.filter-btn{
  border:1px solid #dfe7f1;
  background:#fff;
  color:#65748b;
  padding:9px 12px;
  border-radius:9px;
  font-size:11px;
  cursor:pointer;
}

.filter-btn.active,
.filter-btn:hover{
  color:var(--blue);
  border-color:#cfe0f8;
  background:#f3f8ff;
}

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

.machine-card{
  background:#fff;
  border:1px solid #e0e8f2;
  border-radius:17px;
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}

.machine-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 45px rgba(36,73,120,.09);
}

.machine-photo{
  height:210px;
  position:relative;
  overflow:hidden;
  background:#eef5fc;
}

.machine-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.machine-status{
  position:absolute;
  left:13px;
  top:13px;
  padding:7px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(220,231,244,.9);
  font-size:9px;
  font-weight:750;
  color:#4f6279;
}

.machine-status .status-dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:5px;
  background:#94a3b8;
}

.machine-card-body{padding:16px}
.machine-card-title{font-size:16px;font-weight:780;letter-spacing:-.025em}
.machine-card-type{
  margin-top:4px;
  color:#7d8b9e;
  font:600 9px monospace;
  text-transform:uppercase;
}

.machine-card-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:16px;
  border-top:1px solid #edf1f6;
  padding-top:14px;
}

.machine-card-metric{
  padding-right:8px;
  border-right:1px solid #edf1f6;
}

.machine-card-metric:not(:first-child){padding-left:11px}
.machine-card-metric:last-child{border-right:0}
.machine-card-metric strong{display:block;font-size:16px}
.machine-card-metric span{display:block;margin-top:4px;color:#8592a4;font-size:9px}

.machine-card-button{
  width:100%;
  margin-top:16px;
  border:1px solid #e0e7f0;
  background:#fff;
  border-radius:10px;
  padding:11px;
  color:#13223a;
  font-weight:720;
  font-size:12px;
  cursor:pointer;
}

.machine-card-button:hover{background:#f7faff}

.app-panel{
  margin-top:0px;
  background:#fff;
  border:1px solid #e0e8f2;
  border-radius:17px;
  overflow:hidden;
}

/* Recent Activity — fixed card */
.discover-market-layout > .app-panel{
  position:sticky;
  top:92px;
  height:490px;
  overflow:hidden;
}

.app-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 22px;
  border-bottom:1px solid var(--line);
}

.app-panel-head h3{margin:0;font-size:16px}
.app-panel-head p{margin:5px 0 0;color:var(--muted);font-size:11px}

.activity{
  padding:0 22px;
  height:calc(606px - 82px);
  overflow-y:auto;
}



.activity-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 0;
  border-bottom:1px solid #edf1f6;
}
.activity-row:last-child{border-bottom:0}
.activity-main strong{display:block;font-size:12px}
.activity-main span{display:block;margin-top:4px;color:#8491a3;font-size:10px}
.activity-value{font-weight:750;font-size:12px;white-space:nowrap}

.detail-layout{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:14px;
  align-items:start;
}

.detail-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:25px;
}

.back-link{
  display:inline-flex;
  gap:7px;
  margin-bottom:20px;
  color:#5c6d84;
  font-size:12px;
  font-weight:700;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
}

.detail-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.detail-title{margin:0;font-size:30px;letter-spacing:-.045em}
.detail-meta{margin-top:7px;color:#7d8b9e;font:600 10px monospace}

.detail-badge{
  padding:7px 10px;
  border-radius:999px;
  background:#edf8f3;
  color:#18835d;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

.detail-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-top:24px;
}

.detail-stat{
  padding:15px;
  background:#f8faff;
  border:1px solid #e7edf5;
  border-radius:12px;
}

.detail-stat small{
  color:#8491a3;
  font-size:8px;
  text-transform:uppercase;
}

.detail-stat strong{
  display:block;
  margin-top:7px;
  font-size:19px;
}

.chart-wrap{
  margin-top:20px;
  padding:18px;
  border:1px solid #e7edf5;
  border-radius:13px;
}

.chart-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.chart-label{color:#7b8a9d;font-size:9px;text-transform:uppercase}
.chart-badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;background:#fff4e0;color:#b26a00;font-size:8px;font-weight:700;letter-spacing:.04em;vertical-align:middle;cursor:help}
.chart-value{font-size:12px;font-weight:750}
.fake-chart{width:100%;height:170px;margin-top:12px}

.financing-box{
  background:#f8faff;
  border:1px solid #e1e9f3;
  border-radius:14px;
  padding:20px;
}

.financing-box h4{margin:0;font-size:13px}
.financing-copy{margin:8px 0 15px;color:#718096;font-size:11px;line-height:1.5}
.financing-row{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid #e3eaf3;
  font-size:12px;
}
.financing-row span{color:#7b8a9d}

.verify-box{
  margin-top:12px;
  padding:16px;
  border:1px solid #e0e8f2;
  border-radius:13px;
  background:#fff;
}

.verify-box small{
  display:block;
  color:#8491a3;
  text-transform:uppercase;
  font-size:8px;
  letter-spacing:.08em;
}

.verify-box strong{
  display:block;
  margin-top:6px;
  font-size:12px;
}

.verify-box code{
  display:block;
  margin-top:7px;
  color:#64738a;
  font:500 9px monospace;
  word-break:break-all;
}

.portfolio-summary{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr .8fr;
  gap:12px;
  margin-bottom:25px;
}

.portfolio-value{
  background:var(--ink);
  color:#fff;
  border-radius:17px;
  padding:21px;
}

.portfolio-value small,
.portfolio-stat small{
  display:block;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.portfolio-value strong{
  display:block;
  margin-top:8px;
  font-size:27px;
  letter-spacing:-.045em;
}

.portfolio-value span{
  display:block;
  margin-top:6px;
  color:#9ba8b8;
  font-size:10px;
}

.portfolio-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:17px;
  padding:21px;
}

.portfolio-stat small{color:#8491a3}
.portfolio-stat strong{
  display:block;
  margin-top:8px;
  font-size:21px;
}

.position-table{
  width:100%;
  border-collapse:collapse;
}

.position-table th{
  padding:13px 22px;
  text-align:left;
  color:#8491a3;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:#fbfcfe;
}

.position-table td{
  padding:17px 22px;
  border-top:1px solid #edf1f6;
  font-size:12px;
}

.position-name{font-weight:750}
.position-sub{display:block;margin-top:4px;color:#8795a7;font-size:9px}

.positive{color:#16865d;font-weight:750}
.negative{color:#dc2626;font-weight:750}

.launch-layout{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:14px;
}

.form-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:25px;
}

.form-card h2{font-size:27px}
.form-card p{color:var(--muted);font-size:13px;line-height:1.55}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:22px;
}

.form-field.full{grid-column:1/-1}
.form-field label{
  display:block;
  margin-bottom:7px;
  color:#526178;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.form-field input,
.form-field select{
  width:100%;
  border:1px solid #dce4ee;
  border-radius:10px;
  padding:12px 13px;
  outline:0;
  font:inherit;
  font-size:12px;
  background:#fff;
}

.form-field input:focus,
.form-field select:focus{border-color:#9fc3f7;box-shadow:0 0 0 3px #edf5ff}

.launch-info{
  background:#eef6ff;
  border:1px solid #dbe9f8;
  border-radius:18px;
  padding:25px;
}

.launch-info h3{margin:0;font-size:17px}
.launch-info p{color:#65748b;font-size:12px;line-height:1.6}
.launch-steps{margin-top:22px}
.launch-step{
  display:flex;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid #dbe7f5;
}
.launch-step:last-child{border-bottom:0}
.launch-number{
  width:26px;
  height:26px;
  flex:0 0 26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--blue);
  font-size:10px;
  font-weight:800;
}
.launch-step strong{display:block;font-size:11px}
.launch-step span{display:block;margin-top:3px;color:#718096;font-size:10px;line-height:1.4}

.app-nav-inner {
  position: relative;
}

.notification-panel {
  position: absolute;
  top: 70px;
  right: 25px;

  width: 330px;
  z-index: 1000;

  display: none;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(7,19,38,.16);
  overflow: hidden;
}

.notification-panel.active {
  display: block;
}

.notification-head{padding:17px 18px;border-bottom:1px solid var(--line);font-weight:750;font-size:13px}
.notification-item{padding:14px 18px;border-bottom:1px solid #edf1f6}
.notification-item:last-child{border-bottom:0}
.notification-item strong{display:block;font-size:11px}
.notification-item span{display:block;margin-top:4px;color:#8491a3;font-size:10px;line-height:1.4}

.toast{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:120;
  background:var(--ink);
  color:#fff;
  padding:14px 17px;
  border-radius:11px;
  opacity:0;
  transform:translateY(20px);
  pointer-events:auto;
  transition:.25s;
  font-size:12px;
  box-shadow:0 15px 40px rgba(7,19,38,.2);
}

.toast a {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:1120px){
  .app-search{width:160px}
  .app-network{display:none}
  .machine-catalog{grid-template-columns:1fr 1fr}
  .portfolio-summary{grid-template-columns:1fr 1fr}
}

@media(max-width:900px){
  .app-tabs{margin-left:5px}
  .app-search{display:none}
  .detail-layout,.launch-layout{grid-template-columns:1fr}
  .detail-stats{grid-template-columns:1fr 1fr}
}

@media(max-width:700px){
  .app-nav{height:auto;min-height:68px}
  .app-nav-inner{width:calc(100% - 28px);padding:12px 0;flex-wrap:wrap;gap:8px}
  .app-tabs{order:3;width:100%;overflow:auto;margin:0}
  .app-tab{white-space:nowrap}
  .app-main{width:calc(100% - 28px);padding-top:24px}
  .app-page-head{display:block}
  .app-head-actions{margin-top:16px}
  .app-page-head h1{font-size:34px}
  .app-hero{padding:30px 25px;min-height:340px}
  .app-hero-copy h2{font-size:34px}
  .app-globe{width:520px;right:-210px;top:-45px;opacity:.5}
  .app-hero-float{right:18px;bottom:18px}
  .app-stats,.machine-catalog,.portfolio-summary{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-field.full{grid-column:auto}
  .detail-stats{grid-template-columns:1fr 1fr}
  .position-table{min-width:720px}
  .app-panel{overflow-x:auto}
  .notification-panel{right:14px;left:14px;width:auto}
}

/* =========================================================
   MACHINECREDIT — FINAL DISCOVER LAYOUT FIXES
   Keep existing design; only fix consistency + responsive behavior.
   ========================================================= */

/* Recent Activity height matches its parent card */
.discover-market-layout > .app-panel{
  height:490px;
}

.activity{
  height:calc(490px - 69px);
  overflow-y:auto;
}

/* Keep the catalog/filter header stable */
.catalog-head{
  min-width:0;
}

.catalog-tools{
  flex-shrink:0;
}

/* Tablet */
@media(max-width:900px){
  .discover-market-layout{
    grid-template-columns:1fr;
    gap:24px;
  }

  .discover-market-layout > .app-panel{
    position:static;
    height:auto;
  }

  .activity{
    height:auto;
    max-height:400px;
  }
}

/* Small screens */
@media(max-width:760px){
  .catalog-head{
    display:block;
  }

  .catalog-tools{
    margin-top:14px;
    flex-wrap:wrap;
  }

  .filter-btn{
    padding:9px 11px;
  }
}

/* Very small screens */
@media(max-width:480px){
  .catalog-tools{
    gap:6px;
  }

  .filter-btn{
    font-size:10px;
    padding:8px 10px;
  }

  .machine-photo{
    height:190px;
  }
}

/* =========================================================
   MACHINECREDIT — SMOOTH NAVBAR MORPH
   ========================================================= */

#landingNavbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  padding-top: 18px;

  border: none !important;
  background: transparent;
  backdrop-filter: none;

  transition:
    padding-top 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   NAV INNER
   ========================================================= */

#landingNavbar .nav-inner {
  /*
   * NORMAL STATE
   * Lebar sama dengan area content/hero.
   */
  width: min(var(--max), calc(100% - 72px));
  max-width: none;

  height: 64px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0;

  border-radius: 0;

  position: relative;
  isolation: isolate;

  background: transparent;
  border: none;
  box-shadow: none;

  /*
   * Smooth morph (shape/layout only —
   * blur layer lives in ::before below)
   */
  transition:
    width 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

#landingNavbar .nav-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  border-radius: inherit;

  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transform: translateZ(0);
  will-change: backdrop-filter;

  transition:
    border-color 0.9s ease,
    box-shadow 0.9s ease;
}


/* =========================
   SCROLLED
   ========================= */

#landingNavbar.scrolled .nav-inner {
  /*
   * Hanya width yang berubah.
   * max-width TIDAK ikut berubah.
   */
  width: min(1040px, calc(100% - 32px));

  height: 60px;

  margin-left: auto;
  margin-right: auto;

  padding-left: 18px;
  padding-right: 10px;

  border-radius: 999px;
}

#landingNavbar.scrolled .nav-inner::before {
  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(17, 24, 39, 0.09);

  box-shadow:
    0 12px 35px rgba(15, 23, 42, 0.08),
    0 3px 10px rgba(15, 23, 42, 0.04);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transform: translateZ(0);
  will-change: backdrop-filter;
}

/* =========================================================
   REMOVE DIVIDER
   ========================================================= */

#landingNavbar,
#landingNavbar .nav-inner {
  border-top: none !important;
  border-bottom: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  #landingNavbar {
    padding-top: 12px;
  }

  #landingNavbar .nav-inner {
    width: calc(100% - 28px);
    max-width: none;
  }

  #landingNavbar.scrolled .nav-inner {
    width: calc(100% - 24px);

    height: 56px;

    padding-left: 14px;
    padding-right: 8px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  #landingNavbar {
    padding-top: 12px;
  }

  #landingNavbar .nav-inner {
    width: calc(100% - 28px);
  }

  #landingNavbar.scrolled .nav-inner {
    width: calc(100% - 24px);

    height: 56px;

    padding-left: 14px;
    padding-right: 8px;
  }

}

/* =========================================
   SCROLL REVEAL
   ========================================= */

.reveal {
  opacity: 0;
  transform: translateY(90px);
  transition:
    opacity 1.5s ease,
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   MACHINE IMAGE UPLOAD
   ========================================= */

.machine-upload {
  width: 100%;
  margin-bottom: 30px;
}


.upload-box {
  width: 100%;
  min-height: 150px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease;
}

.upload-box:hover {
  border-color: #1769ff;
  background: #f5f8ff;
}

.upload-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 10px;

  background: #eaf2ff;
  color: #1769ff;

  font-size: 20px;
  font-weight: 700;
}

.upload-box strong {
  color: #0b1730;
  font-size: 15px;
  font-weight: 600;
}

.upload-box span {
  margin-top: 5px;
  color: #8a97a8;
  font-size: 12px;
}

.upload-box.has-image {
  padding: 12px;
  border-style: solid;
  border-color: #1769ff;
  background: #fff;
}

.upload-preview-thumb {
  width: 100%;
  max-height: 130px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 8px;
}

.upload-box.has-image strong {
  color: #1769ff;
  font-size: 12px;
}

.upload-box.has-image span {
  margin-top: 3px;
}

.app-icon-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.investment-form {
  margin-top: 18px;
}

.investment-form label {
  display: block;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.investment-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  outline: none;
  font-size: 15px;
  background: #fff;
}

.investment-form input:focus {
  border-color: #1769ff;
  box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.08);
}

.investment-form .btn {
  width: 100%;
}

/* =========================
   FUNDING PROGRESS
   ========================= */

.funding-progress {
  margin: 14px 0 20px;
}

.funding-progress-track {
  width: 100%;
  height: 7px;
  background: #e8eef7;
  border-radius: 999px;
  overflow: hidden;
}

.funding-progress-bar {
  width: 0%;
  height: 100%;
  background: #1769ff;
  border-radius: 999px;
  transition: width 0.6s ease;
}

.funding-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: #7b8798;
  font-size: 11px;
  line-height: 1.4;
}

.funding-progress-meta span:last-child {
  text-align: right;
}

.revenue-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.claim-revenue-btn {
  border: 1px solid #dbe4f0;
  background: #f8fafc;
  color: #1769ff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.claim-revenue-btn:hover {
  background: #eef5ff;
  border-color: #1769ff;
  transform: translateY(-1px);
}

/* =========================================================
   REVENUE SETTLEMENT
   ========================================================= */

.revenue-settlement {
  margin-top: 28px;
  padding: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.04);
}

.revenue-settlement-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid #edf1f6;
}

.revenue-settlement-head .app-kicker {
  margin-bottom: 9px;
}

.revenue-settlement-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #081226;
}

.revenue-settlement-head p {
  max-width: 650px;
  margin: 10px 0 0;
  color: #7b8798;
  font-size: 14px;
  line-height: 1.6;
}

.settlement-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #64748b;
  background: #fafbfc;
  font-size: 12px;
  font-weight: 600;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.10);
}

.settlement-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.5fr;
  align-items: center;
  gap: 28px;
  padding-top: 28px;
}

.settlement-machine,
.settlement-share {
  min-height: 82px;
  padding-right: 28px;
  border-right: 1px solid #edf1f6;
}

.machine-label {
  margin-bottom: 9px;
  color: #8a97a8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settlement-machine strong {
  display: block;
  margin-bottom: 4px;
  color: #0b172d;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.settlement-machine-select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #dce4ee;
  border-radius: 11px;
  outline: none;
  background: #ffffff;
  color: #0b172d;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settlement-machine-select:focus {
  border-color: #1769ff;
  box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.08);
}

.settlement-machine span {
  color: #7b8798;
  font-size: 13px;
}

.split-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.split-value strong {
  color: #0b172d;
  font-size: 21px;
  letter-spacing: -0.03em;
}

.split-value span {
  color: #7b8798;
  font-size: 12px;
  margin-right: 8px;
}

.settlement-action label {
  display: block;
  margin-bottom: 9px;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.settlement-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settlement-input {
  position: relative;
  flex: 1;
}

.settlement-input input {
  width: 100%;
  height: 44px;
  padding: 0 58px 0 14px;
  border: 1px solid #dce4ee;
  border-radius: 11px;
  outline: none;
  background: #ffffff;
  color: #0b172d;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.settlement-input input:focus {
  border-color: #1769ff;
  box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.08);
}

.settlement-input span {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #8a97a8;
  font-size: 11px;
  font-weight: 700;
}

.settlement-action .btn {
  height: 44px;
  padding: 0 18px;
  white-space: nowrap;
  font-size: 13px;
}

@media (max-width: 1000px) {
  .settlement-content {
    grid-template-columns: 1fr 1fr;
  }

  .settlement-action {
    grid-column: 1 / -1;
  }

  .settlement-machine,
  .settlement-share {
    border-right: 0;
  }
}

@media (max-width: 700px) {
  .revenue-settlement {
    padding: 24px;
  }

  .revenue-settlement-head {
    display: block;
  }

  .settlement-status {
    margin-top: 18px;
  }

  .settlement-content {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .settlement-action {
    grid-column: auto;
  }

  .settlement-machine,
  .settlement-share {
    min-height: auto;
    padding-right: 0;
    border-right: 0;
  }

  .settlement-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settlement-action .btn {
    width: 100%;
  }
}

/* =========================================================
   ROLE SELECTION MODAL
   ========================================================= */

.role-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 24px;
}

.role-modal.active {
  display: flex;
}


.role-modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(10, 20, 35, 0.38);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


.role-modal-card {
  position: relative;
  z-index: 1;

  width: min(520px, 100%);

  padding: 34px;

  border: 1px solid rgba(255,255,255,.8);

  border-radius: 24px;

  background: rgba(255,255,255,.96);

  box-shadow:
    0 30px 80px rgba(15, 35, 60, .18);

  animation:
    roleModalIn .35s cubic-bezier(.22,1,.36,1);
}


@keyframes roleModalIn {

  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

}


.role-modal-icon {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: #1677ff;

  color: white;

  font-size: 20px;
  font-weight: 800;

  margin-bottom: 22px;
}


.role-modal-kicker {
  margin-bottom: 8px;

  color: #7f8b9b;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .14em;
}


.role-modal-card h2 {
  margin: 0;

  color: #071426;

  font-size: 28px;
  line-height: 1.15;

  letter-spacing: -.03em;
}


.role-modal-card > p {
  margin: 12px 0 26px;

  color: #7b8797;

  font-size: 14px;
  line-height: 1.6;
}


.role-options {
  display: grid;
  gap: 12px;
}


.role-option {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 17px;

  border: 1px solid #e3e9f1;

  border-radius: 16px;

  background: #fff;

  text-align: left;

  cursor: pointer;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.role-option:hover {
  transform: translateY(-2px);

  border-color: #b9cce8;

  background: #fbfdff;

  box-shadow:
    0 12px 30px rgba(20, 50, 90, .08);
}


.role-option-icon {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: #f1f6fd;

  font-size: 20px;
}


.role-option-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.role-option-content strong {
  color: #0b1728;

  font-size: 14px;
}


.role-option-content span {
  color: #8490a0;

  font-size: 12px;

  line-height: 1.45;
}


.role-arrow {
  color: #8b98a9;

  font-size: 18px;

  transition:
    transform .2s ease;
}


.role-option:hover .role-arrow {
  transform: translateX(3px);

  color: #1677ff;
}


@media (max-width: 520px) {

  .role-modal-card {
    padding: 26px;
  }

  .role-modal-card h2 {
    font-size: 24px;
  }

}

.machine-status.fully-funded {
  color: #16a34a;
}

.machine-status.fully-funded .status-dot {
  background: #22c55e;
}

.machine-status.defaulted {
  color: #dc2626;
}

.machine-status.defaulted .status-dot {
  background: #ef4444;
}

.machine-loading-state,
.machine-error-state {
  width: 100%;
  min-height: 260px;

  grid-column: 1 / -1;
  justify-self: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  border: none;
  border-radius: 0;
  background: transparent;

  text-align: center;
}

.machine-loading-state strong,
.machine-error-state strong {
  font-size: 16px;
  color: #172033;
}

.machine-loading-state span,
.machine-error-state > span {
  font-size: 13px;
  color: #7b8798;
}

.machine-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #dbe4f0;
  border-top-color: #1769ff;
  border-radius: 50%;
  animation: machine-loading-spin 0.8s linear infinite;
  margin-bottom: 4px;
}

@keyframes machine-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.machine-retry-button {
  margin-top: 10px;
  padding: 9px 16px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  background: #fff;
  color: #172033;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.machine-retry-button:hover {
  background: #f5f8fc;
}

.onchain-verification {
  padding: 17px;
  background: #fbfdff;
}

.verify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.verify-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #18835d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.verify-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}

.verify-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-top: 1px solid #e8eef5;
}

.verify-row:first-of-type {
  border-top: 0;
}

.verify-row > span {
  color: #8491a3;
  font-size: 10px;
}

.verify-row code {
  margin: 0;
  color: #34465d;
  font-size: 9px;
  text-align: right;
}

.verify-explorer-link {
  display: inline-flex;
  margin-top: 12px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 750;
}

.verify-explorer-link:hover {
  text-decoration: underline;
}

/* =========================================
   INVEST BUTTON — FULLY FUNDED STATE
   ========================================= */

.btn:disabled,
.btn-disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn:disabled:hover,
.btn-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

.investment-form input:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}