/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* ============================
   RADICL Theme – Layout & UI
   Notes:
   • Helper classes replace HubSpot row-number chains to avoid brittle CSS.
   • Keep visuals identical; adjust tokens in :root to theme quickly.
   ============================ */

/* ============================
   RADICL Theme – Layout & UI
   Notes:
   • HubSpot injects long class chains; we reduce specificity via :where() and .row-number-* hooks.
   • Avoid !important unless overriding inline styles from the builder is unavoidable.
   • All tokens centralized in :root for easy theming.
   ============================ */
html, body { margin: 0 !important; }

:root {
  /* Color tokens */
  --rad-fg: #fff;
  --rad-fg-muted: rgba(255,255,255,0.80);
  --rad-border: rgba(255,255,255,0.10);
  --rad-card-bg: rgba(19,22,22,0.50);
  --rad-shadow: rgba(92,95,96,0.15);
  --rad-glow: rgba(248,159,71,1); /* base color for glows */

  /* Radii & spacing */
  --rad-radius-sm: 12px;
  --rad-radius-lg: 24px;
  --rad-pad-sm: 10px;
  --rad-pad-md: 16px;
  --rad-pad-lg: 24px;

  /* Typography */
  --rad-h-line: 1;
  --rad-subhead-line: 1.2;
  --rad-body-line: 1.3;

  /* Motion */
  --rad-anim-duration: 1s;
  --rad-anim-ease: ease-out;

  /* HubSpot background padding var compatibility */
  --hsf-background__padding: 40px 50px 0 50px;
}

/* ============================
   Base Typography
   ============================ */

h1 {
  font-family: Lexend, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  line-height: var(--rad-h-line);
  color: var(--rad-fg);
  padding-top: 30px; /* previously outside @media; keep globally */
}

:where(h2, h3, h4, h5, h6) {
  color: var(--rad-fg);
  line-height: var(--rad-subhead-line);
}

p {
  color: var(--rad-fg-muted);
  line-height: var(--rad-body-line);
}

/* Stronger paragraph styling only in row-number-6 */
.row-number-6 :where(p) {
  font-weight: 500;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.25);
}

/* Specific rich paragraph tweak (kept but simplified) */
#hs_cos_wrapper_module_17572801528133_ p:nth-child(3) {
  font-weight: 700;
  letter-spacing: -0.14px;
  color: var(--rad-fg-muted);
}

/* ============================
   List / Feature Cards
   ============================ */

.list ul { margin: 0 !important; }

.list__item {
  background: rgba(92,95,96,0.15);
  border-radius: var(--rad-radius-sm);
  /* FIX: invalid `border: 12px;` replaced with a subtle 1px border */
  border: 1px solid var(--rad-border);
  padding: var(--rad-pad-sm);
  min-height: 180px;
  margin: 1.4rem 0 0 !important;
}

.list__icon { border: none !important; }

/* ============================
   CTA
   ============================ */

.row-number-42.dnd-section.dnd_area-row-15-max-width-section-centering.dnd_area-row-15-padding {
  background: radial-gradient(70% 100% at 50% 100%, rgba(248,159,71,0.50) 0%, rgba(248,159,71,0.00) 100%);
}

/* CTA Box
.row-number-42.dnd-section.dnd_area-row-15-max-width-section-centering.dnd_area-row-15-padding > div > div {
  border-radius: var(--rad-radius-lg);
  border: 1px solid var(--rad-border);
  background: var(--rad-card-bg);
  box-shadow: 2px 2px 10px 2px var(--rad-shadow);
  backdrop-filter: blur(4px);
  align-items: center !important;
  justify-content: center !important;
}

*/

.cta-button {
  display: inline-flex;
  justify-content: center;
  align-items: center  !important;
  padding: var(--rad-pad-md) var(--rad-pad-lg);
  background: #fff;
  border-radius: 38px;
  /* FIX: stray `f: 16px;` → font-size */
  font-size: 16px;
  line-height: 24px;
  color: #212121;
  text-decoration: none;
  width: fit-content;
  transition: transform 0.2s var(--rad-anim-ease), box-shadow 0.2s var(--rad-anim-ease);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,255,255,0.2);
  text-decoration: none;
  color: #212121;
}

