/*
Theme Name: Brandynamic Digital
Theme URI: https://brandynamicmarketing.com
Author: Brandon Davids / BranDynamics
Author URI: https://brandynamicmarketing.com
Description: Sleek blue & black digital marketing theme. Fast, responsive, Gutenberg-friendly landing layout.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brandynamic-digital
*/

/* Color system */
:root{
  --blue: #0ea5e9;        /* electric blue */
  --blue-dark:#0369a1;    /* darker hover */
  --navy:#0b1220;         /* deep navy */
  --black:#000000;
  --gray:#7b87a3;
  --white:#ffffff;
  --bg:#070b14;           /* site background */
  --card:#0f1626;         /* card background */
  --ring:rgba(14,165,233,0.5);
}

/* Reset & base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--white);
  background: radial-gradient(1200px 800px at 10% 10%, #0b1325 0%, var(--bg) 45%, #05070d 100%);
  line-height:1.6;
}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--white)}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background: rgba(5,8,15,0.8);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.3px;
}
.brand .logo{
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(135deg, var(--blue), #60a5fa);
  display:grid; place-items:center; font-weight:800; color:#0b1220;
  box-shadow: 0 8px 30px rgba(14,165,233,.3);
}
.nav a{margin-left:18px; font-weight:600; color:#b7c2dd}
.nav a:hover{color:var(--white)}

/* Button */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:12px; font-weight:700;
  background:linear-gradient(180deg, var(--blue), var(--blue-dark));
  color:#001018; border:1px solid #1f9ad1;
  box-shadow: 0 8px 30px rgba(14,165,233,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn:hover{transform:translateY(-1px)}
.btn-outline{
  background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.15)
}
.btn-outline:hover{border-color:var(--blue); box-shadow:0 0 0 4px var(--ring)}

/* Hero */
.hero{position:relative; overflow:hidden; padding:96px 0 72px; background: radial-gradient(900px 600px at 85% -10%, rgba(14,165,233,0.2), transparent);}
.hero-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:48px; align-items:center}
.badge{display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(14,165,233,.12); border:1px solid rgba(14,165,233,.35); color:#9cdcff; font-weight:700;}
.hero h1{font-size: clamp(32px, 4.4vw, 56px); line-height:1.06; margin:18px 0}
.hero p{font-size: clamp(16px, 1.4vw, 19px); color:#b9c6e1; margin:0 0 24px}
.stats{display:flex; gap:28px; margin-top:18px; color:#b7c2dd}
.stat strong{font-size:28px; color:var(--white)}

/* Cards */
.section{padding:70px 0}
.section h2{font-size: clamp(26px, 3.2vw, 38px); margin:0 0 8px}
.section .lead{color:#b7c2dd; margin:0 0 28px}
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns: repeat(3,1fr)}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.card h3{margin-top:0}
.card p{color:#b7c2dd}

/* Process */
.step{display:flex; gap:16px; align-items:flex-start}
.step .num{
  width:36px; height:36px; border-radius:10px; flex:0 0 auto;
  display:grid; place-items:center; font-weight:800;
  background:rgba(14,165,233,.18); border:1px solid rgba(14,165,233,.35); color:#8ddcff;
}

/* Testimonials */
.quote{font-size:18px; color:#dbeafe}
.kicker{font-size:14px; color:#9fb3d7}

/* Footer */
.site-footer{padding:48px 0; background:#060910; border-top:1px solid rgba(255,255,255,.06); color:#97a6c5}
.footer-grid{display:grid; grid-template-columns: 1fr 1fr; gap:24px}

/* Forms */
.form{
  display:grid; gap:14px;
}
.input, .textarea{
  background:#0c1322; border:1px solid rgba(255,255,255,.12); border-radius:12px;
  padding:12px 14px; color:var(--white); outline:none;
}
.input:focus, .textarea:focus{border-color:var(--blue); box-shadow:0 0 0 4px var(--ring)}
.textarea{min-height:120px; resize:vertical}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .grid-3{grid-template-columns: 1fr}
}