.features-page main:focus { outline: none; }
.feat-page { font-family: var(--font); color: var(--body); background: var(--white); }

/* ── HERO ── */
.feat-hero { position: relative; overflow: hidden; padding: 92px 0 72px; background: var(--bg); border-bottom: 1px solid var(--border); text-align: center; }
.feat-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.feat-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.feat-orb.o1 { width: 420px; height: 420px; background: #9dc0ff; top: -150px; left: -110px; }
.feat-orb.o2 { width: 360px; height: 360px; background: #b7f0e6; bottom: -170px; right: -90px; opacity: .4; }
.feat-hero-inner { position: relative; z-index: 1; }
.feat-hero-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: var(--blue-light); border: 1px solid var(--border); padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; }
.feat-h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; color: var(--dark); line-height: 1.1; letter-spacing: -.015em; max-width: 16ch; margin: 0 auto; }
.feat-lead { font-size: clamp(16px, 2vw, 19px); color: var(--body); max-width: 720px; margin: 22px auto 0; line-height: 1.6; }
.feat-lead2 { font-size: 16px; color: var(--muted); max-width: 720px; margin: 14px auto 0; line-height: 1.65; }
.feat-tagline { font-size: clamp(17px, 2.2vw, 21px); font-weight: 700; color: var(--blue); margin-top: 24px; }

.feat-flowstrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 860px; margin: 30px auto 0; }
.feat-flowstrip-step { font-size: 13px; font-weight: 600; color: var(--dark); background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; box-shadow: var(--shadow-sm); white-space: nowrap; }
.feat-flowstrip-sep { color: var(--blue); font-weight: 700; font-size: 13px; }

.feat-hero-ctas { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; }

/* ── FEATURE LIST ── */
.feat-list { padding: 40px 0 24px; background: var(--white); }
.feat-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 52px 0; border-bottom: 1px solid var(--border); }
.feat-block:last-child { border-bottom: none; }
.feat-block.flip .feat-media { order: 2; }
.feat-block.flip .feat-content { order: 1; }

/* placeholder screenshot */
.feat-media { min-width: 0; }
.feat-shot { border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(150deg, var(--blue-light), var(--white)); box-shadow: var(--shadow); overflow: hidden; aspect-ratio: 16 / 11; display: flex; flex-direction: column; }
.feat-shot-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--white); }
.feat-shot-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--border); }
.feat-shot-bar span:nth-child(1) { background: #ef8b83; }
.feat-shot-bar span:nth-child(2) { background: #f5c451; }
.feat-shot-bar span:nth-child(3) { background: #67c99a; }
.feat-shot-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; }
.feat-shot-icon { font-size: 46px; line-height: 1; }
.feat-shot-num { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.feat-shot-title { font-size: 17px; font-weight: 700; color: var(--dark); max-width: 22ch; }
.feat-shot-tag { font-size: 12px; color: var(--muted); background: var(--white); border: 1px dashed var(--border); border-radius: 999px; padding: 4px 12px; margin-top: 4px; }

/* real product screenshots */
.feat-shot-img { display: block; padding: 0; }
.feat-shot-img picture { display: block; width: 100%; height: 100%; }
.feat-img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.feat-shot-img.portrait { background: linear-gradient(160deg, var(--blue-light), var(--white) 60%); }
.feat-shot-img.portrait .feat-img { object-fit: contain; padding: 10px 0; }

/* ── EMOTION-AWARE DEMO (feature 03) ── */
.ea-shot { background: linear-gradient(160deg, var(--blue-light), var(--white) 55%); }
.ea-stage { flex: 1; display: flex; flex-direction: column; padding: 16px 20px 12px; min-height: 0; }
.ea-slide { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 13px; animation: ea-slide 7400ms ease both; }

.ea-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; opacity: 0; animation: ea-fade-up .5s ease .1s forwards; }
.ea-rec { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ea-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5695f; animation: ea-blink 1.4s ease-in-out infinite; }
.ea-langchip { font-size: 12px; font-weight: 700; color: var(--blue); background: var(--blue-light); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }

.ea-bubble { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 12px 16px 14px; box-shadow: var(--shadow-sm); opacity: 0; animation: ea-fade-up .5s ease .3s forwards; }
.ea-bubble-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ea-mic { font-size: 14px; line-height: 1; }
.ea-wave { display: inline-flex; align-items: center; gap: 2.5px; height: 14px; }
.ea-wave span { width: 3px; height: 100%; border-radius: 2px; background: var(--blue); transform-origin: center; animation: ea-wavebar 1s ease-in-out infinite; }
.ea-plabel { font-size: 11px; font-weight: 600; color: var(--muted); }
.ea-speech { margin: 0; font-size: 15.5px; font-weight: 500; color: var(--dark); line-height: 1.6; animation: ea-dim .5s ease 3.5s forwards; }
.ea-word { display: inline-block; margin-right: .3em; opacity: 0; animation: ea-word-in .45s ease forwards; }
.ea-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--blue) 18%, transparent), transparent); transform: translateX(-130%) skewX(-10deg); animation: ea-scan .95s ease-in-out 2.7s forwards; pointer-events: none; }

