:root{
  --ink:#0B1B2B; --steel:#415A77; --fog:#E6EEF5;
  --white:#FFFFFF; --accent:#2F6BFF;
  --radius:14px; --shadow:0 10px 30px rgba(11,27,43,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink); background:var(--white); line-height:1.6;
}
h1,h2,h3{font-family:Poppins,Inter,Arial; line-height:1.2; margin:0 0 .4rem}
h1{font-size:2.4rem}
h2{font-size:1.8rem}
h3{font-size:1.2rem}
p{margin:.25rem 0 .75rem}
img{max-width:100%; display:block; border-radius:12px}

.container{max-width:1120px; margin:0 auto; padding:0 20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; 
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(238,243,247,.6);
  box-shadow: 0 4px 20px rgba(11,27,43,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}

.brand{display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--accent); text-decoration:none}
.logo-dot{display:none}
.menu{display:flex; align-items:center; gap:22px}
.menu a{color:var(--ink); text-decoration:none; font-weight:500; transition: color 0.25s ease}
.menu a:hover{color:var(--accent)}
.menu .cta{
  padding:.55rem .9rem; 
  border-radius:999px; 
  background: rgba(11,27,43,.95);
  color:#fff;
  backdrop-filter: saturate(180%) blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 12px rgba(11,27,43,.15);
  transition: all 0.25s ease;
}
.nav-toggle{display:none; background:none; border:0}
.nav-toggle .bar{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0}

/* HERO: full-bleed video + overlay + centered content */
.hero{
  padding: 140px 0 160px;                 /* more breathing room */
  position: relative;
  color:#fff;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("assets/strategy.mp4") center/cover no-repeat;
  z-index: -2;
}

.hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: -2;
  object-fit: cover;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.42);            /* overlay for readability */
}
.hero .container{ position:relative; z-index:2; }

.hero-inner{
  max-width: 980px;                        /* spread the content */
  margin: 0 auto;                          /* center horizontally */
  text-align: center;                      /* or left if you prefer */
}

.hero h1{
  color:#fff;
  letter-spacing:-.02em;
  font-size: clamp(36px, 5.2vw, 56px);     /* scales nicely */
  line-height: 1.12;
  margin: 0 0 12px;
}
.hero .sub{
  color:#e8eef6;
  max-width: 820px;
  margin: 0 auto 22px;
  font-size: clamp(16px, 1.6vw, 20px);
}

.hero-cta{ display:flex; gap:16px; justify-content:center; margin: 18px 0 14px; }
.btn{ display:inline-flex; align-items:center; justify-content:center;
      padding: .9rem 1.2rem; border-radius:12px; font-weight:700;
      text-decoration:none; border:1px solid transparent; transition:all .25s ease; }
