:root{
  --text:#111;
  --muted:#666;
  --line:#e8e8e8;
  --red1:#ff1a1a;
  --red2:#d60000;
  --radius:999px;
  --shadow:0 18px 45px rgba(15,23,42,.08);
  --navH:66px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
}

/* top note */
.top-note{
  font-size:12px;
  color:#666;
  text-align:center;
  padding:10px 12px;
  background:#fff;
}

/* navbar */
.nav-wrap{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
.nav{
  max-width: 1180px;
  margin: 0 auto;
  height: var(--navH);
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  background: rgba(255,255,255,.82);
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color:var(--text);
  font-weight: 700;
  letter-spacing: .08em;
}
.logo{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 999px;
  background:#f3f4f6;
}
.brand-text{ font-size:14px; }

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 22px;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}
.nav-links a,
.dd-btn{
  font-size: 14px;
  color:#222;
  text-decoration:none;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 10px;
  cursor:pointer;
}
.nav-links a:hover,
.dd-btn:hover{
  background: #f3f4f6;
}
.has-dd{ position: relative; }
.dd-btn{ display:flex; align-items:center; gap:6px; }
.chev{ font-size:12px; opacity:.7; }

.dropdown{
  position:absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display:none;
}
.dropdown a{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
}
.dropdown a:hover{ background:#f3f4f6; }

.nav-cta{
  text-decoration:none;
  color:#222;
  font-weight: 500;
  border: 1px solid var(--line);
  padding: 10px 16px;
  border-radius: var(--radius);
  background:#fff;
}
.nav-cta:hover{ background:#f7f7f7; }

.hamburger{
  display:none;
  border:none;
  background:#fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  cursor:pointer;
}

/* HERO CTA */
.cta-hero{
  position:relative;
  padding: 86px 16px 96px;
  overflow:hidden;
  background:#fff;
}
.cta-inner{
  max-width: 1100px;
  margin: 0 auto;
  text-align:center;
  position:relative;
  z-index:2;
}

.cta-title{
  margin: 0;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-size: clamp(34px, 5vw, 68px);
}
.cta-sub{
  margin: 20px auto 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

/* wave underline */
.cta-wave{
  position: relative;
  display:inline-block;
  padding-bottom: 18px;
}
.cta-wave::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: 2px;
  width: min(520px, 86%);
  height: 22px;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 260 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 22 Q60 10 120 22 T260 22' fill='none' stroke='%23d60000' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* tiny spark */
.cta-spark{
  display:inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  transform: translate(-8px, -18px);
}
.cta-spark::before,
.cta-spark::after{
  content:"";
  position:absolute;
  background: var(--red2);
  border-radius: 99px;
}
.cta-spark::before{ width:2px; height:18px; left:8px; top:0; transform: rotate(20deg); }
.cta-spark::after{ width:18px; height:2px; left:0; top:8px; transform: rotate(-10deg); }

/* button */
.cta-btn{
  margin-top: 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration:none;
  color:#fff;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(90deg, var(--red1), var(--red2));
  box-shadow: 0 16px 34px rgba(214,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 44px rgba(214,0,0,.28);
}
.ext{ font-weight: 700; }

/* background glow blobs */
.cta-bg{
  position:absolute;
  inset:-140px;
  z-index:1;
  pointer-events:none;
}
.cta-blob{
  position:absolute;
  filter: blur(42px);
  opacity: .7;
  border-radius: 999px;
}
.cta-blob.b1{
  width: 720px; height: 420px;
  left: -280px; top: -90px;
  background: radial-gradient(circle at 30% 30%, rgba(255,200,210,.95), rgba(255,200,210,0) 66%);
}
.cta-blob.b2{
  width: 820px; height: 480px;
  right: -320px; top: -110px;
  background: radial-gradient(circle at 40% 40%, rgba(255,210,215,.95), rgba(255,210,215,0) 66%);
}
.cta-blob.b3{
  width: 900px; height: 520px;
  left: 50%; bottom: -360px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 40% 40%, rgba(245,245,245,.95), rgba(245,245,245,0) 66%);
}

/* responsive nav */
@media (max-width: 860px){
  .hamburger{ display:block; margin-left:auto; }
  .nav-cta{ display:none; }

  .nav{ position: relative; }

  .nav-links{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--navH) + 10px);
    width: min(520px, calc(100% - 28px));
    background:#fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 10px;
    display:none;
    flex-direction: column;
    gap: 6px;
  }
  .nav-links.open{ display:flex; }

  .dropdown{
    position: static;
    transform:none;
    display:none;
    width: 100%;
  }
}


/* ===== Challenges Section ===== */
.challenge-sec{
  padding: 90px 16px;
  background:#fff;
}

.challenge-wrap{
  max-width: 1180px;
  margin: 0 auto;
}

/* ----- Title Area ----- */
.challenge-title{
  margin: 0 auto 54px;
  text-align:center;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(30px, 4.4vw, 54px);
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 6px;
}

/* left doodle arrow like screenshot */
.challenge-title .arrow{
  position:absolute;
  left: -70px;
  top: 12px;
  width: 60px;
  height: 60px;
  transform: rotate(-10deg);
  color: transparent;
  user-select: none;
}

.challenge-title .arrow::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M95 18c-30 2-55 20-63 45-6 17 1 37 20 43' fill='none' stroke='%23d60000' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M48 108l-20-2 9-18' fill='none' stroke='%23d60000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M74 28c-8 6-12 11-14 16' fill='none' stroke='%23d60000' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M84 20c-7 5-10 9-12 14' fill='none' stroke='%23d60000' stroke-width='4' stroke-linecap='round' opacity='.35'/%3E%3C/svg%3E")
    no-repeat center/contain;
  opacity: .95;
}

