:root{
  --bg:#f7f7f4;
  --card:#fff;
  --text:#171717;
  --muted:#737373;
  --line:#e7e7e2;
  --dark:#111;
  --green:#15945a;
  --red:#d84b4b;
  --shadow:0 20px 60px rgba(0,0,0,.07);
  --radius:22px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  transition:.3s;
}

button,
input,
select{
  font:inherit;
}

button{
  border:0;
  cursor:pointer;
}

.nav{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5%;
  border-bottom:1px solid var(--line);
  background:rgba(247,247,244,.88);
  backdrop-filter:blur(18px);
  position:sticky;
  top:0;
  z-index:20;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  font-size:18px;
}

.brand-mark{
  width:34px;
  height:34px;
  border-radius:11px;
  background:#111;
  color:white;
  display:grid;
  place-items:center;
  transition:.25s;
}

.brand:hover .brand-mark{
  transform:rotate(-8deg) scale(1.08);
}

.nav nav{
  display:flex;
  gap:5px;
}

.nav nav button,
.text-btn{
  background:transparent;
  color:#555;
  padding:10px 13px;
  border-radius:10px;
}

.nav nav button:hover,
.text-btn:hover{
  background:#e9e9e5;
  color:#111;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.muted{
  color:var(--muted);
  font-size:13px;
}

.icon-btn{
  width:40px;
  height:40px;
  border-radius:12px;
  background:#ededE9;
}

.btn{
  border-radius:13px;
  padding:12px 17px;
  font-weight:700;
  transition:.2s;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.btn-dark,
.btn-primary{
  background:#111;
  color:#fff;
}

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

.full{
  width:100%;
}

.page{
  display:none;
  max-width:1200px;
  margin:auto;
  padding:70px 5%;
}

.page.active{
  display:block;
  animation:fade .4s ease;
}

@keyframes fade{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.hero{
  min-height:650px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:center;
}

.eyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:1.6px;
  color:#777;
}

.hero h1{
  font-size:clamp(52px,7vw,88px);
  line-height:.94;
  letter-spacing:-5px;
  margin:20px 0;
}

.hero h1 span{
  color:#92928c;
}

.hero-copy{
  max-width:600px;
  color:#666;
  font-size:17px;
  line-height:1.7;
}

.hero-actions{
  display:flex;
  gap:10px;
  margin:28px 0;
}

.trust-row{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  color:#777;
  font-size:12px;
}

.portfolio-preview{
  background:#171717;
  color:white;
  border-radius:30px;
  padding:30px;
  min-height:400px;
  box-shadow:0 35px 90px rgba(0,0,0,.15);
  animation:float 5s ease-in-out infinite;
}

@keyframes float{
  50%{
    transform:translateY(-9px);
  }
}

.preview-top{
  display:flex;
  justify-content:space-between;
  color:#999;
  font-size:11px;
  letter-spacing:1.5px;
}

.preview-balance{
  font-size:38px;
  font-weight:800;
  margin-top:80px;
  letter-spacing:-2px;
}

.preview-change{
  color:#6ee7a7;
  font-size:13px;
  margin-top:7px;
}

.preview-chart{
  height:120px;
  margin-top:30px;
  overflow:hidden;
}

.preview-chart div{
  height:100%;
  border-bottom:2px solid #6ee7a7;
  clip-path:polygon(
    0 80%,
    8% 65%,
    17% 70%,
    27% 45%,
    37% 58%,
    47% 30%,
    57% 43%,
    68% 15%,
    78% 25%,
    88% 8%,
    100% 18%,
    100% 100%,
    0 100%
  );
}

.preview-bottom{
  display:flex;
  justify-content:space-between;
  color:#777;
  font-size:11px;
  margin-top:15px;
}

.green{
  color:var(--green);
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin:50px 0 20px;
}

.section-head h2,
.how h2{
  font-size:30px;
  letter-spacing:-1px;
  margin:8px 0;
}

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

.asset-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:20px;
  cursor:pointer;
  transition:.25s;
}

.asset-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow);
}

