/* tanso.markets — Global Carbon Market Dashboard */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --deep-space:#1a1a2e;
  --ocean-blue:#16213e;
  --coral:#ff6b35;
  --gold:#ffd166;
  --ember:#e55a2b;
  --teal:#06d6a0;
  --mist:#8d99ae;
  --light:#f8f9fa;
}

html{scroll-behavior:smooth}

body{
  background:var(--deep-space);
  color:var(--light);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}

.hidden-svg{position:absolute;width:0;height:0;overflow:hidden}

.mono{font-family:'Space Mono',monospace}
.label{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;font-size:0.7rem}
.accent{color:var(--coral)}
.muted{color:var(--mist);font-size:0.75rem}
.positive{color:var(--teal)}
.negative{color:var(--ember)}

/* Background atmospheric layer */
.bg-layer{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 120% 60% at 50% 120%, rgba(229,90,43,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 20% 80%, rgba(255,107,53,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 80% 90%, rgba(255,209,102,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
}

/* Header */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2rem;
  border-bottom:1px solid rgba(141,153,174,0.15);
  backdrop-filter:blur(6px);
  background:rgba(22,33,62,0.6);
  position:sticky;top:0;z-index:100;
}

.header-left{display:flex;align-items:center;gap:0.75rem}
.logo-text{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.2rem;color:var(--light)}
.logo-dot{color:var(--coral)}

.header-center{display:flex;align-items:center;gap:0.5rem}
.status-indicator{
  width:8px;height:8px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 6px var(--teal);
  animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.4}}
.status-text{font-size:0.7rem;letter-spacing:0.15em;color:var(--mist)}

.header-right .utc-clock{font-size:0.8rem;color:var(--gold)}

/* Hero */
.hero{
  padding:4rem 2rem 3rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;
  max-width:1200px;margin:0 auto;
}
.hero-title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:3rem;line-height:1.1}
.hero-subtitle{color:var(--mist);max-width:480px;margin-top:1rem;font-size:0.95rem}

.hero-stats{display:flex;gap:2rem}
.stat-block{
  background:rgba(22,33,62,0.7);
  backdrop-filter:blur(6px);
  border:1px solid rgba(141,153,174,0.15);
  border-radius:8px;padding:1.25rem 1.5rem;
  text-align:center;
}
.stat-value{font-size:1.6rem;display:block;color:var(--light)}
.stat-label{display:block;margin-top:0.4rem;color:var(--mist);font-size:0.6rem}

/* Fish Dividers */
.fish-divider{
  position:relative;height:60px;overflow:hidden;
  display:flex;align-items:center;
}
.fish{
  position:absolute;
  width:40px;height:20px;
  background:var(--teal);
  opacity:0.08;
  clip-path:polygon(0% 50%, 25% 0%, 75% 0%, 100% 30%, 100% 70%, 75% 100%, 25% 100%, 0% 50%, 10% 50%);
  animation:swim 12s linear infinite;
}
.fish-1{top:10px;left:-50px;animation-delay:0s}
.fish-2{top:30px;left:-50px;animation-delay:3s;width:30px;height:15px}
.fish-3{top:20px;left:-50px;animation-delay:6s;width:35px;height:18px}
.fish-4{top:15px;left:-50px;animation-delay:1s;width:45px;height:22px}
.fish-5{top:35px;left:-50px;animation-delay:5s}
.fish-6{top:8px;left:-50px;animation-delay:0.5s;width:32px;height:16px}
.fish-7{top:28px;left:-50px;animation-delay:4s;width:38px;height:19px}
.fish-8{top:42px;left:-50px;animation-delay:7s}

@keyframes swim{
  0%{transform:translateX(-60px)}
  100%{transform:translateX(calc(100vw + 60px))}
}

/* Section Titles */
.section-title{
  text-align:center;margin-bottom:2rem;color:var(--mist);font-size:0.75rem;letter-spacing:0.2em;
}

/* Market Cards */
.markets-section{padding:3rem 2rem;max-width:1200px;margin:0 auto}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.5rem;
}

.card-container{
  perspective:1000px;
  height:200px;
}
.card{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform 0.6s ease;
}
.card-container:hover .card{transform:rotateY(180deg)}

