/* Project Owba — complete styles (v3, banner layout) */
:root{
  --bg:#0b0f17;
  --panel:#0f1522cc;
  --card:#101828;
  --glass:rgba(16,24,40,.55);
  --fg:#e6ecff;
  --muted:#8fa3c7;
  --edge:#1f2a44;
  --accent:#7dc8ff;
  --accent-2:#9d86ff;
  --ok:#62d39b;
  --warn:#ffd166;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --header-h:56px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9ff;
    --panel:#ffffffcc;
    --card:#ffffff;
    --glass:rgba(255,255,255,.65);
    --fg:#0f1522;
    --muted:#4a5672;
    --edge:#e6e9f3;
    --accent:#2459ff;
    --accent-2:#7c3cff;
    --ok:#118a57;
    --warn:#b36b00;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 600px at 10% -10%, #1a2141, transparent 60%),
    radial-gradient(1200px 600px at 120% 10%, #132a4d, transparent 55%),
    linear-gradient(180deg, #0a0e19, var(--bg) 50%);
  background-attachment: fixed;
}
img{max-width:100%;height:auto;display:block}
.container{width:min(1120px,92vw);margin-inline:auto}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:var(--accent);color:#fff;border-radius:.5rem;z-index:1000}

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:99;backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--edge)}
.site-header.glass{background:var(--glass)}
.nav{display:flex;align-items:center;gap:1rem;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-text{display:flex;flex-direction:column}
.brand-text .sub{font-size:.75rem;color:var(--muted)}
.brand-text .the{font-weight:700} /* emphasise “The” */
nav{margin-left:auto;display:flex;align-items:center;gap:1rem}
nav a{color:var(--fg);text-decoration:none;padding:.5rem .75rem;border-radius:.6rem;border:1px solid transparent}
nav a:hover{border-color:var(--edge);background:rgba(255,255,255,.05)}
#nav-toggle{display:none}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--fg);margin:4px 0;border-radius:2px}
@media (max-width:820px){
  .burger{display:flex}
  nav{position:fixed;inset:56px 0 auto 0;background:var(--panel);border-bottom:1px solid var(--edge);
      transform:translateY(-140%);transition:.3s ease;padding:1rem;flex-direction:column}
  #nav-toggle:checked ~ label + nav{transform:translateY(0)}
}

/* HERO — compact height + LARGE brand banner */
.hero{position:relative;overflow:hidden;padding-top: clamp(8px, 1.6vh, 16px)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;display:grid;gap:1rem}

/* Banner area — this occupies your “yellow rectangle” */
.hero-stage{
  display:flex;align-items:center;
  height: clamp(320px, 44vw, 400px);           /* dial this to change banner height */
}

/* Brand block (logo left, text right) */
.hero-brand{display:flex;align-items:center;gap:0.25rem}
.hero-brand img{
  width: clamp(288px, 32vw, 448px);              /* dial this to change logo size */
  height:auto;
}
.brand-title{margin:0;font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:1.06}
.brand-sub{margin:.2rem 0 0;color:var(--muted);font-size:clamp(1rem,1.6vw,1.35rem)}
.brand-sub .the{font-weight:700}

/* Centered copy + buttons under the banner */
.hero-support{text-align:center}
.eyebrow{margin:.25rem 0;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.82rem}
.lede{margin:.3rem auto .6rem;max-width:70ch;color:#cdd9ff}
.cta{justify-content:center;display:flex;gap:.75rem;flex-wrap:wrap}

/* Optional mini-badges if used */
.badges{display:flex;gap:.75rem;padding:0;margin:.75rem 0 0;list-style:none;color:var(--muted)}
.badges li{border:1px solid var(--edge);padding:.35rem .6rem;border-radius:999px;background:rgba(0,0,0,.15)}

/* Sections */
.section{padding:3rem 0} /* slightly tighter so Solutions sits higher */
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.section-lede{color:var(--muted);margin-top:-.5rem}

/* Responsive grids */
.grid{display:grid;gap:1.25rem}
.grid.cards{grid-template-columns:repeat(4,1fr)}
.grid.thirds{grid-template-columns:repeat(3,1fr)}
.grid.halves{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){
  .grid.cards{grid-template-columns:repeat(2,1fr)}
  .grid.thirds{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid.cards,.grid.thirds,.grid.halves{grid-template-columns:1fr}
  .hero-brand{flex-direction:column;align-items:flex-start}
  .hero-stage{height:auto;padding:.5rem 0 0}
  .hero-support{text-align:left}
}

/* Cards */
.card{
  padding:1.2rem;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.15));
  border:1px solid var(--edge);
  border-radius:1rem;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;perspective:1000px;
}
.card::after{
  content:"";
  position:absolute;inset:-2px;
  background:radial-gradient(500px 200px at -5% -10%, rgba(125,200,255,.12), transparent 40%),
             radial-gradient(600px 300px at 120% -20%, rgba(157,134,255,.12), transparent 50%);
  z-index:-1;filter:blur(4px);
}
.card:hover{transform:translateY(-2px)}
.card h3{margin-top:.4rem}

/* List ticks inside cards */
.tick{margin:0;padding-left:1.1rem}
.tick li{margin:.25rem 0}
.tick li::marker{content:"✓ "}

/* Values & glass blocks */
.value{padding:1.4rem;border:1px solid var(--edge);border-radius:1rem}
.glass{background:var(--glass);box-shadow:var(--shadow)}

/* About block */
.about{display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:2rem}
.about-copy p{margin:.6rem 0}
.inline-cta{margin-top:.8rem}

/* Contact form */
.contact{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.contact-form{display:grid;gap:1rem;margin-top:1rem}
label{display:grid;gap:.35rem;font-weight:500}
input,select,textarea{
  background:#0e1423;color:var(--fg);border:1px solid var(--edge);border-radius:.6rem;
  padding:.7rem .9rem;outline:none;
}
@media (prefers-color-scheme: light){ input,select,textarea{background:#fff} }
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent)}
.form-actions{display:flex;align-items:center;gap:1rem}
.privacy{color:var(--muted);font-size:.9rem;margin:0}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1rem;border-radius:.8rem;border:1px solid var(--edge);
  text-decoration:none;color:var(--fg);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.1));
  cursor:pointer;font-weight:600;transition:transform .05s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.small{padding:.5rem .7rem;font-size:.95rem}