/* underline wave (same red hand-drawn style) */
.u-wave{
  position: relative;
  display:inline-block;
  padding-bottom: 10px;
}

.u-wave::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: min(360px, 105%);
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44'%3E%3Cpath d='M6 26 C35 10, 60 38, 90 24 S145 12, 176 24 S214 36, 234 22' fill='none' stroke='%23d60000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center/contain;
}

/* ===== Grid ===== */
.challenge-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #efc8c8;
  border-radius: 16px;
  overflow:hidden;
  background:#fff7f7;
}

@media(max-width:900px){
  .challenge-grid{ grid-template-columns:1fr 1fr; }
  .challenge-title .arrow{ display:none; }
}

@media(max-width:600px){
  .challenge-grid{ grid-template-columns:1fr; }
}

/* ===== Cards ===== */
.ch-card{
  padding: 26px 28px 30px;
  border-right:1px solid #efc8c8;
  border-bottom:1px solid #efc8c8;
  background: transparent;
}

.ch-card:nth-child(3n){ border-right:none; }
.ch-card:nth-last-child(-n+3){ border-bottom:none; }

@media(max-width:900px){
  .ch-card:nth-child(3n){ border-right:1px solid #efc8c8; }
  .ch-card:nth-child(2n){ border-right:none; }
}

@media(max-width:600px){
  .ch-card{ border-right:none !important; }
  .ch-card:last-child{ border-bottom:none; }
}

/* icon box like screenshot */
.ch-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background:#fff;
  border: 1px solid #f1e2e2;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  margin-bottom: 14px;
  font-size:20px;
}

.ch-card h3{
  margin: 6px 0 8px;
  font-size:18px;
  font-weight:500;
  color:#111;
}

.ch-card p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:#6b7280;
}


:root{
  --text:#111;
  --muted:#6b7280;
  --line: rgba(17,24,39,.10);
  --shadow: 0 18px 45px rgba(15,23,42,.10);
  --shadow2: 0 26px 70px rgba(15,23,42,.14);
  --greenBg1:#f3fff6;
  --greenBg2:#effff3;
  --waveRed:#d60000;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:#fff;
}

/* section wrapper */
.why-sec{
  padding: 90px 16px;
  background:#fff;
}
.why-wrap{
  max-width: 1180px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
  gap: 44px;
  align-items:center;
}
@media (max-width: 980px){
  .why-wrap{ grid-template-columns: 1fr; gap: 26px; }
}

/* left */
.why-title{
  margin:0;
  font-size: clamp(30px, 3.8vw, 56px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing:-0.03em;
  position:relative;
}

.u-wave{
  position:relative;
  display:inline-block;
  padding-bottom: 10px;
}
.u-wave::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 18px;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q55 8 110 20 T220 20' fill='none' stroke='%23d60000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat center/contain;
  opacity: .95;
}

.why-spark{
  display:inline-block;
  width: 18px;
  height: 18px;
  position: relative;
  transform: translate(10px, -18px);
}
.why-spark::before,
.why-spark::after{
  content:"";
  position:absolute;
  background: var(--waveRed);
  border-radius: 99px;
}
.why-spark::before{ width:2px; height:18px; left:8px; top:0; transform: rotate(20deg); }
.why-spark::after{ width:18px; height:2px; left:0; top:8px; transform: rotate(-10deg); }

