:root {
  --bg: #f4f6fb;
  --card: rgba(255,255,255,0.92);
  --text: #101828;
  --muted: #667085;
  --line: rgba(16,24,40,0.08);
  --green: #12b76a;
  --violet: #7c5cff;
  --orange: #ff8a00;
  --blue: #1570ef;
  --shadow: 0 20px 50px rgba(16,24,40,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; font-family: Inter, sans-serif; color: var(--text); background: radial-gradient(circle at top left, #eef7ff 0, #f7f4ff 35%, #f6faf7 68%, #f4f6fb 100%); }
.app-shell { display: grid; grid-template-columns: 290px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 22px 18px; border-right: 1px solid var(--line); background: rgba(255,255,255,.7); backdrop-filter: blur(18px); }
.brand { display:flex; gap:12px; align-items:center; margin-bottom:18px; }
.brand-mark { width:46px; height:46px; border-radius: 14px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; background: linear-gradient(135deg, var(--green), var(--violet)); }
.brand-title { font-weight: 800; }
.brand-subtitle, .lead, .eyebrow, .comment-block p { color: var(--muted); }
.brand-subtitle, .lead, .comment-block p { line-height: 1.5; }
.menu { display:grid; gap:8px; }
.menu-btn { border:1px solid transparent; background: transparent; border-radius: 16px; padding: 10px 12px; text-align:left; font:inherit; font-size: 14px; line-height: 1.4; cursor:pointer; }
.menu-btn.active { background: linear-gradient(135deg, rgba(18,183,106,.12), rgba(124,92,255,.12)); border-color: rgba(18,183,106,.18); font-weight:700; }
.main-column { padding: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.topbar { min-height: 88px; padding: 16px 22px; margin-bottom: 18px; display:flex; align-items:center; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; }
h1 { margin: 5px 0 0; font-size: 24px; }
.content-grid { display:grid; grid-template-columns: minmax(0, 1.55fr) 390px; gap: 18px; }
.stage, .comments { padding: 22px; }
.canvas-area { display:grid; gap: 20px; }
.question-block h2, .definition-block h2, .phones-block h2, .comment-block h3, .comments-head h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.25; }
.question-block, .definition-block, .phones-block, .glass-card { background:#fff; border:1px solid var(--line); border-radius: 24px; padding: 20px; }
.answer-pills { display:flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pill { border: 1px solid rgba(16,24,40,.08); background: linear-gradient(180deg, #fff, #f7f9fc); border-radius: 999px; padding: 12px 16px; cursor:pointer; font:inherit; transition: .2s ease; }
.pill.blurred, .reveal-line .hidden-text { filter: blur(6px); user-select: none; }
.pill.revealed, .reveal-line.revealed .hidden-text { filter: none; }
.data-grid { display: grid; gap: 14px; margin-top: 18px; }
.data-row { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; }
.data-head { display:flex; align-items:center; gap: 10px; margin-bottom: 12px; }
.data-icon { width: 30px; height: 30px; border-radius: 10px; display:flex; align-items:center; justify-content:center; font-size: 16px; background: linear-gradient(135deg, rgba(21,112,239,.14), rgba(124,92,255,.12)); }
.data-title { font-weight: 800; font-size: 15px; }
.data-pills { display:flex; flex-wrap: wrap; gap: 10px; }
.data-pills .pill { font-size: 13px; padding: 10px 14px; }
.quiz-block { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.quiz-title { margin: 0 0 12px; font-size: 18px; line-height: 1.35; }
.quiz-options { display:flex; flex-wrap: wrap; gap: 10px; }
.quiz-btn { border: 1px solid rgba(16,24,40,.08); background: #eef1f5; color: #344054; border-radius: 999px; padding: 11px 15px; cursor: pointer; font: inherit; transition: .18s ease; }
.quiz-btn.correct { background: #d9fbe8; color: #067647; border-color: rgba(6,118,71,.22); }
.quiz-btn.wrong { background: #fee4e2; color: #b42318; border-color: rgba(180,35,24,.18); }
.reveal-line { display:flex; gap: 8px; align-items:flex-start; flex-wrap: wrap; cursor:pointer; font-size: 18px; line-height: 1.5; }
.reveal-line strong { color: var(--violet); }
.phones-grid { display:grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 22px; }
.phone-card-title { margin: 0 0 14px; font-size: 15px; color: var(--muted); }
.device-wrap { display:flex; justify-content:center; }
.iphone16 { width: 292px; height: 612px; border-radius: 44px; padding: 10px; background: linear-gradient(145deg, #202938, #0e1725); box-shadow: 0 32px 80px rgba(16,24,40,.22); position: relative; }
.iphone16:before { content: ''; position:absolute; top: 12px; left:50%; transform:translateX(-50%); width: 112px; height: 32px; background:#000; border-radius: 999px; z-index: 2; }
.screen { height: 100%; border-radius: 34px; overflow: hidden; background: linear-gradient(180deg, #f8fbff, #eef4ff); display:flex; flex-direction:column; }
.app-header { padding: 18px 16px 12px; display:flex; justify-content:space-between; align-items:center; }
.app-header strong { font-size: 15px; }
.app-badge { font-size: 12px; color: var(--blue); font-weight: 700; }
.offer-list { padding: 0 14px; display:grid; gap: 10px; max-height: 250px; }
.offer { border-radius: 18px; padding: 14px; border:1px solid rgba(16,24,40,.08); background: #fff; cursor: pointer; transition: .22s ease; }
.offer.primary { background: linear-gradient(135deg, rgba(18,183,106,.18), rgba(21,112,239,.14)); border-color: rgba(18,183,106,.36); box-shadow: inset 0 0 0 1px rgba(18,183,106,.15); }
.offer strong { display:block; margin-bottom: 6px; }
.offer small { color: var(--muted); display:block; }
.offer .launch { margin-top: 10px; display:inline-flex; padding: 8px 12px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; }
.final-cta { display:inline-flex; margin-top: 6px; padding: 10px 14px; border-radius: 999px; background: linear-gradient(135deg, #12b76a, #0ea75a); color: #fff; font-weight: 800; font-size: 12px; }
.chat-shell { margin: 14px; margin-top: 12px; border-radius: 22px; background: rgba(255,255,255,.85); border: 1px solid rgba(16,24,40,.08); display:flex; flex-direction:column; min-height: 286px; overflow: hidden; }
.chat-header { padding: 12px 14px; border-bottom: 1px solid rgba(16,24,40,.06); font-weight:700; font-size: 13px; }
.chat-log { padding: 12px; overflow-y: auto; display:grid; gap:10px; height: 244px; }
.bubble { max-width: 88%; padding: 11px 13px; border-radius: 16px; line-height: 1.42; font-size: 13px; }
.bubble.ai { background: #eff4ff; justify-self: start; }
.bubble.user { background: #eafaf1; justify-self: end; }
.scroll-hint { padding: 10px 12px 14px; font-size: 12px; color: var(--muted); }
.comment-block + .comment-block { margin-top: 18px; }
@media (max-width: 1280px) { .content-grid { grid-template-columns: 1fr; } .comments { order: -1; } }
@media (max-width: 980px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position:relative; height:auto; border-right:0; border-bottom:1px solid var(--line); } .phones-grid { grid-template-columns: 1fr; } }