/* OpenBridge — Professional, animated static site */
:root{
  --brand:#0A7CFF; /* Primary */
  --brand-dark:#085ec0;
  --accent:#12D2AC; /* Secondary */
  --bg:#0b1221; /* Dark background */
  --text:#e6eefc; /* Light text */
  --muted:#9bb3d9;
  --card:#121a31;
  --border:#1e2a4d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, Noto Sans, 'Apple Color Emoji', 'Segoe UI Emoji';
  color:var(--text); background:radial-gradient(1200px 600px at 80% -10%, #0f1b33 10%, #0b1221 60%), #0b1221;
}

/* Layout */
.container{max-width:1100px; margin:0 auto; padding:0 20px}
header.site{
  position:sticky; top:0; z-index:1000; backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(180deg, rgba(11,18,33,.75), rgba(11,18,33,.55));
  border-bottom:1px solid var(--border);
}
nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--accent); box-shadow:0 0 24px #12D2AC66}
nav ul{list-style:none; display:flex; gap:18px; padding:0; margin:0}
nav a{color:var(--text); text-decoration:none; padding:8px 12px; border-radius:8px; transition:all .25s}
nav a:hover{background:#0d162c}
.cta{background:linear-gradient(90deg,var(--brand),var(--accent)); color:#08111d; font-weight:700}
.cta:hover{filter:brightness(1.06)}

footer.site{border-top:1px solid var(--border); margin-top:60px; padding:24px 0; color:var(--muted)}
footer .grid{display:grid; grid-template-columns:1fr auto; gap:20px}
small a{color:var(--muted)}

/* Hero */
.hero{padding:72px 0 32px 0; position:relative; overflow:hidden}
.hero h1{font-size:42px; line-height:1.1; margin:0 0 12px}
.hero p{font-size:18px; color:var(--muted); max-width:700px}
.hero .chips{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.chip{border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--muted); padding:8px 12px; border-radius:999px}

/* Cards */
.section{padding:28px 0}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; position:relative; overflow:hidden}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted)}
.card .tag{position:absolute; top:18px; right:18px; background:#102047; color:#9bb3d9; border:1px solid var(--border); padding:4px 8px; border-radius:999px; font-size:12px}

/* Forms */
form{display:grid; gap:12px; max-width:680px}
label{font-weight:600}
input,select,textarea{width:100%; padding:12px 14px; border-radius:10px; background:#0e172e; border:1px solid var(--border); color:var(--text)}
textarea{min-height:120px}
button{padding:12px 16px; border-radius:10px; border:0; color:#08111d; font-weight:700; background:linear-gradient(90deg,var(--brand),var(--accent)); cursor:pointer}
button:hover{filter:brightness(1.06)}

/* Animation helpers */
.reveal{opacity:0; transform:translateY(18px); transition:all .6s ease}
.reveal.in{opacity:1; transform:translateY(0)}

/* Responsive */
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid3,.grid2{grid-template-columns:1fr} .hero h1{font-size:34px}}