:root{
  --bg:#04080b;
  --panel:rgba(8,16,22,0.72);
  --panel-solid:#081016;
  --text:#eef4f7;
  --text-mute:#8ba3b0;
  --accent:#17a5d4;      /* bright cyan from logo highlight */
  --accent-deep:#007897;  /* deep teal from logo body */
  --border:rgba(120,170,190,0.16);
  --disp:'Anton',sans-serif;
  --body:'Space Grotesk',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
}
/* Static background image — identical, sits behind everything, dimmed for legibility */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:url('assets/img/background.png') center top / cover no-repeat;
  z-index:-2;
}
/* Transparency/darkening veil over the background for readability */
body::after{
  content:'';
  position:fixed;
  inset:0;
  background:
    linear-gradient(180deg, rgba(4,8,11,0.42) 0%, rgba(4,8,11,0.40) 45%, rgba(4,8,11,0.55) 100%),
    radial-gradient(circle at 50% 62%, rgba(23,165,212,0.14) 0%, transparent 60%);
  z-index:-1;
}
h1,h2,h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;line-height:.95}
a{text-decoration:none;color:inherit}
.container{max-width:1400px;margin:0 auto;padding:0 40px}
section{padding:110px 0;border-bottom:1px solid var(--border)}

/* Header */
header{position:sticky;top:0;z-index:1000;background:rgba(4,8,11,0.78);border-bottom:1px solid var(--border);backdrop-filter:blur(14px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-family:var(--disp);font-size:26px;letter-spacing:.06em;display:flex;align-items:center;gap:12px}
.logo img{height:38px;width:38px;filter:drop-shadow(0 0 10px rgba(23,165,212,.5))}
.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{font-size:13px;font-weight:700;text-transform:uppercase;color:var(--text-mute);transition:color .2s;letter-spacing:.04em}
.nav-links a:hover{color:var(--accent)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;font-family:var(--body);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.1em;border:2px solid transparent;cursor:pointer;transition:all .2s ease}
.btn-primary{background:var(--accent);color:#04080b;border-color:var(--accent)}
.btn-primary:hover{background:transparent;color:var(--accent)}
.btn-outline{background:transparent;color:var(--text);border-color:rgba(180,210,225,.5)}
.btn-outline:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-large{padding:22px 46px;font-size:16px}

/* Hero */
.hero{min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;border-bottom:1px solid var(--border)}
.hero-inner{max-width:1400px;margin:0 auto;padding:0 40px;width:100%}
.hero-logo{width:120px;height:120px;margin-bottom:28px;filter:drop-shadow(0 0 26px rgba(23,165,212,.55))}
.hero-tag{display:inline-block;border:1px solid var(--accent);color:var(--accent);padding:6px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-bottom:28px}
.hero h1{font-size:clamp(52px,8.5vw,124px);margin-bottom:26px}
.hero h1 span{color:var(--accent);display:block;text-shadow:0 0 40px rgba(23,165,212,.35)}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end;margin-top:36px}
.hero-text p{font-size:20px;color:var(--text-mute);max-width:520px;margin-bottom:30px}
.hero-cta-group{display:flex;gap:18px;flex-wrap:wrap}
.app-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.app-badges img{height:44px;width:auto;display:block}
.hero-stat{text-align:right}
.hero-stat h2{font-size:82px;color:var(--text);text-shadow:0 0 30px rgba(23,165,212,.25)}
.hero-stat p{font-size:14px;text-transform:uppercase;color:var(--text-mute);letter-spacing:.1em}

/* Section title */
.section-title{font-size:clamp(40px,6vw,78px);margin-bottom:18px;border-left:8px solid var(--accent);padding-left:22px}
.section-sub{color:var(--text-mute);max-width:640px;margin-bottom:56px;font-size:17px;padding-left:30px}

/* Ecosystem grid */
.ecosystem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.eco-card{background:var(--panel);backdrop-filter:blur(6px);padding:54px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .3s ease;position:relative;overflow:hidden}
.eco-card:hover{background:rgba(14,26,34,0.85)}
.eco-card::before{content:'';position:absolute;top:0;left:0;width:0;height:4px;background:var(--accent);transition:width .3s ease}
.eco-card:hover::before{width:100%}
.eco-number{font-family:var(--disp);font-size:22px;color:var(--accent);margin-bottom:18px;display:block;letter-spacing:.04em}
.eco-card h3{font-size:46px;margin-bottom:18px}
.eco-card p{color:var(--text-mute);font-size:16px;margin-bottom:34px;max-width:92%}

/* History */
.history-section{text-align:center;background:rgba(6,12,17,0.55);backdrop-filter:blur(4px)}
.history-section h2{font-size:clamp(48px,8vw,116px);margin-bottom:28px}
.history-section h2 span{color:var(--accent)}
.history-section p{max-width:820px;margin:0 auto 46px;font-size:18px;color:var(--text-mute)}

/* Footer */
footer{padding:80px 0 40px;background:rgba(3,6,9,0.85)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:56px}
.footer-brand h3{font-size:38px;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.footer-brand h3 img{height:34px;width:34px}
.footer-brand p{color:var(--text-mute);max-width:400px}
.footer-col h4{font-family:var(--body);font-size:14px;text-transform:uppercase;color:var(--accent);margin-bottom:18px;letter-spacing:.1em}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:12px}
.footer-col ul li a{color:var(--text-mute);font-size:15px;transition:color .2s}
.footer-col ul li a:hover{color:var(--text)}
.footer-bottom{border-top:1px solid var(--border);padding-top:28px;display:flex;justify-content:space-between;align-items:center;color:var(--text-mute);font-size:13px;text-transform:uppercase;letter-spacing:.1em}

@media(max-width:900px){
  .nav-links{display:none}
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-stat{text-align:left}
  .ecosystem-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:38px}
  .footer-bottom{flex-direction:column;gap:14px;text-align:center}
  section{padding:74px 0}
  .container,.hero-inner{padding:0 22px}
  .eco-card{padding:38px}
  .section-sub{padding-left:0}
}

