/* =======================================================================
   EvolutionOmics — Lean overrides
   Load after Bootstrap + template CSS
   ======================================================================= */

/* Fonts (only what we use) */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Poppins:wght@600;700&display=swap");

/* ---------- Root + Base ------------------------------------------------ */
:root{
  --eo-text: #1f2937;           /* default body text (neutral-800) */
  --eo-white: #ffffff;
  --eo-accent: #0080ff;         /* brand blue for subtle glow */
  --eo-bg-dark-06: rgba(0,0,0,.60);
}

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  color: var(--eo-text);
  font: 400 16px/1.7 "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings inherit the global color by default (no forced white) */
h1,h2,h3,h4,h5,h6{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0 0 .5rem 0;
}

/* Links: neutral by default */
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

/* ---------- Utilities -------------------------------------------------- */
.bg-image{ background-position:center; background-size:cover; background-repeat:no-repeat; }
.bg-dark-06{ background: var(--eo-bg-dark-06); }
.text-glow-blue{ color: var(--eo-white); text-shadow: 0 0 7px rgba(0,128,255,1); }

/* ---------- Hero ------------------------------------------------------- */
/* Structure matches your HTML (#hero wrapper + overlay as flex container) */
#hero{
  position: relative;
  min-height: 100svh;                 /* robust 100vh on mobile */
  background-position: center;
  background-size: cover;
  color: var(--eo-white);
}

/* Make inset work by positioning the overlay; center content vertically */
#hero > .bg-dark-06{
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Keep lines pleasant */
#hero .container{ max-width: 1200px; }

/* Headline (fluid) */
#hero .hero-title{
  font-size: clamp(1.95rem, 4.8vw + 0.2rem, 7.2rem);  /* ~31 → ~115px */
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 .6rem;
  text-wrap: balance;
}

/* Subtitle (always smaller than H1) */
#hero .hero-sub{
  font-size: clamp(1.0625rem, 1.2vw + 0.9rem, 2rem);  /* ~17 → ~32px */
  line-height: 1.45;
  font-weight: 300;
  color: rgba(255,255,255,.92);
  margin: 0;
}

/* Typer text — force brand blue */
#hero .hero-sub span.typer{
  display: inline-block;
  white-space: nowrap !important;
  color: #007fff !important;          /* brand blue */
  font-weight: 700 !important;
  text-shadow: 0 0 7px rgba(0,0,0,.35) !important;
}

/* Cursor — force white */
#hero .hero-sub span.cursor{
  display: inline-block;
  white-space: nowrap !important;
  color: #ffffff !important;
}

/* Center text on small/medium; left-align on desktop */
@media (max-width: 991.98px){
  #hero .row > [class*="col-"]{ text-align:center !important; }
  #hero .hero-title, #hero .hero-sub{
    margin-left:auto !important; margin-right:auto !important;
  }
}
@media (min-width: 992px){
  #hero .row > [class*="col-"]{ text-align:left !important; }
}

/* Gentle caps on very large desktops */
@media (min-width:1600px){
  #hero .hero-title{ font-size: 6.5rem; }   /* ~104px */
}
@media (min-width:1920px){
  #hero .hero-title{ font-size: 6.8rem; }   /* ~109px */
  #hero .hero-sub{   font-size: 2rem; }
}

/* Tighten vertical space on tall screens */
@media (min-height:900px){
  #hero .section-lg{ padding-top:0; padding-bottom:0; }
}

/* ---------- Trust Cards (equal height) -------------------------------- */
.trust-card{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;               /* fill the flex column */
}
@media (min-width:992px){
  .trust-card{ min-height:260px; } /* tweak to taste */
}
/* Pin optional CTA/footer to bottom inside the card */
.trust-card .mt-auto{ margin-top:auto !important; }

