/* Light-mode addition to the original RuyaTech homepage. */
.ruya-cycle { padding:90px 0; background:linear-gradient(140deg,#fff,#f5f0fc); color:#251936; }
.ruya-cycle-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; }
.ruya-cycle .cycle-eyebrow { color:#7950b5; font-size:11px; letter-spacing:.17em; font-weight:700; }
.ruya-cycle h2 { font-family:inherit; color:#251936; font-size:clamp(30px,3vw,44px); line-height:1.2; letter-spacing:-.035em; margin:18px 0; }
.ruya-cycle .cycle-intro { color:#766780; font-size:15px; line-height:1.85; }
.cycle-detail { margin-top:28px; padding:24px; border:1px solid #e6d9f3; border-radius:16px; background:#fff; box-shadow:0 12px 36px #6c48900a; }
.cycle-detail small { color:#8759b9; font-size:11px; letter-spacing:.1em; }
.ruya-cycle h3 { font-family:inherit; color:#352043; font-size:25px; margin:10px 0; }
.cycle-detail p { font-size:14px; color:#796b83; line-height:1.8; min-height:76px; margin:0; }
.cycle-pause { margin-top:20px; border:1px solid #d9c5eb; padding:8px 14px; border-radius:8px; color:#704399; background:#fff; font-size:12px; }
.cycle-wheel { --radius:180px; position:relative; width:460px; height:460px; margin:auto; max-width:100%; }
.cycle-ring { position:absolute; inset:50px; border:1px solid #cbb0e4; border-radius:50%; }
.cycle-ring:before { content:""; position:absolute; inset:24px; border:1px dashed #ddc9ed; border-radius:50%; }
.cycle-hub { position:absolute; inset:50%; width:130px; height:130px; margin:-65px; border-radius:50%; background:#fff; border:1px solid #ddc9ed; box-shadow:0 12px 50px #8960b52b; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; }
.cycle-hub img { width:48px; height:48px; }.cycle-hub span { font-size:9px; letter-spacing:.16em; color:#795890; }
.cycle-spinner { position:absolute; inset:0; animation:cycle-orbit 45s linear infinite; }
.cycle-position { position:absolute; top:50%; left:50%; transform:rotate(var(--angle)) translateX(var(--radius)); }
.cycle-unrotate { transform:rotate(calc(-1 * var(--angle))); }
.cycle-node { margin:-43px; width:86px; height:86px; border:1px solid #d9c3ee; background:#fff; color:#74538f; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; box-shadow:0 8px 26px #7c529a15; animation:cycle-counter 45s linear infinite; }
.cycle-node span { font-size:12px; font-weight:600; }.cycle-node i { font-style:normal; font-size:24px; line-height:1; }
.cycle-node.is-active { background:#8a60ce; border-color:#8a60ce; color:#fff; box-shadow:0 0 0 7px #9b7dff15,0 10px 35px #9864cd40; }
.cycle-node:focus-visible,.cycle-pause:focus-visible { outline:3px solid #9b7dff; outline-offset:5px; }
.ruya-cycle.is-paused .cycle-spinner,.ruya-cycle.is-paused .cycle-node,.cycle-wheel:hover .cycle-spinner,.cycle-wheel:hover .cycle-node,.cycle-wheel:focus-within .cycle-spinner,.cycle-wheel:focus-within .cycle-node { animation-play-state:paused; }
@keyframes cycle-orbit { to { transform:rotate(360deg); } } @keyframes cycle-counter { to { transform:rotate(-360deg); } }
@media(max-width:1199px) { .ruya-cycle-grid { gap:25px; }.cycle-wheel { width:390px;height:390px;--radius:150px; }.cycle-ring { inset:45px; } }
@media(max-width:991px) { .ruya-cycle-grid { grid-template-columns:1fr; }.cycle-wheel { margin-top:30px; } }
@media(max-width:480px) { .ruya-cycle { padding:60px 0; }.cycle-wheel { width:300px;height:330px;--radius:115px; }.cycle-ring { inset:50px 35px; }.cycle-node { width:70px;height:70px;margin:-35px; }.cycle-node span { font-size:10px; }.cycle-hub { width:100px;height:100px;margin:-50px; }.cycle-hub img { width:38px;height:38px; }.cycle-detail p { min-height:100px; } }
@media(prefers-reduced-motion:reduce) { .cycle-spinner,.cycle-node { animation:none; } }

/* The orbital workflow is the primary hero visual, on a light brand surface. */
.ruya-cycle.cycle-hero { padding:128px 0 0; position:relative; overflow:hidden; background:radial-gradient(ellipse at 82% 35%,#e8ddf7 0,transparent 48%),linear-gradient(120deg,#fff 15%,#faf7ff 65%,#f0e9f8); }
.cycle-hero .ruya-cycle-grid { grid-template-columns:1.05fr 1fr; gap:64px; padding-bottom:44px; }
.cycle-hero .cycle-eyebrow { display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.16em; color:#775095; }
.cycle-status-dot { width:6px; height:6px; border-radius:50%; display:inline-block; background:#9b7dff; box-shadow:0 0 0 4px #9b7dff14; flex-shrink:0; }
.cycle-hero h1 { color:#20142e; font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:clamp(40px,4.5vw,64px); line-height:1.13; font-weight:650; letter-spacing:-.05em; margin:26px 0; text-transform:none; }
.cycle-hero h1 em { color:#8b5bc5; font-style:normal; }
.cycle-hero .cycle-intro { max-width:475px; font-size:16px; line-height:1.95; color:#71637c; margin:0 0 30px; }
.cycle-hero-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.cycle-primary { display:inline-flex; align-items:center; justify-content:center; gap:22px; background:#8050bb; border:1px solid #8050bb; color:#fff!important; border-radius:10px; padding:16px 20px; font-size:12px; font-weight:600; box-shadow:0 12px 26px #8050bb20; }
.cycle-primary:hover { background:#673b9e; }
.cycle-secondary { font-size:12px; font-weight:600; color:#65417e!important; padding:12px 0; border-bottom:1px solid #d2bddf; }
.cycle-secondary span { margin-left:12px; }
.cycle-hero-values { display:flex; flex-direction:column; gap:5px; border-left:2px solid #d6bfe9; padding-left:16px; margin-top:35px; color:#8d7c9b; font-size:11px; letter-spacing:.03em; }
.cycle-hero-visual { min-width:0; }
.cycle-visual-label { display:flex; align-items:center; justify-content:center; gap:9px; font-size:9px; color:#8c72a3; letter-spacing:.14em; margin-bottom:14px; }
.cycle-hero .cycle-wheel { width:420px; height:420px; --radius:160px; }
.cycle-hero .cycle-ring { inset:50px; border-color:#c8aadf; box-shadow:0 0 0 25px #ffffff25,0 0 0 26px #ddc9eb40,0 0 0 50px #ffffff15; }
.cycle-hero .cycle-ring:before { inset:29px; border-color:#cdb5df; }
.cycle-hero .cycle-hub { width:150px; height:150px; margin:-75px; border-color:#e6d7f2; box-shadow:0 18px 50px #78529825,inset 0 0 0 8px #fcf9ff; background:radial-gradient(circle,#fff,#faf5ff); }
.cycle-hero .cycle-hub img { width:62px;height:62px; }
.cycle-hero .cycle-hub span { font-size:8px; letter-spacing:.14em; }
.cycle-hero .cycle-node { width:82px;height:82px;margin:-41px;border-color:#dfcfee; box-shadow:0 8px 24px #7c529a14; }
.cycle-hero .cycle-node.is-active { background:linear-gradient(135deg,#aa83e0,#7847b1);color:#fff;border-color:#ad87df;box-shadow:0 0 0 7px #9b7dff0a,0 15px 30px #7847b130; }
.cycle-hero .cycle-detail { margin:10px auto 0; max-width:440px; padding:18px 22px; border-color:#e4d6ed; background:#ffffffb0; box-shadow:0 10px 25px #875da108; }
.cycle-detail-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.cycle-hero .cycle-detail small { font-size:8px;letter-spacing:.15em; }
.cycle-hero .cycle-detail h3 { margin:4px 0 8px; font-size:19px;font-weight:600; }
.cycle-hero .cycle-detail p { font-size:11px;line-height:1.8; min-height:59px; }
.cycle-hero .cycle-pause { margin:0; border-color:#e0ceef; font-size:9px;padding:6px 10px; }
.cycle-hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:23px;padding-bottom:23px;border-top:1px solid #ddcbea80; }
.cycle-hero-bottom>span { font-size:9px;letter-spacing:.13em;color:#907b9d; }
.cycle-hero-bottom>div { display:flex;gap:20px;align-items:center;font-size:11px;color:#745089; }
.cycle-hero-bottom b { font-weight:400;color:#bca3ce; }
.cycle-hero a:focus-visible { outline:3px solid #9b7dff;outline-offset:4px; }
@media(max-width:1199px) { .cycle-hero .ruya-cycle-grid { gap:25px; }.cycle-hero .cycle-wheel { width:370px;height:370px;--radius:140px; }.cycle-hero .cycle-ring { inset:45px; } }
@media(max-width:991px) { .ruya-cycle.cycle-hero { padding-top:112px; }.cycle-hero .ruya-cycle-grid { grid-template-columns:1fr;gap:42px; }.cycle-hero-copy { max-width:650px; }.cycle-hero .cycle-wheel { margin-top:0; }.cycle-hero .cycle-intro { max-width:580px; }.cycle-hero-bottom { flex-direction:column;align-items:flex-start; } }
@media(max-width:480px) { .cycle-hero .cycle-wheel { width:300px;height:330px;--radius:115px; }.cycle-hero .cycle-ring { inset:50px 35px; }.cycle-hero .cycle-node { width:70px;height:70px;margin:-35px; }.cycle-hero .cycle-hub { width:110px;height:110px;margin:-55px; }.cycle-hero .cycle-hub img { width:42px;height:42px; }.cycle-hero .cycle-hub span { font-size:6px; }.cycle-hero .cycle-detail p { min-height:80px; }.cycle-hero-bottom>div { gap:12px;font-size:10px; }.cycle-hero h1 { font-size:42px; }.cycle-hero-actions { gap:16px; } }

/* Original photography and the feedback circle share the hero stage. */
.cycle-hero-scene { position:relative; height:505px; }
.cycle-original-photo { position:absolute; right:-12px; top:0; width:88%; height:370px; object-fit:contain; object-position:top right; }
.cycle-hero .cycle-hero-scene .cycle-wheel { position:absolute; left:-20px; bottom:0; width:300px; height:300px; --radius:112px; margin:0; background:radial-gradient(circle,#faf6ffed 55%,transparent 71%); border-radius:50%; }
.cycle-hero .cycle-hero-scene .cycle-ring { inset:38px; box-shadow:0 0 0 17px #ffffff60,0 0 0 18px #ddc9eb50; }
.cycle-hero .cycle-hero-scene .cycle-node { width:65px; height:65px; margin:-32.5px; }
.cycle-hero .cycle-hero-scene .cycle-node span { font-size:10px; }.cycle-hero .cycle-hero-scene .cycle-node i { font-size:20px; }
.cycle-hero .cycle-hero-scene .cycle-hub { width:108px;height:108px;margin:-54px; }.cycle-hero .cycle-hero-scene .cycle-hub img { width:42px;height:42px; }.cycle-hero .cycle-hero-scene .cycle-hub span { font-size:6px; }
.voc-five-steps { padding:85px 0 95px; background:#fff; color:#33213e; }
.voc-five-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:35px; }
.voc-five-heading .cycle-eyebrow { font-size:10px; letter-spacing:.13em; color:#8a659f; }
.voc-five-heading h2 { color:#33213e; font-family:inherit; font-size:clamp(28px,3vw,38px); letter-spacing:-.035em; margin:12px 0 0; }
.voc-steps-pause { flex-shrink:0; background:#faf7fe; border:1px solid #dfcdea; color:#805597; border-radius:8px; padding:9px 13px; font-size:11px; }
.voc-five-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.voc-stage { display:flex;flex-direction:column; min-width:0; background:linear-gradient(160deg,#fff,#faf7fd); border:1px solid #e9dff0; border-radius:16px; padding:23px 18px; transition:transform .25s,box-shadow .25s; }
.voc-stage:hover { transform:translateY(-5px);box-shadow:0 18px 35px #6f439913; }
.voc-stage-number { font-size:8px;letter-spacing:.1em;color:#947ba5; }
.voc-stage h3 { font-family:inherit;font-size:23px;color:#4e2d68;margin:0 0 12px; }
.voc-stage p { font-size:12px;line-height:1.85;color:#7b6b85;margin-bottom:22px; }
.voc-stage-outcome { margin-top:auto;padding-top:14px;border-top:1px solid #e8ddee;color:#875ca0;font-size:10px;line-height:1.6; }
.voc-stage-art { height:120px;display:flex;align-items:center;justify-content:center;position:relative;margin:12px 0; }
.mini-survey { width:57px;height:74px;border:1px solid #cfb4e5;border-radius:8px;background:#fff;padding:14px 10px;box-shadow:0 7px 20px #865da515; }
.mini-survey b,.mini-survey i { display:block;height:4px;border-radius:4px;background:#a982d0;margin-bottom:9px;transform-origin:left;animation:cycle-write 3s ease-in-out infinite; }
.mini-survey b { width:65%;background:#70449a; }.mini-survey i:nth-child(2){animation-delay:.2s}.mini-survey i:nth-child(3){animation-delay:.4s}.mini-survey i:nth-child(4){animation-delay:.6s}
.mini-pencil { position:absolute;font-size:36px;color:#8b5abd;right:18%;top:27px;animation:cycle-pencil 3s ease-in-out infinite; }
.signal-point { position:absolute;top:13px;color:#9465b8;animation:cycle-collect 3s ease-in-out infinite; }.signal-point:nth-child(1){left:20%;animation-delay:.3s}.signal-point:nth-child(2){left:46%;animation-delay:1s}.signal-point:nth-child(3){right:20%;animation-delay:1.7s}
.signal-inbox { position:absolute;bottom:15px;width:55px;height:34px;border:1px solid #b88fd6;border-top:0;border-radius:0 0 10px 10px;text-align:center;color:#a77bc6;font-size:23px;background:#eee2f966; }
.mini-bars { display:flex;align-items:flex-end;gap:6px;height:65px;border-bottom:1px solid #dcc5ed;padding:0 7px; }.mini-bars i { width:12px;height:35px;background:linear-gradient(#c5a4e2,#8958b9);border-radius:4px 4px 0 0;transform-origin:bottom;animation:cycle-bars 2.4s ease-in-out infinite; }.mini-bars i:nth-child(2){height:50px;animation-delay:.2s}.mini-bars i:nth-child(3){height:28px;animation-delay:.4s}.mini-bars i:nth-child(4){height:58px;animation-delay:.6s}.mini-bars i:nth-child(5){height:42px;animation-delay:.8s}
.action-ticket { display:flex;gap:9px;align-items:center;background:#fff;border:1px solid #d9bfea;border-radius:10px;padding:14px 9px;font-size:10px;color:#8f62b0;z-index:1; }.action-ticket b { animation:cycle-arrow 2s ease-in-out infinite;font-size:20px; }
.action-pulse { position:absolute;width:70px;height:70px;border:1px solid #be9bdb;border-radius:50%;animation:cycle-pulse 2.6s ease-out infinite; }
.art-close svg { width:80px;height:80px;fill:none;stroke:#ba97d7;stroke-width:2; }.art-close path { stroke:#8753b0;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;animation:cycle-check 3s ease-in-out infinite; }
.voc-five-steps.is-paused .voc-stage-art * { animation-play-state:paused!important; }
.voc-steps-pause:focus-visible { outline:3px solid #ad82d7;outline-offset:4px; }
@keyframes cycle-write { 0%,15%{transform:scaleX(.2);opacity:.4}50%,100%{transform:scaleX(1);opacity:1} }
@keyframes cycle-pencil { 0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(5px,15px) rotate(4deg)} }
@keyframes cycle-collect { 0%{transform:translateY(0);opacity:0}25%{opacity:1}90%,100%{transform:translateY(55px);opacity:0} }
@keyframes cycle-bars { 0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)} }
@keyframes cycle-arrow { 0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)} }
@keyframes cycle-pulse { from{transform:scale(.65);opacity:.6}to{transform:scale(1.4);opacity:0} }
@keyframes cycle-check { 0%,15%{stroke-dashoffset:60}55%,100%{stroke-dashoffset:0} }
@media(max-width:1199px) { .voc-five-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.cycle-original-photo { width:100%; }.cycle-hero-scene { height:475px; }.cycle-hero .cycle-hero-scene .cycle-wheel { left:-10px; } }
@media(max-width:991px) { .cycle-hero-visual { width:100%;max-width:560px;margin:auto; }.cycle-original-photo { width:85%; }.cycle-hero-scene { height:505px; } }
@media(max-width:767px) { .voc-five-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.voc-five-heading { align-items:flex-start;flex-direction:column; }.voc-five-steps { padding:60px 0; } }
@media(max-width:480px) { .voc-five-grid { grid-template-columns:1fr; }.voc-stage { padding:24px; }.voc-stage-art { margin:0; }.voc-stage p { font-size:14px; }.cycle-hero-scene { height:450px; }.cycle-original-photo { width:100%;height:290px;right:0; }.cycle-hero .cycle-hero-scene .cycle-wheel { left:0;width:270px;height:270px;--radius:101px; }.cycle-hero .cycle-hero-scene .cycle-ring { inset:34px; }.cycle-hero .cycle-hero-scene .cycle-node { width:60px;height:60px;margin:-30px; } }
@media(prefers-reduced-motion:reduce) { .voc-stage-art * { animation:none!important; }.voc-stage { transition:none; }.art-close path { stroke-dashoffset:0; }.signal-point { opacity:1; } }

/* Each indicator animates; values remain illustrative and stable. */
.cycle-photo-frame { position:absolute;right:-12px;top:0;width:min(94%,497.89px);aspect-ratio:1100/950; }
body .cycle-photo-frame .cycle-original-photo { position:static;width:100%;height:100%;object-fit:contain;display:block; }
.animated-impressions { position:absolute;left:71.2%;top:68.6%;width:28.2%;height:17%;overflow:visible;border-radius:10px; }
.original-chart-bars i { transform-origin:bottom;animation:hero-bar-rise 3.4s ease-in-out infinite; }
.original-chart-bars i:nth-child(2) { animation-delay:.2s; }.original-chart-bars i:nth-child(3) { animation-delay:.4s; }.original-chart-bars i:nth-child(4) { animation-delay:.6s; }
.original-chart-bars svg path { stroke-dasharray:210;animation:hero-trend-draw 4s ease-in-out infinite; }
.original-donut-value { animation:hero-ring-fill 4.5s ease-in-out infinite; }
.original-check { animation:hero-check-pulse 4.5s ease-in-out infinite; }
.original-mini-track i { animation:hero-track-glow 3s ease-in-out infinite; }.original-mini-track i+i { animation-delay:.4s; }
.impressions-line { stroke-dasharray:100;animation:hero-impressions-draw 4s ease-in-out infinite; }.impressions-area { animation:hero-track-glow 4s ease-in-out infinite; }.impressions-dot { transform-origin:260px 56px;animation:hero-check-pulse 4s ease-in-out infinite; }
.ruya-cycle.is-paused .hero-original-chart *,.ruya-cycle.is-paused .animated-impressions * { animation-play-state:paused!important; }
@keyframes hero-bar-rise { 0%,100%{transform:scaleY(.65)}50%{transform:scaleY(1)} }
@keyframes hero-trend-draw { 0%{stroke-dashoffset:210}55%,100%{stroke-dashoffset:0} }
@keyframes hero-impressions-draw { 0%{stroke-dashoffset:100}55%,100%{stroke-dashoffset:0} }
@keyframes hero-ring-fill { 0%{stroke-dasharray:0 227}60%,100%{stroke-dasharray:172 227} }
@keyframes hero-check-pulse { 0%,100%{transform:scale(.9)}65%{transform:scale(1.08)} }
@keyframes hero-track-glow { 0%,100%{opacity:.45}60%{opacity:1} }
@media(max-width:600px) { .cycle-photo-frame { right:0;width:min(100%,370.52px); } }
@media(prefers-reduced-motion:reduce) { .hero-original-chart *,.animated-impressions * { animation:none!important; } }

/* Restore the reference photo's floating chart cards. */
body .cycle-hero-scene { height:625px; }
body .cycle-original-photo { height:430px; width:94%; }
body .cycle-hero .cycle-hero-scene .cycle-wheel { width:410px;height:410px;--radius:157px;left:-95px;bottom:0; }
body .cycle-hero .cycle-hero-scene .cycle-ring { inset:48px; }
body .cycle-hero .cycle-hero-scene .cycle-node { width:80px;height:80px;margin:-40px; }
body .cycle-hero .cycle-hero-scene .cycle-hub { width:140px;height:140px;margin:-70px; }
body .cycle-hero .cycle-hero-scene .cycle-hub img { width:54px;height:54px; }
.hero-original-chart { position:absolute;z-index:2;background:#fff;border-radius:22px;padding:18px;box-shadow:0 18px 45px #50386520; }
.hero-original-chart h4 { font:600 14px/1.3 "Segoe UI",Arial,sans-serif;color:#777;margin:0 0 14px;letter-spacing:-.03em; }
.original-daily { width:156px;top:56px;left:4px; }
.original-daily:after { content:"";position:absolute;right:-10px;top:-10px;width:30px;height:30px;border-radius:50%;background:#b998de55; }
.original-chart-bars { position:relative;height:90px;display:flex;align-items:flex-end;justify-content:space-around;padding:0 10px;gap:9px; }
.original-chart-bars i { width:20px;height:50%;background:linear-gradient(#994eff,#a778ed);border-radius:5px 5px 0 0;box-shadow:0 0 18px #b58aff30; }
.original-chart-bars i:nth-child(2) { height:85%; }.original-chart-bars i:nth-child(3) { height:60%;background:#cfb2fa; }.original-chart-bars i:nth-child(4) { height:100%; }
.original-chart-bars svg { position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#ffc000;stroke-width:3;filter:drop-shadow(0 1px 4px #ffbe0033); }
.original-monthly { width:220px;right:-14px;top:439px;padding:16px 18px; }
.original-monthly-content { display:flex;align-items:center;gap:10px; }
.original-check { display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffe9eb;color:#ff6876;font-size:23px;flex-shrink:0; }
.original-mini-track { display:flex;gap:5px; }.original-mini-track i { width:25px;height:9px;border-radius:9px;background:#d0d3e1; }.original-mini-track i+i { width:20px;background:#e7e9f1; }
.original-donut { position:relative;width:76px;height:76px;flex-shrink:0; }.original-donut svg { width:100%;height:100%;fill:none;stroke:#eeeef4;stroke-width:9; }.original-donut-value { stroke:#f7c73c;stroke-dasharray:172 227;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center; }.original-donut strong { position:absolute;inset:0;display:grid;place-items:center;font-size:18px;color:#566173; }
@media(min-width:992px) and (max-width:1199px) { body .cycle-hero .cycle-hero-scene .cycle-wheel { width:370px;height:370px;--radius:139px;left:-65px; }.original-monthly { width:190px;right:-5px;padding:14px; }.original-mini-track { display:none; }body .cycle-hero .cycle-hero-scene .cycle-ring { inset:46px; } }
@media(max-width:991px) { body .cycle-hero .cycle-hero-scene .cycle-wheel { left:-25px; } }
@media(max-width:600px) { body .cycle-hero-scene { height:785px; }body .cycle-original-photo { width:100%;height:320px; }body .cycle-hero .cycle-hero-scene .cycle-wheel { width:310px;height:310px;--radius:118px;left:-10px;top:auto;bottom:0; }body .cycle-hero .cycle-hero-scene .cycle-ring { inset:37px; }body .cycle-hero .cycle-hero-scene .cycle-node { width:66px;height:66px;margin:-33px; }body .cycle-hero .cycle-hero-scene .cycle-hub { width:116px;height:116px;margin:-58px; }.original-daily { top:168px;left:0;width:135px;padding:14px; }.original-chart-bars { height:75px; }.original-monthly { top:320px;right:0;width:218px; }.hero-original-chart h4 { font-size:12px; } }

/* VOC indicators frame the photo without covering the interactive orbit. */
.cycle-hero .cycle-hero-scene .cycle-wheel { width:350px;height:350px;--radius:133px;left:-50px;bottom:25px; }
.cycle-hero .cycle-hero-scene .cycle-ring { inset:42px; }
.cycle-hero .cycle-hero-scene .cycle-node { width:72px;height:72px;margin:-36px; }
.cycle-hero .cycle-hero-scene .cycle-node span { font-size:11px; }
.cycle-hero .cycle-hero-scene .cycle-hub { width:122px;height:122px;margin:-61px; }
.hero-voc-indicator { position:absolute;z-index:2;width:166px;background:#ffffffed;border:1px solid #e4d5ef;border-radius:14px;padding:13px 15px;box-shadow:0 14px 36px #7654921a;backdrop-filter:blur(10px); }
.voc-nps { top:12px;left:-5px; }.voc-csat { top:250px;right:-10px; }.voc-followup { bottom:8px;right:-4px;width:180px; }
.voc-indicator-label { display:flex;justify-content:space-between;align-items:center;gap:7px;font-size:9px;font-weight:600;color:#796486;line-height:1.5; }
.voc-indicator-label small { font-size:7px;font-weight:400;color:#947d9f;background:#f4eef9;border-radius:4px;padding:2px 4px; }
.voc-indicator-value { font-size:29px;font-weight:600;letter-spacing:-.04em;line-height:1.5;color:#7141a0; }.voc-indicator-value>span { font-size:10px;letter-spacing:0;color:#a084b0;font-weight:400;margin-left:5px; }
.voc-nps svg { display:block;width:100%;height:25px;fill:none;stroke:#b18cd6;stroke-width:2; }
.voc-indicator-note { display:block;font-size:8px;color:#a08bac;margin-top:8px;line-height:1.5; }
.voc-indicator-track { height:5px;border-radius:5px;background:#f0e6f8;overflow:hidden;margin:6px 0; }.voc-indicator-track i { display:block;width:89%;height:100%;background:linear-gradient(90deg,#8b58ba,#c9a7e8);border-radius:5px; }
.voc-followup-row { display:flex;align-items:center;gap:10px;margin-top:12px; }.voc-followup-row>b { background:#ede3f8;color:#9464b8;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:15px;flex-shrink:0; }.voc-followup-row>span { font-size:9px;line-height:1.8;color:#a38eae; }.voc-followup-row strong { color:#77528e;font-weight:500;font-size:10px; }
@media(min-width:992px) and (max-width:1199px) { .cycle-hero .cycle-hero-scene .cycle-wheel { width:310px;height:310px;--radius:117px;left:-34px;bottom:35px; }.cycle-hero .cycle-hero-scene .cycle-ring { inset:38px; }.hero-voc-indicator { width:145px;padding:11px; }.voc-nps { left:-12px; }.voc-csat { right:-4px;top:230px; }.voc-followup { width:155px;bottom:0; } }
@media(max-width:991px) { .cycle-hero .cycle-hero-scene .cycle-wheel { left:-18px; } }
@media(max-width:600px) { .cycle-hero-scene { height:655px; }.cycle-hero .cycle-hero-scene .cycle-wheel { width:300px;height:300px;--radius:113px;left:-8px;top:190px;bottom:auto; }.cycle-hero .cycle-hero-scene .cycle-ring { inset:37px; }.cycle-hero .cycle-hero-scene .cycle-node { width:65px;height:65px;margin:-32.5px; }.cycle-hero .cycle-hero-scene .cycle-hub { width:110px;height:110px;margin:-55px; }.hero-voc-indicator { width:calc(50% - 6px);padding:11px; }.voc-nps { top:12px;left:-3px;width:130px; }.voc-csat { top:auto;bottom:12px;left:0;right:auto; }.voc-followup { bottom:12px;right:0;width:calc(50% - 6px);min-height:127px; }.voc-indicator-label { flex-wrap:wrap; }.voc-followup-row { gap:6px; } }

/* Reference composition: photo above right, feedback orbit below left. */
.cycle-hero h1 { min-height:4.52em; font-size:clamp(40px,4vw,70px); }
.cycle-hero h1 em { display:block; }
.cycle-headline-controls { display:flex;align-items:center;gap:6px;margin:-8px 0 24px; }
.cycle-headline-controls button[data-headline] { width:26px;height:28px;padding:0;border:0;background:transparent;position:relative; }
.cycle-headline-controls button[data-headline]:after { content:"";display:block;width:7px;height:7px;margin:auto;border-radius:50%;background:#cdbbde;transition:background .2s,transform .2s; }
.cycle-headline-controls button[aria-pressed="true"]:after { background:#8050bb;transform:scale(1.35); }
.cycle-headline-pause { border:0;background:transparent;color:#705084;font-size:11px;padding:5px 8px; }
.cycle-headline-controls button:focus-visible { outline:2px solid #8050bb;outline-offset:2px;border-radius:4px; }
@media(min-width:1200px) {
  .cycle-hero .ruya-cycle-grid { max-width:1480px;grid-template-columns:40% 60%;gap:0;align-items:start; }
  .cycle-hero-copy { padding-top:95px;padding-right:24px; }
  .cycle-hero .cycle-intro { max-width:550px; }
  body .cycle-hero-scene { height:760px; }
  .cycle-photo-frame { width:76%;right:0;top:12px; }
  body .cycle-hero .cycle-hero-scene .cycle-wheel { width:480px;height:480px;--radius:190px;left:-12px;bottom:0; }
  body .cycle-hero .cycle-hero-scene .cycle-ring { inset:50px; }
  body .cycle-hero .cycle-hero-scene .cycle-node { width:96px;height:96px;margin:-48px; }
  body .cycle-hero .cycle-hero-scene .cycle-hub { width:170px;height:170px;margin:-85px; }
  body .cycle-hero .cycle-hero-scene .cycle-hub img { width:62px;height:62px; }
  .original-daily { left:10%;top:0;width:184px;padding:22px; }
  .original-chart-bars { height:120px; }
  .original-monthly { top:auto;bottom:70px;right:0;width:276px;padding:22px; }
  .original-donut { width:90px;height:90px; }
  .original-monthly-content { justify-content:space-between; }
  .cycle-hero .cycle-detail { margin-left:auto;margin-right:0; }
}
@media(min-width:1200px) and (max-width:1439px) {
  body .cycle-hero-scene { height:670px; }
  body .cycle-hero .cycle-hero-scene .cycle-wheel { width:410px;height:410px;--radius:159px;left:-6px; }
  body .cycle-hero .cycle-hero-scene .cycle-node { width:80px;height:80px;margin:-40px; }
  .original-daily { width:156px;left:5%;padding:18px; }
  .original-chart-bars { height:90px; }
  .original-monthly { width:220px;bottom:95px;padding:16px; }
  .original-donut { width:76px;height:76px; }
}
@media(max-width:991px) { .cycle-hero h1 { min-height:4.52em;max-width:650px; } }
@media(max-width:480px) { .cycle-hero h1 { font-size:36px;min-height:5.65em; } }
/* Reserve room for the longest headline, including inherited emphasis leading. */
@media(min-width:481px) { .cycle-hero h1 { min-height:4.8em; } }

/* Keep the complete feedback orbit inside the first desktop viewport. */
@media (min-width:992px) {
  .ruya-cycle.cycle-hero { padding-top:96px; }
  .cycle-hero .ruya-cycle-grid { padding-bottom:20px;align-items:start; }
  .cycle-hero-copy { padding-top:28px; }
  body .cycle-hero-scene { height: min(680px, calc(100svh - 150px)); }
  body .cycle-hero .cycle-hero-scene .cycle-wheel {
    --wheel-size:clamp(320px,52svh,480px);
    width:var(--wheel-size);height:var(--wheel-size);
    --radius:calc(var(--wheel-size) * .396);
    bottom:0;
  }
  body .cycle-hero .cycle-hero-scene .cycle-ring { inset:10.4%; }
  body .cycle-hero .cycle-hero-scene .cycle-node { width:clamp(68px,10.4svh,96px);height:clamp(68px,10.4svh,96px);margin:calc(clamp(68px,10.4svh,96px) / -2); }
  .cycle-photo-frame { width:min(76%,calc((100svh - 240px) * 1.158)); }
  .original-monthly { top:auto;bottom:24px; }
}
@media (min-width:992px) and (max-height:780px) {
  .cycle-hero h1 { font-size:clamp(38px,3.3vw,54px);margin:18px 0; }
  .cycle-headline-controls { margin-bottom:14px; }
  .cycle-hero .cycle-intro { line-height:1.75;margin-bottom:20px; }
  .original-daily { width:156px;padding:18px;top:0; }
  .original-chart-bars { height:90px; }
}

/* Leave a clear gap beneath the photo's Impressions card. */
@media (min-width:992px) {
  .original-monthly { bottom:0;width:220px;padding:16px 18px; }
  .original-monthly .original-donut { width:76px;height:76px; }
}

/* RuyaTech navigation actions: quiet workspace access, clear primary signup. */
.intel-navbar .intel-workspace-btn,
.intel-navbar .intel-signin-btn {
  min-height:44px!important;padding:11px 22px!important;border-radius:10px;
  font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1.2;
  border:1px solid transparent;box-shadow:none;gap:9px;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.intel-navbar .intel-workspace-btn {
  background:transparent!important;border-color:#a68bdd!important;color:#e2d5ff!important;
}
.intel-navbar .intel-signin-btn {
  background:linear-gradient(135deg,#8050bb,#6841a5)!important;border-color:#a580d5!important;color:#fff!important;
  box-shadow:inset 0 1px 0 #ffffff18,0 4px 12px #06041a30;
}
.intel-navbar .intel-workspace-btn::before,
.intel-navbar .intel-signin-btn::before { display:none; }
.intel-navbar .intel-workspace-btn .intel-btn-icon {
  width:18px;height:18px;flex:0 0 18px;background:transparent;color:#c8b7ff;border-radius:0;font-size:14px;
}
.intel-navbar .intel-workspace-btn:hover {
  background:#c8b7ff14!important;border-color:#c8b7ff!important;color:#fff!important;transform:none;box-shadow:none;
}
.intel-navbar .intel-workspace-btn:hover .intel-btn-icon { background:transparent;transform:none; }
.intel-navbar .intel-signin-btn:hover {
  background:linear-gradient(135deg,#9162ce,#794fba)!important;border-color:#c8b7ff!important;color:#fff!important;transform:none;box-shadow:0 4px 14px #9b7dff24;
}
.intel-navbar .intel-workspace-btn:focus-visible,
.intel-navbar .intel-signin-btn:focus-visible { outline:2px solid #c8b7ff;outline-offset:4px; }
@media(min-width:992px) { .original-monthly { right:60px; } }

.intel-navbar .intel-workspace-btn .intel-btn-icon,
.intel-navbar .intel-workspace-btn > i,
.intel-navbar .intel-signin-btn > i { display:none; }