.fluency-page .dmo-hero h1 { font-size: clamp(3.65rem, 5.7vw, 6.4rem); }
.fluency-hero-visual { display: flex; flex-direction: column; justify-content: space-between; }
.fluency-visual__flow { display: flex; align-items: stretch; justify-content: center; gap: 0.45rem; margin-block: 2.8rem 2rem; }
.fluency-visual__stage { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 1.25rem 0.45rem; border: 1px solid #fff; border-radius: 1.1rem; color: #29495a; background: rgba(255,255,255,.55); box-shadow: inset 0 1px #fff; font-size: .84rem; font-weight: 600; text-align: center; }
.fluency-visual__stage small { margin-top: .2rem; color: #688290; font-size: .66rem; font-weight: 400; }
.fluency-visual__symbol { display: grid; place-items: center; width: 3.7rem; height: 3.7rem; margin-bottom: .85rem; border: 1px solid #fff; border-radius: 50%; color: #245961; background: radial-gradient(circle, #fff, #dff0f7); box-shadow: 0 .4rem 1.3rem rgba(67,114,137,.11); font-size: 1.4rem; }
.fluency-visual__symbol--sound { font-size: 2rem; }
.fluency-visual__arrow { align-self: center; color: #648996; font-size: 1.1rem; }
.fluency-visual__result { display: grid; gap: .55rem; padding: 1.25rem; border: 1px solid #fff; border-radius: 1rem; background: rgba(250,254,255,.65); }
.fluency-visual__result > span:first-child { margin-bottom: .25rem; color: #6c8794; font-size: .61rem; font-weight: 600; letter-spacing: .18em; }
.fluency-visual__result-line { display: block; width: 93%; height: .34rem; border-radius: 1rem; background: #c5dce8; }
.fluency-visual__result-line--short { width: 62%; }
.fluency-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fluency-page .fluency-feature-grid .dmo-feature { min-height: 16rem; }
.fluency-workflow { background: #fff; }
.fluency-workflow__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fluency-workflow__card { position: relative; min-height: 15rem; padding: clamp(1.5rem, 2.5vw, 2.5rem); border: 1px solid #fff; border-radius: 1.5rem; background: linear-gradient(145deg, #f4fbfd, #eaf5fa); box-shadow: 0 .8rem 2rem rgba(67,106,128,.07), inset 0 1px #fff; }
.fluency-workflow__card > span { color: #6f8d99; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.fluency-workflow__card h3 { margin: 1.6rem 0 .5rem; color: #1b3447; font-size: 1.3rem; font-weight: 600; }
.fluency-workflow__card p { margin: 0; font-size: .9rem; }
.fluency-workflow__card:not(:last-child)::after { position: absolute; z-index: 1; top: 50%; right: -.8rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid #dcebf2; border-radius: 50%; color: #426879; background: #fff; content: '→'; transform: translateY(-50%); }
.fluency-mobile-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fluency-mobile-app { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 20rem; padding: clamp(1.6rem, 3vw, 3rem); border: 1px solid #fff; border-radius: 1.6rem; background: linear-gradient(135deg, rgba(255,255,255,.83), rgba(229,243,249,.78)); box-shadow: 0 1rem 2.5rem rgba(65,109,132,.08), inset 0 1px #fff; }
.fluency-mobile-app__index { color: #64808e; font-size: .7rem; font-weight: 600; letter-spacing: .17em; }
.fluency-mobile-app__symbol { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; margin: 1.7rem 0 1.2rem; border: 1px solid #fff; border-radius: 1.2rem; color: #286370; background: radial-gradient(circle at 35% 25%, #fff, #d8edf5); box-shadow: 0 .6rem 1.6rem rgba(59,108,130,.11); font-size: 1.7rem; }
.fluency-mobile-app__symbol svg { width: 2.7rem; height: 2.7rem; }
.fluency-mobile-app__symbol--text { font-size: 1.35rem; font-weight: 600; }
.fluency-mobile-app h3 { margin: 0; color: #1b3447; font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 600; letter-spacing: -.045em; overflow-wrap: anywhere; }
.fluency-mobile-app p { max-width: 30rem; margin: .75rem 0 1.5rem; font-size: .92rem; }
.fluency-mobile-app__platform { margin-top: auto; padding: .42rem .8rem; border: 1px solid rgba(101,148,167,.28); border-radius: 999px; color: #547282; background: rgba(255,255,255,.68); font-size: .7rem; }
.fluency-mobile-app__phone-stage { position: relative; display: grid; place-items: center; align-self: stretch; min-height: 18.5rem; margin: .25rem 0 1.35rem; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 1.35rem; background: radial-gradient(circle at 50% 55%, #f8fefe, #e1f0f7 75%); box-shadow: inset 0 1px #fff; }
.fluency-mobile-app__phone-stage .dmo-mobile-orbit--one { width: 18rem; height: 18rem; }
.fluency-mobile-app__phone-stage .dmo-mobile-orbit--two { width: 25rem; height: 25rem; }
.fluency-mobile-app__phone-stage .dmo-phone { width: 9.4rem; height: 15.7rem; padding: .4rem; border-width: .2rem; border-radius: 1.65rem; transform: rotate(-6deg); }
.fluency-mobile-app__phone-stage--text .dmo-phone { transform: rotate(6deg); }
.fluency-mobile-app__phone-stage .dmo-phone__notch { top: .42rem; width: 2.5rem; height: .42rem; }
.fluency-mobile-app__phone-stage .dmo-phone__screen { padding: 2.35rem .4rem 1.4rem; border-radius: 1.22rem; }
.fluency-mobile-app__phone-stage .dmo-phone__label { font-size: .58rem; text-align: center; }
.fluency-mobile-app__phone-stage .dmo-phone__mic { width: 4.3rem; height: 4.3rem; font-size: 1.5rem; }
.fluency-mobile-app__phone-stage .dmo-phone__mic svg { width: 2.4rem; height: 2.4rem; }
.fluency-mobile-app__phone-stage .dmo-phone__foot { font-size: .58rem; }
.fluency-page #mobile-title { scroll-margin-top: 8rem; }
@media (max-width: 68rem) { .fluency-page .dmo-hero h1 { font-size: clamp(3.6rem, 8vw, 6rem); } }
@media (max-width: 46rem) { .fluency-feature-grid, .fluency-workflow__grid, .fluency-mobile-apps { grid-template-columns: 1fr; } .fluency-page .fluency-feature-grid .dmo-feature, .fluency-workflow__card, .fluency-mobile-app { min-height: 0; } .fluency-workflow__card:not(:last-child)::after { top: auto; right: 50%; bottom: -.8rem; content: '↓'; transform: translateX(50%); } }
@media (max-width: 34rem) { .fluency-page .dmo-hero h1 { font-size: clamp(2.9rem, 10.5vw, 4rem); } .fluency-visual__flow { gap: .2rem; margin-block: 2rem 1.5rem; } .fluency-visual__stage { padding: .8rem .2rem; font-size: .68rem; } .fluency-visual__stage small { font-size: .55rem; } .fluency-visual__symbol { width: 2.6rem; height: 2.6rem; font-size: 1rem; } .fluency-visual__symbol--sound { font-size: 1.5rem; } .fluency-visual__arrow { font-size: .8rem; } }