/* Polished, modern dark theme with wallet-style inventory */
:root{
  --bg:#0b1220;
  --panel:#0f172a;
  --ink:#e5e7eb;
  --muted:#94a3b8;
  --brand:#38bdf8;
  --accent:#22d3ee;
  --ring:rgba(34,211,238,.35);
  --card:#0b1220;
  --shadow:0 18px 60px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  color:#0b1220;background:#0b1220;scroll-behavior:smooth
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:focus-visible, button:focus-visible { outline:none; box-shadow:0 0 0 3px var(--ring); border-radius:12px }
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.section{scroll-margin-top:96px} /* anchor offset for sticky header */

/* HEADER / NAV */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,18,32,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06); transition:all .25s ease
}
.site-header.scrolled{background:rgba(11,18,32,.85); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:10px;color:#e5e7eb;font-weight:700}
.brand .logo{height:56px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.menu{display:flex;gap:20px;align-items:center}
.menu a{color:#cbd5e1;font-weight:500;padding:8px 12px;border-radius:12px}
.menu a:hover{background:rgba(255,255,255,.06)}
.menu .cta{background:linear-gradient(90deg,var(--brand),var(--accent));color:#001025;font-weight:700}
.menu-btn{display:none;background:none;border:0;color:#e5e7eb;font-size:24px}

@media (max-width:820px){
  .menu{position:absolute;inset:76px 0 auto 0;background:#0b1220;border-bottom:1px solid rgba(255,255,255,.06);padding:12px 20px;display:none;flex-direction:column}
  .menu.open{display:flex}
  .menu-btn{display:block}
  .brand .logo{height:44px}
  body.nav-open{overflow:hidden}
}

/* HERO */
.hero{
  position:relative;padding:120px 0 72px;color:var(--ink);
  background:
    linear-gradient(to bottom right, rgba(12,19,35,.92), rgba(12,19,35,.92)),
    radial-gradient(1200px 600px at 20% -10%, rgba(56,189,248,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(34,211,238,.18), transparent 60%),
    url('images/our-mission.jpg') center/cover no-repeat;
}
.hero .hero-inner{position:relative;z-index:2;text-align:center}
.hero h1{font-size:56px;line-height:1.05;margin:0 0 14px;letter-spacing:-.02em}
.hero p{margin:0 0 24px;color:#cbd5e1;font-size:18px}
.accent{background:linear-gradient(90deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-ctas{display:flex;gap:12px;justify-content:center;margin:18px 0 22px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.12);transition:transform .15s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(34,211,238,.12)}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--accent));color:#001025;border:0;box-shadow:var(--shadow)}
.btn.ghost{color:var(--ink)}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);background-size:46px 46px;opacity:.2;transition:transform .2s ease}

/* SECTIONS */
.section{background:#0e1526;color:#e5e7eb;padding:88px 0;border-top:1px solid rgba(255,255,255,.06)}
.section.alt{background:#0b1220}
h2{font-size:36px;margin:0 0 12px}
.lede{color:#b6c2d2;max-width:760px}

/* TWO-COLUMN CONTENT */
.section-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.section-grid.flip{grid-template-columns:.9fr 1.1fr}
.section-grid.flip .col-text{order:2}
.section-grid.flip .illustration{order:1}

.illustration{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);background:#0b1220;position:relative}
.illustration img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/3;transform:scale(1.01);transition:transform .35s ease, filter .35s ease}
.illustration:hover img{transform:scale(1.03);filter:brightness(1.05)}
.illustration figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;color:#e5e7eb;background:linear-gradient(180deg, transparent, rgba(0,0,0,.55))}

/* CARDS & FEATURES */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}
.card{background:#0b1220;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:18px;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.card h3{margin:0 0 8px;font-size:18px}

.features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.feature{background:#0b1220;border:1px solid rgba(255,255,255,.07);padding:14px;border-radius:12px;color:#cbd5e1;transition:transform .15s ease, box-shadow .2s ease}
.feature:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(34,211,238,.12)}

/* INVENTORY — 2-up large wallet cards */
.gallery{
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr; /* mobile */
  gap:32px;
}
@media (min-width: 900px){
  .gallery{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px; }
}

.tile{
  position:relative;border-radius:28px;overflow:hidden;
  background:
    radial-gradient(120% 120% at 10% -10%, rgba(56,189,248,.10), transparent 60%),
    linear-gradient(180deg,#0d1424,#0a101d);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 100px rgba(0,0,0,.35);
  padding:18px;
}
.tile::after{ /* soft inner border glow */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -80px 120px rgba(0,0,0,.45);
}
.tile figcaption{
  position:absolute; left:22px; bottom:18px;
  padding:10px 14px; font-size:22px; line-height:1; color:#e5e7eb;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); border-radius:12px
}
.tile .zoom{
  position:absolute; top:16px; right:16px; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35); color:#e5e7eb; border-radius:12px; padding:8px 12px; cursor:pointer;
  backdrop-filter:blur(4px); font-size:18px
}

/* Wallet stack */
.wallet .stack{ position:relative; width:100%; aspect-ratio:16 / 9; border-radius:22px }
.wallet .stack img{
  position:absolute; inset:0; margin:auto; width:94%; height:94%; object-fit:cover;
  border-radius:22px; box-shadow:0 24px 90px rgba(0,0,0,.45);
  transition:transform .35s ease, filter .35s ease;
}
.wallet .stack img:nth-child(1){ transform:rotate(-4deg) translate(-8%, -6%) }
.wallet .stack img:nth-child(2){ transform:rotate( 5deg) translate( 8%,  6%) }
.wallet .stack img:nth-child(3){ transform:rotate(-1deg) translate( 2%,  2%) }
.wallet:hover .stack img{ filter:brightness(1.05) }
.wallet:hover .stack img:nth-child(1){ transform:rotate(-5deg) translate(-10%, -8%) scale(1.03) }
.wallet:hover .stack img:nth-child(2){ transform:rotate( 6deg) translate( 10%,  8%) scale(1.03) }

/* Note */
.note{color:#9fb0c4;font-size:14px;margin-top:10px}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:18px}
.form label{display:flex;flex-direction:column;gap:6px;color:#cbd5e1;margin:8px 0}
input,textarea{background:#0b1220;color:#e5e7eb;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;outline:0}
input:focus,textarea:focus{box-shadow:0 0 0 4px var(--ring);border-color:transparent}
.tiny{color:#94a3b8;font-size:12px;margin:6px 0 0}
.info .checks{margin:12px 0 0;padding-left:18px;color:#cbd5e1}

/* FOOTER */
.site-footer{background:#0b1220;border-top:1px solid rgba(255,255,255,.06);color:#9fb0c4;padding:24px 0}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot-links a{color:#9fb0c4}

/* REVEAL ANIMATIONS */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease, transform .55s ease}
.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal,.visible,.tile .stack img,.illustration img,.btn,.card,.feature{transition:none !important}
}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:1000;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:82vh;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.lb-caption{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#e5e7eb;background:rgba(0,0,0,.4);padding:8px 12px;border-radius:10px;font-size:14px}
.lb-prev,.lb-next,.lb-close{
  position:absolute;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#e5e7eb;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);font-size:22px
}
.lb-prev{left:18px} .lb-next{right:18px}
.lb-close{top:18px;right:18px;font-size:26px;width:46px;height:46px}

/* RESPONSIVE */
@media (max-width:1080px){
  .container{padding:0 18px}
  .section-grid,.section-grid.flip{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero h1{font-size:44px}
}
@media (max-width:640px){
  .hero{padding:96px 0 56px}
  .hero h1{font-size:34px}
  .gallery{grid-template-columns:1fr;gap:18px}
}