:root { --ink:#e6efeb; --muted:#8d9a95; --surface:#08110e; --surface2:#0d1b16; --line:#1c3a2f; --green:#00ec96; --green-dark:#00a968; --lime:#6effbd; --shadow:0 0 32px rgba(0,236,150,.13); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:radial-gradient(circle at 45% 5%,#073c29 0%,#06140f 28%,#030907 72%); font-family:"Space Grotesk",sans-serif; min-height:100vh; } body::before { content:""; inset:0; position:fixed; pointer-events:none; opacity:.25; background-image:linear-gradient(rgba(51,167,113,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(51,167,113,.07) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(#000,transparent 80%); } .grain { position:fixed; z-index:4; inset:0; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } .container { width:min(1100px,calc(100% - 40px)); margin:auto; position:relative; z-index:1; } .site-header { height:92px; display:flex; justify-content:space-between; align-items:center; } .brand { color:var(--ink); display:inline-flex; align-items:center; gap:10px; text-decoration:none; letter-spacing:.02em; } .brand-mark { display:grid; place-items:center; width:29px; height:29px; border:1px solid var(--green); color:var(--green); border-radius:8px 2px 8px 2px; font-family:"Audiowide"; font-size:15px; box-shadow:inset 0 0 10px rgba(0,236,150,.3); } .brand strong { font-size:12px; letter-spacing:.06em; display:block; } .brand small { color:var(--green); font:9px "DM Mono"; letter-spacing:.14em; display:block; margin-top:2px; } nav { display:flex; gap:22px; align-items:center; } nav a,.text-button { color:#c8d4ce; font:500 12px "Audiowide"; text-transform:uppercase; text-decoration:none; background:none; border:0; cursor:pointer; } nav a:hover,.text-button:hover { color:var(--green); } .button { border:0; border-radius:9px; cursor:pointer; background:var(--green); color:#00170d; padding:15px 21px; font:13px "Audiowide"; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:13px; transition:transform .2s,box-shadow .2s,background .2s; box-shadow:0 0 23px rgba(0,236,150,.3); } .button:hover { transform:translateY(-2px); box-shadow:0 0 35px rgba(0,236,150,.47); } .button-small { padding:12px 16px; font-size:10px; } .button-ghost { color:var(--green); background:transparent; border:1px solid #087a4d; box-shadow:none; } .button-ghost:hover { background:#043a26; } .full { width:100%; } .hero { padding:94px 0 75px; text-align:center; } .eyebrow { color:var(--green); display:inline-block; border:1px solid #087a4d; background:#052516; border-radius:99px; padding:5px 10px; font:10px "Audiowide"; letter-spacing:.03em; } h1,h2,h3 { font-family:"Audiowide"; text-transform:uppercase; } h1 { font-size:clamp(45px,8vw,78px); letter-spacing:.015em; margin:25px 0 14px; line-height:1.02; text-shadow:0 0 25px rgba(0,236,150,.15); } h1 span { color:var(--green); text-shadow:0 0 25px rgba(0,236,150,.55); } .hero-tagline { font:clamp(14px,2.3vw,21px) "Audiowide"; letter-spacing:.08em; margin:0; } .hero-copy { width:min(600px,100%); margin:25px auto 29px; color:#a2aea8; font:15px/1.55 "DM Mono"; } .hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:11px; } .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; } .hero-features { margin-top:65px; text-align:left; } .card,.price-card,.panel,.balance-card,.asset-card,.perk-card { position:relative; overflow:hidden; background:linear-gradient(135deg,rgba(9,27,19,.93),rgba(5,14,10,.9)); border:1px solid var(--line); border-radius:12px; padding:24px 20px; } .card::before,.price-card::before { content:""; position:absolute; top:10px; left:10px; height:10px; width:10px; border-top:1px solid #8aac9e; border-left:1px solid #8aac9e; } .card:hover { border-color:#147a52; box-shadow:var(--shadow); } .icon { color:var(--green); display:block; width:36px; height:36px; font:28px/35px "DM Mono"; font-style:normal; margin-bottom:17px; } .card h3,.price-card h3 { font-size:14px; margin:0 0 10px; } .card p,.price-card li,.section-intro p { color:var(--muted); font:13px/1.42 "DM Mono"; margin:0; } .section { padding:47px 0; } h2 { text-align:center; font-size:28px; margin:0 0 29px; } .two-column { display:grid; grid-template-columns:1fr 1fr; gap:17px; } .featured { border-color:#167b55; box-shadow:var(--shadow); } .chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; } .chips span { color:var(--green); border:1px solid #09663f; background:#062816; font:10px "Audiowide"; text-transform:uppercase; padding:5px 8px; border-radius:20px; } .steps .card { min-height:155px; } .step-number { color:#06683f; font:24px "Audiowide"; display:block; margin-bottom:28px; } .section-intro p { text-align:center; margin-top:-20px; margin-bottom:25px; } .pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:stretch; } .price-card { display:flex; flex-direction:column; padding:27px 18px; } .price-card.popular { border-color:var(--green); box-shadow:var(--shadow); } .popular-label { color:#002716; background:var(--green); position:absolute; top:0; right:0; padding:6px 8px; font:8px "Audiowide"; } .price { color:#fff; font:25px "Audiowide"; margin:14px 0 19px; } .price small { color:var(--muted); font:11px "DM Mono"; } ul { list-style:none; padding:0; flex:1; margin:0 0 22px; } li { margin:0 0 10px; padding-left:18px; position:relative; } li::before { content:"✓"; color:var(--green); position:absolute; left:0; } .disclaimer { display:flex; gap:17px; padding:22px 25px; margin-top:45px; border:1px solid #32634e; border-radius:10px; background:#092218; color:#a7b3ac; font:12px/1.5 "DM Mono"; } .disclaimer span { font-size:24px; color:var(--green); } .disclaimer p { margin:0; } footer { padding:45px 0 25px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; color:#617068; font:10px "DM Mono"; }
.hidden { display:none!important; } .app-shell { position:relative; z-index:1; min-height:100vh; display:grid; grid-template-columns:238px 1fr; } .sidebar { border-right:1px solid var(--line); background:rgba(4,13,9,.88); padding:30px 19px; display:flex; flex-direction:column; min-height:100vh; position:sticky; top:0; height:100vh; } .profile-block { display:flex; align-items:center; gap:10px; padding:24px 2px; border-bottom:1px solid var(--line); } .profile-block strong,.profile-block small { display:block; } .profile-block strong { font-size:12px; } .profile-block small { color:var(--muted); font:10px "DM Mono"; margin-top:3px; } .avatar { width:35px; height:35px; border-radius:50%; background:linear-gradient(135deg,var(--green),#007949); display:grid; place-items:center; color:#002b19; font-family:"Audiowide"; } .app-nav { display:block; margin-top:22px; } .app-nav button { color:#96a59d; font:11px "Audiowide"; text-transform:uppercase; text-align:left; width:100%; padding:13px 11px; background:none; border:0; border-radius:6px; cursor:pointer; } .app-nav button:hover,.app-nav button.active { color:var(--green); background:#0a2a1b; } .signout { color:#77847d; background:none; border:0; margin-top:auto; cursor:pointer; font:10px "Audiowide"; text-align:left; padding:8px; } .app-content { padding:35px clamp(22px,5vw,70px); max-width:1300px; } .app-topbar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:32px; } .app-topbar h2 { text-align:left; font-size:27px; margin:9px 0 0; } .balance-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:15px; margin-bottom:15px; } .balance-card { min-height:145px; display:flex; flex-direction:column; justify-content:center; } .balance-card span { color:var(--muted); font:10px "Audiowide"; } .balance-card strong { font:clamp(23px,3vw,38px) "Audiowide"; margin:14px 0 8px; letter-spacing:-.05em; } .balance-card small { color:#6d8176; font:10px "DM Mono"; } .balance-card.primary { border-color:#168254; background:linear-gradient(135deg,#083522,#071810); box-shadow:var(--shadow); } .balance-card.primary strong { color:var(--green); } .dashboard-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:15px; } .panel h3 { font-size:14px; margin:0 0 19px; } label { display:block; color:#b2c1b8; font:10px "Audiowide"; text-transform:uppercase; margin:0 0 15px; } input { width:100%; margin-top:7px; color:var(--ink); font:13px "DM Mono"; outline:none; background:#06130d; border:1px solid #204032; border-radius:6px; padding:12px; } input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(0,236,150,.12); } .form-actions { display:flex; flex-wrap:wrap; gap:8px; } .transaction-list { display:grid; gap:8px; } .transaction { display:grid; grid-template-columns:1fr auto; align-items:center; padding:9px 0; border-bottom:1px solid rgba(55,95,74,.35); font:12px "DM Mono"; } .transaction:last-child { border:0; } .transaction small { display:block; color:#6f8278; margin-top:4px; } .amount-earn { color:var(--green); } .amount-spend { color:#ff9d9d; } .wide { max-width:850px; } .asset-grid,.perk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; } .asset-card span { color:var(--green); font-size:30px; } .asset-card h3,.perk-card span { display:block; font:14px "Audiowide"; text-transform:uppercase; margin:20px 0 8px; } .asset-card p,.perk-card p { color:var(--muted); font:12px/1.45 "DM Mono"; } .asset-card strong { color:var(--green); font:14px "Audiowide"; } .asset-card.locked { opacity:.5; } .perk-card { display:flex; min-height:205px; flex-direction:column; } .perk-card p { flex:1; } .inline-plans { display:flex; gap:10px; flex-wrap:wrap; } dialog { color:var(--ink); max-width:450px; width:calc(100% - 30px); background:linear-gradient(135deg,#0b2117,#06110c); border:1px solid #16794f; padding:32px; border-radius:14px; box-shadow:0 0 55px #000; } dialog::backdrop { background:rgba(0,7,4,.8); backdrop-filter:blur(4px); } .modal h2 { text-align:left; font-size:25px; margin:15px 0 10px; } .modal p { color:var(--muted); font:13px/1.5 "DM Mono"; margin-bottom:24px; } .close { position:absolute; top:14px; right:16px; background:none; color:var(--muted); border:0; font-size:25px; cursor:pointer; } .modal-switch { margin-top:17px; width:100%; color:var(--green); } .setup-list { display:grid; gap:10px; color:#a1b1a8; font:12px "DM Mono"; margin:20px 0; } .toast { position:fixed; z-index:10; right:22px; bottom:22px; background:#0a2f1e; color:#d6fff0; border:1px solid var(--green); box-shadow:var(--shadow); border-radius:8px; padding:13px 17px; font:12px "DM Mono"; }
@media (max-width:820px) { .pricing-grid { grid-template-columns:repeat(2,1fr); } .app-shell { grid-template-columns:1fr; } .sidebar { position:relative; height:auto; min-height:0; padding:18px 20px; } .sidebar .app-nav { display:flex; overflow:auto; gap:4px; margin:13px 0; } .app-nav button { white-space:nowrap; width:auto; } .signout { margin-top:0; } .balance-grid { grid-template-columns:1fr 1fr; } .balance-card.primary { grid-column:span 2; } }
@media (max-width:600px) { .container { width:min(100% - 28px,1100px); } .site-header { height:72px; } .site-header nav a { display:none; } .hero { padding:68px 0 38px; } .feature-grid,.two-column,.dashboard-grid,.asset-grid,.perk-grid { grid-template-columns:1fr; } .feature-grid .card { min-height:0; } h2 { font-size:23px; } .pricing-grid { grid-template-columns:1fr; } .app-content { padding:25px 15px; } .app-topbar { align-items:flex-start; flex-direction:column; margin-bottom:21px; } .balance-grid { grid-template-columns:1fr; } .balance-card.primary { grid-column:auto; } .sidebar .profile-block { display:none; } .sidebar .brand { align-self:flex-start; } .app-nav button { font-size:9px; } footer { padding-top:30px; } }