.btn.primary{
  border-color:transparent;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.btn.ghost{background:transparent}

/* Footer */
.site-footer{border-top:1px solid var(--edge);padding:2rem 0;color:var(--muted)}
.site-footer .foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
/* === OWBA: tighten the gap between the big banner and the text/buttons === */
.hero-inner{ gap: .5rem; }                 /* was 1rem */

.hero-stage{
  /* remove the fixed height that was creating empty space */
  height: auto;
  min-height: clamp(140px, 18vw, 260px);   /* still ensures a strong presence */
  padding-bottom: 0;
}

.brand-sub{ margin: .1rem 0 0; }           /* slightly tighter subtitle */
.lede{ margin: .15rem auto .5rem; }        /* bring paragraph closer */

.hero-support{ margin-top: 0; }            /* explicit, just in case */
/* Bold the full company name everywhere it appears */
.brand-sub .company,
.brand-text .company { font-weight: 700; }

/* Neutralise the old single-word emphasis so only the whole phrase is bold */
.brand-sub .the,
.brand-text .the { font-weight: inherit; }
/* === OWBA: tighten below the coin/title banner === */

/* Remove any reserved height in the banner row */
.hero-stage{
  height: auto;
  min-height: auto;          /* override earlier clamp() if present */
  padding-bottom: 0;
}

/* Reduce internal spacing inside the hero */
.hero-inner{ gap: .35rem; }   /* was ~1rem */

/* Nudge the copy/buttons up to sit under the coin */
.hero-support{ margin-top: clamp(-28px, -4vw, -56px); }

/* Keep the paragraph tight so buttons sit closer */
.lede{ margin: .15rem auto .45rem; }

/* Pull the Solutions section up a bit more */
#solutions.section{
  padding-top: 1.2rem;       /* was 3rem via .section */
  margin-top: 0;
}
/* Lower the About logo slightly (visual shift, no layout change) */
@media (min-width: 700px){
  .about-logo { transform: translateY(68px); }  /* tweak 12px as you like */
}
/* --- OWBA: lower the main hero coin slightly (no reflow) --- */
:root{ --hero-coin-nudge: 42px; }   /* adjust to taste: 0–40px is typical */

@media (min-width: 700px){
  .hero-brand img{
    transform: translateY(var(--hero-coin-nudge));
    will-change: transform;
  }
}