:root{
  --green:#3a9b18;
  --green-2:#2f7f12;
  --orange:#ff6a00;
  --navy:#0b1b3b;

  --blue:#0b62d6;
  --purple:#6a33ff;
  --teal:#0a8f7a;

  --card:#ffffff;
  --muted:#6b7280;
  --border:#e7e7ea;
  --shadow: 0 10px 30px rgba(16,24,40,.08);
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0f172a;
  background:#fff;
}

.text-green{ color:var(--green) !important; }
.text-orange{ color:var(--orange) !important; }
.text-blue{ color:var(--blue) !important; }
.text-purple{ color:var(--purple) !important; }

/* Brand */
.brand-mark{
  width:56px;height:56px;border-radius:50%;
  border:2px solid rgba(255,106,0,.35);
  display:grid;place-items:center;
  background: #fff;
}
.brand-mark__inner{
  font-weight:900;
  color:var(--green);
  letter-spacing:.5px;
}
.brand-mark--sm{ width:44px;height:44px; }

.brand-title{
  font-family: "League Spartan", Inter, system-ui, sans-serif;
  font-weight:900;
  letter-spacing:.5px;
  line-height:1;
  font-size:1.35rem;
}
.brand-title--green{ color:var(--green); }
.brand-title--orange{ color:var(--orange); margin-left:.35rem; }
.brand-subtitle{
  font-size:.7rem;
  letter-spacing:.18em;
  color:#2b2f36;
  opacity:.75;
}
.brand-logo{
  display:flex;
  align-items:center;
  padding: 0;
}

.brand-logo__img{
  height: 56px;         /* tweak if needed */
  width: auto;
  display:block;
}
@media (max-width: 575.98px){
  .brand-logo__img{ height: 46px; }
}

/* Nav */
.nav-link{
  font-weight:800;
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.06em;
  color:#0b1b3b;
}
.nav-link.active{
  color:var(--orange) !important;
  position:relative;
}
.nav-link.active::after{
  content:"";
  position:absolute;
  left:.1rem; right:.1rem;
  bottom:-.35rem;
  height:3px;
  border-radius:999px;
  background:var(--orange);
}

/* Buttons */
.btn-green{
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-hover-bg: var(--green-2);
  --bs-btn-hover-border-color: var(--green-2);
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#afa;
}
.btn-outline-orange{
  --bs-btn-color: var(--orange);
  --bs-btn-border-color: var(--orange);
  --bs-btn-hover-bg: var(--orange);
  --bs-btn-hover-border-color: var(--orange);
  --bs-btn-hover-color:#fff;
}

/* Hero */
.hero{ 
  	padding: 3.5rem 0 0;
}

/* =========================
   HERO (full-width background, bleeds to right edge)
   ========================= */
.hero.hero--bg{
  /* section spacing */
  padding: 3.5rem 0 2rem;

  /* background illustration */
  background-image: url("./graphics/intro-background.jpg");
  background-repeat: no-repeat;

  /* bleed to viewport edge (no right margin) */
  background-position: right 0 top 50%;
  background-size: min(56vw, 760px) auto;

  /* avoid any “inset” quirks */
  background-origin: border-box;
  background-clip: border-box;
}

/* If your image itself has whitespace, uncomment and tweak:
.hero.hero--bg{ background-position: right -40px top 50%; }
*/

/* Mobile/tablet adjustments */
@media (max-width: 991.98px){
  .hero.hero--bg{
    padding-top: 2.5rem;
	/* swap background */
	background-image: url("./graphics/intro-background-mobi.jpg");
    /* keep it pinned to the right edge */
    background-position: right 0 bottom 0;
    /* scale down on smaller screens */
    background-size: auto;
  }
}

.hero-title{
  font-family: "League Spartan", Inter, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: .92;
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 5.4rem);
	transform: scaleY(1.12);
  transform-origin: left center;
}
.hero-title__line{ display:block; }
.hero-title__line--green{ color:var(--green); }
.hero-title__line--orange{ color:var(--orange); }

.hero-lead{
  margin-top: 1.25rem;
  font-size: 1.35rem;
  color: var(--navy);
  font-weight: 700;
}
.hero-lead strong{ font-weight:900; }
@media (max-width: 992px){
	.hero-title,.hero-lead{
		/* h-offset v-offset blur-radius color */
		text-shadow: 2px 2px 4px white;
	}
}
/* Stats card */
#interstitial{
  /* Standard syntax: 'to bottom' is the default direction */
  background: linear-gradient(to bottom, transparent, white);
	margin-top: -16px;
	padding-bottom: 16px;
  /* Alternative using rgba for better cross-browser consistency */
  /*background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);*/
}

