/* Scroll reveal */

.htbHero,.htbContract,.htbCards,.htbFaq{

opacity:0;

transform:translateY(60px);

transition:opacity .8s ease,transform .8s ease;

}

.htbHero.show,.htbContract.show,.htbCards.show,.htbFaq.show{

opacity:1;

transform:translateY(0);

}

/* Nav active */

.navbar ul li a.active{

color:var(--green);

}

/* =====================

PAGE HEADER

===================== */

.pageHeader{

padding:140px 8% 0;

}

.pageHeaderInner{

display:flex;

justify-content:center;

align-items:center;

}

.backBtn{

padding:10px 22px;

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

border-radius:8px;

color:#aaa;

text-decoration:none;

font-size:14px;

font-weight:500;

transition:.3s;

}

.backBtn:hover{

border-color:var(--green);

color:var(--green);

}

/* =====================

HERO

===================== */

.htbHero{

text-align:center;

padding:50px 8% 60px;

}

.htbHero h1{

font-family:Anton;

font-size:72px;

text-transform:uppercase;

margin-bottom:16px;

line-height:1;

}

.htbHero h1 span{

color:var(--green);

}

.htbHero p{

font-size:18px;

color:#999;

}

/* =====================

CONTRACT CARD

===================== */

.htbContract{

padding:0 8% 70px;

}

.contractCard{

background:#111;

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

border-radius:20px;

padding:28px 32px;

box-shadow:0 0 60px rgba(255,175,0,.06);

position:relative;

overflow:hidden;

}

.contractCard::before{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:2px;

background:linear-gradient(90deg,transparent,var(--green),transparent);

}

.contractLabel{

display:block;

font-size:12px;

font-weight:700;

letter-spacing:3px;

color:#666;

margin-bottom:14px;

text-transform:uppercase;

}

.contractRow{

display:flex;

justify-content:space-between;

align-items:center;

gap:16px;

}

.contractAddrText{

font-family:monospace;

font-size:15px;

font-weight:600;

color:#fff;

letter-spacing:.5px;

word-break:break-all;

flex:1;

}

.htbCopyBtn{

padding:10px 24px;

background:var(--green);

color:#000;

border:none;

border-radius:8px;

font-weight:700;

font-size:13px;

letter-spacing:1px;

cursor:pointer;

transition:.3s;

white-space:nowrap;

flex-shrink:0;

}

.htbCopyBtn:hover{

transform:scale(1.05);

box-shadow:0 0 24px rgba(255,175,0,.4);

}

.htbCopyBtn.copied{

background:#22c55e;

color:#fff;

}

/* =====================

BUY CARDS

===================== */

.htbCards{

padding:0 8% 80px;

}