.asset-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
  flex-shrink:0;
}

.btc{background:#f7931a}
.eth{background:#627eea}
.sol{background:#6d5dfc}
.xrp{background:#23292f}
.bnb{background:#f3ba2f;color:#111}
.doge{background:#c2a633}
.ada{background:#0033ad}
.trx{background:#ef0027}
.avax{background:#e84142}
.link{background:#2a5ada}

.asset-card > div:nth-child(2){
  margin-top:15px;
}

.asset-card strong{
  display:block;
}

.asset-card small{
  color:#888;
  font-size:11px;
}

.asset-price{
  margin-top:25px;
  font-size:18px;
}

.asset-price span{
  color:#999;
}

.asset-price b{
  font-size:14px;
}

.mini-chart{
  height:45px;
  margin-top:15px;
}

.mini-chart div{
  height:100%;
  border-bottom:2px solid #222;
  clip-path:polygon(
    0 70%,15% 50%,30% 60%,45% 35%,
    60% 55%,75% 20%,90% 35%,100% 10%,
    100% 100%,0 100%
  );
}

.how{
  padding:110px 0 30px;
}

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

.step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:25px;
  transition:.25s;
}

.step:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
}

.step > span{
  color:#aaa;
  font-size:12px;
}

.step h3{
  margin:35px 0 8px;
}

.step p{
  color:#777;
  line-height:1.6;
  font-size:14px;
}

.page-heading{
  margin-bottom:30px;
}

.page-heading h1{
  font-size:50px;
  letter-spacing:-3px;
  margin:10px 0;
}

.page-heading p{
  color:#777;
}

.market-layout{
  display:grid;
  grid-template-columns:330px 1fr;
  gap:15px;
}

.market-list{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:8px;
}

.market-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px;
  background:transparent;
  border-radius:15px;
  text-align:left;
}

.market-item:hover{
  background:#f2f2ee;
}

.market-item span:nth-child(2){
  flex:1;
}

.market-item b{
  display:block;
}

.market-item small{
  color:#888;
}

.market-item strong{
  font-size:11px;
  color:#888;
}

.tradingview-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  min-height:600px;
}

.tv-header{
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
}

.tv-header span{
  display:block;
  font-size:18px;
  font-weight:800;
}

.tv-header small{
  color:#888;
}

#tradingview-chart{
  height:540px;
}

.tv-market-widget{
  margin-top:40px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:25px;
  overflow:hidden;
}

.tv-market-widget h2{
  margin-top:8px;
}

.buy-layout{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:18px;
}

.form-card,
.side-card,
.balance-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
  box-shadow:var(--shadow);
}

.form-card label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:18px;
}

.form-card input,
.form-card select{
  width:100%;
  display:block;
  margin-top:8px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fafaf8;
  outline:none;
}

.form-card input:focus,
.form-card select:focus{
  border-color:#999;
}

.asset-picker{
  display:flex;
  gap:8px;
  overflow:auto;
  margin-bottom:25px;
}

.asset-btn{
  white-space:nowrap;
  padding:12px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
}

.asset-btn.active{
  background:#111;
  color:#fff;
}

.quote{
  padding:20px;
  background:#f4f4f0;
  border-radius:15px;
  margin:15px 0;
}

.quote span{
  display:block;
  color:#888;
  font-size:12px;
}

.quote strong{
  display:block;
  font-size:27px;
  margin:7px 0;
}

.quote small{
  color:#888;
}

.fine{
  color:#888;
  font-size:11px;
  line-height:1.5;
}

.side-card{
  height:max-content;
}

.side-card h3{
  font-size:26px;
  margin:15px 0;
}

.side-card p{
  color:#777;
  line-height:1.6;
}

.info-line{
  padding:15px 0;
  border-top:1px solid var(--line);
  font-size:13px;
}

.balance-card{
  background:#171717;
  color:#fff;
  max-width:600px;
}

.balance-card span{
  color:#999;
  font-size:12px;
}

.balance-card h2{
  font-size:42px;
  margin:12px 0;
}

.portfolio-assets{
  margin-top:20px;
}

.empty{
  padding:50px;
  text-align:center;
  background:#fff;
  border:1px dashed #ccc;
  border-radius:20px;
  color:#777;
}

footer{
  border-top:1px solid var(--line);
  padding:30px 5%;
  display:flex;
  justify-content:space-between;
  color:#999;
  font-size:11px;
}

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
}

.hidden{
  display:none!important;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(7px);
}

.modal-card{
  position:relative;
  width:min(460px,92vw);
  background:#fff;
  border-radius:24px;
  padding:30px;
  z-index:2;
  box-shadow:0 30px 100px rgba(0,0,0,.25);
}

.modal-close{
  position:absolute;
  right:16px;
  top:13px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#eee;
  font-size:20px;
}

.modal-card label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin:14px 0;
}

.modal-card input{
  width:100%;
  margin-top:7px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
}

.modal-card .btn{
  width:100%;
  margin-top:10px;
}

.modal-switch{
  text-align:center;
  color:#777;
  font-size:12px;
  margin-top:16px;
}

.modal-switch button{
  background:none;
  text-decoration:underline;
}

.phone-row{
  display:flex;
  gap:8px;
}

.phone-code{
  width:85px!important;
  background:#f1f1ed!important;
  font-weight:700;
}

#toast{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:200;
}