.why-sub{
  margin: 18px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

/* counters */
.why-stats{
  display:flex;
  gap: 42px;
  margin-top: 42px;
  flex-wrap:wrap;
}
.why-stat{ min-width: 92px; }
.why-num{
  font-size: 44px;
  font-weight: 500;
  letter-spacing:-0.02em;
  color:#111;
  display:flex;
  align-items:center;
  gap: 6px;
}
.why-num .star{
  color:#f6b100;
  font-size:18px;
  transform: translateY(-2px);
}
.why-label{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* right stack */
.why-right{ display:flex; justify-content:flex-end; }
@media (max-width: 980px){ .why-right{ justify-content:flex-start; } }

.stack{
  width: min(760px, 100%);
  position: relative;
  height: 460px;
}

.w-card{
  position:absolute;
  left:0; right:0; top:0;
  background: linear-gradient(180deg,var(--greenBg1) 0%, var(--greenBg2) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 28px;
  display:flex;
  gap: 16px;
  align-items:flex-start;
  box-shadow: var(--shadow);
  cursor:pointer;
  outline:none;

  transform-origin: center;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
  will-change: transform;
}

.w-ico{
  width:38px; height:38px;
  border-radius:12px;
  display:grid; place-items:center;
  background:#fff;
  border:1px solid var(--line);
  flex:0 0 auto;
  font-size:16px;
}

.w-body h3{
  margin:0;
  font-size:19px;
  font-weight:650;
  color:#111;
}
.w-body p{
  margin:8px 0 0;
  color: var(--muted);
  font-size:15px;
  line-height:1.5;
}

/* fixed offsets */
.w-card[data-i="0"]{ transform: translateY(0px);   opacity:1; }
.w-card[data-i="1"]{ transform: translateY(84px);  opacity:.98; }
.w-card[data-i="2"]{ transform: translateY(168px); opacity:.96; }
.w-card[data-i="3"]{ transform: translateY(252px); opacity:.94; }
.w-card[data-i="4"]{ transform: translateY(336px); opacity:.92; }

/* active = scale only (no bounce / no up-down) */
.w-card.is-active{
  z-index: 9;
  box-shadow: var(--shadow2);
  filter: saturate(1.05);
}
.w-card[data-i="0"].is-active{ transform: translateY(0px) scale(1.04); }
.w-card[data-i="1"].is-active{ transform: translateY(84px) scale(1.04); }
.w-card[data-i="2"].is-active{ transform: translateY(168px) scale(1.04); }
.w-card[data-i="3"].is-active{ transform: translateY(252px) scale(1.04); }
.w-card[data-i="4"].is-active{ transform: translateY(336px) scale(1.04); }

.stack.has-active .w-card:not(.is-active){
  filter: saturate(.95);
}

@media (max-width: 520px){
  .stack{ height: 560px; }
  .w-card{ padding: 20px 20px; }
  .why-stats{ gap: 26px; }
}


:root{
  --fs-bg:#f7e6e6;
  --fs-text:#121212;
  --fs-muted:#5c5c5c;
  --fs-accent:#e11b22;
  --fs-card:#ffffff00;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}
*{ box-sizing:border-box; }

.fs-sec{
  background: var(--fs-bg);
  padding: clamp(40px, 6vw, 80px) 0;
}

.fs-wrap{
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

/* Title */
.fs-title{
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.1;
  font-weight: 600;
  color: var(--fs-text);
  letter-spacing: -0.02em;
  margin: 0 0 clamp(22px, 3vw, 44px);
  position: relative;
}

.fs-title .fs-wave{
  position: relative;
  display: inline-block;
}

.fs-title .fs-wave::after{
  content:"";
  position:absolute;
  left: 2px;
  right: 2px;
  bottom: -10px;
  height: 12px;
  background-repeat: repeat-x;
  background-size: 80px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12' viewBox='0 0 80 12'%3E%3Cpath d='M0 8 C10 2 20 2 30 8 S50 14 60 8 S70 2 80 8' fill='none' stroke='%23e11b22' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.fs-spark{
  position:absolute;
  top: -10px;
  right: -18px;
  width: 18px;
  height: 18px;
  pointer-events:none;
}
.fs-spark::before,
.fs-spark::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, var(--fs-accent) 0 35%, transparent 36% 100%);
  transform: scale(0.55);
  opacity:.9;
}
.fs-spark::after{
  background: radial-gradient(circle at 50% 50%, var(--fs-accent) 0 28%, transparent 29% 100%);
  transform: translate(6px, 2px) scale(0.35);
  opacity:.8;
}

/* Grid */
.fs-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(18px, 2.2vw, 34px) clamp(18px, 3vw, 70px);
  align-items:start;
}

/* Items */
.fs-item{
  padding: 8px 0;
  background: var(--fs-card);
}

.fs-no{
  font-size: 18px;
  font-weight: 700;
  color: var(--fs-accent);
  margin-bottom: 10px;
}

.fs-h{
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--fs-text);
  margin: 0 0 10px;
}

.fs-p{
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fs-muted);
  margin: 0;
  max-width: 38ch;
}