/* ---------- “Urgent Support” button ----------------------------------- */
.button-red{
  background:#D32F2F; color:#fff; border:0; border-radius:999px;
  font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:.55rem 1rem; line-height:1;
  box-shadow:0 8px 18px rgba(211,47,47,.35);
  transition:background-color .2s ease, box-shadow .2s ease, transform .08s ease;
  animation:urgent-pulse 1.1s ease-out .6s 1 both;
}
.button-red:hover,
.button-red:focus{
  background:#B71C1C;
  box-shadow:0 12px 26px rgba(211,47,47,.45);
  transform:translateY(-1px);
}
.button-red:active{
  transform:translateY(0);
  box-shadow:0 6px 14px rgba(211,47,47,.30);
}
.button-red:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(211,47,47,.8),
    0 12px 26px rgba(211,47,47,.45);
}
@keyframes urgent-pulse{
  0%{   box-shadow:0 0 0 0 rgba(211,47,47,.55), 0 8px 18px rgba(211,47,47,.35); }
  100%{ box-shadow:0 0 0 14px rgba(211,47,47,0), 0 8px 18px rgba(211,47,47,.35); }
}
@media (prefers-reduced-motion:reduce){
  .button-red{ animation:none; transition:none; }
}

/* HERO: center with the new overlay class (no bg-dark-06 needed) */
#hero > .position-absolute{
  inset: 0 !important;             /* fill the hero */
  display: flex !important;
  align-items: center !important;   /* vertical center */
  justify-content: center;          /* horizontal center if needed */
}

/* HERO: force text color to white regardless of template defaults */
#hero{ color:#fff !important; }     /* base color for everything inside */

#hero .hero-title{
  color:#fff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

/*#hero .hero-sub{*/
/*  color:rgba(255,255,255,.92) !important;*/
/*}*/

/* ---------- Equal height + centered cards on small screens ------------- */
.trust-card{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
}

/* Center and size nicely below lg */
@media (max-width: 991.98px){
  .trust-card{
    max-width: 460px;   /* card width on phones/tablets */
    min-height: 220px;  /* same height across all cards */
    margin-left: auto;
    margin-right: auto; /* centers the card */
  }
}

/* Keep equal heights on desktop too */
@media (min-width: 992px){
  .trust-card{ min-height: 260px; }
}

/* Make sure the columns themselves stretch to the tallest card */
.row.align-items-stretch > [class^="col-"],
.row.align-items-stretch > [class*=" col-"]{
  display:flex;
}

/* Mobile / tablet: center the cards and force identical height */
@media (max-width: 991.98px){
  /* make the col a flex container so the card can center */
  .n-margin-6 .row.g-4 > .col-12{ display:flex; }

  /* target your card wrapper exactly and center it */
  .n-margin-6 .row.g-4 > .col-12 > .card-outline-brand{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width: 440px;      /* visual width on small screens */
    height: 240px;         /* <- equal height on mobile (adjust to taste) */
    margin: 0 auto;        /* center the card */
  }
}

/* Desktop: keep equal heights across the row */
@media (min-width: 992px){
  .n-margin-6 .row.g-4{ align-items: stretch; } /* columns same height */
  .n-margin-6 .row.g-4 > [class*="col-"]{ display:flex; }
  .n-margin-6 .row.g-4 > [class*="col-"] > .card-outline-brand{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;           /* fill the column */
    min-height: 260px;     /* tweak for desktop */
  }
}



/*------TEMP HOVERBOX OVERRIDES------*/

.hoverbox-4:hover .content,
.hoverbox-4:focus .content,
.hoverbox-4:active .content { 
  opacity: 1 !important; 
  visibility: visible !important; 
  transform: none !important; 
}

.hoverbox-4 .hover-content { display: none !important; }
.hoverbox-4:hover,
.hoverbox-4:focus,
.hoverbox-4:active { 
  transform: none !important; 
  box-shadow: none !important; 
}

.hoverbox-4 img,
.hoverbox-4 .card-bg,
.hoverbox-4::before,
.hoverbox-4::after { 
  transform: none !important; 
  filter: none !important; 
  opacity: 1 !important; 
}



/* ---------- Small niceties -------------------------------------------- */
.hover-shadow{ transition: box-shadow .16s ease, transform .16s ease; }
.hover-shadow:hover{ box-shadow:0 10px 36px rgba(22,24,26,.10); transform: translateY(-2px); }

img,svg,video{ max-width:100%; height:auto; }
p,h1,h2,h3,h4,h5,h6{ overflow-wrap:anywhere; }