.interview-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(5rem, 9vw, 8rem);
  background: radial-gradient(ellipse at 81% 27%, #e1eee8 0, transparent 27rem), linear-gradient(125deg, #f7f9fc 0%, #eef3f7 54%, #f3f0e8 100%);
}
.interview-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(21rem, .88fr); gap: clamp(3rem, 8vw, 7rem); align-items: center; }
.interview-hero-copy { position: relative; z-index: 1; }
.interview-eyebrow,.interview-section-kicker { display: inline-flex; align-items: center; gap: .6rem; color: #497366; font-size: .68rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.interview-eyebrow > span { width: .45rem; height: .45rem; border-radius: 50%; background: #4ca187; box-shadow: 0 0 0 .24rem #4ca18718; }
.interview-hero h1 { max-width: 11ch; margin: 1.35rem 0 1.4rem; color: #142a47; font-size: clamp(3rem, 6vw, 5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.05em; }
.interview-hero h1 em { color: #3457d5; font-style: normal; }
.interview-lead { max-width: 37rem; margin: 0; color: #5c6c81; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.85; }
.interview-agent-highlight { color: #3158df; font-weight: 750; }
.interview-platform-preview { position: relative; margin: 1.5rem 0 0; padding: .4rem; border: 1px solid #ffffffd9; border-radius: .9rem; background: #fff; box-shadow: 0 16px 40px #172f4a16; transform: rotate(-.6deg); }
.interview-platform-preview img { display: block; width: 100%; height: auto; border-radius: .58rem; }
.interview-platform-preview figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .62rem .55rem .35rem; color: #687990; font-size: .63rem; font-weight: 600; }
.interview-platform-preview figcaption > span:last-child { color: #3158df; font-size: .8rem; }
.interview-free-offer { display: flex; align-items: center; gap: .8rem; width: fit-content; max-width: 100%; margin-top: 1.35rem; padding: .7rem .85rem; border: 1px solid #d8e8df; border-radius: .75rem; background: linear-gradient(100deg, #fff, #f0f7f2); box-shadow: 0 8px 24px #2a624012; }
.interview-free-offer-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; border: 1px solid #d4c495; border-radius: 50%; background: #f8f5e9; color: #a88942; font-size: 1rem; }
.interview-free-offer-copy { display: grid; gap: .12rem; }
.interview-free-offer-copy strong { color: #204c3d; font-size: .78rem; }
.interview-free-offer-copy > span { color: #647c70; font-size: .67rem; }
.interview-free-offer-badge { margin-left: .35rem; padding: .28rem .42rem; border: 1px solid #d5e8dc; border-radius: .35rem; background: #e7f3eb; color: #34755b; font-size: .52rem; font-weight: 800; letter-spacing: .09em; }
.interview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.35rem; }
.interview-primary.btn { min-height: 3.5rem; padding: .85rem 1.35rem; border-radius: .75rem; background: #142c4b; box-shadow: 0 8px 22px #142c4b25; color: #fff; font-size: .9rem; font-weight: 650; transition: transform .18s, background .18s, box-shadow .18s; }
.interview-primary.btn:hover { transform: translateY(-2px); background: #203e63; box-shadow: 0 12px 26px #142c4b30; }
.interview-primary.btn > span { color: #b6ddca; font-size: 1rem; }
.interview-independent { max-width: 34rem; margin: 1.3rem 0 0; color: #8793a3; font-size: .72rem; line-height: 1.7; }
.interview-visual { position: relative; min-width: 0; padding: 1.25rem; }
.interview-visual-glow { position: absolute; inset: 9% 3% 4%; border-radius: 50%; background: #98cdbb55; filter: blur(48px); }
.interview-product-card { position: relative; z-index: 1; padding: 1.5rem; border: 1px solid #ffffffd9; border-radius: 1.25rem; background: #ffffffed; box-shadow: 0 30px 90px #172f4a1c, 0 2px 6px #172f4a0a; transform: rotate(1deg); }
.interview-product-top,.interview-product-brand,.interview-product-status,.interview-session-meta,.interview-product-bottom { display: flex; align-items: center; }
.interview-product-top { justify-content: space-between; gap: .5rem; padding-bottom: 1.15rem; border-bottom: 1px solid #edf0f4; }
.interview-product-brand { gap: .4rem; color: #263d58; font-size: .63rem; font-weight: 800; letter-spacing: .1em; }
.interview-brand-mark { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .45rem; background: #142c4b; color: #fff; font-size: .8rem; letter-spacing: 0; }
.interview-product-ai { padding: .16rem .32rem; border-radius: .25rem; background: #e8f4ee; color: #387460; font-size: .52rem; }
.interview-product-status { gap: .35rem; color: #718196; font-size: .59rem; }
.interview-product-status i { width: .42rem; height: .42rem; border-radius: 50%; background: #54a887; box-shadow: 0 0 0 .2rem #54a88716; }
.interview-session-label { margin-top: 1.5rem; color: #76859a; font-size: .56rem; font-weight: 750; letter-spacing: .13em; }
.interview-product-card > h2 { margin: .5rem 0; color: #192f4b; font-size: clamp(1.05rem, 1.8vw, 1.4rem); letter-spacing: -.035em; }
.interview-session-context { margin: 0; color: #758399; font-size: .72rem; line-height: 1.7; }
.interview-session-meta { gap: 1.1rem; margin: 1.2rem 0; padding: .7rem .75rem; border: 1px solid #edf0f4; border-radius: .55rem; background: #fafbfd; }
.interview-session-meta > span { color: #64758b; font-size: .59rem; white-space: nowrap; }
.interview-session-meta b { margin-right: .25rem; color: #548b78; font-size: .8rem; }
.interview-question { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px solid #e7ecf1; border-radius: .75rem; background: #fff; box-shadow: 0 4px 14px #172f4a08; }
.interview-agent { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: .65rem; background: #edf4f2; color: #397965; }
.interview-agent svg { width: 1.15rem; height: 1.15rem; }
.interview-question small,.interview-question strong { display: block; }
.interview-question small { margin: .05rem 0 .35rem; color: #8390a1; font-size: .49rem; font-weight: 750; letter-spacing: .08em; }
.interview-question strong { color: #31445c; font-size: .7rem; font-weight: 550; line-height: 1.6; }
.interview-audio { display: flex; align-items: center; justify-content: center; gap: 3px; height: 2.65rem; margin: .65rem 0 .2rem; border-radius: .6rem; background: #f1f5f8; }
.interview-audio span { width: 3px; height: 8px; border-radius: 4px; background: #85b4a2; }
.interview-audio span:nth-child(3n) { height: 14px; }.interview-audio span:nth-child(4n) { height: 19px; }.interview-audio span:nth-child(5n) { height: 11px; }
.interview-audio i { width: .42rem; height: .42rem; margin-left: .25rem; border-radius: 50%; background: #d17168; }
.interview-product-bottom { justify-content: space-between; margin-top: 1rem; color: #8a96a6; font-size: .49rem; font-weight: 700; letter-spacing: .09em; }
.interview-product-bottom > span:last-child { font-size: .62rem; letter-spacing: .03em; }
.interview-product-bottom b { color: #b2bdca; }
.interview-floating-note { position: absolute; z-index: 2; right: -.7rem; bottom: -.6rem; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid #e7eced; border-radius: .8rem; background: #fff; box-shadow: 0 12px 35px #172f4a18; }
.interview-floating-note > span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: #f3efe4; color: #ad9256; }
.interview-floating-note strong,.interview-floating-note small { display: block; }
.interview-floating-note strong { color: #30435a; font-size: .64rem; }
.interview-floating-note small { margin-top: .16rem; color: #8390a1; font-size: .57rem; }
.interview-benefits { position: relative; overflow: hidden; padding-top: clamp(4.5rem, 8vw, 6.75rem); padding-bottom: clamp(4.5rem, 8vw, 6.75rem); background: radial-gradient(ellipse at 50% -30%, #2d4b6a 0, transparent 65%), linear-gradient(145deg, #122b49, #10253f 72%, #142e4a); }
.interview-benefits::before,.interview-benefits::after { position: absolute; width: 24rem; height: 24rem; border: 1px solid #ffffff09; border-radius: 50%; content: ""; pointer-events: none; }
.interview-benefits::before { top: -17rem; left: -9rem; }
.interview-benefits::after { right: -11rem; bottom: -19rem; width: 32rem; height: 32rem; }
.interview-benefits .container { position: relative; z-index: 1; }
.interview-section-heading { max-width: 46rem; margin: 0 auto 2.75rem; text-align: center; }
.interview-benefits .interview-section-kicker { color: #b5d9c9; }
.interview-section-heading h2,.interview-how-intro h2 { margin: .75rem 0 .85rem; color: #142a47; font-size: clamp(1.8rem, 3.6vw, 2.65rem); letter-spacing: -.05em; }
.interview-benefits .interview-section-heading h2 { color: #fff; }
.interview-section-heading > p,.interview-how-intro > p { margin: 0; color: #69788c; font-size: .9rem; line-height: 1.8; }
.interview-benefits .interview-section-heading > p { color: #c0cede; }
.interview-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.interview-benefit { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: clamp(1.35rem, 2vw, 1.8rem); border: 1px solid #ffffff20; border-radius: 1rem; background: linear-gradient(150deg, #ffffff10, #ffffff07); box-shadow: 0 20px 55px #07172b20; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.interview-benefit::before { position: absolute; top: 0; right: 1.7rem; left: 1.7rem; height: 1px; background: linear-gradient(90deg, transparent, #cfbd8a88, transparent); content: ""; }
.interview-benefit:hover { transform: translateY(-3px); border-color: #b5d9c955; background: linear-gradient(150deg, #ffffff16, #ffffff0a); }
.interview-benefit-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.65rem; }
.interview-benefit-icon { display: grid; place-items: center; width: 2.85rem; height: 2.85rem; border: 1px solid #ffffff24; border-radius: .85rem; background: #ffffff09; color: #bad4e6; }
.interview-benefit-icon svg { width: 1.3rem; height: 1.3rem; }
.interview-benefit-index { display: flex; align-items: center; gap: .65rem; color: #c3d1dc; font-size: .61rem; font-weight: 750; letter-spacing: .13em; }
.interview-benefit-number { display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 3rem; border: 1px solid #b5a878; border-radius: 50%; outline: 1px solid #b5a87855; outline-offset: 3px; color: #e4d6a9; background: #ffffff08; font-size: .9rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.interview-benefit-index { color: #a8d7c6; font-size: .63rem; font-weight: 750; letter-spacing: .12em; }
.interview-benefit h3 { margin: .55rem 0 .7rem; color: #fff; font-size: 1.35rem; letter-spacing: -.035em; }
.interview-benefit p { min-height: 4.5rem; margin: 0 0 1.3rem; color: #c0cede; font-size: .84rem; line-height: 1.8; }
.interview-benefit-visual { position: relative; display: flex; height: 9rem; flex-shrink: 0; align-items: center; overflow: hidden; padding: .85rem; border: 1px solid #ffffff18; border-radius: .8rem; background: #071a2c38; }
.interview-mini-cv { width: 88%; min-height: 7.4rem; padding: .8rem; border: 1px solid #e8edf3; border-radius: .55rem; background: #fff; transform: rotate(-2deg); }
.interview-mini-cv-title,.interview-mini-panel-title { display: block; color: #687b8f; font-size: .5rem; font-weight: 750; letter-spacing: .1em; }
.interview-mini-person { display: flex; align-items: center; gap: .5rem; margin-top: .65rem; }
.interview-mini-person > i { width: 1.65rem; height: 1.65rem; flex: 0 0 1.65rem; border-radius: 50%; background: #e7edf5; }
.interview-mini-person > span { display: grid; gap: .25rem; width: 55%; }
.interview-mini-person b,.interview-mini-lines i { height: .22rem; border-radius: 1rem; background: #dce5ef; }
.interview-mini-person b:last-child { width: 68%; height: .18rem; }
.interview-mini-lines { display: grid; gap: .28rem; width: 65%; margin: .55rem 0; }
.interview-mini-lines i:last-child { width: 72%; }
.interview-mini-tags { display: flex; gap: .3rem; }
.interview-mini-tags i { padding: .18rem .35rem; border-radius: .2rem; background: #edf3f9; color: #64768a; font-size: .46rem; font-style: normal; }
.interview-mini-check { position: absolute; right: .7rem; bottom: .8rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 3px solid #fff; border-radius: 50%; background: #e7f5ed; color: #26785d; font-size: 1rem; }
.interview-settings-visual { display: block; padding: .8rem; }
.interview-mini-panel-title { margin-bottom: .5rem; }
.interview-setting-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .48rem .55rem; margin-top: .35rem; border: 1px solid #e8edf3; border-radius: .42rem; background: #fff; color: #76859a; font-size: .52rem; }
.interview-setting-row > span > i { margin-right: .25rem; color: #438770; font-style: normal; }
.interview-setting-row > b { color: #3d536b; font-size: .52rem; font-weight: 600; }
.interview-setting-row > b > i { margin-left: .3rem; color: #8796a8; font-style: normal; }
.interview-mini-progress { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; color: #b8cad7; font-size: .48rem; }
.interview-mini-progress > i { width: 30%; height: .22rem; overflow: hidden; border-radius: 1rem; background: #ffffff22; }
.interview-mini-progress > i > b { display: block; width: 70%; height: 100%; border-radius: inherit; background: #a8d7c6; }
.interview-report-visual { display: block; padding: .8rem; }
.interview-report-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.interview-report-head > span > b,.interview-report-head > span > small { display: block; }
.interview-report-head > span > b { color: #718197; font-size: .49rem; letter-spacing: .1em; }
.interview-report-head > span > small { margin-top: .18rem; color: #9aa6b4; font-size: .48rem; }
.interview-report-head > strong { color: #dcd0a6; font-size: 1.35rem; line-height: 1; }
.interview-report-head > strong > small { color: #bdc9d4; font-size: .53rem; font-weight: 500; }
.interview-report-row { display: grid; grid-template-columns: 1fr 38%; align-items: center; gap: .6rem; margin-top: .52rem; color: #c1d0dc; font-size: .49rem; }
.interview-report-row > i { height: .25rem; overflow: hidden; border-radius: 1rem; background: #ffffff1c; }
.interview-report-row > i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8dc5ad, #d4c18c); }
.interview-benefit-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid #ffffff18; color: #b9cce0; font-size: .7rem; font-weight: 500; }
.interview-how { padding: clamp(3.5rem, 7vw, 5.5rem) 0; border-top: 1px solid #e9edf2; background: #f6f8fa; }
.interview-how-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.interview-how-intro { max-width: 25rem; }
.interview-how-list { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.interview-how-list li { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.5rem; }
.interview-how-list li:not(:last-child)::after { position: absolute; top: 2.6rem; bottom: -.1rem; left: 1.2rem; width: 1px; background: #d9e3e8; content: ""; }
.interview-how-list li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid #d8c99f; border-radius: 50%; background: #fff; color: #284660; font-size: .75rem; font-weight: 700; }
.interview-how-list strong { display: block; padding-top: .28rem; color: #1d3451; font-size: .92rem; }
.interview-how-list p { margin: .3rem 0 0; color: #6e7d8f; font-size: .77rem; line-height: 1.7; }
.interview-final { padding: 1.5rem 0 clamp(4rem, 7vw, 6rem); background: #f6f8fa; }
.interview-final-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.7rem, 4vw, 3rem); border: 1px solid #ffffff20; border-radius: 1.25rem; background: radial-gradient(ellipse at 85% 0, #2c496c, transparent 65%), #142c4b; box-shadow: 0 20px 50px #142c4b20; }
.interview-final-panel .interview-section-kicker { color: #a8d7c6; }
.interview-final-panel h2 { max-width: 36rem; margin: .65rem 0 .55rem; color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.04em; }
.interview-final-panel p { margin: 0; color: #c0cede; font-size: .82rem; }
.interview-final-panel .interview-primary { flex: 0 0 auto; background: #fff; color: #142c4b; box-shadow: none; }
.interview-final-panel .interview-primary > span { color: #397965; }
.interview-final-panel .interview-primary:hover { background: #edf4f1; }
@media (max-width: 900px) {
  .interview-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, .9fr); gap: 2rem; }
  .interview-hero h1 { font-size: clamp(2.8rem, 6vw, 4rem); }
  .interview-product-card { padding: 1.15rem; }
  .interview-benefit { padding: 1.35rem; }
}
@media (max-width: 700px) {
  .interview-hero { padding: 3.6rem 0 4.5rem; }
  .interview-hero-grid,.interview-how-grid { grid-template-columns: 1fr; }
  .interview-hero-grid { gap: 2.5rem; }
  .interview-hero h1 { max-width: 10ch; font-size: clamp(3rem, 11vw, 4rem); }
  .interview-lead { font-size: 1rem; }
  .interview-platform-preview { margin-top: 1.15rem; }
  .interview-visual { width: min(100%, 28rem); justify-self: center; padding: .5rem; }
  .interview-floating-note { right: -.2rem; }
  .interview-benefit-grid { grid-template-columns: 1fr; gap: .8rem; }
  .interview-benefit { padding: 1.25rem; }
  .interview-benefit p { min-height: 0; }
  .interview-benefit-top { margin-bottom: 1.5rem; }
  .interview-benefit-visual { height: 8.75rem; }
  .interview-how-grid { gap: 2rem; }
  .interview-final-panel { align-items: flex-start; flex-direction: column; }
  .interview-final-panel .interview-primary { width: 100%; }
}
@media (max-width: 390px) {
  .interview-product-top { align-items: flex-start; flex-direction: column; }
  .interview-session-meta { gap: .6rem; }
  .interview-session-meta > span { font-size: .53rem; }
}
@media (prefers-reduced-motion: reduce) {
  .interview-primary.btn { transition: none; }
  .interview-primary.btn:hover { transform: none; }
  .interview-benefit { transition: none; }
  .interview-benefit:hover { transform: none; }
}