.ea-ai { display: flex; align-items: center; gap: 10px; }
.ea-ai-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--blue)); transform: scaleX(0); transform-origin: right; animation: ea-grow .5s ease 3.15s forwards; }
.ea-ai-line.r { background: linear-gradient(to left, transparent, var(--blue)); transform-origin: left; }
.ea-ai-chip { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--blue); background: var(--blue-light); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; white-space: nowrap; opacity: 0; transform: scale(.8); animation: ea-pop .45s cubic-bezier(.3,1.4,.5,1) 3.1s forwards; }

.ea-result { display: flex; align-items: center; gap: 11px; background: color-mix(in oklab, var(--green) 10%, var(--white)); border: 1px solid color-mix(in oklab, var(--green) 35%, var(--border)); border-radius: 12px; padding: 12px 16px; opacity: 0; filter: blur(10px); transform: translateY(8px) scale(.97); animation: ea-result-in .7s cubic-bezier(.2,.7,.3,1) 3.75s forwards; }
.ea-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; transform: scale(0); animation: ea-pop .4s cubic-bezier(.3,1.6,.5,1) 4.15s forwards; }
.ea-rubric { font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.3; }

.ea-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ea-tag { font-size: 11.5px; font-weight: 600; color: var(--body); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; opacity: 0; transform: translateY(5px); animation: ea-tag-in .4s ease forwards; }

.ea-controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 10px; }
.ea-dots { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ea-dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--border); transition: width .3s ease; overflow: hidden; cursor: pointer; }
.ea-dot.on { width: 26px; }
.ea-dot.on::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--blue); transform-origin: left; animation: ea-progress 7400ms linear forwards; }
.ea-pause { padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--white); color: var(--body); font-family: var(--font); font-size: 11px; font-weight: 700; cursor: pointer; }
.ea-shot.paused *, .ea-shot.paused *::before, .ea-shot.paused *::after { animation-play-state: paused !important; }

@keyframes ea-slide { 0% { opacity: 0; transform: translateY(6px); } 4% { opacity: 1; transform: none; } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ea-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ea-word-in { from { opacity: 0; transform: translateY(5px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ea-wavebar { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes ea-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes ea-scan { to { transform: translateX(320%) skewX(-10deg); } }
@keyframes ea-dim { to { opacity: .55; } }
@keyframes ea-grow { to { transform: scaleX(1); } }
@keyframes ea-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes ea-result-in { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes ea-tag-in { to { opacity: 1; transform: none; } }
@keyframes ea-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .ea-slide, .ea-top, .ea-bubble, .ea-word, .ea-speech, .ea-ai-line, .ea-ai-chip,
  .ea-result, .ea-check, .ea-tag, .ea-rec-dot, .ea-wave span, .ea-dot.on::after { animation: none; }
  .ea-top, .ea-bubble, .ea-word, .ea-ai-chip, .ea-result, .ea-tag { opacity: 1; transform: none; filter: none; }
  .ea-check { transform: scale(1); }
  .ea-ai-line { transform: scaleX(1); }
  .ea-scan { display: none; }
}

/* content */
.feat-content { min-width: 0; }
.feat-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.feat-num { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--blue); background: var(--blue-light); border-radius: 8px; padding: 5px 10px; }
.feat-ic { font-size: 24px; }
.feat-title { font-size: clamp(23px, 3vw, 30px); font-weight: 700; color: var(--dark); line-height: 1.18; }
.feat-headline { font-size: 17px; font-weight: 600; color: var(--blue); margin: 10px 0 14px; font-style: italic; }
.feat-body { font-size: 15.5px; color: var(--body); line-height: 1.65; margin-bottom: 10px; }

.feat-emph { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.feat-emph-chip { font-size: 13.5px; font-weight: 600; color: var(--dark); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; }

.feat-cap-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 20px 0 12px; }
.feat-caps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 20px; }
.feat-caps li { position: relative; display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--body); line-height: 1.45; }
.feat-check { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; background: color-mix(in oklab, var(--green) 16%, transparent); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; margin-top: 1px; }

.feat-flow { margin-top: 22px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); }
.feat-flow-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.feat-flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feat-flow-step { font-size: 13.5px; font-weight: 600; color: var(--blue); background: var(--blue-light); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; }
.feat-flow-arrow { color: var(--blue); font-weight: 700; }

.feat-why { margin-top: 22px; padding: 16px 20px; border-left: 3px solid var(--blue); background: var(--blue-light); border-radius: 0 12px 12px 0; }
.feat-why-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.feat-why p { font-size: 15px; color: var(--dark); line-height: 1.6; margin: 0; }

/* ── COMING SOON ── */
.feat-soon { padding: 40px 0 88px; background: var(--white); }
.feat-soon-card { border: 1px solid var(--border); border-radius: 20px; padding: 44px; background: var(--bg); text-align: center; box-shadow: var(--shadow-sm); }
.feat-soon-card h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; color: var(--dark); margin: 16px 0 10px; }
.feat-soon-card > p { font-size: 16px; color: var(--muted); max-width: 620px; margin: 0 auto; line-height: 1.6; }
.feat-soon-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin: 32px 0 16px; }
.feat-soon-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.feat-soon-item { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--dark); background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; box-shadow: var(--shadow-sm); }
.feat-soon-item span { color: var(--blue); font-weight: 800; }

