:root{
  --bg:#070810;
  --bg2:#0c0e1c;
  --panel:#111427;
  --text:#f8f9ff;
  --muted:#aeb3c9;
  --purple:#8b5cf6;
  --violet:#c084fc;
  --cyan:#31d8ff;
  --blue:#4f8cff;
  --pink:#ff68c7;
  --green:#55e6a5;
  --gold:#ffd166;
  --orange:#ff9e59;
  --line:rgba(255,255,255,.10);
  --radius:22px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 10% 0%,rgba(139,92,246,.13),transparent 25%),
    radial-gradient(circle at 92% 13%,rgba(49,216,255,.11),transparent 23%),
    linear-gradient(180deg,#070810,#0a0b15 45%,#070810);
  color:var(--text);
}
.wrap{max-width:1180px;margin:auto;padding:0 20px}
header{position:sticky;top:0;z-index:10;background:rgba(7,8,16,.76);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{height:74px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:.08em}
.brand img{width:43px;height:43px;border-radius:50%;object-fit:contain;box-shadow:0 0 28px rgba(49,216,255,.20)}
.btn{border:0;border-radius:14px;padding:12px 18px;font-weight:800;cursor:pointer}
.primary{background:linear-gradient(90deg,var(--purple),var(--pink) 46%,var(--cyan));color:#fff;box-shadow:0 12px 32px rgba(139,92,246,.22)}
.dark{background:rgba(255,255,255,.055);color:#fff;border:1px solid rgba(255,255,255,.12)}
.disabled{background:rgba(255,255,255,.05);color:#777f98;border:1px solid rgba(255,255,255,.08);cursor:not-allowed}
.hero{text-align:center;padding:64px 0 36px}
.eyebrow{display:inline-block;padding:7px 11px;border-radius:999px;border:1px solid rgba(49,216,255,.25);color:var(--cyan);font-size:12px;font-weight:950;letter-spacing:.16em}
h1{font-size:clamp(40px,6vw,72px);line-height:.98;margin:18px 0;letter-spacing:-.04em}
.hero p{max-width:760px;margin:auto;color:var(--muted);font-size:18px;line-height:1.7}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.stat,.card{background:linear-gradient(180deg,rgba(18,20,39,.96),rgba(10,11,23,.92));border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.stat{padding:21px;text-align:left}
.stat small,.muted{color:var(--muted)}
.stat strong{display:block;font-size:28px;margin-top:6px}
.section{padding:30px 0}
.section h2{font-size:30px;margin:0 0 6px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:18px}
.layout{display:grid;grid-template-columns:1.35fr .85fr;gap:16px}
.card{padding:22px}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pill{font-size:11px;font-weight:900;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);color:#d5d8e8}
.reward-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
.mini{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:16px}
.mini strong{font-size:22px}
.note{margin-top:14px;padding:14px 16px;border-radius:14px;background:linear-gradient(90deg,rgba(139,92,246,.10),rgba(49,216,255,.07));border:1px solid rgba(255,255,255,.10);color:#d5d8e8;font-size:14px;line-height:1.6}
.staking-preview{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.staking-preview .wallet-card,.staking-preview .nft-stake-card,.staking-preview .staked-card{grid-column:span 1}
.preview-stats{grid-column:span 1;display:grid;grid-template-columns:1fr;gap:12px;margin:0}
.preview-button{opacity:.72}
.wallet-card p{max-width:510px;margin:12px 0 18px}
.nft-number-label{display:block;margin-top:18px;margin-bottom:7px;color:#d5d8e8;font-size:13px;font-weight:700}
.nft-number-row{display:flex;gap:10px}
.nft-number-input{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#0b0d18;color:var(--text);padding:12px 14px;font:inherit}
.nft-preview-tile{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:14px;margin-top:18px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.035)}
.nft-preview-art{width:58px;height:58px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,var(--purple),var(--cyan));font-size:28px;font-weight:950}
.nft-preview-tile h4{margin:6px 0 1px;font-size:16px}
.nft-preview-tile p{margin:0;font-size:12px}
.status-available{font-size:12px;color:var(--green);font-weight:800}
.empty-state{display:flex;align-items:center;gap:12px;margin-top:18px;padding:16px;border:1px dashed rgba(255,255,255,.16);border-radius:16px;color:var(--muted)}
.empty-state span{font-size:28px;color:var(--cyan)}
.empty-state p{margin:0;font-size:14px}
.reward-actions{display:flex;gap:10px;margin-top:16px}
.preview-disclaimer{margin-top:18px;text-align:center}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 8px;border-bottom:1px solid #222a37;text-align:left}
th:last-child,td:last-child{text-align:right}
th{font-size:12px;color:#7f8ba0;text-transform:uppercase}
.nft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nft{background:linear-gradient(180deg,rgba(18,20,39,.96),rgba(10,11,23,.92));border:1px solid var(--line);border-radius:20px;overflow:hidden}
.art{aspect-ratio:1/1;display:grid;place-items:center;font-size:72px;background:radial-gradient(circle at 38% 28%,rgba(49,216,255,.18),transparent 38%),linear-gradient(135deg,rgba(139,92,246,.18),rgba(255,104,199,.10)),repeating-linear-gradient(45deg,#111427 0 20px,#0b0d18 20px 40px)}
.nft-body{padding:16px}
.nft h3{margin:12px 0 4px}
.nft p{margin:0;color:var(--muted)}
footer{text-align:center;color:#7d8798;padding:42px 20px 56px;font-size:13px}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}.layout,.staking-preview{grid-template-columns:1fr}.nft-grid{grid-template-columns:repeat(2,1fr)}.preview-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.grid4,.nft-grid,.preview-stats{grid-template-columns:1fr}.reward-grid{grid-template-columns:1fr}.nft-preview-tile{grid-template-columns:52px 1fr}.nft-preview-tile .preview-button{grid-column:1 / -1;width:100%}.nft-number-row{flex-direction:column}}

/* --- Typography polish v6 --- */
body{
  font-size:16px;
  line-height:1.5;
  letter-spacing:0;
}
.hero p{
  font-size:17px;
  line-height:1.65;
}
.section h2{
  font-size:28px;
  line-height:1.2;
  letter-spacing:-0.02em;
}
.muted{
  font-size:14px;
  line-height:1.5;
}
.stat small{
  display:block;
  font-size:14px;
  line-height:1.35;
  font-weight:650;
  margin-bottom:12px;
}
.stat strong{
  font-size:26px;
  line-height:1.15;
  margin-top:0;
}
.mini{
  padding:18px 18px 17px;
  min-height:104px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mini small{
  display:block;
  margin:0 0 14px 0;
  font-size:15px;
  line-height:1.35;
  font-weight:700;
  color:#aab3c2;
}
.mini strong{
  display:block;
  margin:0;
  font-size:19px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-0.01em;
}
.card h3{
  font-size:20px;
  line-height:1.25;
}
table{
  font-size:14px;
}
th{
  font-size:11.5px;
  letter-spacing:.07em;
}
td{
  font-size:14px;
}
.nft h3{
  font-size:19px;
  line-height:1.25;
}
.nft p{
  font-size:14px;
  line-height:1.45;
}
.pill{
  font-size:11px;
  line-height:1;
}
.btn{
  font-size:14px;
  line-height:1.2;
}
.note{
  font-size:14px;
  line-height:1.6;
}


/* --- Action color polish v7 --- */
:root{
  --teal:var(--cyan);
  --teal-soft:rgba(49,216,255,.10);
  --teal-line:rgba(49,216,255,.42);
}
.btn-details{
  background:linear-gradient(180deg,rgba(49,216,255,.10),rgba(49,216,255,.05));
  color:#eafcff;
  border:1px solid var(--teal-line);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
}
.btn-details:hover{
  background:linear-gradient(180deg,rgba(49,216,255,.16),rgba(49,216,255,.08));
  border-color:rgba(49,216,255,.62);
}
.status-staked{
  color:var(--green);
}
.status-available{
  color:#f0c85f;
}


/* --- Full visual alignment with main KINDO site v10 --- */
.wrap{
  max-width:1440px;
  margin:auto;
  padding-left:7vw;
  padding-right:7vw;
}
.nav{
  height:76px;
}
.brand{
  gap:10px;
  font-weight:950;
  letter-spacing:.11em;
}
.btn{
  padding:14px 21px;
  border-radius:14px;
  font-weight:900;
  border:1px solid transparent;
  transition:.2s ease;
}
.btn:hover{
  transform:translateY(-1px);
}
.hero{
  padding:78px 7vw 56px;
}
.eyebrow{
  margin:0 0 14px;
  padding:0;
  border:0;
  border-radius:0;
  font-size:.77rem;
  letter-spacing:.23em;
  font-weight:950;
  color:var(--cyan);
}
h1,h2{
  letter-spacing:-.05em;
  line-height:.95;
}
h1{
  font-size:clamp(3.6rem,8vw,7rem);
  margin:.15em 0;
}
.hero p{
  max-width:730px;
  margin:22px auto 0;
  color:#d5d8e8;
  font-size:1.15rem;
  line-height:1.6;
}
.grid4{
  gap:18px;
  margin-top:44px;
}
.stat{
  min-height:160px;
  padding:26px;
  border-radius:24px;
  position:relative;
  overflow:hidden;
}
.stat:before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  right:-65px;
  top:-75px;
  background:radial-gradient(circle,rgba(49,216,255,.18),rgba(139,92,246,.10) 48%,transparent 70%);
}
.stat small{
  position:relative;
  z-index:1;
  display:block;
  margin:0 0 10px;
  color:#9aa0ba;
  font-size:.75rem;
  letter-spacing:.12em;
  font-weight:950;
  text-transform:uppercase;
}
.stat strong{
  position:relative;
  z-index:1;
  display:block;
  margin:0 0 6px;
  font-size:clamp(2.1rem,3vw,3.15rem);
  line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(90deg,#fff,var(--cyan),var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.stat .muted{
  position:relative;
  z-index:1;
  font-size:.82rem;
}
.section{
  max-width:1440px;
  margin:auto;
  padding:92px 7vw;
}
.section-head{
  margin-bottom:34px;
  align-items:end;
}
.section h2{
  font-size:clamp(2.6rem,5vw,5.3rem);
  line-height:.95;
  letter-spacing:-.05em;
}
.section-head .muted{
  color:var(--muted);
  font-size:1.02rem;
}
.layout{
  gap:18px;
}
.card{
  padding:27px;
  border-radius:24px;
}
.card h3{
  font-size:1.35rem;
  margin:0;
}
.reward-grid{
  gap:18px;
  margin:24px 0;
}
.mini{
  min-height:118px;
  padding:22px;
  border-radius:17px;
}
.mini small{
  margin:0 0 12px;
  color:#9aa0ba;
  font-size:.72rem;
  letter-spacing:.12em;
  font-weight:950;
  text-transform:uppercase;
}
.mini strong{
  font-size:1.42rem;
  line-height:1.15;
  font-weight:900;
  color:#fff;
}
.note{
  margin-top:18px;
  padding:16px 18px;
  border-radius:17px;
}
.pill{
  padding:7px 10px;
  font-size:.68rem;
  letter-spacing:.08em;
  font-weight:950;
}
table{
  margin-top:12px;
}
th{
  padding:13px 8px;
  font-size:.68rem;
  letter-spacing:.13em;
  color:#858aa3;
}
td{
  padding:13px 8px;
  font-size:.94rem;
}
.nft-grid{
  gap:18px;
}
.nft{
  border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:.22s;
}
.nft:hover{
  transform:translateY(-4px);
  border-color:rgba(49,216,255,.28);
}
.art{
  background:
    radial-gradient(circle at 38% 28%,rgba(49,216,255,.18),transparent 38%),
    radial-gradient(circle at 72% 76%,rgba(255,104,199,.12),transparent 34%),
    linear-gradient(135deg,rgba(139,92,246,.18),rgba(255,104,199,.08)),
    #0c0e1c;
}
.nft-body{
  padding:20px;
}
.nft h3{
  margin:14px 0 5px;
  font-size:1.28rem;
}
.nft p{
  color:var(--muted);
  font-size:.92rem;
}
.nft .btn{
  margin-top:16px !important;
}
.btn-details{
  background:rgba(255,255,255,.055);
  color:#fff;
  border-color:rgba(49,216,255,.34);
  box-shadow:none;
}
.btn-details:hover{
  background:rgba(49,216,255,.10);
  border-color:rgba(49,216,255,.55);
}
.status-staked{
  color:var(--green);
}
.status-available{
  color:var(--gold);
}
footer{
  padding:30px 5vw;
  color:#8f94aa;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.88rem;
}
@media(max-width:900px){
  .wrap{padding-left:5vw;padding-right:5vw}
  .hero{padding-left:5vw;padding-right:5vw}
  .section{padding-left:5vw;padding-right:5vw}
}



a{color:inherit;text-decoration:none}
.brand:focus-visible,a.btn:focus-visible,nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}
.nav{height:auto;min-height:76px;gap:20px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.nav nav{display:flex;gap:20px;font-size:14px;flex-wrap:wrap}
.nav nav a:hover{color:var(--cyan)}
.launch-status{display:inline-block;margin:20px 0 0;padding:8px 14px;border:1px solid rgba(49,216,255,.3);border-radius:999px;color:var(--cyan);font-weight:700}
.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;justify-content:center;align-items:center;min-height:48px;text-align:center}
.btn:disabled{transform:none;box-shadow:none}
.mini strong{display:block;margin-top:8px;font-size:20px}
.launch-list{padding-left:20px;color:var(--muted);line-height:1.8}
.nft img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.section-head{align-items:center;flex-wrap:wrap}
.preview-note{max-width:740px;line-height:1.6}
h1 span{color:var(--cyan)}
@media(max-width:560px){.nav{justify-content:center}.nav nav{justify-content:center;gap:16px}.hero{padding-top:45px}.hero h1{font-size:clamp(2.6rem,12vw,4rem)}.card{padding:20px}.row{flex-wrap:wrap}.stat strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}