.htbCardsGrid{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.htbBuyCard{

background:#111;

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

border-radius:24px;

padding:36px;

display:flex;

flex-direction:column;

transition:.35s;

}

.htbBuyCard:hover{

transform:translateY(-4px);

}

/* Phantom */

.phantomCard{

border-color:rgba(123,97,255,.15);

box-shadow:0 0 50px rgba(123,97,255,.06);

}

.phantomCard:hover{

border-color:rgba(123,97,255,.35);

box-shadow:0 8px 40px rgba(123,97,255,.12);

}

/* Coinbase */

.coinbaseCard{

border-color:rgba(22,82,240,.15);

box-shadow:0 0 50px rgba(22,82,240,.06);

}

.coinbaseCard:hover{

border-color:rgba(22,82,240,.35);

box-shadow:0 8px 40px rgba(22,82,240,.12);

}

/* Card header */

.htbCardHeader{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:32px;

}

.htbCardTitleRow{

display:flex;

align-items:center;

gap:12px;

}

.htbCardLogo{

width:36px;

height:36px;

border-radius:8px;

}

.htbCardHeader h2{

font-family:Anton;

font-size:26px;

font-weight:500;

text-transform:uppercase;

}

.htbBadge{

padding:5px 12px;

border-radius:20px;

font-size:10px;

font-weight:700;

letter-spacing:1.5px;

text-transform:uppercase;

background:rgba(123,97,255,.15);

color:#9B8AFF;

border:1px solid rgba(123,97,255,.3);

}

/* Steps */

.htbSteps{

flex:1;

margin-bottom:28px;

}

.htbStep{

display:flex;

gap:16px;

margin-bottom:22px;

}

.htbStep:last-child{

margin-bottom:0;

}

.htbStepNum{

width:32px;

height:32px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

font-size:13px;

flex-shrink:0;

margin-top:2px;

}

.phantomCard .htbStepNum{

background:rgba(123,97,255,.15);

color:#9B8AFF;

}

.coinbaseCard .htbStepNum{

background:rgba(22,82,240,.15);

color:#4A90E8;

}

.htbStepContent h4{

font-size:15px;

font-weight:700;

margin-bottom:3px;

color:#fff;

}

.htbStepContent p{

font-size:13px;

color:#888;

line-height:1.5;

}

/* CTA buttons */

.htbCta{

display:block;

text-align:center;

padding:16px 24px;

border-radius:14px;

font-weight:700;

font-size:14px;

text-decoration:none;

text-transform:uppercase;

letter-spacing:1.5px;

transition:.3s;

-webkit-tap-highlight-color:transparent;

}

.phantomCta{

background:linear-gradient(135deg,#7B61FF 0%,#9B8AFF 100%);

color:#fff;

box-shadow:0 4px 20px rgba(123,97,255,.3);

}

.phantomCta:hover{

transform:translateY(-2px);

box-shadow:0 8px 32px rgba(123,97,255,.45);

}

.coinbaseCta{

background:linear-gradient(135deg,#1652F0 0%,#2968E8 100%);

color:#fff;

box-shadow:0 4px 20px rgba(22,82,240,.3);

}

.coinbaseCta:hover{

transform:translateY(-2px);

box-shadow:0 8px 32px rgba(22,82,240,.45);

}

/* =====================

FAQ

===================== */

.htbFaq{

padding:0 8% 100px;

text-align:center;

}

.htbFaq h2{

font-family:Anton;

font-size:48px;

text-transform:uppercase;

margin-bottom:40px;

}

.htbAccordion{

max-width:680px;

margin:0 auto;

text-align:left;

}

.accordionItem{

background:#111;

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

border-radius:14px;

margin-bottom:12px;

overflow:hidden;

transition:.3s;

}

.accordionItem:last-child{

margin-bottom:0;

}

.accordionItem:hover{

border-color:rgba(255,255,255,.12);

}

.accordionTrigger{

width:100%;

padding:20px 24px;

background:none;

border:none;

color:#fff;

font-size:15px;

font-weight:600;

font-family:Inter,sans-serif;

text-align:left;

cursor:pointer;

display:flex;

justify-content:space-between;

align-items:center;

gap:16px;

transition:.3s;

}

.accordionTrigger:hover{

color:var(--green);

}

.accordionIcon{

width:20px;

height:20px;

position:relative;

flex-shrink:0;

}

.accordionIcon::before,

.accordionIcon::after{

content:"";

position:absolute;

background:var(--green);

border-radius:2px;

transition:.35s ease;

}

.accordionIcon::before{

width:20px;

height:2px;

top:9px;

left:0;

}

.accordionIcon::after{

width:2px;

height:20px;

top:0;

left:9px;

}

.accordionItem.open .accordionIcon::after{

transform:rotate(90deg);

opacity:0;

}

.accordionPanel{

max-height:0;

overflow:hidden;

transition:max-height .35s ease,padding .35s ease;

}

.accordionItem.open .accordionPanel{

max-height:200px;

}

.accordionPanel p{

padding:0 24px 20px;

font-size:14px;

color:#888;

line-height:1.7;

}

/* =====================

RESPONSIVE — TABLET

===================== */

@media(max-width:1000px){

.pageHeader{

padding:140px 8% 0;

}

.htbHero h1{

font-size:56px;

}

.htbCardsGrid{

gap:24px;

}

.htbBuyCard{

padding:28px;

}

}

/* =====================

RESPONSIVE — TABLET PORTRAIT

===================== */

@media(max-width:768px){

.htbHero h1{

font-size:48px;

}

.contractRow{

flex-direction:column;

align-items:stretch;

gap:12px;

}

.htbCopyBtn{

width:100%;

text-align:center;

}

.htbFaq h2{

font-size:40px;

}

}

/* =====================

RESPONSIVE — MOBILE

===================== */

@media(max-width:600px){

.pageHeader{

padding:35px 5% 0;

}

.backBtn{

padding:8px 16px;

font-size:13px;

}

.htbHero{

padding:30px 5% 40px;

}

.htbHero h1{

font-size:36px;

}

.htbHero p{

font-size:16px;

}

.htbContract{

padding:0 5% 50px;

}

.contractCard{

padding:20px;

border-radius:16px;

}

.contractAddrText{

font-size:12px;

}

.htbCards{

padding:0 5% 60px;

}

.htbCardsGrid{

grid-template-columns:1fr;

gap:20px;

}

.htbBuyCard{

padding:24px;

border-radius:20px;

}

.htbCardHeader{

flex-direction:column;

align-items:flex-start;

gap:10px;

margin-bottom:24px;

}

.htbCardHeader h2{

font-size:22px;

}

.htbStepNum{

width:28px;

height:28px;

font-size:12px;

}

.htbStepContent h4{

font-size:14px;

}

.htbStepContent p{

font-size:12px;

}

.htbCta{

padding:14px 20px;

font-size:13px;

}

.htbFaq{

padding:0 5% 60px;

}

.htbFaq h2{

font-size:32px;

margin-bottom:28px;

}

.accordionTrigger{

padding:16px 20px;

font-size:14px;

}

.accordionPanel p{

padding:0 20px 16px;

font-size:13px;

}

}