/* --- skills + experience --- */
.stack { position: relative; z-index: 1; padding: clamp(80px, 12svh, 140px) var(--pad) clamp(100px, 14svh, 170px); background: radial-gradient(40% 30% at 85% 20%, rgba(242,217,138,.06), transparent 70%), var(--bg); }

.sec-head { margin: 0 0 36px; }

.sec-head.sp { margin-top: clamp(80px, 12svh, 140px); }

.sec-head h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.5vw, 2.3rem); letter-spacing: -.015em; line-height: 1.15; }

.c3 { grid-column: span 3; }
 .c2 { grid-column: span 2; }

.card,.points li { --cx: 50%; --cy: 0%; }

.card {
  position: relative; overflow: hidden; padding: 28px;
  border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.03);
  transition: border-color .35s, transform .35s var(--ease-out), background .35s;
}

.card::before,.points li::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px circle at var(--cx) var(--cy), rgba(242,217,138,.15), transparent 60%); }

.card:hover,.points li:hover { border-color: rgba(242,217,138,.45); }

.card:hover { background: rgba(255,255,255,.045); }

.card:hover::before,.points li:hover::before { opacity: 1; }

.card.feat { background: linear-gradient(160deg, rgba(242,217,138,.1), rgba(255,255,255,.03) 55%); border-color: rgba(242,217,138,.3); }

.card.feat::after { content: "</>"; position: absolute; right: 24px; bottom: -16px; font-family: var(--display); font-weight: 800; font-size: 6.4rem; color: transparent; -webkit-text-stroke: 1px rgba(242,217,138,.2); pointer-events: none; }

.card .ico { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 12px; border: 1px solid rgba(242,217,138,.3); background: rgba(242,217,138,.08); }

.card .ico svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.card h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tag-soft { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(242,217,138,.4); border-radius: 999px; padding: 3px 10px; font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; position: relative; z-index: 1; }

.chips li { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .86rem; color: rgba(255,255,255,.88); background: rgba(255,255,255,.03); transition: border-color .25s, background .25s, translate .25s var(--ease-out); }

.chips li:hover { border-color: rgba(242,217,138,.6); background: rgba(242,217,138,.1); translate: 0 -2px; }

.c3 .chips li { padding: 9px 18px; font-size: .92rem; }


/* --- timeline --- */
.timeline { display: grid; gap: 26px; }

.t-item { display: grid; grid-template-columns: 190px 22px minmax(0, 1fr); gap: 0 28px; }

.pill { display: inline-block; padding: 7px 16px; border-radius: 999px; background: rgba(242,217,138,.1); border: 1px solid rgba(242,217,138,.35); color: var(--gold); font-size: .82rem; white-space: nowrap; }


/* --- education --- */
.edu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }

@media (max-width: 960px) { .edu { grid-template-columns: 1fr; gap: 40px; }
 }