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

:root{
  --bg:#1a1a1a;
  --panel:#ffffff;
  --panel2:#f5f5f5;
  --text:#000000;
  --muted:#666666;
  --line:#000000;
  --shadow:none;
  --radius:5px;

  --tide:#39C6FF;
  --bloom:#52E6A6;
  --frost:#B9D7FF;
  --storm:#A78BFA;
  --magma:#FF6B4A;
  --abyss:#3A4BFF;
  --chrome:#D7DCE8;

  --max:1300px;
}

html{scroll-behavior:smooth}
body{
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color:var(--text);
  line-height:1.45;
}

a{color:inherit; text-decoration:none}
.container{width:80%; max-width:none; margin:0 auto; padding:0 30px}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  background: #fff;
  border-bottom:2px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
  font-family: 'Bahiana', sans-serif;
  color: var(--text);
  font-size: 32px;
}
.brand-badge{
  width:34px; height:34px; border-radius:5px;
  background: #00142d;
  border:2px solid var(--line);
}
.brand-logo{
  height:60px;
  width:auto;
  object-fit:contain;
  display:block;
}
.nav-links{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:20px; color:var(--text);
  font-family: 'Fredoka', sans-serif;
}
.nav-links a{padding:8px 10px; border-radius:5px; color: var(--text);}
.nav-links a:hover{background:#f5f5f5; color:var(--text)}
.nav-cta{
  display:flex; gap:10px; align-items:center;
  flex-wrap:wrap;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:18px 36px;
  border-radius:5px;
  border:2px solid var(--line);
  background: #fff;
  color:var(--text);
  font-weight:400;
  font-size:30px;
  font-family: 'Bahiana', sans-serif;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor:pointer;
  text-transform: uppercase;
  text-decoration: none;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn:active{
  transform: translateY(0);
}
.btn.primary{
  border:2px solid var(--line);
  background: #553BC7;
  color: #fff;
}
.btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Sections */
section{padding:80px 0; width:100%}
section#about{background: #E6E6FA; border: 5px solid var(--line);}
section#eggs{background: #FFD700; border: 5px solid var(--line); border-top: none;}
section#supply{background: #A1AFFC; border: 5px solid var(--line); border-top: none;}
section#mutation{background: #FFB6C1; border: 5px solid var(--line); border-top: none;}
section#timeline{background: #98D8C8; border: 5px solid var(--line); border-top: none;}
section#whyhold{background: #E6E6FA; border: 5px solid var(--line); border-top: none;}
section#roadmap{background: #FFD700; border: 5px solid var(--line); border-top: none;}
section#xrpl{background: #A1AFFC; border: 5px solid var(--line); border-top: none;}
section > .section-head,
section > .two-col,
section > .eggs,
section > .supply,
section > .how,
section > .timeline,
section > .why,
section > .roadmap,
section > .xrpl,
section > .panel {width:80%; max-width:none; margin-left:auto; margin-right:auto; padding-left:30px; padding-right:30px; box-sizing:border-box}
.section-head{margin-bottom:18px}
.kicker{
  display:inline-flex; gap:8px; align-items:center;
  font-size:24px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text);
  font-family: 'Bahiana', sans-serif;
}
.h2{font-size:42px; margin:10px 0 0 0; font-family: 'Fredoka', sans-serif; font-weight: 800; color: var(--text);}
.p{color:var(--text); margin:10px 0 0 0; max-width:70ch; font-family: 'Fredoka', sans-serif; font-size: 28px; line-height: 1.5;}

/* Hero */
.hero{padding:70px 0 36px 0;}
@media (max-width: 768px){
  .hero{padding:40px 0 24px 0;}
}
@media (max-width: 520px){
  .hero{padding:30px 0 20px 0;}
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap:22px; align-items:stretch;
  background: #A1AFFC; 
  border: 5px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-sizing: border-box;
}
.hero-card{
  border-radius:var(--radius);
  border:2px solid var(--line);
  background: #fff;
  padding:26px;
  min-height: 320px;
}
.h1{font-size:64px; margin:6px 0 0 0; line-height:1.05; font-family: 'Fredoka', sans-serif; font-weight: 800; color: var(--text);}
.sub{font-size:32px; color:var(--text); margin:12px 0 0 0; font-family: 'Fredoka', sans-serif;}
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.pill{
  font-size:20px; color:var(--text);
  padding:12px 16px; border-radius:999px;
  background: #fff;
  border:2px solid var(--line);
  font-family: 'Fredoka', sans-serif;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.note{margin-top:12px; font-size:20px; color:var(--text); font-family: 'Fredoka', sans-serif;}
.muted-link{color:#00142d; font-family: 'Fredoka', sans-serif;}
.muted-link:hover{text-decoration:underline}

.hero-side{
  border-radius:var(--radius);
  border:2px solid var(--line);
  background: #fff;
  padding:22px;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height: 320px;
}
.mini-title{font-weight:700; font-size:24px; letter-spacing:.02em; font-family: 'Fredoka', sans-serif; color: var(--text);}
.divider{height:2px; background:var(--line); margin:16px 0}
.mini-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
@media (max-width: 520px){
  .mini-grid{grid-template-columns:1fr}
}
.mini{
  border:2px solid var(--line);
  border-radius:5px;
  padding:12px;
  background: #f5f5f5;
}
.mini b{display:block; font-size:32px; font-family: 'Fredoka', sans-serif; color: var(--text); font-weight: 800;}
.mini span{display:block; font-size:20px; color:var(--text); margin-top:6px; font-family: 'Fredoka', sans-serif;}
.egg-images-grid{
  display:grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap:10px;
  margin-top:10px;
}
.egg-image{
  width:100%;
  height:auto;
  object-fit:contain;
  border:2px solid var(--line);
  border-radius:5px;
  background: #fff;
  padding:8px;
  box-sizing:border-box;
}
@media (max-width: 768px){
  .egg-images-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px){
  .egg-images-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Cards / Panels */
.panel{
  border-radius:var(--radius);
  border:2px solid var(--line);
  background: #fff;
  padding:20px;
}

/* What is */
.two-col{display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:stretch}
.steps{
  display:flex; flex-direction:column; gap:12px;
}
.step{
  display:flex; gap:12px; align-items:flex-start;
  border:2px solid var(--line);
  border-radius:5px;
  padding:12px;
  background: #fff;
}
.dot{
  width:10px; height:10px; border-radius:999px; margin-top:6px;
  background: #00142d;
  flex:0 0 auto;
}
.step p{margin:0; color:var(--text); font-size:22px; font-family: 'Fredoka', sans-serif;}
.silhouette{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
  align-items:stretch;
}
@media (max-width: 768px){
  .silhouette{grid-template-columns:1fr}
}
.silo{
  border-radius:5px;
  border:2px solid var(--line);
  background: #fff;
  padding:14px;
  min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-start;
  align-items:center;
}
.silo .tag{font-size:20px; color:var(--text); font-family: 'Fredoka', sans-serif;}
.silo .shape{
  height:46px;
  border-radius:5px;
  background: #f5f5f5;
  border:2px solid var(--line);
}
.silo-image{
  width:100%;
  height:auto;
  max-height:220px;
  object-fit:contain;
  border-radius:5px;
  background: transparent;
  padding:8px;
  box-sizing:border-box;
  margin-top:12px;
  flex:1;
}

/* Eggs grid */
.eggs{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:12px;
  margin-top:18px;
}
.egg{
  border-radius:5px;
  border:2px solid var(--line);
  background: #fff;
  padding:12px;
  min-height:110px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.egg .top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.egg .name{font-weight:800; font-family: 'Fredoka', sans-serif; color: var(--text); font-size: 24px;}
.swatch{
  width:14px; height:14px; border-radius:4px;
  border:2px solid var(--line);
  background: #f5f5f5;
}
.egg small{color:var(--text); display:block; margin-top:8px; font-family: 'Fredoka', sans-serif; font-size: 18px;}
.egg.tide .swatch{background: var(--tide)}
.egg.bloom .swatch{background: var(--bloom)}
.egg.frost .swatch{background: var(--frost)}
.egg.storm .swatch{background: var(--storm)}
.egg.magma .swatch{background: var(--magma)}
.egg.abyss .swatch{background: var(--abyss)}
.egg.chrome .swatch{background: var(--chrome)}

/* Supply bars */
.supply{
  display:grid; grid-template-columns: 1fr; gap:12px; margin-top:18px;
}
.bar{
  border-radius:5px;
  border:2px solid var(--line);
  background: #fff;
  padding:12px;
}
.bar-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:24px;
  font-family: 'Fredoka', sans-serif;
}
.bar-head b{color:var(--text); font-weight: 800; font-size: 24px;}
.bar-head span{color:var(--text); font-size:20px; font-family: 'Fredoka', sans-serif;}
.track{
  height:10px; border-radius:999px;
  background: #f5f5f5;
  border:2px solid var(--line);
  overflow:hidden;
  margin-top:10px;
}
.fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: var(--tide);
}
.fill.bloom{background: var(--bloom)}
.fill.frost{background: var(--frost)}
.fill.storm{background: var(--storm)}
.fill.magma{background: var(--magma)}
.fill.abyss{background: var(--abyss)}
.fill.chrome{background: var(--chrome)}

/* How it works */
.how{
  display:grid; grid-template-columns: 1fr; gap:14px; margin-top:18px;
}
.flow{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.flow-item{
  border-radius:5px;
  border:2px solid var(--line);
  background: #fff;
  padding:14px;
  min-height:110px;
}
.flow-item b{display:block; font-family: 'Fredoka', sans-serif; font-weight: 800; color: var(--text); font-size: 28px;}
.flow-item p{margin:8px 0 0 0; color:var(--text); font-size:22px; font-family: 'Fredoka', sans-serif;}

/* Timeline */
.timeline{
  margin-top:18px;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:12px;
}
.phase{
  border-radius:5px;
  border:2px solid var(--line);
  background: #fff;
  padding:14px;
  min-height:140px;
}
.phase b{display:block; font-family: 'Fredoka', sans-serif; font-weight: 800; color: var(--text); font-size: 28px;}
.phase small{font-family: 'Fredoka', sans-serif; color: var(--text); font-size: 20px;}
.phase ul{margin:10px 0 0 16px; padding:0; color:var(--text); font-size:22px; font-family: 'Fredoka', sans-serif;}
.phase li{margin:6px 0}

/* Why hold */
.why{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap:12px;
  margin-top:18px;
}
.why .tile{
  border-radius:5px;
  border:2px solid var(--line);
  background: #fff;
  padding:14px;
  min-height:120px;
}
.tile b{display:block; font-family: 'Fredoka', sans-serif; font-weight: 800; color: var(--text); font-size: 28px;}
.tile p{margin:8px 0 0 0; color:var(--text); font-size:22px; font-family: 'Fredoka', sans-serif;}

/* Roadmap */
.roadmap{
  margin-top:18px;
  display:grid; grid-template-columns: 1fr; gap:10px;
}
.rm{
  border-radius:5px;
  border:2px solid var(--line);
  background: #fff;
  padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap;
}
.rm b{font-family: 'Fredoka', sans-serif; font-weight: 800; color: var(--text); font-size: 28px;}
.rm small{color:var(--text); font-family: 'Fredoka', sans-serif; font-size: 20px;}
.badge{
  font-size:20px;
  padding:8px 14px;
  border-radius:999px;
  border:2px solid var(--line);
  background: #f5f5f5;
  color:var(--text);
  font-family: 'Fredoka', sans-serif;
}
.badge.active{color:#fff; background: #00142d; border-color: #00142d;}

/* XRPL */
.xrpl{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:18px;
}
.xrpl .panel b{font-family: 'Fredoka', sans-serif; font-weight: 800; color: var(--text); font-size: 28px;}
.xrpl .panel p{font-family: 'Fredoka', sans-serif; color: var(--text); font-size: 22px;}

/* Footer */
footer{
  padding:40px 20px;
  border-top:5px solid var(--line);
  background: #00142d;
}
.foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  color:#fff;
  font-size:24px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}
.social{display:flex; gap:30px; flex-wrap:wrap}
.social a{
  padding:10px 20px; 
  border-radius:8px; 
  border:2px solid #fff; 
  background: transparent;
  color: #fff;
  font-family: 'Bahiana', sans-serif;
  font-size: 32px;
  font-weight: 400;
  transition: transform 0.2s, color 0.2s, border-color 0.2s;
}
.social a:hover{
  transform: translateY(-2px);
  color: #FFD700;
  border-color: #FFD700;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .eggs{grid-template-columns: repeat(2, 1fr)}
  .flow{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .why{grid-template-columns:1fr 1fr}
  .xrpl{grid-template-columns:1fr}
  .h1{font-size:40px}
}
@media (max-width: 768px){
  .container{width:95%; padding:0 16px}
  section > .section-head,
  section > .two-col,
  section > .eggs,
  section > .supply,
  section > .how,
  section > .timeline,
  section > .why,
  section > .roadmap,
  section > .xrpl,
  section > .panel {width:95%; padding-left:16px; padding-right:16px}
  .btn{font-size:20px; padding:12px 20px}
  .nav-cta{flex-direction:column; width:100%}
  .nav-cta .btn{width:100%; text-align:center}
  .hero-grid{padding:20px}
  .hero-card{padding:20px; min-height:auto}
  .hero-side{padding:18px; min-height:auto}
  .h1{font-size:36px}
  .h2{font-size:32px}
  .p{font-size:22px}
  .sub{font-size:24px}
  .kicker{font-size:18px}
  .pill{font-size:16px; padding:8px 12px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .note{font-size:18px}
  .mini-title{font-size:20px}
  .mini b{font-size:24px}
  .mini span{font-size:16px}
  .step p{font-size:18px}
  .egg .name{font-size:20px}
  .egg small{font-size:16px}
  .bar-head b{font-size:20px}
  .bar-head span{font-size:18px}
  .flow-item b{font-size:22px}
  .flow-item p{font-size:18px}
  .phase b{font-size:22px}
  .phase ul{font-size:18px}
  .tile b{font-size:22px}
  .tile p{font-size:18px}
  .rm b{font-size:22px}
  .rm small{font-size:18px}
  .xrpl .panel b{font-size:22px}
  .xrpl .panel p{font-size:18px}
  .foot{font-size:18px; flex-direction:column; align-items:flex-start}
  .social{flex-direction:column; width:100%}
  .social a{width:100%; text-align:center; font-size:24px; padding:12px 16px}
}
@media (max-width: 520px){
  section{padding:40px 0}
  .container{width:100%; padding:0 12px}
  section > .section-head,
  section > .two-col,
  section > .eggs,
  section > .supply,
  section > .how,
  section > .timeline,
  section > .why,
  section > .roadmap,
  section > .xrpl,
  section > .panel {width:100%; padding-left:12px; padding-right:12px}
  .h1{font-size:28px}
  .h2{font-size:24px}
  .p{font-size:18px}
  .sub{font-size:20px}
  .kicker{font-size:16px}
  .btn{font-size:18px; padding:10px 16px}
  .nav-links{display:none}
  .nav-inner{flex-wrap:wrap}
  .brand{font-size:24px}
  .brand-logo{height:40px}
  .hero-grid{padding:16px}
  .hero-card{padding:16px}
  .hero-side{padding:14px}
  .pill{font-size:14px; padding:6px 10px}
  .flow{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .eggs{grid-template-columns:1fr}
  .step p{font-size:16px}
  .egg .name{font-size:18px}
  .egg small{font-size:14px}
  .bar-head b{font-size:18px}
  .bar-head span{font-size:16px}
  .flow-item b{font-size:20px}
  .flow-item p{font-size:16px}
  .phase b{font-size:20px}
  .phase ul{font-size:16px}
  .tile b{font-size:20px}
  .tile p{font-size:16px}
  .rm b{font-size:20px}
  .rm small{font-size:16px}
  .xrpl .panel b{font-size:20px}
  .xrpl .panel p{font-size:16px}
  .foot{font-size:16px}
  .social a{font-size:20px; padding:10px 14px}
}