/* ============================================================
   RESTAURANT industry page only (rs-*)
   Loaded by industries/restaurant-marketing-chiniot/index.php
   Sab sections site ke wohi .container mein hain, is liye
   left/right margin poori site jaisa hai.
   ============================================================ */
 
/* --- reveal (hidden only when JS is running) --- */
.rs-js .rs-rv { opacity: 0; }
.rs-js .rs-rv.is-in { opacity: 1; animation: RsUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) backwards; }
.rs-js .rs-st:not(.is-in) > * { opacity: 0; }
.rs-st.is-in > * { animation: RsUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 0.1s) backwards; }
.rs-js .rs-prose:not(.is-in) > p { opacity: 0; }
.rs-prose.is-in > p { animation: RsUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.rs-prose.is-in > p:nth-child(2) { animation-delay: 0.14s; }
 
@keyframes RsUp    { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes RsPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes RsDraw  { to { stroke-dashoffset: 0; } }
@keyframes RsPop   { 0% { transform: scale(0) rotate(-45deg); } 70% { transform: scale(1.15) rotate(6deg); } 100% { transform: none; } }
@keyframes RsDrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(26px, -22px); } }
@keyframes RsBob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes RsSpin  { to { transform: rotate(360deg); } }
@keyframes RsShine { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(420%) skewX(-18deg); } }
@keyframes RsDots  { to { background-position: 26px 26px; } }
@keyframes RsBg    { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes RsHalo  { 0% { transform: scale(0.96); opacity: 0.55; } 100% { transform: scale(1.25, 1.7); opacity: 0; } }
@keyframes RsGlow  { 0%, 100% { transform: translate(-50%, -50%) scale(0.94); } 50% { transform: translate(-50%, -50%) scale(1.07); } }
@keyframes RsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes RsTwinkle { 0%, 100% { transform: scale(0.3) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
@keyframes RsCaret { 50% { border-color: transparent; } }
 
.rs-sec { position: relative; overflow: hidden; }
.rs-sec::before, .rs-sec::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(52px); animation: RsDrift 13s ease-in-out infinite; }
.rs-sec::before { width: 320px; height: 320px; top: -110px; left: -90px; background: rgba(0, 168, 150, 0.14); }
.rs-sec::after  { width: 300px; height: 300px; bottom: -110px; right: -80px; background: rgba(94, 234, 212, 0.22); animation-delay: -6.5s; }
.rs-sec > .container { position: relative; z-index: 1; }
.rs-head { margin-bottom: 44px; }
 
/* HERO */
.rs-hero { position: relative; isolation: isolate; overflow: hidden; padding: 36px 0 90px; background: #FFFFFF; }
.rs-hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 82% 34%, rgba(0, 168, 150, 0.16), transparent 48%), radial-gradient(circle at 4% 94%, rgba(94, 234, 212, 0.22), transparent 42%); }
.rs-hero-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 122, 120, 0.18) 1.2px, transparent 1.5px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(circle at 72% 42%, #000 18%, transparent 68%); mask-image: radial-gradient(circle at 72% 42%, #000 18%, transparent 68%); animation: RsDots 16s linear infinite; }
.rs-crumb { justify-content: center; margin-bottom: 26px; }
.rs-h1 { font-size: clamp(2.05rem, 4vw, 3.2rem); max-width: 640px; line-height: 1.13; }
.rs-grad { background: linear-gradient(100deg, var(--teal-deep), var(--teal-main), #5eead4, var(--teal-main), var(--teal-deep)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: RsBg 7s linear infinite; }
.rs-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 24px; }
.rs-cta-in { position: relative; display: inline-block; isolation: isolate; }
.rs-cta-in::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: rgba(0, 168, 150, 0.35); animation: RsHalo 2.4s ease-out infinite; }
.rs-link { display: inline-flex; align-items: center; gap: 7px; font-size: 0.86rem; font-weight: 700; color: var(--teal-deep); text-decoration: none; }
.rs-link svg { animation: RsBob 2.2s ease-in-out infinite; }
.rs-link:hover { color: var(--teal-darker); }
.rs-tags { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; padding: 0; }
.rs-tags li { padding: 6px 14px; border-radius: 99px; background: var(--mint-50); border: 1px solid var(--mint-200); font-size: 0.76rem; font-weight: 800; color: var(--teal-deep); transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; }
.rs-tags li:hover { transform: translateY(-4px) rotate(-2deg); background: var(--teal-main); color: #fff; }
@media (min-width: 992px) { .rs-crumb, .rs-btns, .rs-tags { justify-content: flex-start; } }
 
.rs-stage { position: relative; width: 100%; max-width: 500px; height: 580px; margin: 0 auto; }
.rs-glow { position: absolute; left: 50%; top: 50%; width: 92%; height: 92%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 168, 150, 0.26), rgba(94, 234, 212, 0.08) 52%, transparent 72%); animation: RsGlow 5s ease-in-out infinite; pointer-events: none; }
.rs-ring { position: absolute; inset: 7%; border-radius: 50%; border: 2px dashed var(--mint-200); animation: RsSpin 50s linear infinite; }
.rs-ring2 { inset: 20%; border: 2px solid var(--mint-100); animation-duration: 32s; animation-direction: reverse; }
.rs-spk, .rs-ember { position: absolute; z-index: 2; width: 14px; height: 14px; background: #5eead4; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: RsTwinkle 3.4s ease-in-out infinite; }
.rs-spk.s1, .rs-ember.e1 { left: 14%; top: 12%; } .rs-spk.s2, .rs-ember.e2 { left: 84%; top: 18%; animation-delay: -0.8s; width: 18px; height: 18px; }
.rs-spk.s3, .rs-ember.e3 { left: 8%; top: 56%; animation-delay: -1.6s; background: #fbbf77; } .rs-spk.s4, .rs-ember.e4 { left: 90%; top: 62%; animation-delay: -2.2s; background: #fbbf77; }
.rs-spk.s5, .rs-ember.e5 { left: 30%; top: 92%; animation-delay: -2.8s; } .rs-spk.s6 { left: 74%; top: 90%; animation-delay: -1.2s; }
 
.rs-chip { position: absolute; z-index: 4; translate: calc(-50% + var(--px, 0px)) calc(-50% + var(--py, 0px)); display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 7px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--mint-200); box-shadow: 0 14px 24px -10px rgba(0, 90, 88, 0.45); font-size: 0.78rem; font-weight: 800; color: var(--text-dark); white-space: nowrap; animation: RsBob 5s ease-in-out var(--d, 0s) infinite; transition: translate 0.25s ease-out; }
.rs-chip > svg { box-sizing: content-box; padding: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #fff; }
.rs-chip small { display: block; font-size: 0.66rem; font-weight: 700; color: var(--text-muted); }
.rs-chip.c1 { left: 10%; top: 17%; } .rs-chip.c2 { left: 82%; top: 44%; --d: -1.7s; } .rs-chip.c3 { left: 20%; top: 85%; --d: -3.2s; }
 
/* shared layout bits */
.rs-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.rs-prose > p { position: relative; margin: 0 0 18px; padding-left: 22px; font-size: 1rem; line-height: 1.85; color: var(--text-body); }
.rs-prose > p:last-child { margin-bottom: 0; }
.rs-prose > p::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: linear-gradient(var(--teal-main), var(--mint-200)); transform: scaleY(0); transform-origin: top; transition: transform 0.9s cubic-bezier(0.45, 0, 0.2, 1) 0.4s; }
.rs-prose.is-in > p::before { transform: scaleY(1); }
html:not(.rs-js) .rs-prose > p::before { transform: none; }
.rs-prose a, .rs-after a { color: var(--teal-deep); font-weight: 700; text-decoration: none; border-bottom: 1px dashed var(--mint-400); }
.rs-prose a:hover, .rs-after a:hover { color: var(--teal-darker); border-bottom-style: solid; }
.rs-after { max-width: 860px; margin: 36px auto 0; padding: 22px 26px; border-radius: 22px; background: #fff; border: 1.5px solid var(--mint-100); box-shadow: var(--shadow-soft); }
.rs-after p { margin: 0; font-size: 0.98rem; line-height: 1.85; color: var(--text-body); }
 
.rs-note { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; margin-top: 36px; padding: 22px 28px; border-radius: 24px; background: linear-gradient(110deg, var(--mint-50) 0%, #FFFFFF 35%, var(--mint-50) 70%, #FFFFFF 100%); background-size: 200% 100%; border: 1.5px solid var(--mint-200); animation: RsBg 9s linear infinite; font-size: 1rem; line-height: 1.7; color: var(--text-body); }
.rs-note b { color: var(--text-dark); }
.rs-note-ic { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #FFFFFF; box-shadow: 0 12px 22px -12px rgba(0, 122, 120, 0.75); }
.rs-center { max-width: 760px; margin-left: auto; margin-right: auto; }
 
.rs-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rs-ck li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 22px; background: #FFFFFF; border: 1.5px solid var(--mint-100); box-shadow: var(--shadow-soft); font-size: 0.95rem; line-height: 1.6; color: var(--text-body); transition: transform 0.35s ease, border-color 0.3s ease, box-shadow 0.35s ease, background 0.3s ease; }
.rs-ck li:hover { transform: translateX(8px); border-color: var(--teal-main); background: var(--mint-50); box-shadow: 0 22px 36px -24px rgba(0, 122, 120, 0.55); }
.rs-tick { flex: 0 0 36px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #FFFFFF; box-shadow: 0 10px 18px -8px rgba(0, 122, 120, 0.7); transition: transform 0.4s ease; }
.rs-tick path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.rs-ck.is-in .rs-tick { animation: RsPop 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) calc(var(--i, 0) * 0.1s + 0.25s) backwards; }
.rs-ck.is-in .rs-tick path { animation: RsDraw 0.5s ease calc(var(--i, 0) * 0.1s + 0.5s) forwards; }
html:not(.rs-js) .rs-tick path { stroke-dashoffset: 0; }
.rs-ck li:hover .rs-tick { transform: rotate(-10deg) scale(1.1); }
 
.rs-spot { position: relative; --mx: 50%; --my: 50%; }
.rs-spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(0, 168, 150, 0.15), transparent 70%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.rs-spot:hover::before { opacity: 1; }
.rs-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(60px); animation: RsDrift 11s ease-in-out infinite; pointer-events: none; }
.rs-blob1 { width: 240px; height: 240px; top: -80px; right: -60px; background: rgba(0, 168, 150, 0.45); }
.rs-blob2 { width: 220px; height: 220px; bottom: -90px; left: -60px; background: rgba(94, 234, 212, 0.25); animation-delay: -5s; }
.rs-proof { position: relative; overflow: hidden; max-width: 860px; margin: 0 auto; padding: 40px 36px; text-align: center; border-radius: 32px; background: linear-gradient(110deg, var(--mint-50), #fff 40%, var(--mint-50) 80%); background-size: 200% 100%; border: 1.5px solid var(--mint-200); animation: RsBg 10s linear infinite; box-shadow: var(--shadow-soft); }
.rs-proof p { font-size: 1.02rem; line-height: 1.85; color: var(--text-body); }
.rs-cta-sm { margin-top: 26px; }
/* ===== RESTAURANT specific ===== */
@keyframes RsSteam { 0% { stroke-dashoffset: 40; opacity: 0; transform: translateY(8px); } 30% { opacity: 0.9; } 100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-12px); } }
@keyframes RsAct   { 0%, 100% { transform: none; box-shadow: none; } 8%, 18% { transform: translateY(-5px) scale(1.06); box-shadow: 0 10px 16px -8px rgba(0, 122, 120, 0.7); background: var(--teal-main); color: #fff; } 28% { transform: none; } }
@keyframes RsStar  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes RsRv1   { 0%, 8% { opacity: 0; transform: translateY(12px); } 16%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes RsRv2   { 0%, 40% { opacity: 0; transform: translateY(12px) scale(0.95); } 48%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes RsType  { 0%, 4% { width: 0; } 30%, 88% { width: 18ch; } 96%, 100% { width: 0; } }
@keyframes RsRes   { 0%, 30% { opacity: 0; transform: translateY(14px); } 38%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes RsSkel  { to { background-position: -200% 0; } }
@keyframes RsHeart { 0% { transform: translateY(0) scale(0.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-46px) scale(1.2); opacity: 0; } }
@keyframes RsReel  { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--r, 0deg)); } }
@keyframes RsBar   { from { width: 0; } to { width: 100%; } }
@keyframes RsDash  { to { stroke-dashoffset: 163; } }
@keyframes RsTravel{ 0% { left: 0; } 100% { left: calc(100% - 14px); } }
@keyframes RsMini  { 0%, 100% { filter: saturate(1); transform: scale(1); } 50% { filter: saturate(1.4); transform: scale(1.06); } }
 
.rs-stars { display: inline-flex; gap: 1px; color: #f59e0b; }
.rs-stars i { display: inline-flex; animation: RsStar 3s ease-in-out calc(var(--k, 0) * 0.14s) infinite; }
.rs-stars svg { fill: currentColor; }
 
/* hero phone */
.rs-phone-wrap { position: absolute; inset: 0; display: grid; place-items: center; animation: RsFloat 6.5s ease-in-out infinite; }
.rs-phone { position: relative; width: 252px; height: 500px; padding: 9px; border-radius: 40px; background: linear-gradient(160deg, #0b2a35, #04322f); box-shadow: 0 50px 80px -30px rgba(0, 60, 58, 0.7), inset 0 0 0 2px rgba(255, 255, 255, 0.08); transform: perspective(1000px) rotateY(var(--ry, -8deg)) rotateX(var(--rx, 4deg)); transition: transform 0.25s ease-out; }
.rs-notch { position: absolute; z-index: 3; top: 16px; left: 50%; width: 70px; height: 7px; margin-left: -35px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); }
.rs-ph-body { height: 100%; padding: 32px 11px 11px; border-radius: 32px; background: #F4FBF9; overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr; gap: 9px; }
.rs-photo { position: relative; height: 128px; border-radius: 20px; background: radial-gradient(circle at 50% 30%, #ccfbf1, #5eead4 70%, #14b8a6); overflow: hidden; display: grid; place-items: center; }
.rs-bowl { width: 78%; filter: drop-shadow(0 12px 10px rgba(0, 60, 58, 0.35)); }
.rs-st { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 40; animation: RsSteam 2.6s ease-in-out infinite; }
.rs-st.st2 { animation-delay: -0.9s; } .rs-st.st3 { animation-delay: -1.7s; }
.rs-open { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.92); font-size: 0.64rem; font-weight: 800; color: #15803d; }
.rs-open i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: RsPulse 2s ease-out infinite; }
.rs-info { padding: 0 4px; display: grid; gap: 2px; }
.rs-info b { font-size: 0.95rem; font-weight: 800; color: var(--text-dark); }
.rs-rate { display: flex; align-items: center; gap: 8px; }
.rs-rate small { font-size: 0.7rem; color: var(--text-muted); font-weight: 700; }
.rs-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.rs-acts span { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 14px; background: #fff; border: 1.5px solid var(--mint-200); color: var(--teal-deep); animation: RsAct 6s ease-in-out infinite; }
.rs-acts .a2 { animation-delay: 2s; } .rs-acts .a3 { animation-delay: 4s; }
.rs-acts em { font-style: normal; font-size: 0.6rem; font-weight: 800; }
.rs-rev { display: grid; gap: 7px; align-content: start; padding: 10px; border-radius: 18px; background: #E3F5EF; }
.rs-rev p { margin: 0; padding: 7px 10px; border-radius: 12px; background: #fff; font-size: 0.66rem; font-weight: 600; line-height: 1.4; color: var(--text-dark); box-shadow: 0 6px 12px -8px rgba(0, 90, 88, 0.4); }
.rs-rev p b { display: block; font-size: 0.64rem; color: var(--teal-deep); }
.rs-rev .rs-rv1 { animation: RsRv1 10s ease infinite; }
.rs-rev .rs-rv2 { margin-left: 18px; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #fff; animation: RsRv2 10s ease infinite; }
.rs-rev .rs-rv2 i { display: block; font-style: normal; font-size: 0.6rem; font-weight: 800; color: #b6f5ea; }
 
/* find: search mock */
.rs-search { padding: 22px; border-radius: 30px; background: linear-gradient(160deg, #fff, var(--mint-50)); border: 1.5px solid var(--mint-200); box-shadow: 0 40px 60px -34px rgba(0, 90, 88, 0.55); display: grid; gap: 12px; transition: transform 0.4s ease; }
.rs-search:hover { transform: translateY(-6px) rotate(-0.6deg); }
.rs-sbar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 99px; background: #fff; border: 2px solid var(--teal-main); color: var(--teal-deep); box-shadow: 0 10px 20px -12px rgba(0, 90, 88, 0.5); }
.rs-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 18ch; border-right: 2px solid var(--teal-main); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; font-weight: 700; color: var(--text-dark); animation: RsType 9s steps(18) infinite, RsCaret 0.8s step-end infinite; }
.rs-res { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 20px; background: #fff; border: 1.5px solid var(--mint-100); animation: RsRes 9s ease infinite; }
.rs-res.r2 { animation-delay: 0.25s; } .rs-res.r3 { animation-delay: 0.5s; }
.rs-res.hit { border-color: var(--teal-main); box-shadow: 0 0 0 5px rgba(0, 168, 150, 0.12), 0 16px 26px -18px rgba(0, 90, 88, 0.6); }
.rs-rth { flex: 0 0 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #fde68a, #fb923c); }
.rs-res.r1 .rs-rth { background: linear-gradient(135deg, #e5e7eb, #cbd5e1); } .rs-res.r3 .rs-rth { background: linear-gradient(135deg, #e5e7eb, #cbd5e1); }
.rs-res > div { flex: 1; display: grid; gap: 7px; }
.rs-res b, .rs-res i { display: block; height: 9px; border-radius: 6px; background: linear-gradient(90deg, #e5e7eb 30%, #f3f4f6 50%, #e5e7eb 70%); background-size: 200% 100%; animation: RsSkel 2.2s linear infinite; }
.rs-res b { width: 62%; height: 11px; } .rs-res i { width: 40%; }
.rs-res.hit b { background: var(--teal-main); animation: none; width: 55%; }
.rs-res em { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ef4444; color: #fff; animation: RsBob 1.6s ease-in-out infinite; }
 
/* profile grid */
.rs-grid5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rs-pc { position: relative; padding: 28px 26px; border-radius: 28px; background: #fff; border: 1.5px solid var(--mint-100); box-shadow: var(--shadow-soft); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.4s ease; overflow: hidden; }
.rs-pc:hover { transform: translateY(-10px); border-color: var(--teal-main); box-shadow: 0 34px 50px -28px rgba(0, 122, 120, 0.55); }
.rs-pc::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--teal-main), #5eead4); transition: width 0.5s ease; }
.rs-pc:hover::after { width: 100%; }
.rs-no { position: absolute; right: 18px; top: 8px; font-size: 3.4rem; font-weight: 900; line-height: 1; color: var(--mint-100); transition: color 0.3s ease, transform 0.4s ease; }
.rs-pc:hover .rs-no { color: var(--mint-200); transform: translateY(-4px) scale(1.1); }
.rs-ico, .rs-mic, .rs-mci { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 18px; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #fff; box-shadow: 0 14px 22px -12px rgba(0, 122, 120, 0.75); transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.rs-pc:hover .rs-ico, .rs-ad:hover .rs-ico, .rs-mc:hover .rs-mci { transform: rotate(-10deg) scale(1.12); }
.rs-pc h3, .rs-ad h3 { position: relative; margin: 0 0 8px; font-size: 1.12rem; font-weight: 800; color: var(--text-dark); }
.rs-pc p, .rs-ad p { position: relative; margin: 0; font-size: 0.92rem; line-height: 1.75; color: var(--text-body); }
.rs-ad a { color: var(--teal-deep); font-weight: 700; text-decoration: none; border-bottom: 1px dashed var(--mint-400); }
.rs-pc-photo { display: grid; place-items: center; padding: 18px; background: linear-gradient(135deg, var(--mint-50), #fff); }
.rs-mini { width: 100%; height: 100%; min-height: 150px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-mini i { border-radius: 18px; animation: RsMini 4s ease-in-out infinite; }
.rs-mini i:nth-child(1) { background: linear-gradient(135deg, #fde68a, #f59e0b); } .rs-mini i:nth-child(2) { background: linear-gradient(135deg, #fecaca, #ef4444); animation-delay: -1s; }
.rs-mini i:nth-child(3) { background: linear-gradient(135deg, #bbf7d0, #22c55e); animation-delay: -2s; } .rs-mini i:nth-child(4) { background: linear-gradient(135deg, #99f6e4, #14b8a6); animation-delay: -3s; }
 
/* menu */
.rs-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rs-mi { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 20px 22px 20px 26px; border-radius: 24px; background: #fff; border: 1.5px solid var(--mint-100); box-shadow: var(--shadow-soft); transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease; }
.rs-mi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--teal-main), #5eead4); transform: scaleY(0.25); transform-origin: top; transition: transform 0.45s ease; }
.rs-mi:hover { transform: translateY(-6px); border-color: var(--teal-main); box-shadow: 0 28px 40px -26px rgba(0, 122, 120, 0.55); }
.rs-mi:hover::after { transform: scaleY(1); }
.rs-mic { flex: 0 0 52px; width: 52px; height: 52px; margin: 0; border-radius: 16px; }
.rs-mi:hover .rs-mic { transform: rotate(-10deg) scale(1.1); }
.rs-mi p { position: relative; flex: 1; margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--text-body); }
.rs-tk { flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mint-50); border: 1.5px solid var(--mint-200); color: var(--teal-deep); position: relative; }
.rs-tk path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.rs-menu.is-in .rs-tk path { animation: RsDraw 0.5s ease calc(var(--i, 0) * 0.1s + 0.6s) forwards; }
html:not(.rs-js) .rs-tk path { stroke-dashoffset: 0; }
.rs-mi:hover .rs-tk { background: var(--teal-main); color: #fff; }
 
/* reviews */
.rs-mid { align-items: center; }
.rs-ck li.no .rs-tick { background: linear-gradient(135deg, #f87171, #b91c1c); box-shadow: 0 10px 18px -8px rgba(185, 28, 28, 0.6); }
.rs-ck li.no:hover { border-color: #f87171; background: #fef2f2; }
.rs-rcard { position: relative; padding: 24px; border-radius: 28px; background: #fff; border: 1.5px solid var(--mint-200); box-shadow: 0 40px 60px -34px rgba(0, 90, 88, 0.55); animation: RsFloat 6s ease-in-out infinite; max-width: 420px; margin: 0 auto; width: 100%; }
.rs-rtop { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rs-rtop b { display: block; font-size: 0.95rem; color: var(--text-dark); }
.rs-rav { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #fdba74, #ef4444); color: #fff; font-weight: 800; }
.rs-rav.sm { flex-basis: 34px; width: 34px; height: 34px; font-size: 0.7rem; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); }
.rs-rl { height: 10px; margin: 0 0 9px; border-radius: 6px; background: linear-gradient(90deg, #e5e7eb 30%, #f3f4f6 50%, #e5e7eb 70%); background-size: 200% 100%; animation: RsSkel 2.2s linear infinite; }
.rs-rl.l1 { width: 100%; } .rs-rl.l2 { width: 74%; } .rs-rl.l3 { width: 90%; } .rs-rl.l4 { width: 56%; margin: 0; }
.rs-reply { display: flex; gap: 12px; margin: 18px 0 0 22px; padding: 14px; border-radius: 18px; background: var(--mint-50); border: 1.5px solid var(--mint-200); }
.rs-reply > div { flex: 1; }
.rs-reply i { display: block; margin-bottom: 8px; font-style: normal; font-size: 0.68rem; font-weight: 800; color: var(--teal-deep); }
.rs-heart { position: absolute; right: 26px; bottom: 26px; color: #ef4444; animation: RsHeart 2.8s ease-in infinite; }
 
/* content reels */
.rs-rev-order { grid-template-columns: 0.95fr 1.05fr; }
.rs-reels { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 0; }
.rs-reel { position: relative; width: 31%; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #0b2a35; box-shadow: 0 30px 40px -22px rgba(0, 60, 58, 0.7); animation: RsReel 5s ease-in-out infinite; transition: scale 0.4s ease; --r: -5deg; }
.rs-reel.k1 { width: 36%; --r: 0deg; animation-delay: -1.6s; } .rs-reel.k2 { --r: 5deg; animation-delay: -3.2s; }
.rs-reel:hover { scale: 1.08; }
.rs-rbg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 70%, #fbbf24, #ef4444 55%, #7f1d1d); transition: transform 0.6s ease; }
.rs-reel.k1 .rs-rbg { background: radial-gradient(circle at 50% 70%, #5eead4, #0d9488 55%, #064e4b); } .rs-reel.k2 .rs-rbg { background: radial-gradient(circle at 50% 70%, #fde68a, #f59e0b 55%, #78350f); }
.rs-reel:hover .rs-rbg { transform: scale(1.18) rotate(4deg); }
.rs-rplay { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--teal-deep); padding-left: 3px; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); animation: RsPlayPulse 2.2s ease-out infinite; }
.rs-rplay svg { fill: currentColor; }
@keyframes RsPlayPulse { 70% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.rs-rbar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.rs-rbar i { display: block; height: 100%; width: 0; background: #fff; animation: RsBar 4s linear infinite; }
 
/* offers ticket */
.rs-ticket-wrap { position: relative; max-width: 420px; margin: 0 auto; width: 100%; padding: 26px 0; }
.rs-ticket { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 28px 26px; border-radius: 24px; background: linear-gradient(135deg, var(--teal-main), var(--teal-deep)); color: #fff; box-shadow: 0 40px 50px -28px rgba(0, 90, 88, 0.8); overflow: hidden; animation: RsFloat 6s ease-in-out infinite; -webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 14px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat; }
.rs-tl { flex: 0 0 auto; }
.rs-tm { flex: 1; display: grid; gap: 10px; padding: 0 18px; border-left: 2px dashed rgba(255, 255, 255, 0.5); border-right: 2px dashed rgba(255, 255, 255, 0.5); }
.rs-tm b { display: block; height: 14px; width: 80%; border-radius: 8px; background: #fff; } .rs-tm i { display: block; height: 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.5); } .rs-tm i + i { width: 60%; }
.rs-tr { position: relative; display: grid; place-items: center; width: 62px; height: 62px; }
.rs-tr svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rs-tr .trk { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 5; } .rs-tr .arc { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 163; animation: RsDash 5s linear infinite; }
.rs-shine { position: absolute; inset: 0; width: 24%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: RsShine 4.5s ease-in-out infinite; }
.rs-ticket.t2 { position: absolute; z-index: 1; inset: 40px 14px 6px; padding: 0; background: var(--mint-200); box-shadow: none; transform: rotate(5deg); animation: none; -webkit-mask: none; mask: none; }
 
/* ads */
.rs-day { position: relative; display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto 36px; }
.rs-sun, .rs-moon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; }
.rs-sun { background: radial-gradient(circle, #fde68a, #f59e0b); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.2), 0 0 24px #fbbf24; animation: RsSpin 14s linear infinite; }
.rs-moon { background: radial-gradient(circle at 70% 30%, #fff, #c7d2fe); box-shadow: 0 0 0 6px rgba(129, 140, 248, 0.2); }
.rs-dline { position: relative; flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #fde68a, var(--mint-200), #c7d2fe); }
.rs-dline b { position: absolute; top: -4px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--teal-deep); box-shadow: 0 0 0 5px rgba(0, 168, 150, 0.25); animation: RsTravel 5s ease-in-out infinite alternate; }
.rs-ad { position: relative; height: 100%; padding: 30px 28px; border-radius: 30px; background: #fff; border: 1.5px solid var(--mint-100); box-shadow: var(--shadow-soft); overflow: hidden; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.4s ease; }
.rs-ad:hover { transform: translateY(-10px); border-color: var(--teal-main); box-shadow: 0 34px 50px -28px rgba(0, 122, 120, 0.55); }
.rs-adno { position: absolute; right: 22px; top: 12px; font-size: 3.6rem; font-weight: 900; line-height: 1; color: var(--mint-100); transition: color 0.3s; }
.rs-ad:hover .rs-adno { color: var(--mint-200); }
 
/* measure */
.rs-five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.rs-mc { position: relative; padding: 26px 18px; text-align: center; border-radius: 26px; background: #fff; border: 1.5px solid var(--mint-100); box-shadow: var(--shadow-soft); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.4s ease; }
.rs-mc:hover { transform: translateY(-10px); border-color: var(--teal-main); box-shadow: 0 30px 46px -26px rgba(0, 122, 120, 0.55); }
.rs-mci { margin: 0 auto 14px; }
.rs-mc p { position: relative; margin: 0; font-size: 0.9rem; font-weight: 700; line-height: 1.55; color: var(--text-dark); }
 
/* responsive */
@media (max-width: 1199px) { .rs-five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) {
  .rs-hero { padding: 28px 0 60px; }
  .rs-split, .rs-rev-order { grid-template-columns: 1fr; gap: 30px; }
  .rs-grid5 { grid-template-columns: repeat(2, 1fr); }
  .rs-menu { grid-template-columns: 1fr; }
  .rs-reels { order: 2; }
}
@media (max-width: 575px) {
  .rs-stage { height: 500px; }
  .rs-phone-wrap { scale: 0.86; }
  .rs-chip { font-size: 0.66rem; padding: 5px 11px 5px 5px; gap: 6px; }
  .rs-grid5, .rs-five { grid-template-columns: 1fr; }
  .rs-pc-photo { display: none; }
  .rs-note { flex-direction: column; align-items: flex-start; padding: 20px; }
  .rs-ck li { padding: 14px 16px; gap: 12px; }
  .rs-proof { padding: 32px 20px; border-radius: 28px; }
  .rs-prose > p { padding-left: 18px; }
  .rs-sec::before, .rs-sec::after { opacity: 0.6; }
  .rs-ticket { padding: 22px 16px; gap: 10px; } .rs-tm { padding: 0 10px; }
}
 
/* reduced motion: final, readable state */
@media (prefers-reduced-motion: reduce) {
  .rs-page *, .rs-page *::before, .rs-page *::after { animation: none !important; transition: none !important; }
  .rs-js .rs-rv, .rs-js .rs-st > *, .rs-js .rs-prose > p { opacity: 1; }
  .rs-tick path, .rs-tk path { stroke-dashoffset: 0; }
  .rs-prose > p::before { transform: none; }
  .rs-type { width: 18ch; }
}
 

/* ============================================================
   RESPONSIVE PATCH (CSS-only, mobile text-first) — appended, no
   desktop rule above was changed. Desktop layout untouched.
   ============================================================ */
@media (max-width: 991px) {
  /* Mobile text-first: the hero's Bootstrap order classes render the
     graphic column first below lg (text order-2, graphic order-1).
     Flip them so text renders above the graphic. The order-lg-*
     desktop rules are outside this breakpoint and still apply. */
  .rs-hero > .container > .row > .order-2 { order: 1 !important; }
  .rs-hero > .container > .row > .order-1 { order: 2 !important; }
}