/* Bright Innocifra palette. Short entrances, clear interaction, no scroll interception. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); --peach: #fff0e4; --mint: #e1f4ed; }
.hero::before { background: radial-gradient(ellipse at 85% 31%, #ffeaf2 0, transparent 54%), radial-gradient(ellipse at 99% 64%, #fff0e4 0, transparent 46%); }
.hero h1 .hero-title-line { display: inline-block; color: var(--ink); }
.hero h1 .hero-title-accent { color: var(--accent); }
.hero-tags span { background: #ffffffc9; }
.learning-scene { border-color: #f0dde6; background: radial-gradient(ellipse at 92% 7%, #fff0e4 0, transparent 45%), radial-gradient(ellipse at 6% 85%, #e1f4ed88 0, transparent 45%), linear-gradient(145deg, #fff 15%, #fff7fa 60%, #fff0f5 100%); box-shadow: 0 18px 48px #a40e4c08; }
.world-core { filter: drop-shadow(0 10px 6px #a40e4c18); }
.world-node { border-color: #fff; box-shadow: 0 12px 26px #a40e4c0d, 0 3px 0 #e9d5df; }
.world-document { background: linear-gradient(150deg, #fff 66%, #fff0e4); }
.world-media { background: linear-gradient(150deg, #fff 65%, #ffedf4); }
.world-knowledge { background: linear-gradient(150deg, #fff 60%, #e1f4ed); }
.world-automation { background: linear-gradient(150deg, #fff 65%, #fff0e4); }
.world-media-tiles i:nth-child(1) { background: #f9c2a4; }
.world-media-tiles i:nth-child(3) { background: #81b9a7; }
.world-knowledge-links i:nth-child(1), .world-knowledge-links i:nth-child(3) { background: #aed7c9; }
.scene-toggle { background: var(--accent); }
.scene-toggle:hover { background: var(--accent-hover); }
.scene-achievement { background: #fae9f0; }
.scene-stages button[aria-pressed="true"] { border-color: #e8b6ca; }
.motion-preview-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 8px 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 500; }
.motion-preview-link .icon { width: 17px; height: 17px; }
.motion-preview-duration { padding: 2px 6px; border: 1px solid #edc9d8; border-radius: 5px; font-size: 10px; color: var(--muted); }
.motion-preview-link:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 4px; }
.motion-concept-video { display: block; width: 100%; aspect-ratio: 4 / 3; margin-block: 20px 16px; border-radius: 16px; background: #f6f8fa; }
.info-dialog .motion-concept-note { font-size: 13px; line-height: 1.6; color: var(--muted); }
.benefits, .courses, .payment, .after-course { background: #fff; }
.audience, .program, .experts { background: var(--bg); }
.new-skills { position: relative; }
.feature-card { background: #fff; }
.feature-card:nth-child(2) { background: #fff8f1; border-color: #f3e6d8; }
.feature-card:nth-child(3) { background: #f0f8f4; border-color: #deece5; }
.feature-icon { background: #fae9f0; }
.skill-card[data-skill-level="power"] { background: linear-gradient(145deg, #fff 52%, #fff5f8); }
.price-card:nth-child(2) { background: linear-gradient(145deg, #fff 10%, #fff1f6); border-color: #dfaec3; }
.reveal-ready { opacity: 0; transform: translateY(26px); transition: opacity 650ms var(--motion-ease), transform 650ms var(--motion-ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal-ready.is-visible { opacity: 1; transform: none; }
.section-heading h2::after, .skills-heading h3::after { content: ''; display: block; width: 68px; height: 4px; margin-top: 16px; border-radius: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 750ms var(--motion-ease) 100ms; }
.section-heading.is-visible h2::after, .skills-heading.is-visible h3::after { transform: scaleX(1); }
.feature-card, .course-card, .skill-card, .price-card, .lesson-card { position: relative; }
.feature-card .feature-icon, .skill-card-top > .icon { transition: transform 400ms var(--motion-ease); }
.button .icon { transition: transform 300ms var(--motion-ease); }
.button:hover .icon, .button:focus-visible .icon { transform: translateX(3px); }
#download-program:hover .icon { transform: translateY(3px); }
.button:active { transform: scale(.98); }
.expert-photo img { transition: transform 650ms var(--motion-ease); }
.learning-steps > li { position: relative; }
.learning-steps li > span { display: inline-flex; color: var(--accent); transition: transform 500ms var(--motion-ease); }
.module[open] > summary .icon { color: var(--accent); }
.module > summary .icon { transition: transform 300ms var(--motion-ease), color 300ms; }
.process-film { display: grid; gap: 20px; margin: 0 0 28px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.process-film-copy h4 { margin-top: 12px; font-size: clamp(25px, 3vw, 36px); line-height: 1.15; font-weight: 700; letter-spacing: -.035em; }
.process-film-copy p { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.practice-flow { min-width: 0; }
.flow-canvas { position: relative; height: 166px; pointer-events: none; isolation: isolate; }
.flow-canvas * { pointer-events: none; }
.flow-floor { position: absolute; z-index: -1; left: 3%; right: 3%; top: 28%; bottom: -3%; border-radius: 50%; background: radial-gradient(ellipse, #fae9f080, transparent 72%); transform: rotate(-4deg); }
.flow-rail { position: absolute; left: 6%; right: 6%; top: 46%; height: 4px; background: #f0d5e0; border-radius: 5px; }
.flow-packet { position: absolute; top: -3px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: flow-transmit 7.2s linear infinite; }
.flow-object { position: absolute; top: 30px; width: 20%; height: 98px; padding: 10px; border-radius: 12px; border: 1px solid #eae6eb; background: #fff; box-shadow: 0 10px 0 -4px #eee4e9, 0 16px 22px #2a2d5009; opacity: .65; transition: transform 450ms var(--motion-ease), opacity 450ms, border-color 450ms; }
.flow-task { left: 0; transform: rotate(-7deg); }
.flow-draft { left: 26.6%; transform: rotate(4deg); }
.flow-review { right: 26.6%; transform: rotate(-4deg); background: #f4faf6; }
.flow-result { right: 0; transform: rotate(6deg); background: #fff7fa; }
.flow-object-icon { display: flex; color: var(--accent); }
.flow-object-icon .icon { width: 22px; height: 22px; }
.flow-task > i, .flow-draft-lines > i { display: block; height: 4px; border-radius: 4px; background: #e8dfe5; margin-top: 8px; }
.flow-task > i:nth-child(3), .flow-draft-lines > i:nth-child(2) { width: 70%; }
.flow-task > i:nth-child(4), .flow-draft-lines > i:nth-child(3) { width: 45%; }
.flow-draft-lines > i { background: #eac0d2; }
.flow-review-mark { display: flex; width: 30px; height: 30px; margin: 12px auto 0; align-items: center; justify-content: center; background: #dfefe6; border-radius: 50%; color: #356650; transform: scale(.8); transition: transform 450ms var(--motion-ease); }
.flow-review-mark .icon { width: 20px; height: 20px; }
.flow-result-bars { display: flex; align-items: end; gap: 5px; height: 38px; margin-top: 10px; }
.flow-result-bars i { flex: 1; height: 15px; border-radius: 4px 4px 2px 2px; background: #e8aec7; transform: scaleY(.4); transform-origin: bottom; transition: transform 600ms var(--motion-ease); }
.flow-result-bars i:nth-child(2) { height: 26px; background: var(--accent); }
.flow-result-bars i:nth-child(3) { height: 36px; background: #2a2d50; }
.flow-result-spark { position: absolute; right: -10px; top: -17px; color: var(--accent); opacity: 0; transform: scale(.5); transition: opacity 450ms, transform 500ms var(--motion-ease); }
.flow-result-spark .icon { width: 25px; height: 25px; }
.practice-flow[data-flow-stage="0"] .flow-task,
.practice-flow[data-flow-stage="1"] .flow-draft,
.practice-flow[data-flow-stage="2"] .flow-review,
.practice-flow[data-flow-stage="3"] .flow-result { opacity: 1; border-color: #d48daa; transform: rotate(0) translateY(-10px); }
.practice-flow[data-flow-stage="1"] .flow-task, .practice-flow[data-flow-stage="2"] .flow-task, .practice-flow[data-flow-stage="2"] .flow-draft,
.practice-flow[data-flow-stage="3"] .flow-object { opacity: 1; }
.practice-flow[data-flow-stage="2"] .flow-review-mark, .practice-flow[data-flow-stage="3"] .flow-review-mark { transform: scale(1); }
.practice-flow[data-flow-stage="3"] .flow-result-bars i { transform: scaleY(1); }
.practice-flow[data-flow-stage="3"] .flow-result-spark { opacity: 1; transform: scale(1); animation: flow-spark 2.4s ease-in-out infinite; }
.practice-flow[data-paused="true"] * { animation-play-state: paused; }
.flow-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; position: relative; z-index: 1; }
.flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; flex: 1; flex-basis: 100%; min-width: 0; }
.flow-steps button { min-height: 44px; padding: 6px; background: transparent; border: 1px solid transparent; border-radius: 7px; font-size: 11px; color: var(--muted); }
.flow-steps button[aria-pressed="true"] { color: var(--accent); background: var(--soft); border-color: #edc9d8; }
.flow-toggle { display: flex; gap: 6px; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; margin-left: auto; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-size: 12px; }
.flow-toggle:hover { border-color: var(--accent); background: var(--soft); }
.flow-toggle .icon { width: 15px; height: 15px; }
.flow-caption { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 10px; }
@keyframes flow-transmit { 0%, 5% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 95% { transform: translateX(var(--flow-travel, 200px)); opacity: 1; } 100% { transform: translateX(var(--flow-travel, 200px)); opacity: 0; } }
@keyframes flow-spark { 50% { transform: scale(1.12) rotate(8deg); } }
@keyframes bright-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-title-line { animation: bright-enter 800ms var(--motion-ease) both; }
  .hero-title-accent { animation-delay: 90ms; }
  .hero-intro { animation: bright-enter 800ms var(--motion-ease) 150ms both; }
  .hero-tags { animation: bright-enter 800ms var(--motion-ease) 210ms both; }
  .hero .button-row { animation: bright-enter 800ms var(--motion-ease) 270ms both; }
  .hero-visual { animation: bright-enter 900ms var(--motion-ease) 190ms both; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .feature-card.is-visible:hover, .course-card.is-visible:hover, .skill-card.is-visible:hover, .price-card.is-visible:hover, .lesson-card.is-visible:hover { transform: translateY(-6px); transition-delay: 0ms; }
  .feature-card:hover .feature-icon, .skill-card:hover .skill-card-top > .icon { transform: rotate(-8deg) scale(1.08); }
  .expert-card:hover .expert-photo img { transform: scale(1.035); }
  .learning-steps li:hover > span { transform: translateY(-3px); }
}
@media (min-width: 768px) {
  .process-film { grid-template-columns: .7fr 1.3fr; align-items: center; gap: 28px; padding: 32px; }
  .flow-canvas { height: 175px; }
  .flow-object { height: 106px; }
  .flow-controls { gap: 10px; }
  .flow-steps { flex-basis: 100%; }
}
@media (min-width: 1200px) {
  .process-film { grid-template-columns: 1fr 1.5fr; gap: 56px; padding: 36px 40px; }
  .flow-canvas { height: 182px; }
  .flow-object { padding: 16px; height: 114px; }
  .flow-steps { flex-basis: auto; }
  .flow-steps button { font-size: 12px; padding-inline: 8px; }
}
@media (max-width: 379px) {
  .process-film { padding: 20px 16px; }
  .flow-object { padding: 8px; }
  .flow-steps button { font-size: 10px; padding-inline: 3px; }
  .flow-review-mark { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-ready, .reveal-ready.is-visible { opacity: 1; transform: none; transition: none; }
  .section-heading h2::after, .skills-heading h3::after { transform: scaleX(1); transition: none; }
  .practice-flow *, .button, .button .icon, .expert-photo img, .feature-card .feature-icon, .skill-card-top > .icon, .learning-steps li > span, .module > summary .icon { animation: none !important; transition: none !important; }
  .flow-packet { display: none; }
}
@media print {
  .process-film { display: none; }
  .reveal-ready { opacity: 1; transform: none; }
  .section-heading h2::after, .skills-heading h3::after { transform: scaleX(1); }
}