.stats-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow:hidden;
	/* set negative margin to slide container up */
	margin-top: -24px;
}
@media (max-width: 991.98px){
	#interstitial{margin-top: -15px;}
	.stats-card{margin-top: -36px;}
}
.stats-item{
  padding: 1.5rem 1.25rem;
  border-right:1px solid var(--border);
  text-align:left; /* was centered */
}
.stats-item:last-child{ border-right:none; }
@media (max-width: 767.98px){
  .stats-item{ border-right:none; border-bottom:1px solid var(--border); }
  .stats-item:last-child{ border-bottom:none; }
}
.stats-top{
  display:flex;
  align-items:center;
  gap:.75rem;
  justify-content:flex-start;
  margin-bottom:.35rem;
}
.stats-icon{
  font-size: 2.6rem;
  line-height:1;
  margin-bottom: 0; /* remove old spacing */
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
}
.stats-top__text{
  line-height:1.05;
}
.stats-number{
  font-family: "League Spartan", Inter, system-ui, sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
}
.stats-label{
  font-weight: 700;
  color:#18253E;
  letter-spacing:.08em;
  font-size:.9rem;
  margin-top:-0.5rem;
}
.stats-desc{
  color:#1f2937;
  opacity:.85;
  margin-top:.5rem;
  font-size:.9rem;
}

/* Section heading */
.section-title{
  font-family: "League Spartan", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing:.04em;
  color:#0b1b3b;
  margin:0;
}
.section-underline{
  width:48px;
  height:4px;
  border-radius:999px;
  background: var(--green);
  margin-top:.6rem;
}

.section__bg{
  background-position: bottom right;
  background-repeat:no-repeat;
  background-size: auto;
}