/* CTA */
.fs-cta{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.fs-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--fs-accent);
  color: #fff;
  text-decoration:none;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 14px 30px rgba(225, 27, 34, 0.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.fs-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(225, 27, 34, 0.30);
  filter: saturate(1.05);
}

.fs-btn:active{
  transform: translateY(0);
  box-shadow: 0 12px 26px rgba(225, 27, 34, 0.24);
}

/* Reveal animation */
.reveal{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(4px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.7,.2,1),
    filter .7s ease;
  will-change: transform, opacity, filter;
}
.reveal[data-animate="left"]{ transform: translate3d(-22px, 0, 0); }
.reveal[data-animate="right"]{ transform: translate3d(22px, 0, 0); }
.reveal[data-animate="up"]{ transform: translate3d(0, 18px, 0); }

.reveal.is-visible{
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; filter:none; }
  .fs-btn{ transition:none; }
}

/* Responsive */
@media (max-width: 980px){
  .fs-grid{
    grid-template-columns: 1fr 1fr;
    gap: 22px 40px;
  }
  .fs-p{ max-width: 44ch; }
}

@media (max-width: 640px){
  .fs-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .fs-cta{ margin-top: 6px; }
}



:root{
  --bg: #ffffff;
  --text:#141414;
  --muted:#6a6a6a;
  --accent:#e11b22;

  --line:#d9d9d9;         /* base grey line */
  --dot:#d9d9d9;          /* inactive dot border */
  --dotFill:#ffffff;      /* dot bg */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  color: var(--text);
  background: var(--bg);
}

.proc-sec{
  padding: clamp(42px, 6vw, 90px) 0;
}
.proc-wrap{
  width: min(1200px, calc(100% - 56px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}

/* LEFT */
.proc-left{ position: relative; padding-top: 10px; }

.proc-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 22px;
}

.proc-title{
  margin:0 0 22px;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -0.02em;
  position: relative;
}

.proc-uline{
  position: relative;
  display: inline-block;
}
.proc-uline::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 12px;
  background-repeat: repeat-x;
  background-size: 92px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='12' viewBox='0 0 92 12'%3E%3Cpath d='M0 8 C12 2 24 2 36 8 S60 14 72 8 S84 2 92 8' fill='none' stroke='%23e11b22' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.proc-scribble{
  position:absolute;
  top: 10px;
  left: 63%;
  width: 60px;
  height: 22px;
  transform: rotate(-4deg);
}
.proc-scribble::before{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size: contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='28' viewBox='0 0 80 28'%3E%3Cpath d='M6 18 C18 6 30 26 42 12 S66 6 74 18' fill='none' stroke='%23e11b22' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity:.9;
}

.proc-sub{
  margin:0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}

/* RIGHT */
.proc-right{
  position: relative;
  padding-top: 8px;
}

/* Rail: fixed line + red progress overlay */
.tl-rail{
  position:absolute;
  left: 22px;      /* aligns with dot center */
  top: 4px;
  bottom: 4px;
  width: 4px;
}
.tl-line{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 999px;
  background: var(--line);
}
.tl-progress{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 4px;
  height: 0px; /* JS will grow */
  border-radius: 999px;
  background: var(--accent);
}

/* List */
.tl-list{
  display:flex;
  flex-direction: column;
  gap: 40px;
  padding-left: 0;
}

/* Item row */
.tl-item{
  display:grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 18px;
  min-height: 86px;
}

/* Dot */
.tl-dot{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--dot);
  background: var(--dotFill);
  display:flex;
  align-items:center;
  justify-content:center;
  color: #7a7a7a;
  font-weight: 700;
  transition: border-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tl-no{ font-size: 13px; letter-spacing: .02em; }

/* Content */
.tl-content{
  opacity: .25;
  transform: translateY(10px);
  filter: blur(2px);
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}
.tl-h{
  margin: 2px 0 8px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 650;
}
.tl-p{
  margin:0;
  color: var(--muted);
  line-height: 1.65;
  max-width: 52ch;
}

/* Active state (JS adds .is-active) */
.tl-item.is-active .tl-dot{
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(225,27,34,.16);
}
.tl-item.is-active .tl-content{
  opacity: 1;
  transform: translateY(0px);
  filter: blur(0);
}

/* Responsive */
@media (max-width: 980px){
  .proc-wrap{ grid-template-columns: 1fr; }
  .proc-scribble{ left: 68%; }
  .proc-right{ padding-top: 0; }
}

@media (prefers-reduced-motion: reduce){
  .tl-content{ transition:none; opacity:1; transform:none; filter:none; }
  .tl-dot{ transition:none; }
}





:root{
  --bg:#ffffff;
  --text:#141414;
  --muted:#6f6f6f;
  --accent:#e11b22;

  --cardBorder:#e9e9e9;
  --shadow1: 0 12px 26px rgba(0,0,0,.07);
  --shadow2: 0 22px 48px rgba(0,0,0,.14);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

/* =========================
   SECTION SIZE (BIGGER)
========================= */
.exp-sec{
  padding: 78px 0 96px;
}

.exp-wrap{
  /* screenshot-like wide container */
  width: min(1460px, calc(100% - 120px));
  margin: 0 auto;
}

/* =========================
   TITLE (BIGGER)
========================= */
.exp-title{
  text-align:center;
  font-size: 54px;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing:-0.02em;
  margin: 0 0 56px;
  position: relative;
}

.exp-wave{
  display:block;
  width: min(620px, 74%);
  height: 16px;
  margin: 12px auto 0;
  background-repeat: repeat-x;
  background-size: 92px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='16' viewBox='0 0 92 16'%3E%3Cpath d='M0 10 C12 2 24 2 36 10 S60 18 72 10 S84 2 92 10' fill='none' stroke='%23e11b22' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity:.95;
}

/* =========================
   GRID (BIGGER CARDS)
========================= */
.exp-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 34px;               /* row col gap bigger like screenshot */
  align-items: stretch;
}

/* =========================
   CARD (BIGGER)
========================= */
.exp-card{
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--cardBorder);
  background: linear-gradient(180deg, rgba(225,27,34,.065), rgba(225,27,34,.02));
  box-shadow: var(--shadow1);
  overflow: hidden;

  perspective: 900px;

  --mx: 50%;
  --my: 42%;

  transition: box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

/* moving surface (keeps animation) */
.exp-surface{
  position: relative;
  height: 100%;
  padding: 28px 30px 26px;      /* bigger padding */
  border-radius: 16px;

  min-height: 172px;            /* bigger height for all cards */

  transform: translate3d(0,0,0) rotateX(0) rotateY(0);
  transition: transform .18s ease, filter .18s ease;
  will-change: transform;
}

/* inner highlight */
.exp-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.35));
  opacity: .55;
  pointer-events:none;
}

