@import url('https://fonts.googleapis.com/css2?family=Anton&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════
   Digital Growth — Shared Stylesheet
═══════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:'Manrope',sans-serif;
  background:#0c0b1a;
  color:#f0eeff;
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh
}

:root{
  --navy:#0c0b1a;--navy2:#12112a;--navy3:#191835;--navy4:#1e1d38;
  --orange:#e84b2b;--orange2:#ff6644;
  --white:#f0eeff;--w80:rgba(240,238,255,0.80);--w50:rgba(240,238,255,0.50);
  --w25:rgba(240,238,255,0.25);--w10:rgba(240,238,255,0.08);
  --border:rgba(240,238,255,0.08);--border2:rgba(240,238,255,0.15);
  --rad:10px;--rad-lg:16px;--max:860px;--ease:0.22s cubic-bezier(0.4,0,0.2,1)
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0
}

.page{position:relative;z-index:1}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}

/* NAV */
.nav{
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(12,11,26,0.90);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  height:58px
}

.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.logo{display:flex;align-items:center;gap:10px;text-decoration:none}

.logo-mark{
  width:36px;height:36px;
  background:var(--orange);
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;
  font-size:15px;
  color:#fff
}

.logo-text{
  font-family:'Anton',sans-serif;
  font-size:17px;
  color:var(--white)
}

.nav-back{
  font-size:13px;
  color:var(--w50);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:6px;
  transition:color var(--ease)
}

.nav-back:hover{color:var(--white)}

/* PAGE HEADER */
.page-header{padding:56px 0 40px;border-bottom:1px solid var(--border)}

.page-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:12px
}

.page-h1{
  font-family:'Anton',sans-serif;
  font-size:clamp(26px,5vw,38px);
  margin-bottom:8px
}

.page-sub{font-size:14px;color:var(--w50)}
.page-updated{font-size:12px;color:var(--w25);margin-top:8px}

/* CONTENT */
.doc-content{padding:48px 0 80px}

.doc-section{margin-bottom:40px}

.doc-section h2{
  font-family:'Anton',sans-serif;
  font-size:18px;
  color:var(--white);
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border)
}

.doc-section h3{
  font-family:'Anton',sans-serif;
  font-size:15px;
  color:var(--w80);
  margin:18px 0 8px
}

.doc-section p{
  font-size:14px;
  color:var(--w80);
  line-height:1.75;
  margin-bottom:12px
}

.doc-section ul,
.doc-section ol{
  font-size:14px;
  color:var(--w80);
  line-height:1.75;
  padding-left:20px;
  margin-bottom:12px
}

.doc-section li{margin-bottom:6px}

.doc-section a{
  color:var(--orange);
  text-decoration:none
}

.doc-section a:hover{text-decoration:underline}

.highlight-box{
  background:var(--navy2);
  border:1px solid var(--border2);
  border-left:3px solid var(--orange);
  border-radius:0 var(--rad) var(--rad) 0;
  padding:16px 20px;
  margin:16px 0;
  font-size:14px;
  color:var(--w80);
  line-height:1.7
}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:24px 0}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px
}

.footer-links{display:flex;gap:20px;flex-wrap:wrap}

.footer-links a{
  font-size:12px;
  color:var(--w25);
  text-decoration:none;
  transition:color var(--ease)
}

.footer-links a:hover{color:var(--w50)}

.footer-copy{font-size:11px;color:rgba(240,238,255,0.15)}

.footer-trust-note{
  text-align:center;
  font-size:12px;
  color:var(--w25);
  line-height:1.6;
  max-width:600px;
  margin:0 auto 16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border)
}

.footer-privacy-note{
  text-align:center;
  font-size:11px;
  color:rgba(240,238,255,0.18);
  margin-top:12px;
  line-height:1.6
}

/* TYPOGRAPHY OVERRIDE */
body,
p,
span,
li,
a,
input,
textarea,
select,
label,
button {
  font-family: 'Manrope', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo-text,
.logo-mark,
.section-title,
.platform-title,
.doc-section h2,
.doc-section h3 {
  font-family: 'Anton', sans-serif !important;
  letter-spacing: 0.5px;
}
/* =========================
   FONT SYSTEM FIX (FINAL)
========================= */

/* Import clean fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* Body text */
body,
p,
span,
li,
label,
input,
textarea,
select,
small {
  font-family: 'Manrope', sans-serif !important;
}

/* Headings */
h1,
h2,
h3,
.logo-text,
.section-title,
.platform-title,
button,
.btn {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* =========================
   HERO TITLE FIX (IMPORTANT)
========================= */

.hero-title,
.hero h1,
h1 {
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}