/* Reset */
*{ margin:0; padding:0; box-sizing:border-box; }

/* Theme tokens from request */
:root{
  --bg: #000;              /* Black background */
  --text: #fff;             /* White text */
  --muted: #d1d1d1;         /* Light gray */
  --accent: #f7931a;        /* Bitcoin orange */
  --border: #222;           /* Subtle borders on dark */
  --tint: #0a0a0a;          /* Section tint */
  --container: 1200px;
  --c-bg: #000;             /* base for layered bg */
}

html,body{ height:100%; }
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.1rem; /* +10% */
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--text);
  /* Two vivid hues (HSL): orange-yellow + blue-purple */
  background:
  radial-gradient(1200px 600px at 85% 0%, hsla(19, 100%, 51%, 0.741), transparent 48%),
  radial-gradient(800px 680px at -5% 52%,  hsla(73, 54%, 95%, 0.528), transparent 45%),
    var(--c-bg);
  background-attachment: fixed, fixed, fixed; /* gentle parallax */
}

/* Links */
a{ color: var(--accent); text-decoration: underline; }
a:hover{ opacity:.9; }

/* Layout helpers */
.container{ max-width: var(--container); margin: 0 auto; padding: 0 2rem; display:flex; flex-direction:column; align-items:stretch; }
.row{ display:flex; flex-direction: row; }
.between{ justify-content:space-between; }
.center{ align-items:center; }

.section{ padding: 4rem 0; border-bottom: none; }
.tinted{ background: var(--tint); }