.card-front,.card-back{
  position:absolute;inset:0;
  backface-visibility:hidden;
  background:rgba(22,33,62,0.7);
  backdrop-filter:blur(6px);
  border:1px solid rgba(141,153,174,0.15);
  border-radius:10px;
  padding:1.5rem;
  display:flex;flex-direction:column;justify-content:center;
}
.card-back{transform:rotateY(180deg)}

.card-market-name{color:var(--gold);margin-bottom:0.75rem;font-size:0.8rem}
.card-price{font-size:2rem;color:var(--light);margin-bottom:0.25rem}
.card-change{font-size:1rem}

.card-detail-label{color:var(--mist);margin-bottom:0.15rem;font-size:0.6rem}
.card-detail-value{color:var(--light);font-size:0.85rem;margin-bottom:0.6rem}

.sparkline{
  height:24px;width:100%;
  margin-top:auto;
  position:relative;
  overflow:hidden;
}
.sparkline canvas{width:100%;height:100%}

/* Isometric Section */
.iso-section{padding:3rem 2rem;max-width:1200px;margin:0 auto}

.iso-display{
  display:flex;justify-content:center;gap:4rem;
  padding:2rem 0;
}

.iso-cluster{position:relative;width:60px;height:160px}

.iso-block{
  position:absolute;
  width:50px;height:50px;
  bottom:calc(var(--stack) * 35px);
  left:0;
  transform:rotateX(55deg) rotateZ(45deg);
  transform-style:preserve-3d;
  background:var(--gold);
  transition:transform 0.3s ease;
}
.iso-block::before{
  content:'';position:absolute;
  left:-20px;bottom:-20px;
  width:50px;height:20px;
  background:var(--coral);
  transform:skewY(40deg);
  transform-origin:top right;
}
.iso-block::after{
  content:'';position:absolute;
  right:-20px;bottom:-20px;
  width:20px;height:50px;
  background:var(--ember);
  transform:skewX(50deg);
  transform-origin:top left;
}

.iso-legend{
  display:flex;justify-content:center;gap:2rem;margin-top:2rem;
}
.legend-item{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:var(--mist)}
.legend-color{width:12px;height:12px;border-radius:2px}

/* Data Panels */
.data-panel-section{padding:3rem 2rem;max-width:900px;margin:0 auto}

.data-panels{display:flex;flex-direction:column;gap:1.25rem}

.data-panel{
  background:rgba(22,33,62,0.7);
  backdrop-filter:blur(6px);
  border:1px solid rgba(141,153,174,0.15);
  border-radius:8px;
  padding:1.25rem 1.5rem;
}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.6rem}
.panel-bar{
  height:4px;background:rgba(141,153,174,0.15);border-radius:2px;overflow:hidden;
}
.panel-bar-fill{
  height:100%;width:var(--fill);
  background:linear-gradient(90deg,var(--coral),var(--gold));
  border-radius:2px;
  transition:width 1s ease;
}
.panel-detail{color:var(--mist);font-size:0.75rem;margin-top:0.5rem}

/* Footer */
.footer{
  border-top:1px solid rgba(141,153,174,0.15);
  padding:1.5rem 2rem;margin-top:3rem;
}
.footer-content{
  display:flex;justify-content:space-between;align-items:center;
  max-width:1200px;margin:0 auto;
  font-size:0.8rem;color:var(--mist);
}

/* Logo isometric block small */
.logo-mark{width:20px;height:20px;position:relative}
.iso-block-small{
  width:16px;height:16px;
  background:var(--gold);
  transform:rotateX(55deg) rotateZ(45deg);
}

/* Responsive */
@media(max-width:768px){
  .hero{flex-direction:column;padding:2rem 1.5rem}
  .hero-title{font-size:2rem}
  .hero-stats{flex-direction:column;gap:1rem}
  .header{padding:0.75rem 1rem}
  .header-center{display:none}
  .cards-grid{grid-template-columns:1fr}
  .iso-display{gap:2rem}
  .footer-content{flex-direction:column;gap:0.5rem;text-align:center}
}