/* glow follows cursor */
.exp-card::after{
  content:"";
  position:absolute;
  inset:-50px -70px;
  background:
    radial-gradient(circle at var(--mx) var(--my),
      rgba(225,27,34,.16) 0%,
      rgba(225,27,34,.07) 30%,
      rgba(225,27,34,0) 62%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}

/* watermark number (BIGGER + lighter) */
.exp-num{
  position:absolute;
  left: 18px;
  top: 10px;
  font-size: 118px;             /* bigger */
  font-weight: 800;
  color: rgba(0,0,0,.055);      /* more faded */
  line-height: 1;
  letter-spacing:-0.06em;
  user-select:none;
  z-index: 0;
}

/* Typography (bigger like screenshot) */
.exp-h{
  margin: 2px 0 10px;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.22;
  position: relative;
  z-index: 1;
}

.exp-p{
  margin:0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  position: relative;
  z-index: 1;
  max-width: 60ch;
}

/* Hover look (ref) */
.exp-card:hover{
  box-shadow: var(--shadow2);
  border-color: rgba(225,27,34,.26);
  background: linear-gradient(180deg, rgba(225,27,34,.11), rgba(225,27,34,.03));
}
.exp-card:hover::after{ opacity: 1; }
.exp-card:hover .exp-surface{ filter: saturate(1.02); }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1200px){
  .exp-wrap{ width: min(1200px, calc(100% - 56px)); }
  .exp-title{ font-size: 46px; margin-bottom: 44px; }
  .exp-grid{ gap: 24px; }
  .exp-surface{ min-height: 160px; padding: 24px 24px 22px; }
  .exp-num{ font-size: 108px; }
}

@media (max-width: 980px){
  .exp-grid{ grid-template-columns: repeat(2, 1fr); }
  .exp-title{ font-size: 40px; }
}

@media (max-width: 620px){
  .exp-wrap{ width: min(720px, calc(100% - 32px)); }
  .exp-grid{ grid-template-columns: 1fr; }
  .exp-title{ font-size: 34px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .exp-surface{ transition:none; transform:none !important; }
  .exp-card::after{ transition:none; }
}