/* ========== Design Tokens (kept from your theme) ========== */
:root{
  --bg: #171717;
  --text: #eff1fd;
  --text-dim: rgba(239,241,253,0.7);
  --muted: #a9b0b7;
  --brand: #227cff;
  --brand-hover: #3550e6;
  --panel: #171a1f;
  --border: rgba(255,255,255,.06);
  --hero-overlay: rgba(15,18,22,0.55);
  --maxw: 1100px;
  --radius: 18px;
  --gap: 28px;
  --brand-icon: 72px; /* top-left icon size (edit to taste) */
}

/* ========== Base / Reset ========== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{width:100%}
body{
  margin:0;
  font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  width:100%; height:100%;
  background:var(--bg); color:var(--text-dim);
  font-size:20px; line-height:1.25; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{font-family:Raleway; line-height:1.15; margin:0 0 12px; color:#fcfdff}
h1{font-weight:800; font-size:36px; letter-spacing:.02em}
h2{font-weight:700; font-size:28px}
p{margin:0 0 1em; line-height:1.5; color:var(--text-dim)}
a{color:var(--brand); text-decoration:none; transition:color .2s ease}
a:hover{color:var(--brand-hover)}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* ========== Header / Nav ========== */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(23,23,23,.7);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; text-decoration:none}
.brand img{height:var(--brand-icon); width:auto; object-fit:contain}

/* Hamburger */
.menu-btn{
  appearance:none; background:transparent; border:0; padding:10px; margin:-6px;
  display:inline-flex; flex-direction:column; gap:4px; cursor:pointer;
}
.menu-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.menu-line{width:26px; height:2px; background:#e8eaee; border-radius:2px}

/* Login button */
.login-btn {
  background-color: var(--brand); /* your theme blue */
  color: #fff;
  padding: 8px 18px;
  border-radius: 20px; /* rounded edges */
  font-weight: 600;
  font-size: 0.95em;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}

.login-btn:hover {
  background-color: var(--brand-hover); /* darker blue on hover */
  color: #fff; /* keep white text */
  text-decoration: none;
}

/* Menu overlay */
.menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.42);
  opacity:0; pointer-events:none; transition:.18s ease; z-index:39
}
.menu-panel{
  position:fixed; top:12px; right:12px; width:min(92vw, 320px);
  background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:10px;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:.18s ease; z-index:41; box-shadow:0 10px 30px rgba(0,0,0,.35)
}
body[data-menu-open="true"] .menu-backdrop{opacity:1; pointer-events:auto}
body[data-menu-open="true"] .menu-panel{opacity:1; pointer-events:auto; transform:none}
.menu-list{list-style:none; margin:0; padding:6px}
.menu-list li{border-radius:10px}
.menu-list a{display:block; padding:10px 12px; border-radius:10px; color:#e8eaee}
.menu-list a:hover{background:rgba(255,255,255,.06); text-decoration:none}

/* ========== Hero ========== */
.hero{
  position:relative; min-height:62vh; display:flex; align-items:center;
  background:
    linear-gradient(var(--hero-overlay), var(--hero-overlay)),
    url("../uploads/1/4/7/6/147634654/background-images/450541986.jpg") center/cover no-repeat;
  border-bottom:1px solid var(--border);
}
.hero-inner{padding:80px 0; width:100%; text-align:center}
.headline{
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(17,20,26,.7); padding:18px 22px; border-radius:16px;
  font-size:clamp(22px, 3vw + 10px, 44px); font-weight:800; letter-spacing:.04em;
  color:#fff
}
.headline .dynamic{white-space:nowrap}
.cursor{display:inline-block; width:2px; height:1em; margin-left:4px; background:#fff; animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{background:transparent}}

/* App badges in hero */
.store-badges{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:28px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center;
  padding:0 12px;
}
.store-badges img{height:54px; max-width:100%}
@media (max-width:520px){ .store-badges img{height:44px} }

/* ========== Sections / Layout ========== */
section{padding:50px 0}
.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px; color:var(--text)
}
.grid{display:grid; gap:var(--gap)}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:900px){ .grid.cols-2{grid-template-columns:1fr} }

/* ========== Buttons & Inputs (kept minimal) ========== */
.button-primary{
  display:inline-block; border-radius:100px; border:0; color:#fff;
  background:var(--brand); padding:12px 20px;
  text-align:center; transition:background .2s ease-in-out
}
.button-primary:hover,.button-primary:active{background:#1935cf}

/* Simple input styling to match theme */
.input-style, select, textarea{
  width:100%; box-sizing:border-box; font-size:14px; color:var(--text);
  background:transparent; border:2px solid rgba(193,202,247,0.7);
  padding:10px 14px; line-height:1.5; border-radius:0; transition:.2s all ease-in;
}
.input-style:focus, select:focus, textarea:focus{border-color:var(--text)}
.label-style{font-weight:600; font-size:16px; color:var(--text)}

/* === 3-column button layout for About page actions === */
.actions-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap; /* allows wrap on small screens */
}

.actions-row .button-primary {
  flex: 1 1 auto;
  text-align: center;
  padding: 10px 20px;
}

/* ===== Custom Page-Specific Styles ===== */
.david-photo {
  max-width: 200px;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .team-photo {
    max-width: 180px;
  }
}


/* ========== Footer ========== */
footer{
  padding:36px 0; border-top:1px solid var(--border);
  color:#c4c9cf; font-size:14px
}

/* ========== Utilities ========== */
.blockquote{
  font-size:15px; line-height:1.7; padding:20px 30px; max-width:464px;
  background-color:rgba(239,241,253,0.04); color:#fff
}