/* styles.css */
html { 
  scroll-behavior: smooth;
  text-wrap-style: balance;
  font-family: "Google Sans", sans-serif;
}

body { 
  margin: 0; 
  overflow-x: hidden;
  font-size: 20px;

  transition: background 0.2s ease-in-out;
  font-family: "Google Sans", sans-serif;
 }

/* Fixed hamburger */
.menu-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1002;
}

a{
  color:#ee4947;
  text-decoration: underline;
}

/* Fullscreen menu */
.fullscreen-menu {
  position: fixed;
  inset: 0;
  background: #3684b6;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.fullscreen-menu.active {
  opacity: 1;
  pointer-events: all;
}

.fullscreen-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.fullscreen-menu li { margin: 1.5rem 0; }
.fullscreen-menu a {
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
  transition: color 200ms ease;
}
.fullscreen-menu a:hover { color: #f6911e; }

/* Sections */
section.full {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
    padding-top:120px;
  padding-bottom:120px;
  opacity: 0.2;
  transform: translateY(20px);
  transition: opacity 500ms ease, transform 500ms ease;
}

section.full .container {
  max-width: 620px;
}

section.full.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ========== STEPS LEGEND (RIGHT) ========== */
.steps-legend {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;

  display: flex;
  flex-direction: column;
  gap: 12px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.steps-legend.active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- SVG ring + staggered slide in/out ---- */
.step-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;

  background: #fff;
  color: #000;
  font-weight: 600;
  text-decoration: none;
  user-select: none;

  box-shadow: 0 4px 14px rgba(0,0,0,0.18);

  /* animation vars */
  --tx: 26px;
  --sc: 1;
  --delay: 0ms;

  opacity: 0;
  transform: translateX(var(--tx)) scale(var(--sc));
  transition:
    transform 320ms ease,
    opacity 320ms ease;
  transition-delay: var(--delay);
}

/* When legend is active, dots slide in */
.steps-legend.active .step-dot {
  --tx: 0px;
  opacity: 1;
}

.step-dot:hover { --sc: 1.08; }

.step-dot.active {
  --sc: 1.15;
  background: #ffffffcc;
  color: #111;
}

.step-dot span {
  position: relative;
  z-index: 2;
}

.step-dot .ring {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transform: rotate(-90deg);
  z-index: 1;
}

.step-dot .track {
  fill: none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 4;
}

.step-dot .prog {
  fill: none;
  stroke: #f6911e;
  stroke-width: 4;
  stroke-linecap: round;

  stroke-dasharray: 113.097;
  stroke-dashoffset: 113.097;
  transition: stroke-dashoffset 80ms linear;
}

@media (max-width: 480px) {
  .steps-legend { right: 10px; gap: 10px; }
  .step-dot { width: 36px; height: 36px; font-size: 0.9rem; }
}

/* Bigger, uneven yellow marker */
/* Animated yellow marker */
strong {
  font-weight: 700;
  color: inherit;

  padding: .15em .35em;
  border-radius: .35em;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  background:
    linear-gradient(
      100deg,
      rgba(255,235,59,0.85) 0%,
      rgba(255,235,59,0.9) 70%,
      rgba(255,235,59,0.75) 100%
    );

  background-repeat: no-repeat;
  background-size: 0% 100%;     /* 👈 start hidden */
  transition: background-size 700ms ease-out;
  
}

/* When visible, marker expands left → right */
strong.marker-visible {
  background-size: 100% 100%;
}

h1, h2{
  font-size: 32px;
  color:#f6911e;
  text-align: center;
}

h3{
  color: #3684b6;
  font-size: 22px;
}

html body{
  background:#f0f0f0;
}

html body:has(.darkbg.visible){
  background:#3684b6;
  color:#fff;

   h1, h2, h3{
    color:#fff;
  }
  
}

html body:has(.blackbg.visible){
  background:#111;
  color:#fff;

  h1, h2, h3{
    color:#fff;
  }
  
}

.blackbg, .darkbg{
    strong{
      
        background:
    linear-gradient(
      100deg,
      rgba(178,220,248,0.25) 0%,
      rgba(178,220,248,0.3) 70%,
      rgba(178,220,248,0.15) 100%
    );
    }
}



/* Reset list */
/* Reset list */
section#steps ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

section#steps ol li {
  counter-increment: step;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  transition: background 150ms ease;
}

/* Flex layout */
section#steps ol li a {
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: flex-start; /* 👈 left align content */
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.87);
}

/* Number */
section#steps ol li a::before {
  content: counter(step) ".";
  font-weight: 600;
  margin-right: 0.75rem;
  color: #555;
}

/* Arrow pushed to right */
section#steps ol li a::after {
  content: "›";
  font-size: 1.4rem;
  color: #b0b0b0;
  margin-left: auto;   /* 👈 pushes arrow to right */
  transition: transform 150ms ease, color 150ms ease;
}

/* Hover */
section#steps ol li:hover {
  background: #f7f7f7;
}

section#steps ol li:hover a::after {
  transform: translateX(4px);
  color: #ee4947;
}



.makegrid {

  

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;

  margin-top:64px;
  margin-bottom:36px;

  > div{
    padding: 2rem 2rem;
    margin-bottom: 0.75rem;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;

    > h3{
      margin-top:0px;
    }
    > *:last-child{
       margin-bottom:0px;
    }
  }

  p{
    margin-top: 0.6em;
    margin-bottom: 0.6em;
  }

  img{
    width: 100%;
    margin-bottom: 12px;
  }
}



blockquote{
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
    background: #ee4947;
    color:#fff;
    border: none;
    border-radius: 6px;
    text-wrap-style: auto;
        line-height: 1.8em;

    strong{
      background-blend-mode: luminosity;
    }
}

.btn-floating{
  background: #f6911e !important;
}

.logo{
  max-width: 300px;
  margin: auto auto;
  display: block;
  margin-bottom: 64px;
}


.video-wrap{
  position: relative;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.25rem;
  /* IMPORTANT: allow the button to stick out */
  overflow: visible;
}

/* Inner circle clip (only clips the video) */
.video-clip{
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 26px rgba(0,0,0,.15);
}

.step-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Floating button can now sit outside the circle */
.video-fab{
  position: absolute;
  right: 6px;   /* slightly outside */
  bottom: 6px;  /* slightly outside */
  z-index: 20;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  display: grid;
  place-items: center;

  background: #f6911e !important;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

.video-fab i{
  font-size: 22px;
  color: #fff;
}