/* ============================
   Section Glows (Hero & Testimonial)
   Reusable pattern: apply `.glow-section` to a container (or keep row-number selectors).
   ============================ */

.glow-section {
  position: relative;
  background: none;
  overflow: visible; /* ensure glow isn't clipped */
}

.glow-section::before {
  content: "";
  position: absolute;
  inset: var(--glow-inset, -18vh -50vw -36vh -50vw);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse var(--glow-size-x, 20%) var(--glow-size-y, 100%) at 50% var(--glow-y, 32%),
    color-mix(in oklab, var(--rad-glow) 20%, transparent) 0%,
    transparent 71%
  );
  background-repeat: no-repeat;
}

/* Keep content above the glow */
.glow-section > * { position: relative; z-index: 1; }

/* Hero maps to row-number-1 (kept for compatibility) */
.row-number-1.dnd-section.dnd_area-row-0-padding {
  border-radius: 0;
}
.row-number-1.dnd-section.dnd_area-row-0-padding,
.row-number-1.dnd-section.dnd_area-row-0-padding > * {
  position: relative;
  overflow: hidden !important;
}
.row-number-1.dnd-section.dnd_area-row-0-padding { overflow: visible; }
.row-number-1.dnd-section.dnd_area-row-0-padding::before {
  /* Use the shared glow engine with custom variables */
  --glow-inset: -18vh -50vw -36vh -50vw;
  --glow-size-x: 30%;
  --glow-size-y: 30%;
  --glow-y: 30%;
  content: "";
  position: absolute;
  inset: var(--glow-inset);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse var(--glow-size-x) var(--glow-size-y) at 40% 50%,
    color-mix(in oklab, var(--rad-glow) 25%, transparent) 0%,
    transparent 70%
  );
}

/* Testimonial row – row-number-10 */
.row-number-10.dnd-section.dnd_area-row-3-padding { position: relative; background: none; overflow: visible; }
.row-number-10.dnd-section.dnd_area-row-3-padding::before {
  --glow-inset: -20vh -50vw -30vh -50vw;
  content: "";
  position: absolute;
  inset: var(--glow-inset);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 20% 35% at 50% 40%,
    color-mix(in oklab, var(--rad-glow) 15%, transparent) 0%,
    transparent 100%
  );
}

@media (max-width: 768px) {

.row-number-10.dnd-section.dnd_area-row-3-padding::before {
    background: radial-gradient(
    ellipse 20% 19% at 50% 40%,
    color-mix(in oklab, var(--rad-glow) 15%, transparent) 0%,
    transparent 100%
  );
}
}

.testimonialQuote {
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  font-style: normal;
  font-weight: 400;
  color: var(--rad-fg);
}

/* ============================
   Features Section – unify gradient across many rows
   ============================ */


/* Mission */
:where(
  .row-number-8.dnd-section,
) {
  background: radial-gradient(100% 88% at 70% 20%, rgba(248,159,71,0.08) 0%, rgba(248,159,71,0.00) 100%);  
}

/* Values */

:where(
  .row-number-16.dnd-section,
) {
  background: radial-gradient(80% 90% at 50% 90%, rgba(248,159,71,0.1) 0%, rgba(248,159,71,0.00) 100%);  
}

/* Loosened selector so minor DOM changes don’t break it */
.row-number-22.dnd-section.dnd_area-row-5-padding {
  /* use image-only so you don't reset other background-* props unintentionally */
  background-image: radial-gradient(80% 90% at 80% 90%, rgba(248,159,71,0.10) 0%, rgba(248,159,71,0) 100%) !important;
  background-repeat: no-repeat;
}

  

/* ============================
   Animations
   ============================ */

/* Fade up */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(180px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* FIX: class name now matches direction */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(600px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-180px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(180); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform:}
  to   { opacity: 1; transform:}
}

.fade-in-right   { animation: fadeInRight var(--rad-anim-duration) var(--rad-anim-ease) 0.3s both; }
.fade-in-up,


.row-number-1.dnd-section.dnd_area-row-0-padding   { animation: fadeInLeft var(--rad-anim-duration) var(--rad-anim-ease) 0.3s both; }

h1 { animation: fadeInDown var(--rad-anim-duration) var(--rad-anim-ease) 0.4s both; }