.btn.primary{ background:#2F6BFF; color:#fff; box-shadow:0 12px 30px rgba(47,107,255,.25); }
.btn.primary:hover{ background:#f97316; border-color:#f97316; color:#fff; }

.btn.ghost{
  background: transparent;                 /* fix: not white */
  color: #ffffff;
  border-color: rgba(255,255,255,.7);
  backdrop-filter: saturate(160%) blur(0px);
}
.btn.ghost:hover{
  background:#f97316; border-color:#f97316; color:#fff;
}

/* Proof chips */
.proof{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:12px; padding:0; list-style:none; }
.proof li{
  background: rgba(255,255,255,.18);
  color:#fff;
  padding:.45rem .75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.proof li:hover{ background:#f97316; color:#fff; border-color:#f97316; }

/* Optional: tighten nav so hero feels aligned with it */
.site-header .menu .cta:hover{ 
  background: rgba(249,115,22,.95);
  border-color: rgba(249,115,22,.8);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(249,115,22,.25);
}

/* Trust bar */
.trust{background:#f8fbff; border-top:1px solid #eef3f7; border-bottom:1px solid #eef3f7}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:18px 0}
.trust-item{color:#3a4d62; text-align:center; font-weight:600}

/* Sections */
.section{padding:72px 0}
.section.alt{background:#F7FAFE}
.section-head{text-align:center; margin-bottom:28px}
.section-head .muted{color:#5b6f86}
#services .section-head .muted{color:#000000}

/* Services section background */
#services {
  background-image: url('assets/iamge3.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:#fff; border:1px solid #edf1f6; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card .icon{font-size:22px; background:#f0f5ff; width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:10px}
.card .bullets{margin:.6rem 0 0; padding-left:0; list-style:none}
.card .bullets li{position:relative; padding-left:16px; margin:.2rem 0}
.card .bullets li::before{content:"•"; position:absolute; left:0; color:var(--accent); font-weight:bold}

/* Work */
.work-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.work-card{background:#fff; border:1px solid #edf1f6; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.work-copy{padding:16px}
.link{color:var(--accent); font-weight:600; text-decoration:none}

/* Vision Section */
.vision-section{
  position: relative;
  min-height: 400px;
  background-image: url('assets/design1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  margin: 0;
}

.vision-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1;
}

.vision-content{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
}

.vision-content h2{
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* About */
.about-grid{
  display:grid; grid-template-columns:.95fr 1.05fr; gap:28px;
  align-items:center;                 /* vertical alignment */
}

.about-media{
  display:flex; align-items:center; justify-content:center;
  min-height: 220px;                  /* avoids awkward collapse */
}

.about-media .logo-large{
  width: min(42vw, 420px);            /* responsive cap */
  max-width: 100%;
  height: auto;
  image-rendering: auto;              /* crisp SVG scaling */
  filter: none;                       /* ensure no blur/opacity filters */
  border-radius: 0;                   /* avoid rounding artifacts on vector */
}

.logo-text-large{
  font-family: Poppins, Inter, Arial;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ticks{margin:.5rem 0 0; padding-left:18px}
.ticks li{margin:.2rem 0}

/* Founder & Partners */
#founder {
  background-image: url('assets/silver.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.founder{
  text-align:center;
}

.founder-card{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:28px;
}

.founder-img{
  width:160px; height:160px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #fff;
  box-shadow:0 12px 32px rgba(11,27,43,.25), 0 4px 16px rgba(11,27,43,.15);
}

.founder-name{
  font-size:1.3rem;
  font-weight:700;
  margin:0;
}

.founder-title{
  font-size:.95rem;
  line-height:1.5;
  color:#3b4e65;
  margin:0;
}

/* In dark/alt section, text stays readable */
.section.alt .founder-title{
  color:#4f5f73;
}

/* Contact */
#contact {
  background-image: url('assets/endingpage.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: -1;
}

#contact .section-head h2 {
  color: #fff;
}

#contact .section-head .muted {
  color: #e8eef6;
}

.contact{max-width:760px; margin:0 auto; background:#fff; border:1px solid #edf1f6; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.contact .grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label span{display:block; font-weight:600; margin:6px 0}
input,select,textarea{
  width:100%; padding:.75rem .8rem; border:1px solid #d9e2ec; border-radius:10px; font:inherit; background:#fbfdff;
}
input:focus,select:focus,textarea:focus{outline:2px solid #cfe0ff; border-color:#cfe0ff}
.form-note{font-size:.95rem; color:#4f647b}

/* Footer */
.site-footer{border-top:1px solid #eef3f7; background:#fbfdff}
.foot{display:flex; align-items:center; justify-content:space-between; padding:20px 0}
.social a{color:#3b4e65; text-decoration:none; margin-left:14px}

/* Responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .about-media .logo-large{ width:min(70vw, 420px); margin:0 auto }
  .contact .grid{grid-template-columns:1fr}
  .menu{display:none; position:absolute; right:16px; top:64px; background:#fff; border:1px solid #eef3f7; border-radius:12px; padding:10px; box-shadow:var(--shadow); flex-direction:column; gap:10px; width:220px}
  .nav-toggle{display:block}
  .menu a{padding:.5rem .6rem}
  
  /* Vision section mobile adjustments */
  .vision-section{
    min-height: 300px;
    padding: 60px 0;
  }
  
  .vision-content h2{
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
}