/* ── WHY DIFFERENT ── */
.feat-diff { padding: 96px 0; background: var(--bg); text-align: center; border-top: 1px solid var(--border); }
.feat-diff-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 28px; }
.feat-diff-lines { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; }
.feat-diff-line { display: flex; align-items: flex-start; gap: 12px; width: 100%; justify-content: flex-start; font-size: clamp(15px, 2vw, 18px); color: var(--muted); background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 14px 20px; text-align: left; }
.feat-diff-x { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in oklab, #e5695f 16%, transparent); color: #e5695f; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; margin-top: 2px; }
.feat-diff-connect { font-size: clamp(19px, 2.6vw, 26px); font-weight: 700; color: var(--dark); margin: 32px 0 14px; }
.feat-diff-body { font-size: 16.5px; color: var(--body); line-height: 1.7; max-width: 760px; margin: 0 auto; }
.feat-diff-punch { margin-top: 36px; }
.feat-diff-punch p { font-size: clamp(20px, 2.8vw, 28px); font-weight: 700; color: var(--muted); line-height: 1.35; }
.feat-diff-punch p.hl { color: var(--blue); }

/* ── FINAL CTA ── */
.feat-cta { background: #0c152d; color: #fff; text-align: center; padding: 92px 0; }
[data-theme="dark"] .feat-cta { background: #020510; }
.feat-cta h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: #fff; margin-bottom: 14px; max-width: 20ch; margin-left: auto; margin-right: auto; }
.feat-cta p { font-size: 17px; color: #A8BED0; max-width: 620px; margin: 0 auto 34px; line-height: 1.65; }
.feat-cta-btns { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-white { font-family: var(--font); font-size: 16px; font-weight: 600; padding: 14px 28px; border-radius: var(--radius-sm); background: #fff; color: #0c152d; text-decoration: none; transition: transform .1s, box-shadow .15s; }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.btn-ghost-white { font-family: var(--font); font-size: 16px; font-weight: 600; padding: 14px 28px; border-radius: var(--radius-sm); background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); text-decoration: none; transition: background .15s, border-color .15s; }
.btn-ghost-white:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .feat-block { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .feat-block.flip .feat-media { order: 1; }
  .feat-block.flip .feat-content { order: 2; }
  .feat-soon-card { padding: 32px 22px; }
}
@media (max-width: 560px) {
  .feat-caps { grid-template-columns: 1fr; }
  .feat-flowstrip-step { font-size: 12px; padding: 6px 11px; }
  .ea-stage { padding: 12px 14px 10px; }
  .ea-speech { font-size: 14px; }
  .ea-rubric { font-size: 14.5px; }
  .ea-rec { font-size: 10px; }
  .ea-langchip { font-size: 11px; padding: 4px 10px; }
}