:root{
  /* --bg:#707070; */
  --bg:rgb(136, 104, 85);
  --footer-bg:#141923;
  --text:#e8ecf1;
  --txt-muted:#96a0ad;
  --primary-btn-bg:#5ac8fa;
  --primary-btn-fg:#0b1016;
  --section-bg:#414141;           
  --card-bg:#171c26;             /* a sub-section inside a section */
  --note-bg: #025757;
  --note-icon-bg:#ffbb00;
  --note-icon-fg:#633b3b;
  --border:#252b36;
  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.25);
  --maxw:1120px;
}


p {
  line-height: 1.5;
}


.squeeze {
  padding-left: 1rem;
  padding-right: 1rem;
}


.logo_shadow {
  filter: 
    /* drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.45))
    drop-shadow(2px 2px 1px rgba(255, 255, 255, 0.15));
   */
    drop-shadow(1px 1px 1px rgba(255,255,255,0.45))   /* tiny keyline */

    /* soft depth */
    drop-shadow(3px 3px 12px rgba(0,0,0,.35));      
  
}

.brand-plate{
  display:flex; 
  align-items:center;
  padding: 3px 6px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
}

.brand-plate img {
  height: 42px;                /* tweak until visual match */
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.35));
}

.main_logo {
  display: block;           /* make <a> behave like a block */
  width: 40vw;              /* 30% of the viewport width */
  max-width: 420px;         /* optional safety cap */
  margin: 15px auto;          /* reset spacing if needed */
}

.main_logo img {
  width: 100%;              /* fill the link area */
  height: auto;             /* preserve aspect ratio */
  display: block;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Inter", Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}
video{display:block; max-width:100%}
a{color:var(--primary-btn-bg); text-decoration:none}
a:hover{text-decoration:underline}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; border:0; padding:0; overflow:hidden; clip:rect(0 0 0 0)}
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:1rem; top:1rem; background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem; z-index:10000}

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:1000;
  background: linear-gradient(to bottom, #2d3747 0%, #0b1016 100%);
  backdrop-filter:saturate(140%) blur(6px);
  /* background:color-mix(in srgb, var(--bg) 85%, transparent); */
  /* background: linear-gradient(to bottom, #20a6ff 0%, #636dff 80%); */
  border-bottom:1px solid var(--border);
}
.nav{display:flex; align-items:center; gap:1rem; max-width:var(--maxw); margin:0 auto; padding:.75rem 1rem}
.brand{display:flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius:.5rem}
.brand-word{font-weight:800; letter-spacing:.2px; font-size:1.05rem; text-transform:uppercase}
.nav-toggle{display:none; font:inherit; background:transparent; border:1px solid var(--border); color:var(--text); padding:.4rem .6rem; border-radius:.5rem}
.nav-menu{display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0}
.nav-ctas{margin-left:auto; display:flex; gap:.5rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem .9rem; border:1px solid var(--border);
  border-radius:.7rem; color:var(--text); background:transparent; text-decoration:none; white-space:nowrap;
}
.btn:hover{border-color:color-mix(in srgb, var(--border), var(--text) 30%)}
.btn-primary{background:var(--primary-btn-bg); color:var(--primary-btn-fg); border-color:transparent; box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; border-color:transparent; color:var(--text); opacity:.9}
.btn-lg{padding:.85rem 1.15rem; font-weight:600}





/* Sections */
.section{
  max-width:var(--maxw); 
  /* margin: 0 auto;  */
  margin: 0 auto 4.0rem auto; 
  padding: 0.5rem 2rem 3.5rem 2rem;
  background-color: var(--section-bg);
  border-radius: 1.0rem;
}

.section-head{
  margin-bottom:1.25rem;
  margin-top: 0;
}

.no-bg {
  background-color: transparent !important;
}

/* Hero */
.hero{position:relative; display:grid; grid-template-columns:1fr; min-height:64vh; place-items:center; overflow:clip}
.hero-media{position:absolute; inset:0; z-index:-1; opacity:.35}
.hero-video{width:100%; height:100%; object-fit:cover}
.hero-content{max-width:860px; text-align:center; padding:3rem 1rem}
.hero h1{font-size:clamp(2rem, 4vw, 3rem); margin:.25rem 0 .5rem}
.lead{font-size:1.1rem; color:lightgrey; margin:0 auto 1.25rem; max-width:46ch}
.hero-actions{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}