.toast{
  background:#171717;
  color:#fff;
  padding:14px 17px;
  border-radius:13px;
  margin-top:8px;
  box-shadow:var(--shadow);
  font-size:13px;
}

.toast.error{
  background:#8c2727;
}


/* DARK MODE */

body.dark{
  --bg:#0d0d0f;
  --card:#151518;
  --text:#f5f5f5;
  --muted:#929292;
  --line:#29292d;
  --shadow:0 20px 70px rgba(0,0,0,.3);
}

body.dark .nav{
  background:rgba(13,13,15,.88);
}

body.dark .btn-ghost,
body.dark .market-list,
body.dark .tradingview-box,
body.dark .tv-market-widget,
body.dark .form-card,
body.dark .side-card,
body.dark .asset-card,
body.dark .step,
body.dark .empty,
body.dark .modal-card{
  background:#151518;
  color:#fff;
}

body.dark .form-card input,
body.dark .form-card select{
  background:#1d1d20;
  color:#fff;
}

body.dark .asset-btn{
  background:#151518;
  color:#fff;
  border-color:#29292d;
}

body.dark .asset-btn.active{
  background:#fff;
  color:#111;
}

body.dark .quote{
  background:#202024;
}

body.dark .market-item:hover,
body.dark .nav nav button:hover{
  background:#202024;
}

body.dark .modal-card input{
  background:#202024;
  color:#fff;
}


/* RESPONSIVE */

@media(max-width:900px){

  .nav nav{
    display:none;
  }

  .hero{
    grid-template-columns:1fr;
    gap:30px;
  }

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

  .market-layout{
    grid-template-columns:1fr;
  }

  .buy-layout{
    grid-template-columns:1fr;
  }

  .steps{
    grid-template-columns:1fr;
  }

}

@media(max-width:600px){

  .nav{
    padding:0 4%;
  }

  .nav-actions .muted{
    display:none;
  }

  .page{
    padding:45px 4%;
  }

  .hero{
    min-height:auto;
    padding-top:25px;
  }

  .hero h1{
    font-size:52px;
    letter-spacing:-3px;
  }

  .asset-grid{
    grid-template-columns:1fr 1fr;
  }

  .page-heading h1{
    font-size:40px;
  }

  .portfolio-preview{
    min-height:330px;
  }

  .preview-balance{
    font-size:30px;
  }

  footer{
    flex-direction:column;
    gap:8px;
  }

  }

/* =========================
   DARK MODE
========================= */

body.dark{
  --bg:#0d0d0f;
  --card:#171719;
  --text:#f5f5f5;
  --muted:#a5a5aa;
  --line:#29292d;
  --dark:#fff;
  --primary:#fff;
  background:var(--bg);
  color:var(--text);
}