/* Live strip (swipe) */
.live-strip{
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  /* more even vertical spacing like the mock */
  padding: 1.35rem 0 1.45rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.live-strip::-webkit-scrollbar{ display:none; }

/* Subtle edge fades to hint horizontal scroll */
.live-strip{
	position: relative;
	cursor: grab;
	box-shadow: inset 2 3 4 4 gray;
	/*
  mask-image: linear-gradient(to right,
    transparent 0,
    black 28px,
    black calc(100% - 28px),
    transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    black 28px,
    black calc(100% - 28px),
    transparent 100%);
	*/
}
.live-strip.is-dragging{
  cursor: grabbing;
}

/* Prevent selecting text while dragging */
.live-strip.is-dragging,
.live-strip.is-dragging *{
  user-select: none;
}
.live-strip__track{
  display:flex;
  gap: 2rem;
  padding-left: 48px;  /* <-- key change */
  padding-right: 10px;
  width: max-content;
  align-items:flex-start;
}

.live-item{
  scroll-snap-align: start;
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  min-width: 260px;
  padding:.25rem 0;
  position:relative;
}
.live-item a,.live-item a:hover,.live-item a:focus{color: #fff; text-decoration: none !important;}
.live-item__avatar{
  width:44px;height:44px;
  border-radius:12px;
  display:grid;place-items:center;
  color:#fff;
  font-weight:900;
  font-size:1.25rem;
  flex: 0 0 auto;
}
.live-item__domain{
  font-weight:600;
  color:#0b1b3b;
	margin-bottom: 0rem;
}
.live-item__builder{
  font-size:.9rem;
  color: var(--muted);
  margin-top:-0.1rem;
  margin-bottom:0.75rem;
}
.live-badge{
  position:absolute;
  left: 56px;
  top: 50px;
  background: var(--green);
  color:#fff;
  font-weight:900;
  letter-spacing:.06em;
  border-radius:999px;
  padding:.45rem .55rem;
  font-size:.7rem;
}
/* alternate badge for "IN BUILD" */
.live-badge--build{
  background: var(--orange);
}
/* Avatar theme colors */
.bg-green{ background: var(--green); }
.bg-orange{ background: var(--orange); }
.bg-blue{ background: var(--blue); }
.bg-purple{ background: var(--purple); }
.bg-teal{ background: var(--teal); }

/* Info cards */
.info-card{
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 1.5rem 1.5rem;
  border:1px solid rgba(0,0,0,.03);
  position: relative;
  overflow: hidden;
}
.info-card--mint{ background: #eff8ee; }
.info-card--peach{ background: #fff2e6; }
.info-card--sky{ background: #eaf3ff; }

.info-card__title{
  font-family: "League Spartan", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing:.04em;
  margin:0;
}
.info-card__underline{
  width: 44px;
  height: 4px;
  border-radius: 999px;
  margin-top:.7rem;
}
.info-card__underline--green{ background: var(--green); }
.info-card__underline--orange{ background: var(--orange); }
.info-card__underline--blue{ background: var(--blue); }

.info-card__text{
  color:#0b1b3b;
  opacity:.9;
  font-weight: 600;
  position: relative;
  z-index: 2;
}
.info-card__big{
  font-family: "League Spartan", Inter, system-ui, sans-serif;
  font-weight: 700;
  line-height:1.1;
  font-size: 1.6rem;
  position: relative;
  z-index: 2;
}

.info-bullets li{ margin: .85rem 0; font-weight:700; color:#0b1b3b; opacity:.9; position:relative; z-index:2; }
.bullet-icon{
  width:44px;height:44px;
  border-radius:12px;
  display:grid;place-items:center;
  color:#fff;
  flex:0 0 auto;
}

.info-card__bg{
  position:absolute;
  inset:auto 0 0 auto;
  width: 70%;
  height: 70%;
  background-position: bottom right;
  background-repeat:no-repeat;
  background-size: contain;
  opacity: .35;
  z-index: 1;
  pointer-events:none;
}

/* Swap these as you extract assets from the mock */
.info-card__bg--leaves{ background-image:url("./graphics/leaf-background.png"); }
.info-card__bg--clouds{ background-image:url("./graphics/cloud-background.png"); }
.info-card__bg--sky{ background-image:url("./graphics/cloud2-background.png"); opacity:.25; }

/* CTA band as a background image */
.cta-band{
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow);
  min-height: 140px;
}
.cta-band__overlay{
  padding: 1.4rem 1.5rem;
  background: linear-gradient(90deg, rgba(58,155,24,.65), rgba(255,106,0,.85));
}
.cta-wordmark{
  display:inline-block; /* ensures the arrowline can match the title width */
}
.cta-left{
  display:flex;
  align-items:center;
  gap: 1.25rem;
}
.cta-icon{
  width:72px;height:72px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  display:grid;place-items:center;
  color: var(--orange);
  font-size: 1.8rem;
  flex:0 0 auto;
}
.cta-title{
  font-family: "League Spartan", Inter, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 2rem;
  line-height: .9;
  color:#fff;

  /* makes the wordmark feel taller like the mock */
  transform: scaleY(1.12);
  transform-origin: left center;
}
/*.cta-arrow{ font-size:1.6rem; opacity:.95; margin-top:.35rem; color:#fff; }*/

.cta-arrowline{
  position: relative;
  height: 32px;            /* room for arrow head */
  margin-top: .35rem;
  width: 100%;             /* matches .cta-wordmark (same as title width) */
}

.cta-arrowline::before{
  content:"";
  position:absolute;
  left:0;
  right:0;             /* leave space for arrow head */
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
}

.cta-arrowline::after{
  content:"";
  position:absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 15px;
  height: 15px;
  border-right: 3px solid rgba(255,255,255,.9);
  border-top: 3px solid rgba(255,255,255,.9);
}

.cta-right{
  background: rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 1.2rem 1.2rem;
  color:#fff;
}
.cta-right-text{
  font-weight: 800;
  opacity:.95;
}
.cta-email{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:.7rem;
  padding: .85rem 1.15rem;
  border-radius: 14px;
  background: #ffffff;
  color: var(--orange);
  font-weight: 700;
  font-size: 1.35rem;
  text-decoration:none;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.cta-email:hover,.get-in:hover{
  background:#fff;
  color: var(--orange);
  transform: translateY(-1px);
}
.cta-email{ transition: transform .15s ease, box-shadow .15s ease; }
.cta-email:hover{ box-shadow: 0 14px 28px rgba(0,0,0,.14); }

/* EMAIL COPY STYLING */
.email-copy-group {align-items: left; gap: 0.5rem;}
/*.copy-btn {border: none;background: transparent;cursor: pointer;padding: 0;color: silver;}*/
/*.copy-btn:focus {outline: none;box-shadow: none;}*/
.tooltip-custom {margin-left: 8px; color: #AFA; font-size: 1.10em; opacity: 0; transition: opacity 0.3s; pointer-events: none;}
.tooltip-custom.show {opacity: 1;}

/* Footer */
.site-footer{
  border-top: 1px solid var(--border);
}