/* Disabled / coming-soon ecosystem card */
.eco-disabled{opacity:.62}
.eco-disabled:hover{background:var(--panel)}
.eco-disabled::before{display:none}
.eco-number .soon{font-family:var(--body);font-style:normal;font-size:11px;font-weight:700;letter-spacing:.12em;color:#04080b;background:var(--text-mute);padding:3px 8px;border-radius:2px;margin-left:10px;vertical-align:middle;text-transform:uppercase}
.btn.is-disabled{cursor:not-allowed;pointer-events:none;color:var(--text-mute);border-color:rgba(139,163,176,.35);background:transparent}

/* ---- Content subpages (about, faq) ---- */
.page-wrap{max-width:1000px;margin:0 auto;padding:60px 40px 100px}
.page-hero{padding:90px 0 50px;text-align:center}
.page-hero h1{font-size:clamp(48px,9vw,110px)}
.page-hero .lead{color:var(--text-mute);font-size:19px;max-width:640px;margin:20px auto 0}
.prose h2{font-size:30px;color:var(--accent);margin:44px 0 10px}
.prose p{color:#cdd9df;font-size:17px;margin-bottom:18px;max-width:760px}
.faq-item{border-top:1px solid var(--border);padding:26px 0}
.faq-item h3{font-family:var(--body);font-weight:700;font-size:20px;margin-bottom:10px;color:var(--text)}
.faq-item p{color:var(--text-mute);font-size:16px;max-width:820px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:40px 0}
.gallery img{width:100%;height:200px;object-fit:cover;border:1px solid var(--border);filter:grayscale(.1)}
.back-link{display:inline-block;margin-top:50px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
@media(max-width:900px){.page-wrap{padding:40px 22px 70px}}