/* Navigation */
body.dark .nav{
  background:rgba(13,13,15,.92);
  border-color:var(--line);
}

body.dark .brand{
  color:#fff;
}

body.dark .nav nav button,
body.dark .text-btn{
  color:#bdbdc2;
}

body.dark .nav nav button:hover,
body.dark .text-btn:hover{
  background:#242428;
  color:#fff;
}

/* Headings and text */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark strong,
body.dark b,
body.dark label{
  color:#f5f5f5;
}

body.dark p,
body.dark .muted,
body.dark .coin-name,
body.dark .fine{
  color:#a5a5aa;
}

/* Cards */
body.dark .coin,
body.dark .step,
body.dark .table-card,
body.dark .form-card,
body.dark .side-card,
body.dark .order-card,
body.dark .modal-card{
  background:#171719;
  border-color:#29292d;
  color:#f5f5f5;
}

/* Inputs */
body.dark input,
body.dark select{
  background:#101012;
  color:#fff;
  border-color:#303035;
}

body.dark input::placeholder{
  color:#77777d;
}

/* Quote */
body.dark .quote,
body.dark .payment-box{
  background:#222225;
  color:#fff;
}

/* Asset buttons */
body.dark .asset-btn{
  background:#171719;
  color:#fff;
  border-color:#303035;
}

body.dark .asset-btn:hover{
  background:#252529;
}

body.dark .asset-btn.active{
  background:#fff;
  color:#111;
}

/* Table */
body.dark .table-row{
  border-color:#29292d;
}

/* Empty states */
body.dark .empty{
  background:#171719;
  border-color:#36363b;
  color:#aaa;
}

/* Badges */
body.dark .badge{
  background:#29292d;
  color:#fff;
}

/* Modal */
body.dark .modal-close{
  background:#29292d;
  color:#fff;
}

/* Buttons */
body.dark .btn-ghost{
  background:#171719;
  color:#fff;
  border-color:#303035;
}

/* Dark mode chart area */
body.dark #tradingview-chart{
  background:#111113;
}

/* =========================
   PHANTOM / KRAKEN STYLE TRADE PANEL
========================= */

.asset-detail{
  margin-top:30px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow);
}

.asset-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:25px;
}

.asset-header h2{
  font-size:32px;
  margin:8px 0 4px;
}

.asset-price{
  text-align:right;
}

.asset-price strong{
  display:block;
  font-size:30px;
}

.asset-price span{
  font-size:13px;
  font-weight:700;
}

.tradingview-chart{
  width:100%;
  height:480px;
  border-radius:18px;
  overflow:hidden;
  background:#111;
}

.trade-box{
  margin-top:22px;
  max-width:600px;
}

.trade-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#f0f0ed;
  border-radius:14px;
  padding:4px;
  margin-bottom:20px;
}

.trade-tab{
  padding:13px;
  border-radius:11px;
  background:transparent;
  font-weight:800;
  color:#777;
}

.trade-tab.active{
  background:#111;
  color:#fff;
}

.trade-form label{
  font-size:13px;
  font-weight:700;
}

.trade-form input{
  display:block;
  width:100%;
  margin-top:8px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--bg);
  color:var(--text);
  outline:none;
}

.trade-summary{
  background:var(--bg);
  border-radius:15px;
  padding:18px;
  margin:15px 0;
  display:grid;
  gap:15px;
}

.trade-summary div{
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.trade-summary span{
  color:var(--muted);
  font-size:13px;
}

.trade-summary strong{
  font-size:13px;
}

body.dark .trade-tabs{
  background:#242428;
}

body.dark .trade-tab{
  color:#aaa;
}

body.dark .trade-tab.active{
  background:#fff;
  color:#111;
}

@media(max-width:600px){

  .asset-detail{
    padding:18px;
  }

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

  .asset-price{
    text-align:left;
  }

  .asset-price strong{
    font-size:26px;
  }

  .tradingview-chart{
    height:350px;
  }

}