#main-content > div > div > div > div > div.row-fluid-wrapper.row-depth-1.row-number-3.dnd_area-row-1-padding.dnd_area-row-1-vertical-alignment.dnd_area-row-1-background-color.dnd-section.dnd_area-row-1-background-layers {
  animation: fadeIn var(--rad-anim-duration) var(--rad-anim-ease) 0.6s both; }

/* Stagger helpers */
.animate-on-load-1 { animation: fadeInUp 0.8s var(--rad-anim-ease) 0.2s both; }
.animate-on-load-2 { animation: fadeInUp 0.8s var(--rad-anim-ease) 0.4s both; }
.animate-on-load-3 { animation: fadeInUp 0.8s var(--rad-anim-ease) 0.6s both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}



/* ============================
   Column swaps on mobile (≤768px)
   Rows: 16, 22, 28
   ============================ */
@media (max-width: 768px) {
  /* Make the direct row a flex container */
  .row-number-17 > .row-fluid,
  .row-number-23 > .row-fluid,
  .row-number-29 > .row-fluid {
    display: flex !important;
    flex-wrap: wrap;
  }

  /* Normalize columns to stack full-width on mobile */
  .row-number-17 > .row-fluid > .dnd-column,
  .row-number-23 > .row-fluid > .dnd-column,
  .row-number-29 > .row-fluid > .dnd-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
  }

  /* --- Executive Dashboards --- */
  .row-number-17 > .row-fluid > .cell_1757355846766-vertical-alignment.dnd-column { order: 2; } /* image -> second */
  .row-number-17 > .row-fluid > .cell_1756826962417-vertical-alignment.dnd-column { order: 1; } /* text  -> first  */

  /* --- Cross-Team Analysis --- */
  .row-number-23 > .row-fluid > .cell_17568270476862-vertical-alignment.dnd-column { order: 2; } /* image -> second */
  .row-number-23 > .row-fluid > .cell_17568270476863-vertical-alignment.dnd-column { order: 1; } /* text  -> first  */

  /* --- AI Nudges --- */
  .row-number-29 > .row-fluid > .cell_1757034945397-vertical-alignment.dnd-column  { order: 2; } /* image -> second */
  .row-number-29 > .row-fluid > .cell_17568271911282-vertical-alignment.dnd-column { order: 1; } /* text  -> first  */
}

/* Fallback: swap by position if cell_* classes change */
@media (max-width: 768px) {
  .row-number-17 > .row-fluid > .dnd-column:nth-child(1) { order: 2; }
  .row-number-17 > .row-fluid > .dnd-column:nth-child(2) { order: 1; }
  .row-number-23 > .row-fluid > .dnd-column:nth-child(1) { order: 2; }
  .row-number-23 > .row-fluid > .dnd-column:nth-child(2) { order: 1; }
  .row-number-29 > .row-fluid > .dnd-column:nth-child(1) { order: 2; }
  .row-number-29 > .row-fluid > .dnd-column:nth-child(2) { order: 1; }
}

/* Center Align text on Mobile */
@media (max-width: 768px) {
  
:where(
  #main-content > div > div > div > div > div.row-fluid-wrapper.row-depth-1.row-number-1.dnd_area-row-0-max-width-section-centering.dnd_area-row-0-vertical-alignment.dnd-section.dnd_area-row-0-padding,
  .row-number-14.dnd-section,
  .row-number-17.dnd-section,
  .row-number-20.dnd-section,
  .row-number-23.dnd-section,
  .row-number-26.dnd-section,
  .row-number-29.dnd-section,
  .row-number-32.dnd-section,
  .row-number-35.dnd-section
) {
  text-align: center !important; 
  padding-right: 10vw !important;
  padding-left: 10vw !important;
}
  :where(
  .row-number-14.dnd-section p,
  .row-number-17.dnd-section p,
  .row-number-20.dnd-section p,
  .row-number-23.dnd-section p,
  .row-number-26.dnd-section p,
  .row-number-29.dnd-section p,
  .row-number-32.dnd-section p,
  .row-number-35.dnd-section p
) {
  padding-bottom: 20px !important;
}

  /* Center Align text on Mobile */
@media (max-width: 768px) {
  .list__item {
    text-align: left !important;
  }
  }