/* Header / Navigation */
.site-header{ position: sticky; top:0; z-index:10; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); border-bottom:none; }
.site-header .container{ padding: calc(0.75rem * 1.40) 2rem; display:flex; flex-direction:row; justify-content:space-between; align-items:center; }
.logo{ color:#fff; text-decoration:none; font-weight:800; letter-spacing:0.5px; font-size: 2.1em; }
.left-group{ display:flex; align-items:center; gap:6px; }
.nav ul{ list-style:none; display:flex; gap:1.3rem; }
.nav a{ color:#fff; text-decoration:none; font-weight:600; border-bottom:2px solid transparent; padding:0; line-height:1; }
.nav a:hover{ border-color: var(--accent); }
.nav-toggle{ display:none; background:none; border:1px solid var(--border); color:#fff; padding:6px 10px; border-radius:8px; }
.brand-mark{ height: 68px; width:auto; display:block; border-radius:6px; }

@media (max-width: 768px){
  .nav-toggle{ display:block; }
  .nav ul{ display:none; position:absolute; right:16px; top:56px; background:#0d0d0d; border:1px solid var(--border); border-radius:12px; padding:12px; flex-direction:column; min-width:200px; }
  .nav ul.open{ display:flex; }
}

/* Intro layout */
.intro-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap:2rem; align-items:start; }
.intro-media img{ width:100%; height:auto; border-radius:16px; border:none; }
.intro-copy h1{ font-size: 4.5rem; font-weight:700; line-height:1.1; letter-spacing:-0.01em; margin:0 0 0.6rem; }
.intro-copy p{ margin-bottom:1.5rem; color: var(--muted); }
/* Accent subhead should override paragraph color */
.intro-copy .subhead{ font-size: 2rem; font-weight:800; letter-spacing: 0.01em; margin: 0 0 .6rem; color: var(--accent); }
.accent{ color: var(--accent); }
.actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Buttons */
.button{ display:inline-block; padding:10px 16px; border-radius:10px; border:1px solid var(--border); background:#0f0f0f; color:#fff; text-decoration:none; font-weight:700; }
.button.primary{ background: var(--accent); color:#000; border-color: transparent; }
.button:hover{ transform: translateY(-1px); transition: transform .15s ease; }

/* Headings and general type */
h1{ font-size: 5rem; font-weight:700; line-height:1.1; letter-spacing:-0.01em; margin: 0 0 0.6rem; } /* doubled + tightened */
h2{ font-size: 4rem; font-weight:700; line-height:1.1; letter-spacing:-0.01em; margin: 1.6rem 0 0.6rem; } /* doubled + tightened */
p{ margin-bottom: 1.5rem; font-size: 1.15em; } /* +15% */
.lead{ color: var(--muted); }

/* Grids */
.grid{ display:grid; gap:16px; }
.alt-row{ display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:center; width:100%; }
.alt-left .col-title{ order:1; }
.alt-left .col-content{ order:2; }
.alt-right .col-media{ order:1; }
.alt-right .col-title{ order:2; }
.placeholder{ width:100%; aspect-ratio: 4/3; background:#0d0d0d; border:1px dashed var(--border); border-radius:12px; }
/* Fixed 4:3 media slot like placeholder */
.col-media{ width:100%; aspect-ratio: 4/3; }
.col-media img{ width:100%; height:100%; border-radius:12px; border:none; display:block; object-fit:cover;background-color: transparent; }
.span-2{ grid-column: 1 / -1; width:100%; }
.principles-grid{ grid-template-columns: repeat(2, 1fr); }
.team-grid{ grid-template-columns: repeat(4, 1fr); gap:16px; }

@media (max-width: 900px){
  .principles-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .intro-grid{ grid-template-columns: 1fr; }
  .alt-row{ grid-template-columns: 1fr; }
}

/* Cards */
.card{ background:#0e0e0e; border:1px solid var(--border); border-radius:14px; padding:18px; }
.card h3{ margin:0 0 6px; font-size:2rem; line-height:1.15; letter-spacing:-0.01em; } /* doubled + tightened */
.card p{ margin:0; color:var(--muted); }
.icon{ width:28px; height:28px; display:block; margin-bottom:8px; }

/* === Icon + h3 side-by-side in cards === */
.principles-grid .card{
  display: grid;
  grid-template-columns: auto 1fr; /* icon | title */
  align-items: center;
  gap: 0 10px;
}

/* kill the block stacking + extra bottom margin on the icon */
.principles-grid .card .icon{
  width: 38px;
  height: 38px;
  display: block;   /* ok */
  margin: 0;        /* <— important: no margin-bottom */
}

/* keep the title tight so it aligns with the icon */
.principles-grid .card h3{
  margin: 0;        /* remove the 6px bottom gap */
  line-height: 1.1;
}

/* let the paragraph flow on the next row, full width */
.principles-grid .card p{
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* Updates list */
.updates{ list-style: none; display:grid; gap:.75rem; }
.updates li{ color: var(--muted); }

/* Only this variant shows the whole image inside the same 4:3 box */
.col-media.letterbox img{
  width: 100%;
  height: 100%;
  object-fit: contain;         /* no crop, keeps 4:3 footprint */
  background-color: transparent; /* IMPORTANT: let alpha show the page gradient */
}

/* Team images smaller */
.team-grid{ grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap:12px; }
.team-grid img{ width:100%; max-width:120px; height:auto; border-radius:12px; border:none; display:block; justify-self:center; }
.team-member{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; }
.team-member figcaption{ font-size:0.85rem; color:var(--muted); text-align:center; max-width:120px; }

/* Contact */
.contact{ display:grid; gap:12px; max-width:680px; width:100%; }
.contact label{ display:grid; gap:6px; width:100%; }
input,textarea{ background:#0b0b0b; color:#fff; border:1px solid var(--border); padding:10px 12px; border-radius:10px; width:100%; }

/* Footer */
.site-footer{ border-top:none; }
.site-footer .container{ padding:20px 0; align-items:center; gap:10px; }
.footer-nav{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.footer-nav a{ color:#fff; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; }
.footer-nav a:hover{ border-color: var(--accent); }

/* Responsive type tweaks */
@media (max-width: 768px){
  h1{ font-size: 3rem; } /* larger on mobile too */
  h2{ font-size: 2.6rem; }
  .card h3{ font-size: 1.6rem; }
  .intro-copy h1{ font-size: 3rem; }
  .intro-copy .subhead{ font-size: 1.6rem; }
}