/* Feature grid */
.feature-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem}
.feature{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
/* .feature img{aspect-ratio:16/9; object-fit:cover; background:#000} */
.feature h3{margin:.9rem .9rem .25rem}
.feature p{margin:0 .9rem 1rem; color:var(--txt-muted)}


.note {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
  list-style: none;
  padding: 0;
  /* color: teal; */

}

.note li {
  background: linear-gradient(155deg, #1b2028, #11151c);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  transition: transform .15s ease, box-shadow .15s ease;
  background: var(--note-bg);
}
.note li:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

.note-head {
  display: flex;
  align-items: center;
  margin-bottom: .4rem;
}

.note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--note-icon-bg);
  color: var(--note-icon-fg);
  font-weight: 700;
  border-radius: 50%;
  margin-right: .75rem;
  border: #000 solid 1px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

.note h3 {
  margin: 0;
  text-indent: 8px;
  font-size: 1.1rem;
  color: #fff;
}

.note p {
  margin: 0;
  color: #a5aebc;
  line-height: 1.45;
}

/* Mild colour variation per card */
/* .steps li:nth-child(1){background:linear-gradient(155deg,#1c2230,#121820);}
.steps li:nth-child(2){background:linear-gradient(155deg,#1a2333,#111825);}
.steps li:nth-child(3){background:linear-gradient(155deg,#192635,#10161e);}
.steps li:nth-child(4){background:linear-gradient(155deg,#18283a,#101820);} */





/* .author-note {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 1.5rem 2rem;
  background: linear-gradient(155deg, #141920, #10151b);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
} */

/* .author-note h3 {
  font-size: 1.3rem;
  color: #ffd166;
  margin-top: 0;
}

.author-note p {
  color: #d4d9e1;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.author-sign {
  text-align: right;
  margin-top: 1.5rem;
}

.author-name {
  font-weight: 600;
  color: #fff;
} */







/* Media / Press */
.media-wrap{display:grid; grid-template-columns:2fr 1fr; gap:1rem}
.video-embed{position:relative; aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border)}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%}
.press-kit{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:1rem}
.press-kit ul{margin:.5rem 0 0; padding-left:1.1rem}

/* CTA band */
.cta{text-align:center}
.cta-buttons{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap}

/* Community / Cards */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:1rem}
.newsletter{display:flex; gap:.5rem; margin-top:.5rem}
.newsletter input[type="email"]{
  flex:1 1 auto; min-width:12rem; padding:.65rem .75rem;
  border-radius:.6rem; border:1px solid var(--border); background:#0c0f14; color:var(--text);
}

/* Support */
.support-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}

/* About */
/* .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem} */

.support-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
}

.support-grid article{
  display:grid;
  grid-template-rows:auto 1fr auto;
  border:1px solid #000;  border:1px solid var(--border);  border-radius: .6rem;
  margin: 5px;
  padding: 10px;
  background: var(--note-bg);
}

.support-grid h3 {
  margin: 0.3rem 0 0.5rem;
}

.support-grid p {
  margin: 0.8rem 0 1.8rem;
}





.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none !important;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox:target {
  display: flex !important;
}

.lightbox iframe {
  width: 90%;
  max-width: 700px;
  height: 80vh;
  border: none;
  border-radius: 8px;
  background: #fff;
  z-index: 1;
}

.lightbox .close {
  position: absolute;
  inset: 0;
  cursor: default;
}













.site-footer{border-top:1px solid var(--border); margin-top:3rem; background:var(--footer-bg)}
.footer-top, .footer-bottom{max-width:var(--maxw); margin:0 auto; padding:1rem}
.footer-top{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.footer-links{list-style:none; display:flex; gap:1rem; margin:0; padding:0}
.muted{color:var(--txt-muted)}

/* Responsive */
@media (max-width: 980px){
  .feature-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2, 1fr)}
  .media-wrap{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .support-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
}

@media (max-width: 720px){
  .nav-menu{display:none}
  .nav-menu.open{display:flex; position:absolute; left:0; right:0; top:100%; background:var(--footer-bg); border-bottom:1px solid var(--border); padding:.75rem 1rem; gap:.75rem; flex-direction:column}
  .nav-toggle{display:inline-block}
  .feature-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}



#newsletterOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
}
#newsletterBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  height: 650px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#newsletterBox iframe {
  width: 100%;
  height: 100%;
  border: none;
}
#newsletterClose {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 24px;
  color: #888;
  cursor: pointer;
}









  @font-face {
    font-display: block;
    font-family: Roboto;
    src: url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 600;
    src: url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff")
  }

  @font-face {
    font-display: fallback;
    font-family: Roboto;
    font-weight: 700;
    src: url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.brevo.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff")
  }

  #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #c0ccda;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #c0ccda;
  }

  #sib-container textarea::placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #c0ccda;
  }

  #sib-container a {
    text-decoration: underline;
    color: #2BB2FC;
  }