/* ===============
   Tokens
================ */
:root{
  --ink-900: #1f1f1f;
  --ink-700: #31364a;
  --ink-500: #596274;

  --brand-700: #FF6C63;
  --brand-600: #FF6C63;
  --brand-500: #FF6C63;
  --brand-400: #FF6C63;

  --card-radius: 14px;
  --soft-shadow: 0 18px 40px rgba(0,0,0,.12);
  --rail-max: 940px;
  --rail-pad: clamp(16px, 5vw, 5%);

  --draw-speed: 8s;  /* border loop timing */
  --draw-thickness: 2px;
  --base-border: #e1edf3;
}

/* ===============
   Shell
================ */
.problem-wrap{
  display:flex;
  justify-content:center;
  padding: clamp(44px, 7vw, 88px) var(--rail-pad);
  background:#f8fafc;
}

.problem-card{
  position:relative;
  background:#fff;
  border-radius: var(--card-radius);
  padding: clamp(28px, 4vw, 48px);
  max-width: var(--rail-max);
  width:100%;
  box-shadow: var(--soft-shadow);
  overflow:hidden;
  border: 1px solid var(--base-border);
  background-clip: padding-box;
}

/* === Lumeve-style sequential border animation === */
.problem-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--card-radius);
  pointer-events:none;

  border: var(--draw-thickness) solid transparent;
  border-top-color: var(--brand-500);

  animation: draw-border var(--draw-speed) linear infinite;
}

@keyframes draw-border{
  0%,24.99%{
    border-top-color: var(--brand-500);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  25%,49.99%{
    border-top-color: var(--brand-500);
    border-right-color: var(--brand-500);
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  50%,74.99%{
    border-top-color: var(--brand-500);
    border-right-color: var(--brand-500);
    border-bottom-color: var(--brand-500);
    border-left-color: transparent;
  }
  75%,100%{
    border-top-color: var(--brand-500);
    border-right-color: var(--brand-500);
    border-bottom-color: var(--brand-500);
    border-left-color: var(--brand-500);
  }
}

/* ===============
   Header
================ */
.problem-head{
  margin: 0 0 clamp(12px, 2vw, 20px);
}
.problem-title{
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.15;
  margin: 0 0 4px;
  color: var(--ink-900);
}
.problem-kicker{
  font-weight: 600;
  font-size: clamp(14px, 2vw, 16px);
  letter-spacing: .2px;
  color: var(--brand-600);
  margin: 0;
}
.problem-copy{
  color: var(--ink-700);
  line-height: 1.65;
  font-size: 16px;
  margin: 14px 0 0;
}

/* ===============
   Illustration
================ */
.problem-illu{
  margin: clamp(12px, 2.5vw, 24px) 0;
}
.illu-svg{
  display:block;
  width:100%;
  height:auto;
  max-height:220px;
}
@media (max-width: 560px){
  .illu-svg{ max-height:180px; }
}

/* ===============
   Motion guardrails
================ */
@media (prefers-reduced-motion: reduce){
  .problem-card::before{ animation: none !important; }
}