/* TempzSoft — business pages (/services/<business>/ and /services/other/): photo scenes, sample screens,
   explorer, plans and add-ons. Loaded only on those pages, after site.css. */
/* ======================================================= business pages (/services/<business>/) */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.crumbs a { color: var(--cyan); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.biz-hero { padding-bottom: clamp(60px, 7vw, 100px); }
.biz-hero-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: end; }
.biz-hero h1 { font-size: clamp(38px, 1.5rem + 2.7vw, 60px); }
.biz-hero-side .sub { margin-top: 0; font-size: 18px; }
.biz-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* scene: a photo with live screens placed onto it (positions are in the photo's own 1672×941 pixels;
   site.js sets --k so the whole scene scales with its box) */
.scene { position: relative; aspect-ratio: var(--ar); margin-top: clamp(40px, 5vw, 64px); border-radius: 28px; overflow: hidden; isolation: isolate; background: #e9eef5; box-shadow: 0 50px 100px -50px rgba(11, 20, 48, .55), 0 0 0 1px rgba(11, 20, 48, .06); }
.js .scene.reveal { clip-path: inset(8% 5% 8% 5% round 28px); transition: clip-path 1.6s var(--ease-io), opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .scene.reveal.in { clip-path: inset(0 round 28px); }
.js .page-hero .scene.reveal { transition-delay: calc(var(--intro) + .35s); }
.scene-in { position: absolute; inset: 0; }
.js .scene-in { inset: auto; left: 0; top: 0; width: 1672px; height: 941px; zoom: var(--k, 0.5); }
.scene-zoom { position: absolute; inset: 0; }
@keyframes kenburns { to { transform: scale(1.06); } }
.scene-img { width: 100%; height: 100%; object-fit: cover; }
.scene-screens { position: absolute; inset: 0; -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat; --b: #14213d; --a: #fca311; }
html:not(.js) .scene-screens, html:not(.js) .scene-chip, html:not(.js) .bf-chips, html:not(.js) .bf-lines { display: none; }
.scr { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #fff; }
.glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .22) 48%, transparent 58%) 0 0 / 300% 100%; animation: glare 9s ease-in-out infinite; }
@keyframes glare { 0%, 55% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
.tv-bar { position: relative; z-index: 2; height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: #fff; border-bottom: 1px solid #eceff4; font: 650 14px/1 var(--sans); color: #14213d; }
.powered { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #5d6886; }
.powered img { height: 26px; width: auto; }
.tv-screens { position: absolute; left: 0; right: 0; top: 36px; bottom: 0; }
.tv-screens.tv-full { top: 0; }
.tab-screens .ui { height: 707px; }
.lp-screen .ui { transform: scale(.577); transform-origin: 0 0; }

/* chips floating over a scene (sizes in photo pixels) */
.scene-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 16px 24px 16px 16px; border-radius: 22px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -24px rgba(11, 20, 48, .6); opacity: 0; transform: translateY(24px) scale(.9); }
.scene-chip b { display: block; font-size: 24px; color: var(--ink); letter-spacing: -.02em; }
.scene-chip small { display: block; font-size: 18px; color: var(--muted); }
.scene-chip i { width: 48px; height: 48px; border-radius: 50%; flex: none; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 26px no-repeat; }
.scene-chip i.bell { background: var(--grad); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l2 2H4zM10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E"), var(--grad); background-size: 26px, cover; background-position: center; background-repeat: no-repeat; }
.scene.in [data-chip="in"] { animation: chip-in .9s var(--spring) calc(var(--intro) + 1.6s) forwards; }
.scene.in [data-chip="loop"] { animation: chip-loop 9s var(--ease) calc(var(--intro) + 3s) infinite; }
@keyframes chip-in { to { opacity: 1; transform: none; } }
@keyframes chip-loop { 0% { opacity: 0; transform: translateY(24px) scale(.9); } 6%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(-14px); } }

/* one-time confetti over the launch photo (pieces added by site.js) */
.cf { position: absolute; z-index: 4; top: -20px; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; animation: cf-fall var(--t, 3.4s) cubic-bezier(.3, .6, .5, 1) var(--w, 0s) forwards; }
@keyframes cf-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x, 0), 105cqh) rotate(var(--r, 540deg)); opacity: .9; } }
.scene-launch { container-type: size; }

/* ------------------------------------------------ sample product screens (.ui), 1040×650 */
.ui { --b: #14213d; --a: #fca311; position: absolute; left: 0; top: 0; width: 1040px; height: 650px; overflow: hidden; background: #fff; color: #1f2937; font: 400 15px/1.45 var(--sans); letter-spacing: -.01em; opacity: 0; visibility: hidden; transform: translateX(3%); transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s .7s; }
.ui.on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s; }
.ui h4 { margin: 0; color: var(--b); font-size: 34px; line-height: 1.12; font-weight: 800; letter-spacing: -.03em; }
.ui h4 em { font-style: normal; color: #e08e0b; }
.ui small { font-size: 12px; color: #6b7280; }
.ui p { margin: 0; }
.u-nav { height: 60px; display: flex; align-items: center; gap: 26px; padding: 0 32px; border-bottom: 1px solid #eef0f4; background: #fff; }
.u-nav nav { display: flex; gap: 22px; margin-left: auto; }
.u-nav nav b { position: relative; font-size: 13.5px; font-weight: 600; color: #4b5563; }
.u-nav nav b.on { color: var(--b); }
.u-nav nav b.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--a); }
.u-logo { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; color: var(--b); letter-spacing: -.02em; }
.u-logo i { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--b) 50%, var(--a) 50%); }
.u-btn { display: inline-block; padding: 10px 18px; border-radius: 99px; background: var(--a); color: #14213d; font-size: 13px; font-weight: 750; white-space: nowrap; text-align: center; }
.u-btn.ghost { background: transparent; border: 1.5px solid var(--b); color: var(--b); }
.u-btn.wide { display: block; width: 100%; padding: 12px; }
.u-ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--a); color: #14213d; font-size: 14px; font-weight: 800; }
.ui.on .u-hero-copy > *, .ui.on .u-quote-copy > *, .ui.on .u-careers > * { animation: u-up .8s var(--ease) backwards; }
.ui.on .u-hero-copy > :nth-child(2), .ui.on .u-quote-copy > :nth-child(2), .ui.on .u-careers > :nth-child(2) { animation-delay: .1s; }
.ui.on .u-hero-copy > :nth-child(3), .ui.on .u-quote-copy > :nth-child(3), .ui.on .u-careers > :nth-child(3) { animation-delay: .2s; }
.ui.on .u-hero-copy > :nth-child(4) { animation-delay: .3s; }
@keyframes u-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes u-pop { from { opacity: 0; transform: scale(.85); } }

/* website */
.u-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding: 38px 34px 28px; background: linear-gradient(135deg, #f8fafc, #eef2ff); }
.u-hero small { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 750; letter-spacing: .16em; color: #e08e0b; }
.u-hero p { margin: 14px 0 20px; font-size: 14.5px; color: #4b5563; max-width: 420px; }
.u-ctas { display: flex; gap: 10px; }
.u-art { position: relative; height: 240px; }
.u-art .a1 { position: absolute; inset: 0 30px 0 20px; border-radius: 26px; background: linear-gradient(150deg, #24407a, var(--b)); }
.u-art .a1::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 58%; border-radius: 120px 120px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05)); }
.u-art .a2 { position: absolute; right: 6px; top: -10px; width: 90px; height: 90px; border-radius: 50%; background: var(--a); }
.u-art .a3 { position: absolute; left: 0; bottom: 26px; width: 150px; height: 70px; border-radius: 16px; background: #fff; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .4); }
.u-art .a3::before, .u-art .a3::after { content: ""; position: absolute; left: 16px; height: 9px; border-radius: 5px; background: #e5e7eb; }
.u-art .a3::before { top: 20px; width: 100px; } .u-art .a3::after { top: 40px; width: 64px; background: #fde7b9; }
.u-float { position: absolute; right: 0; bottom: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; font-size: 12.5px; color: #4b5563; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .4); }
.u-float b { color: #e08e0b; }
.ui.on .u-art > * { animation: u-pop .9s var(--spring) backwards; } .ui.on .u-art .a2 { animation-delay: .25s; } .ui.on .u-art .a3 { animation-delay: .4s; } .ui.on .u-float { animation-delay: .55s; }
.u-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 34px; padding: 16px 20px; border-radius: 16px; background: var(--b); color: rgba(255, 255, 255, .78); font-size: 12px; transform: translateY(-14px); }
.u-stats b { display: block; color: #fff; font-size: 22px; font-weight: 800; }
.u-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 4px 34px 20px; }
.u-cards span { padding: 16px; border-radius: 14px; border: 1px solid #eef0f4; }
.u-cards i { display: block; width: 32px; height: 32px; border-radius: 10px; background: #fff4dd; margin-bottom: 10px; }
.u-cards b { color: var(--b); font-size: 15px; }
.u-cards em { display: block; height: 8px; margin-top: 9px; border-radius: 4px; background: #eef0f4; } .u-cards em.s { width: 60%; }

/* catalogue */
.u-cat { display: grid; grid-template-columns: 190px 1fr; gap: 24px; padding: 24px 32px; }
.u-cat aside { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.u-cat aside b { margin-bottom: 6px; color: var(--b); font-size: 14px; }
.u-cat aside span { padding: 9px 12px; border-radius: 10px; color: #4b5563; }
.u-cat aside span.on { background: var(--b); color: #fff; font-weight: 650; }
.u-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.u-grid span { padding: 10px 10px 14px; border-radius: 14px; border: 1px solid #eef0f4; background: #fff; }
.u-grid i { position: relative; display: block; height: 112px; margin-bottom: 10px; border-radius: 10px; overflow: hidden; background: linear-gradient(140deg, hsl(var(--h) 55% 90%), hsl(var(--h) 45% 72%)); }
.u-grid i::after { content: ""; position: absolute; left: 30%; right: 30%; top: 22%; bottom: 14%; border-radius: 12px 12px 6px 6px; background: rgba(255, 255, 255, .55); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .25); }
.u-grid b { display: block; color: var(--b); font-size: 14px; }
.u-grid em { display: inline-block; margin-top: 8px; padding: 5px 12px; border-radius: 99px; border: 1.5px solid var(--b); color: var(--b); font-size: 12px; font-style: normal; font-weight: 700; }
.ui.on .u-grid span { animation: u-pop .7s var(--spring) backwards; }
.ui.on .u-grid span:nth-child(2) { animation-delay: .07s; } .ui.on .u-grid span:nth-child(3) { animation-delay: .14s; } .ui.on .u-grid span:nth-child(4) { animation-delay: .21s; } .ui.on .u-grid span:nth-child(5) { animation-delay: .28s; } .ui.on .u-grid span:nth-child(6) { animation-delay: .35s; }

/* quotation */
.u-quote { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; height: 590px; padding: 0 44px; background: linear-gradient(135deg, #f8fafc, #fff7e8); }
.u-quote-copy small { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 750; letter-spacing: .16em; color: #e08e0b; }
.u-quote p { margin-top: 14px; color: #4b5563; }
.u-form { position: relative; padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -30px rgba(20, 33, 61, .45); }
.u-form label { display: grid; gap: 6px; margin-bottom: 12px; font-size: 12px; font-weight: 650; color: #6b7280; }
.u-in { height: 42px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; border: 1.5px solid #e5e7eb; }
.u-in i { font-style: normal; font-size: 14px; color: #111827; clip-path: inset(0 100% 0 0); }
.ui.on .u-in .t1 { animation: u-type .9s steps(14) .5s forwards; } .ui.on .u-in .t2 { animation: u-type .8s steps(12) 1.5s forwards; } .ui.on .u-in .t3 { animation: u-type .9s steps(20) 2.4s forwards; }
@keyframes u-type { to { clip-path: inset(0 0 0 0); } }
.ui.on .u-form .u-btn { animation: u-press .4s 3.4s; }
@keyframes u-press { 50% { transform: scale(.94); filter: brightness(.9); } }
.u-done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; border-radius: inherit; background: #fff; opacity: 0; }
.u-done i { width: 64px; height: 64px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 34px no-repeat; }
.u-done b { margin-top: 8px; color: var(--b); font-size: 20px; }
.ui.on .u-done { animation: u-show .6s var(--ease) 3.7s forwards; }
.ui.on .u-done i { animation: u-pop .7s var(--spring) 3.8s backwards; }
@keyframes u-show { to { opacity: 1; } }

/* admin */
.ui-admin { display: grid; grid-template-columns: 72px 1fr; background: #f5f6fa; }
.u-side { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; background: var(--b); }
.u-side .u-logo { margin-bottom: 10px; }
.u-side > i { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .14); }
.u-side > i.on { background: var(--a); }
.u-dash { padding: 20px 26px; }
.u-dash-head { display: flex; align-items: center; gap: 14px; }
.u-dash-head b { margin-right: auto; color: var(--b); font-size: 22px; }
.u-bell { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314213d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l2 2H4zM10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3); }
.u-bell em { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; background: #ef4444; color: #fff; font-size: 10.5px; font-style: normal; font-weight: 800; }
.ui.on .u-bell { animation: u-ring 1s 1.2s 2; }
@keyframes u-ring { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.u-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 14px; }
.u-kpis span { padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .25); }
.u-kpis b { display: block; margin: 2px 0; color: var(--b); font-size: 26px; font-weight: 800; }
.u-kpis em { font-style: normal; font-size: 12px; font-weight: 700; color: #16a34a; }
.ui.on .u-kpis span { animation: u-up .7s var(--ease) backwards; } .ui.on .u-kpis span:nth-child(2) { animation-delay: .08s; } .ui.on .u-kpis span:nth-child(3) { animation-delay: .16s; } .ui.on .u-kpis span:nth-child(4) { animation-delay: .24s; }
.u-row2 { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; }
.u-chart, .u-table { padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .25); }
.u-bars { display: flex; align-items: flex-end; gap: 12px; height: 230px; margin-top: 12px; }
.u-bars i { flex: 1; height: calc(var(--v) * 100%); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--a), #fde2a7); transform-origin: 50% 100%; }
.u-bars i:last-child { background: linear-gradient(180deg, var(--b), #3b5998); }
.ui.on .u-bars i { animation: u-grow 1s var(--ease) backwards; } .ui.on .u-bars i:nth-child(2) { animation-delay: .06s; } .ui.on .u-bars i:nth-child(3) { animation-delay: .12s; } .ui.on .u-bars i:nth-child(4) { animation-delay: .18s; } .ui.on .u-bars i:nth-child(5) { animation-delay: .24s; } .ui.on .u-bars i:nth-child(6) { animation-delay: .3s; } .ui.on .u-bars i:nth-child(7) { animation-delay: .36s; }
@keyframes u-grow { from { transform: scaleY(0); } }
.u-table p { display: grid; grid-template-columns: 32px 1fr auto 74px; align-items: center; gap: 10px; padding: 11px 6px; border-bottom: 1px solid #f0f2f6; font-size: 13.5px; border-radius: 10px; }
.u-table p:last-child { border-bottom: 0; }
.u-table p > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #e8edf7; color: var(--b); font-style: normal; font-size: 12px; font-weight: 800; }
.u-table b { color: #111827; font-weight: 650; }
.u-table span { color: #6b7280; font-size: 12.5px; }
.u-table em { justify-self: end; padding: 4px 10px; border-radius: 99px; background: #fff4dd; color: #b45309; font-size: 11.5px; font-style: normal; font-weight: 700; }
.u-table em.ok { background: #dcfce7; color: #166534; }
.ui.on .u-table p.new { animation: u-new 2.4s var(--ease) .9s backwards; }
@keyframes u-new { 0% { opacity: 0; transform: translateX(30px); background: #fff4dd; } 25% { opacity: 1; transform: none; background: #fff4dd; } 100% { background: transparent; } }

/* client portal */
.u-portal { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; padding: 26px 32px; background: #f8fafc; height: 590px; }
.u-welcome { padding: 28px; border-radius: 20px; background: linear-gradient(140deg, var(--b), #2b4a8b); color: rgba(255, 255, 255, .78); align-self: start; }
.u-welcome h4 { color: #fff; font-size: 28px; }
.u-welcome p { margin-top: 6px; }
.u-track { position: relative; display: flex; justify-content: space-between; margin-top: 34px; font-size: 12.5px; }
.u-track::before, .u-track::after { content: ""; position: absolute; left: 11px; right: 11px; top: 10px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.u-track::after { right: 36%; background: var(--a); transform-origin: 0 50%; }
.ui.on .u-track::after { animation: u-line 1.6s var(--ease-io) .4s backwards; }
@keyframes u-line { from { transform: scaleX(0); } }
.u-track span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; }
.u-track i { width: 23px; height: 23px; border-radius: 50%; background: #3b5590; border: 3px solid #2b4a8b; }
.u-track .done i { background: var(--a); }
.u-track .now i { background: #fff; box-shadow: 0 0 0 0 rgba(252, 163, 17, .7); animation: u-pulse 1.6s infinite; }
@keyframes u-pulse { 70% { box-shadow: 0 0 0 12px rgba(252, 163, 17, 0); } 100% { box-shadow: 0 0 0 0 rgba(252, 163, 17, 0); } }
.u-docs { padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .35); align-self: start; }
.u-docs b { color: var(--b); }
.u-docs p { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid #eef0f4; font-size: 13.5px; }
.u-docs p i { width: 24px; height: 30px; border-radius: 5px; background: #fee2e2; }
.u-docs em { margin-left: auto; color: var(--b); font-size: 12px; font-style: normal; font-weight: 750; }
.ui.on .u-docs p { animation: u-up .7s var(--ease) backwards; } .ui.on .u-docs p:nth-of-type(2) { animation-delay: .1s; } .ui.on .u-docs p:nth-of-type(3) { animation-delay: .2s; }

/* careers */
.u-careers { padding: 30px 34px; }
.u-careers h4 { font-size: 30px; }
.u-jobs { display: grid; gap: 10px; margin: 18px 0; }
.u-jobs p { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 18px; border-radius: 14px; border: 1px solid #eef0f4; }
.u-jobs b { color: var(--b); }
.u-jobs small { display: block; }
.u-jobs em { grid-row: span 2; padding: 8px 18px; border-radius: 99px; background: var(--a); color: #14213d; font-size: 12.5px; font-style: normal; font-weight: 750; }
.u-upload { display: grid; justify-items: center; gap: 4px; padding: 20px; border-radius: 16px; border: 2px dashed #cbd5e1; background: #f8fafc; }
.u-upload > i { width: 34px; height: 34px; border-radius: 10px; background: #e8edf7; }
.u-upload b { color: var(--b); }
.u-prog { width: 60%; height: 6px; margin-top: 8px; border-radius: 3px; background: #e5e7eb; overflow: hidden; }
.u-prog i { display: block; height: 100%; width: 100%; background: #22c55e; transform-origin: 0 50%; transform: scaleX(0); }
.ui.on .u-prog i { animation: u-fill 2s var(--ease-io) 1.2s forwards; }
@keyframes u-fill { to { transform: scaleX(1); } }

/* payments */
.u-pay { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; height: 100%; padding: 30px 40px; background: linear-gradient(135deg, #f5f6fa, #eef2ff); }
.u-invoice { position: relative; padding: 26px 28px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -30px rgba(20, 33, 61, .45); }
.u-invoice h4 { margin: 18px 0 10px; font-size: 22px; }
.u-invoice p { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #e5e7eb; font-size: 14px; color: #4b5563; }
.u-invoice p b { color: #111827; }
.u-invoice p.tot { border: 0; font-size: 18px; } .u-invoice p.tot b { color: var(--b); font-size: 22px; }
.u-paid { position: absolute; right: 34px; top: 74px; padding: 6px 16px; border: 4px solid #16a34a; border-radius: 12px; color: #16a34a; font-size: 30px; font-style: normal; font-weight: 900; letter-spacing: .2em; transform: rotate(-14deg); opacity: 0; }
.ui.on .u-paid { animation: u-stamp .5s var(--spring) 2.6s forwards; }
@keyframes u-stamp { from { opacity: 0; transform: rotate(-14deg) scale(2.2); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }
.u-methods { display: grid; gap: 10px; padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -26px rgba(20, 33, 61, .4); }
.u-methods b { color: var(--b); }
.u-methods > span:not(.u-btn) { padding: 12px 14px; border-radius: 12px; border: 1.5px solid #e5e7eb; font-size: 14px; font-weight: 600; }
.u-methods > span.on { border-color: var(--a); background: #fff8eb; }
.ui.on .u-methods .u-btn { animation: u-press .4s 2.2s; }

/* booking */
.u-book { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; padding: 28px 34px; background: #f8fafc; height: 590px; }
.u-cal, .u-slots { padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(20, 33, 61, .45); align-self: start; }
.u-cal > b, .u-slots > b { color: var(--b); font-size: 16px; }
.u-days, .u-dates { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; text-align: center; }
.u-days i { font-style: normal; font-size: 11.5px; font-weight: 700; color: #9ca3af; }
.u-dates i { padding: 8px 0; border-radius: 10px; font-style: normal; font-size: 13.5px; font-weight: 600; color: #374151; }
.u-dates i.off { color: #cbd5e1; }
.ui.on .u-dates i.on { animation: u-pick .5s var(--spring) 1s forwards; }
@keyframes u-pick { to { background: var(--b); color: #fff; } }
.u-slots { display: grid; gap: 9px; }
.u-slots > span:not(.u-btn) { padding: 10px 14px; border-radius: 12px; border: 1.5px solid #e5e7eb; font-size: 14px; font-weight: 600; }
.ui.on .u-slots > span.on { animation: u-slot .5s var(--spring) 1.8s forwards; }
@keyframes u-slot { to { background: var(--a); border-color: var(--a); color: #14213d; } }
.u-conf { color: #16a34a !important; font-size: 13px !important; font-weight: 700; opacity: 0; }
.ui.on .u-conf { animation: u-show .5s 3s forwards; }

/* --------------------------------------------------------- product explorer */
.build-sec { background: var(--paper); }
.explorer { display: grid; grid-template-columns: 360px 1fr; gap: 34px; align-items: start; }
.ex-list { display: grid; gap: 6px; }
.ex-tab { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid transparent; border-radius: 16px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: background .35s, border-color .35s, box-shadow .35s; }
.ex-tab:hover { background: rgba(255, 255, 255, .6); }
.ex-tab .svc-ic { width: 44px; height: 44px; padding: 8px; margin: 0; border-radius: 12px; background: #fff; }
.js .ex-tab .svc-ic * { stroke-dashoffset: 0; }
.ex-tab b { display: block; padding-top: 2px; color: var(--ink); font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; }
.ex-tab small { display: grid; grid-template-rows: 0fr; color: var(--muted); font-size: 13.5px; line-height: 1.5; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.ex-tab.on { background: #fff; border-color: var(--line); box-shadow: 0 20px 40px -30px rgba(18, 32, 79, .45); }
.ex-tab.on small { max-height: 60px; opacity: 1; margin-top: 4px; }
.ex-tab.on .svc-ic { background: var(--navy); }
.ex-tab.on .svc-ic path:not(.hl), .ex-tab.on .svc-ic rect:not(.hl), .ex-tab.on .svc-ic circle { stroke: #fff; }
.ex-bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: 0 50%; }
.ex-tab.on .ex-bar { animation: ex-bar var(--dur, 6s) linear forwards; }
.explorer.paused .ex-tab.on .ex-bar { animation: none; transform: scaleX(1); opacity: .35; }
@keyframes ex-bar { to { transform: scaleX(1); } }
.ex-stage { position: sticky; top: calc(var(--nav-h) + 24px); }
.ex-frame { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -50px rgba(11, 20, 48, .55), 0 0 0 1px rgba(11, 20, 48, .06); }
.ex-url { transition: opacity .3s; }
.ui-stage { position: relative; aspect-ratio: 1040 / 650; overflow: hidden; }
.ui-set { position: absolute; left: 0; top: 0; width: 1040px; height: 650px; zoom: var(--k, .6); }
html:not(.js) .ui-set .ui:not(.on) { display: none; }
.ex-note { margin-top: 14px; text-align: center; font-size: 13.5px; color: var(--muted); }

/* phone screens (300×634) */
.m-screens { position: absolute; inset: 0; --b: #14213d; --a: #fca311; font: 400 13px/1.4 var(--sans); color: #1f2937; }
.m-slide { position: absolute; inset: 0; padding: 30px 14px 14px; background: #fff; opacity: 0; transition: opacity .6s var(--ease); }
.m-slide.on { opacity: 1; }
.m-g { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 99px; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .3); font-size: 13.5px; }
.m-g b { font-size: 18px; color: #4285f4; }
.m-res { display: grid; gap: 2px; margin-top: 12px; padding: 12px; border-radius: 12px; }
.m-res small { font-size: 11px; color: #188038; }
.m-res b { color: #1a0dab; font-size: 15px; }
.m-res em { font-style: normal; font-size: 11.5px; color: #e08e0b; }
.m-res p { font-size: 11.5px; color: #4b5563; min-height: 14px; }
.m-res.top { background: #f8fafc; border: 1px solid #e5e7eb; }
.m-res:not(.top) b { color: #9aa3b5; } .m-res:not(.top) p { height: 8px; min-height: 0; border-radius: 4px; background: #eef0f4; }
.m-tap { position: absolute; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: rgba(0, 163, 212, .35); opacity: 0; }
.m-search .m-tap { left: 50%; top: 150px; } .m-home .m-tap { left: 90px; top: 222px; }
.m-slide.on .m-tap { animation: m-tap .9s var(--ease) 2.2s; }
@keyframes m-tap { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
.m-top { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 12px; }
.m-top .u-logo { font-size: 15px; } .m-top .u-logo i { width: 24px; height: 24px; }
.m-menu { width: 22px; height: 14px; border-top: 2.5px solid var(--b); border-bottom: 2.5px solid var(--b); position: relative; }
.m-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 3.5px; height: 2.5px; background: var(--b); }
.m-hero { margin: 0 -14px; padding: 30px 16px; background: linear-gradient(150deg, #24407a, var(--b)); color: #fff; }
.m-hero b { display: block; font-size: 23px; line-height: 1.15; font-weight: 800; margin-bottom: 16px; }
.m-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.m-acts span { padding: 12px 6px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 750; }
.m-acts .call { background: #e0f2fe; color: #075985; } .m-acts .wa { background: #dcfce7; color: #166534; }
.m-list i { display: block; height: 60px; margin-top: 10px; border-radius: 12px; background: #f3f4f6; }
.m-h { display: block; margin: 8px 0 14px; color: var(--b); font-size: 20px; }
.m-in { display: flex; align-items: center; height: 44px; margin-bottom: 10px; padding: 0 12px; border-radius: 10px; border: 1.5px solid #e5e7eb; }
.m-in i { font-style: normal; font-size: 13.5px; clip-path: inset(0 100% 0 0); }
.m-slide.on .m-in:nth-of-type(1) i { animation: u-type .7s steps(12) .3s forwards; } .m-slide.on .m-in:nth-of-type(2) i { animation: u-type .6s steps(11) 1.1s forwards; } .m-slide.on .m-in:nth-of-type(3) i { animation: u-type .6s steps(12) 1.8s forwards; }
.m-ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: #fff; opacity: 0; }
.m-ok i { width: 70px; height: 70px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 36px no-repeat; }
.m-ok b { margin-top: 10px; color: var(--b); font-size: 22px; } .m-ok small { color: #6b7280; font-size: 12.5px; }
.m-slide.on .m-ok { animation: u-show .5s 2.7s forwards; }
.m-slide.on .m-ok i { animation: u-pop .6s var(--spring) 2.8s backwards; }

/* customer benefits on the photo */
.benefit-sec { background: #fff; }
.bf-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }
.bf-lines path { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; opacity: .8; }
.scene.in .bf-lines path { animation: bf-draw 1.2s var(--ease-io) calc(.9s + var(--n) * .45s) forwards; }
@keyframes bf-draw { to { stroke-dashoffset: 0; } }
.bf-chips { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 3; }
.bf-chips li { position: absolute; display: flex; align-items: center; gap: 16px; width: 420px; padding: 16px 22px 16px 16px; border-radius: 22px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -26px rgba(11, 20, 48, .55); opacity: 0; transform: translateX(-30px); }
.bf-chips i { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--cyan-50); font-size: 28px; font-style: normal; }
.bf-chips b { display: block; color: var(--ink); font-size: 23px; letter-spacing: -.02em; }
.bf-chips small { display: block; color: var(--muted); font-size: 18px; }
.scene.in .bf-chips li { animation: chip-in .9s var(--spring) calc(.6s + var(--n) * .45s) forwards; }
.bf-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 28px; margin: 40px 0 0; padding: 0; list-style: none; }
.bf-list li { position: relative; padding-left: 30px; }
.bf-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 2px; border-radius: 2px; background: var(--cyan); }
.bf-list b { display: block; color: var(--ink); font-size: 16px; }
.bf-list span { color: var(--muted); font-size: 15px; }

/* plans */
.plans-sec { background: var(--paper); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 34px 30px 30px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: box-shadow .5s var(--ease), transform .6s var(--ease), opacity 1s var(--ease); }
.js .plan.reveal { transition: box-shadow .5s var(--ease), transform 1s var(--ease), opacity 1s var(--ease); transition-delay: 0s, var(--d, 0s), var(--d, 0s); }
.plan:hover { box-shadow: 0 34px 70px -34px rgba(18, 32, 79, .38); }
.plan-pop { border: 2px solid var(--cyan); background: linear-gradient(180deg, #f1fbff, #fff 40%); box-shadow: 0 34px 70px -40px rgba(0, 163, 212, .55); }
.plan-tag { position: absolute; left: 28px; top: -14px; padding: 6px 14px; border-radius: 99px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.plan-name { color: var(--ink); font-size: 26px; font-weight: 780; letter-spacing: -.03em; }
.plan-for { margin-top: 4px; color: var(--muted); font-size: 15px; }
.plan .price { align-self: flex-start; margin: 18px 0 22px; }
.plan .built { margin-bottom: 28px; }
.plan .btn { margin-top: auto; }
.plans-note { margin-top: 34px; text-align: center; color: var(--muted); }
.plans-note a { color: var(--cyan); font-weight: 650; }

/* add-ons */
.addons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.addon { display: grid; gap: 6px; padding: 26px 24px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; color: inherit; text-decoration: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s, opacity 1s var(--ease); }
.js .addon.reveal { transition: transform 1s var(--ease), box-shadow .5s var(--ease), border-color .3s, opacity 1s var(--ease); transition-delay: var(--d, 0s), 0s, 0s, var(--d, 0s); }
.addon:hover { transform: translateY(-6px); border-color: rgba(0, 163, 212, .4); box-shadow: 0 30px 60px -36px rgba(18, 32, 79, .45); }
.addon .svc-ic { margin-bottom: 12px; }
.js .addon.in .svc-ic * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-io) calc(var(--d, 0s) + .2s), stroke .3s; }
.addon b { color: var(--ink); font-size: 17px; }
.addon span { color: var(--muted); font-size: 14.5px; }

@media (max-width: 1080px) {
  .biz-hero-head { grid-template-columns: 1fr; gap: 10px; }
  .explorer { grid-template-columns: 1fr; gap: 20px; }
  .ex-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -28px; padding: 4px 28px 8px; }
  .ex-list::-webkit-scrollbar { display: none; }
  .ex-tab { flex: none; grid-template-columns: 30px auto; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; background: #fff; border-color: var(--line); }
  .ex-tab .svc-ic { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: var(--cyan-50); }
  .ex-tab b { padding: 0; font-size: 14px; white-space: nowrap; }
  .ex-tab small { display: none; }
  .ex-stage { position: static; }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .addons { grid-template-columns: repeat(2, 1fr); }
  .bf-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .scene { border-radius: 18px; }
  .js .scene.reveal { clip-path: inset(6% 4% 6% 4% round 18px); } .js .scene.reveal.in { clip-path: inset(0 round 18px); }
  .scene-chip, .bf-chips, .bf-lines { display: none; }
}
@media (max-width: 640px) {
  .ex-list { margin: 0 -20px; padding: 4px 20px 8px; }
  .addons, .bf-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-zoom, .glare { animation: none !important; }
  .scene-chip, .bf-chips li { opacity: 1 !important; transform: none !important; }
  .bf-lines path { stroke-dashoffset: 0 !important; }
  .cf { display: none; }
}

/* ------------------------------------------------ portfolio sample screens */
.ui [style*="--img"] { background: #ddd var(--img) center / cover no-repeat; }
.pf-mark { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--b); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chips span { padding: 7px 14px; border-radius: 99px; border: 1px solid currentColor; font-size: 12.5px; font-weight: 600; opacity: .75; }
.pf-chips span.on { opacity: 1; background: var(--a); border-color: var(--a); color: #111; }

/* photographers & studios: dark gallery */
.pf-studio { --b: #f5f1ea; --a: #d4a373; background: #0f0f10; color: #e7e2da; }
.pf-studio .u-nav { background: #0f0f10; border-color: #222; }
.pf-studio .u-nav nav b { color: #a8a29e; } .pf-studio .u-nav nav b.on { color: #fff; }
.pf-studio .pf-mark { font-family: var(--serif); font-weight: 700; font-style: italic; font-size: 22px; color: #fff; }
.pf-studio h4 { color: #fff; font-family: var(--serif); font-weight: 600; font-size: 34px; }
.pf-studio h4 em { color: var(--a); font-style: italic; }
.pf-studio-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 30px 18px; }
.pf-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 228px; gap: 10px; padding: 0 30px; }
.pf-gallery i { border-radius: 10px; filter: saturate(.9) contrast(1.05); }
.pf-gallery i.wide { grid-column: span 2; }
.ui.on .pf-gallery i { animation: pf-in 1s var(--ease) backwards; }
.ui.on .pf-gallery i:nth-child(2) { animation-delay: .08s; } .ui.on .pf-gallery i:nth-child(3) { animation-delay: .16s; } .ui.on .pf-gallery i:nth-child(4) { animation-delay: .24s; } .ui.on .pf-gallery i:nth-child(5) { animation-delay: .32s; } .ui.on .pf-gallery i:nth-child(6) { animation-delay: .4s; }
@keyframes pf-in { from { opacity: 0; transform: scale(1.08); filter: blur(6px); } }
.pf-proj-hero { position: relative; display: flex; align-items: flex-end; height: 400px; margin: 18px 30px 0; padding: 30px; border-radius: 14px; background-size: cover; background-position: center 30%; }
.pf-proj-hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent 60%); }
.pf-proj-hero > div { position: relative; }
.pf-proj-hero small { color: var(--a); font-size: 12px; font-weight: 700; letter-spacing: .18em; }
.ui.on .pf-proj-hero { animation: pf-kb 6s ease-out both; }
@keyframes pf-kb { from { background-size: 115%; } to { background-size: 100%; } }
.pf-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px 30px; }
.pf-strip i { height: 110px; border-radius: 10px; }
.ui.on .pf-strip i { animation: u-up .7s var(--ease) backwards; } .ui.on .pf-strip i:nth-child(2) { animation-delay: .1s; } .ui.on .pf-strip i:nth-child(3) { animation-delay: .2s; } .ui.on .pf-strip i:nth-child(4) { animation-delay: .3s; }
.pf-hire-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; height: 560px; padding: 0 44px; }
.pf-hire-in small { display: block; margin-bottom: 12px; color: var(--a); font-size: 11px; font-weight: 750; letter-spacing: .18em; }
.pf-hire-in p { margin-top: 14px; color: #a8a29e; }
.pf-hire .u-form { background: #19191b; box-shadow: none; border: 1px solid #2a2a2d; }
.pf-hire .u-form label { color: #a8a29e; }
.pf-hire .u-in { border-color: #333; } .pf-hire .u-in i { color: #fff; }
.pf-hire .u-done { background: #19191b; } .pf-hire .u-done b { color: #fff; }

/* designers: bold and colourful */
.pf-designer { --b: #111; --a: #ff5a36; background: #fffbf2; }
.pf-designer .u-nav { background: #fffbf2; border-color: #efe7d6; }
.pf-designer .pf-mark b { color: var(--a); }
.pf-designer .u-btn { background: #111; color: #fff; }
.pf-d-hero { position: relative; padding: 46px 40px 30px; overflow: hidden; }
.pf-d-hero h4 { position: relative; z-index: 1; font-size: 62px; line-height: 1; letter-spacing: -.05em; color: #111; }
.pf-d-hero h4 em { color: var(--a); font-family: var(--serif); font-style: italic; font-weight: 700; }
.pf-d-hero p { position: relative; z-index: 1; margin-top: 18px; font-weight: 600; color: #57534e; }
.pf-d-hero .sh { position: absolute; border-radius: 50%; }
.pf-d-hero .s1 { right: 90px; top: 30px; width: 170px; height: 170px; background: #ffd23f; animation: pf-float 6s ease-in-out infinite; }
.pf-d-hero .s2 { right: 250px; top: 140px; width: 90px; height: 90px; background: #3a86ff; border-radius: 22px; animation: pf-float 5s ease-in-out infinite reverse; }
.pf-d-hero .s3 { right: 40px; top: 170px; width: 110px; height: 110px; border: 14px solid var(--a); background: none; animation: pf-float 7s ease-in-out infinite; }
@keyframes pf-float { 50% { transform: translateY(-14px) rotate(8deg); } }
.pf-d-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 40px; }
.pf-d-work span { padding: 10px 10px 14px; border-radius: 18px; background: #fff; border: 1px solid #efe7d6; }
.pf-d-work i { display: block; height: 150px; margin-bottom: 10px; border-radius: 12px; }
.pf-d-work .dc1 i { background: radial-gradient(circle at 30% 40%, #ffd23f 0 22%, transparent 23%), linear-gradient(135deg, #111, #333); }
.pf-d-work .dc2 i { background: radial-gradient(circle at 70% 60%, #fff 0 18%, transparent 19%), linear-gradient(135deg, #ff5a36, #ff9a76); }
.pf-d-work .dc3 i { background: linear-gradient(90deg, transparent 38%, #fff 38% 62%, transparent 62%) center / 100% 70% no-repeat, linear-gradient(135deg, #3a86ff, #8338ec); }
.pf-d-work b { display: block; color: #111; } .pf-d-work small { color: #78716c; }
.ui.on .pf-d-work span { animation: u-up .8s var(--ease) backwards; } .ui.on .pf-d-work span:nth-child(2) { animation-delay: .1s; } .ui.on .pf-d-work span:nth-child(3) { animation-delay: .2s; }

/* architects & interiors: minimal */
.pf-architect { --b: #1c1917; --a: #a16207; background: #fafaf9; }
.pf-architect .u-nav { background: #fafaf9; }
.pf-architect .pf-mark { font-size: 15px; font-weight: 500; letter-spacing: .22em; } .pf-architect .pf-mark b { font-weight: 800; }
.pf-a-hero { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; align-items: center; padding: 26px 34px 18px; }
.pf-a-hero small { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--a); }
.pf-a-hero h4 { font-weight: 300; font-size: 40px; color: #1c1917; } .pf-a-hero h4 em { font-weight: 700; color: #1c1917; }
.pf-a-hero p { margin-top: 12px; color: #78716c; }
.pf-a-link { display: inline-block; margin-top: 20px; padding-bottom: 3px; border-bottom: 1.5px solid #1c1917; font-size: 13px; font-weight: 700; }
.pf-a-img { display: block; height: 290px; border-radius: 4px; }
.ui.on .pf-a-img { animation: pf-wipe 1.4s var(--ease-io) both; }
@keyframes pf-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.pf-a-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 34px; }
.pf-a-row i { display: block; height: 130px; margin-bottom: 8px; border-radius: 4px; }
.pf-a-row b { display: block; font-size: 14px; color: #1c1917; } .pf-a-row small { font-size: 12px; }
.ui.on .pf-a-row span { animation: u-up .8s var(--ease) backwards; } .ui.on .pf-a-row span:nth-child(1) { animation-delay: .5s; } .ui.on .pf-a-row span:nth-child(2) { animation-delay: .6s; } .ui.on .pf-a-row span:nth-child(3) { animation-delay: .7s; }

/* artists & makers: warm */
.pf-artist { --b: #5b2c1a; --a: #e76f51; background: #f6ebe1; }
.pf-artist .u-nav { background: #f6ebe1; border-color: #e9d8c8; }
.pf-artist .pf-mark { font-family: var(--serif); font-style: italic; } .pf-artist .pf-mark b { color: var(--a); }
.pf-artist .u-btn { background: var(--b); color: #fff; }
.pf-art { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: center; height: 590px; padding: 0 40px; }
.pf-art h4 { font-family: var(--serif); font-size: 44px; font-weight: 700; color: var(--b); } .pf-art h4 em { color: var(--a); }
.pf-art p { margin: 14px 0 22px; color: #7c5e4f; }
.pf-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pf-frames i { display: block; padding: 12px; background: #fff; box-shadow: 0 18px 30px -18px rgba(91, 44, 26, .5); }
.pf-frames i b { display: block; height: 200px; }
.pf-frames .f1 b { background: radial-gradient(circle at 70% 30%, #f4a261 0 16%, transparent 17%), linear-gradient(180deg, #264653 0 55%, #2a9d8f 55% 70%, #e9c46a 70%); }
.pf-frames .f2 b { background: radial-gradient(ellipse at 30% 70%, #e76f51 0 30%, transparent 31%), radial-gradient(ellipse at 70% 30%, #f4a261 0 25%, transparent 26%), #fdf0d5; }
.pf-frames .f3 b { background: repeating-linear-gradient(45deg, #5b2c1a 0 10px, #e76f51 10px 20px, #f4a261 20px 30px); }
.pf-frames .f4 b { background: radial-gradient(circle at 50% 50%, #fff 0 12%, #e9c46a 13% 30%, #e76f51 31% 50%, #264653 51%); }
.pf-frames .f2, .pf-frames .f4 { transform: translateY(26px); }
.ui.on .pf-frames i { animation: pf-hang 1s var(--spring) backwards; } .ui.on .pf-frames .f2 { animation-delay: .12s; } .ui.on .pf-frames .f3 { animation-delay: .24s; } .ui.on .pf-frames .f4 { animation-delay: .36s; }
@keyframes pf-hang { from { opacity: 0; translate: 0 -30px; rotate: -4deg; } }

/* doctors & consultants: clean and trusted */
.pf-doctor { --b: #0b4f6c; --a: #20bf55; background: linear-gradient(160deg, #f0f9ff, #fff 60%); }
.pf-doctor .u-nav { background: transparent; }
.pf-doctor .pf-mark i { width: 26px; height: 26px; border-radius: 8px; background: #20bf55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; }
.pf-doctor .u-btn { background: var(--a); color: #fff; }
.pf-doc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 30px 40px; }
.pf-doc-card { display: grid; justify-items: center; text-align: center; padding: 30px; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -32px rgba(11, 79, 108, .5); }
.pf-doc-ava { width: 120px; height: 120px; margin-bottom: 16px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0b4f6c, #01baef); color: #fff; font-size: 38px; font-weight: 800; box-shadow: 0 0 0 8px #e0f2fe; }
.pf-doc-card h4 { font-size: 28px; } .pf-doc-card p { margin-top: 4px; color: #64748b; }
.pf-doc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 22px; font-size: 12px; color: #64748b; }
.pf-doc-stats span { padding: 12px 6px; border-radius: 14px; background: #f0f9ff; } .pf-doc-stats b { display: block; color: var(--b); font-size: 20px; }
.pf-doc-side { display: grid; gap: 12px; align-content: start; color: var(--b); }
.pf-doc-side > b { font-size: 15px; margin-top: 6px; }
.pf-doctor .pf-chips span { opacity: 1; border-color: #bae6fd; background: #f0f9ff; color: var(--b); }
.pf-time { display: flex; justify-content: space-between; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #e0f2fe; font-size: 14px; font-weight: 600; }
.ui.on .pf-doc-card { animation: u-pop .9s var(--spring) backwards; } .ui.on .pf-doc-side > * { animation: u-up .7s var(--ease) backwards; animation-delay: .3s; }

/* freelancers & professionals */
.pf-free { --b: #0f172a; --a: #38bdf8; background: #0f172a; color: #cbd5e1; }
.pf-free-in { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; height: 100%; padding: 0 44px; }
.pf-photo { display: block; width: 130px; height: 130px; margin-bottom: 20px; border-radius: 50%; box-shadow: 0 0 0 6px rgba(56, 189, 248, .25); }
.pf-free h4 { color: #fff; font-size: 40px; } .pf-free h4 em { color: var(--a); }
.pf-free-left p { margin: 12px 0 22px; color: #94a3b8; }
.pf-ctas { display: flex; gap: 10px; }
.pf-free .u-btn { color: #0f172a; } .pf-free .u-btn.ghost { color: #fff; border-color: #475569; }
.pf-free-right { display: grid; gap: 12px; padding: 26px; border-radius: 22px; background: #1e293b; }
.pf-free-right > b { color: #fff; }
.pf-skill { display: grid; gap: 6px; font-size: 13px; }
.pf-skill i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--a) calc(var(--v) * 100%), #334155 0); }
.ui.on .pf-skill i { animation: pf-bar 1.4s var(--ease-io) backwards .3s; }
@keyframes pf-bar { from { background: linear-gradient(90deg, var(--a) 0%, #334155 0); clip-path: inset(0 100% 0 0 round 4px); } to { clip-path: inset(0 0 0 0 round 4px); } }
.pf-proj { display: grid; gap: 8px; }
.pf-proj span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #0f172a; font-size: 13.5px; color: #e2e8f0; }
.pf-proj i { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--a), #6366f1); }

/* enquiries inbox (on the laptop) */
.pf-inbox { --b: #14213d; --a: #fca311; background: #f5f6fa; }
.pf-inbox-in { padding: 34px 40px; }
.pf-inbox-h { display: flex; align-items: center; gap: 14px; font-size: 34px; color: var(--b); margin-bottom: 16px; }
.pf-inbox-h em { padding: 6px 14px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 16px; font-style: normal; }
.pf-inbox p { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px; margin-bottom: 12px; padding: 16px 20px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .3); }
.pf-inbox p > i { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #e8edf7; color: var(--b); font-style: normal; font-size: 22px; font-weight: 800; }
.pf-inbox p b { display: block; font-size: 22px; color: #111827; } .pf-inbox p small { font-size: 17px; }
.pf-inbox p em { padding: 6px 14px; border-radius: 99px; background: #fff4dd; color: #b45309; font-size: 16px; font-style: normal; font-weight: 700; }
.pf-inbox p em.ok { background: #dcfce7; color: #166534; }
.pf-inbox p.new { animation: u-new 2.4s var(--ease) 1s infinite alternate; }
.pf-views { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 16px 20px; border-radius: 16px; background: var(--b); color: rgba(255, 255, 255, .7); font-size: 16px; }
.pf-views b { color: #fff; font-size: 30px; }
.pf-views .u-bars { grid-column: span 2; height: 60px; margin-top: 8px; }

/* ------------------------------------------------ Moments (celebration) sample screens */
.scene-chip i.heart { background: linear-gradient(135deg, #ff5c8a, #ff9a76); position: relative; }
.scene-chip i.heart::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.3a4.3 4.3 0 0 1 7.5 2.5C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E") center / 22px no-repeat; }
.mo-script { font-family: var(--script); font-size: 46px; line-height: 1.1; color: var(--a); }
.mo-small { font-size: 12px; font-weight: 750; letter-spacing: .24em; color: var(--a); }
.mo-from { margin-top: 10px; font-size: 15px; opacity: .85; }
.mo-photo { position: relative; display: block; width: 170px; height: 170px; margin: 0 auto 14px; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 0 0 14px rgba(255, 255, 255, .2), 0 30px 50px -20px rgba(0, 0, 0, .5); }
.mo-photo em { position: absolute; right: -10px; bottom: 6px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #ffd166; color: #7a2048; font-size: 24px; font-style: normal; font-weight: 900; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .4); }
.mo-photo.sm { width: 120px; height: 120px; margin: 0; }
.ui.on .mo-photo { animation: mo-pop 1s var(--spring) backwards; }
@keyframes mo-pop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.mo-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mo-confetti b { position: absolute; top: -20px; width: 12px; height: 16px; border-radius: 3px; animation: mo-fall 4.5s linear infinite; }
.mo-confetti b:nth-child(1) { left: 6%; background: #ffd166; } .mo-confetti b:nth-child(2) { left: 16%; background: #ef476f; animation-delay: .8s; } .mo-confetti b:nth-child(3) { left: 28%; background: #06d6a0; animation-delay: 1.9s; }
.mo-confetti b:nth-child(4) { left: 40%; background: #fff; animation-delay: 2.6s; } .mo-confetti b:nth-child(5) { left: 52%; background: #ffd166; animation-delay: .4s; } .mo-confetti b:nth-child(6) { left: 63%; background: #118ab2; animation-delay: 3.1s; }
.mo-confetti b:nth-child(7) { left: 72%; background: #ef476f; animation-delay: 1.3s; } .mo-confetti b:nth-child(8) { left: 81%; background: #06d6a0; animation-delay: 2.2s; } .mo-confetti b:nth-child(9) { left: 89%; background: #fff; animation-delay: .1s; } .mo-confetti b:nth-child(10) { left: 96%; background: #ffd166; animation-delay: 3.6s; }
@keyframes mo-fall { to { transform: translateY(760px) rotate(720deg); } }

/* birthday */
.mo-bday { --a: #ffd166; background: radial-gradient(circle at 50% 35%, #c2185b 0%, #7a2048 55%, #3d0f2b 100%); color: #ffe4ef; }
.mo-bday-in { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; height: 100%; text-align: center; }
.mo-bday h4 { color: #fff; font-family: var(--serif); font-size: 84px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.mo-btns { display: flex; gap: 12px; margin-top: 22px; }
.mo-bday .u-btn { background: #ffd166; color: #5a1238; } .mo-bday .u-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.ui.on .mo-bday-in > :not(.mo-photo) { animation: u-up .9s var(--ease) backwards; }
.ui.on .mo-bday-in > :nth-child(2) { animation-delay: .3s; } .ui.on .mo-bday-in > :nth-child(3) { animation-delay: .45s; } .ui.on .mo-bday-in > :nth-child(4) { animation-delay: .6s; } .ui.on .mo-bday-in > :nth-child(5) { animation-delay: .75s; }
.mo-balloon { position: absolute; z-index: 1; width: 90px; height: 110px; border-radius: 50% 50% 48% 52% / 55% 55% 45% 45%; animation: mo-rise 7s ease-in-out infinite; }
.mo-balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 120px; background: rgba(255, 255, 255, .45); }
.mo-balloon.b1 { left: 60px; top: 90px; background: radial-gradient(circle at 35% 30%, #ffe08a, #f4a300); }
.mo-balloon.b2 { left: 170px; top: 300px; width: 70px; height: 86px; background: radial-gradient(circle at 35% 30%, #ff9ab9, #e0336b); animation-delay: -2s; }
.mo-balloon.b3 { right: 70px; top: 70px; background: radial-gradient(circle at 35% 30%, #a0e7ff, #2a9fd6); animation-delay: -4s; }
.mo-balloon.b4 { right: 180px; top: 330px; width: 70px; height: 86px; background: radial-gradient(circle at 35% 30%, #fff, #e8c9ff); animation-delay: -1s; }
@keyframes mo-rise { 50% { transform: translateY(-22px) rotate(4deg); } }

/* anniversary */
.mo-anniv { --a: #b8860b; background: linear-gradient(160deg, #fffaf0, #f7ecd9); color: #5c4320; }
.mo-anniv-in { display: grid; justify-items: center; align-content: center; height: 100%; text-align: center; }
.mo-duo { display: flex; align-items: center; margin-bottom: 14px; }
.mo-duo i { width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 0 6px #fff, 0 20px 40px -20px rgba(92, 67, 32, .6); }
.mo-duo b { position: relative; z-index: 1; margin: 0 -18px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #e63946; color: #fff; font-size: 24px; box-shadow: 0 8px 18px -6px rgba(230, 57, 70, .6); }
.ui.on .mo-duo i:first-child { animation: mo-left 1s var(--ease) backwards; } .ui.on .mo-duo i:last-child { animation: mo-right 1s var(--ease) backwards; }
.ui.on .mo-duo b { animation: mo-beat 1.2s ease-in-out .9s infinite; }
@keyframes mo-left { from { transform: translateX(-80px); opacity: 0; } }
@keyframes mo-right { from { transform: translateX(80px); opacity: 0; } }
@keyframes mo-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(1); } 60% { transform: scale(1.12); } }
.mo-anniv h4 { font-family: var(--serif); font-size: 58px; color: #3d2b12; }
.mo-time { position: relative; display: grid; grid-template-columns: repeat(4, 150px); margin-top: 26px; font-size: 13px; }
.mo-time::before { content: ""; position: absolute; left: 75px; right: 75px; top: 9px; height: 2px; background: #d9b56b; transform-origin: 0 50%; }
.ui.on .mo-time::before { animation: u-line 1.6s var(--ease-io) .5s backwards; }
.mo-time span { position: relative; display: grid; justify-items: center; gap: 4px; padding-top: 26px; }
.mo-time span::before { content: ""; position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fffaf0; border: 3px solid var(--a); }
.mo-time b { color: #3d2b12; font-size: 18px; }

/* wedding */
.mo-wed { --a: #e9c46a; background: radial-gradient(circle at 50% 0%, #7b1e2b, #3d0b14 75%); color: #f6e7c8; }
.mo-wed::before, .mo-wed::after { content: ""; position: absolute; top: 24px; bottom: 24px; width: 120px; border: 2px solid rgba(233, 196, 106, .45); }
.mo-wed::before { left: 24px; border-right: 0; border-radius: 60px 0 0 60px; } .mo-wed::after { right: 24px; border-left: 0; border-radius: 0 60px 60px 0; }
.mo-wed-in { display: grid; justify-items: center; align-content: center; gap: 6px; height: 100%; text-align: center; }
.mo-wed .mo-script { font-size: 64px; color: #fff; } .mo-wed .mo-script em { font-style: normal; color: var(--a); font-size: 40px; }
.mo-date { color: var(--a); font-size: 17px; font-weight: 650; letter-spacing: .1em; }
.mo-count { display: flex; gap: 12px; margin: 16px 0 10px; }
.mo-count span { width: 92px; padding: 12px 0; border-radius: 14px; border: 1px solid rgba(233, 196, 106, .45); background: rgba(255, 255, 255, .06); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.mo-count b { display: block; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: 0; }
.mo-count .tick { animation: mo-tick 1s steps(1) infinite; }
@keyframes mo-tick { 50% { opacity: .55; } }
.mo-events { display: flex; gap: 10px; margin: 6px 0 16px; }
.mo-events span { padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .25); font-size: 12px; }
.mo-events b { display: block; color: var(--a); font-size: 15px; }
.mo-wed .u-btn { background: var(--a); color: #3d0b14; padding: 12px 30px; }
.ui.on .mo-wed-in > * { animation: u-up .9s var(--ease) backwards; }
.ui.on .mo-wed-in > :nth-child(2) { animation-delay: .15s; } .ui.on .mo-wed-in > :nth-child(3) { animation-delay: .3s; } .ui.on .mo-wed-in > :nth-child(4) { animation-delay: .45s; } .ui.on .mo-wed-in > :nth-child(5) { animation-delay: .6s; } .ui.on .mo-wed-in > :nth-child(6) { animation-delay: .75s; }

/* new baby */
.mo-baby { --a: #4f8fd8; background: linear-gradient(180deg, #dff0ff, #fff1e8); color: #335; }
.mo-baby-in { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; height: 100%; text-align: center; }
.mo-baby h4 { font-family: var(--serif); font-size: 90px; color: #2c5d99; }
.mo-facts { display: flex; gap: 14px; margin-top: 18px; }
.mo-facts span { width: 130px; padding: 14px 0; border-radius: 18px; background: #fff; font-size: 12px; color: #667; box-shadow: 0 12px 30px -18px rgba(44, 93, 153, .5); }
.mo-facts b { display: block; color: #2c5d99; font-size: 20px; }
.ui.on .mo-facts span { animation: u-pop .8s var(--spring) backwards; } .ui.on .mo-facts span:nth-child(1) { animation-delay: .5s; } .ui.on .mo-facts span:nth-child(2) { animation-delay: .62s; } .ui.on .mo-facts span:nth-child(3) { animation-delay: .74s; }
.mo-cloud { position: absolute; width: 180px; height: 60px; border-radius: 60px; background: #fff; opacity: .9; animation: mo-drift 16s linear infinite; }
.mo-cloud::before { content: ""; position: absolute; left: 40px; top: -34px; width: 80px; height: 80px; border-radius: 50%; background: #fff; }
.mo-cloud.c1 { top: 70px; left: -40px; } .mo-cloud.c2 { top: 420px; left: 760px; transform: scale(.8); animation-duration: 22s; animation-direction: reverse; }
@keyframes mo-drift { 50% { translate: 80px 0; } }
.mo-star { position: absolute; width: 18px; height: 18px; background: #ffd166; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: mo-twinkle 2.4s ease-in-out infinite; }
.mo-star.s1 { left: 180px; top: 200px; } .mo-star.s2 { left: 840px; top: 140px; animation-delay: .6s; } .mo-star.s3 { left: 260px; top: 470px; animation-delay: 1.2s; } .mo-star.s4 { left: 780px; top: 330px; animation-delay: 1.8s; }
@keyframes mo-twinkle { 50% { transform: scale(.4) rotate(40deg); opacity: .4; } }

/* farewell */
.mo-fare { --a: #e9c46a; background: linear-gradient(150deg, #13294b, #0b1a33); color: #c9d4e8; }
.mo-fare-in { padding: 50px 60px; }
.mo-fare-head { display: flex; align-items: center; gap: 26px; }
.mo-fare h4 { margin: 6px 0; color: #fff; font-family: var(--serif); font-size: 42px; }
.mo-notes { display: grid; gap: 14px; margin-top: 34px; }
.mo-notes p { padding: 18px 22px; border-radius: 16px; background: rgba(255, 255, 255, .07); border-left: 4px solid var(--a); }
.mo-notes b { display: block; color: #fff; font-family: var(--serif); font-size: 19px; font-style: italic; font-weight: 500; }
.mo-notes small { color: var(--a); }
.ui.on .mo-notes p { animation: mo-slide .8s var(--ease) backwards; } .ui.on .mo-notes p:nth-child(2) { animation-delay: .2s; } .ui.on .mo-notes p:nth-child(3) { animation-delay: .4s; }
@keyframes mo-slide { from { opacity: 0; transform: translateX(60px); } }

/* memories (polaroids) */
.mo-mem { --a: #c2185b; background: #fff5f8 radial-gradient(circle at 20% 20%, #ffe0ec, transparent 50%); text-align: center; padding-top: 40px; }
.mo-polaroids { display: flex; justify-content: center; gap: 4px; margin-top: 40px; }
.mo-polaroids i { display: block; width: 190px; height: 250px; padding: 12px 12px 46px; background-clip: content-box; background-color: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); transform: rotate(var(--r)); position: relative; border: 12px solid #fff; border-bottom-width: 46px; padding: 0; }
.mo-polaroids b { position: absolute; left: 0; right: 0; bottom: -38px; font-family: var(--script); font-size: 20px; font-weight: 400; color: #444; }
.ui.on .mo-polaroids i { animation: mo-drop .9s var(--spring) backwards; }
.ui.on .mo-polaroids i:nth-child(2) { animation-delay: .15s; } .ui.on .mo-polaroids i:nth-child(3) { animation-delay: .3s; } .ui.on .mo-polaroids i:nth-child(4) { animation-delay: .45s; } .ui.on .mo-polaroids i:nth-child(5) { animation-delay: .6s; }
@keyframes mo-drop { from { opacity: 0; translate: 0 -120px; rotate: 20deg; } }

/* wishes wall */
.mo-wish { --a: #c2185b; background: linear-gradient(160deg, #fff0f5, #fff8ee); text-align: center; padding: 40px 60px; }
.mo-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; text-align: left; }
.mo-wall p { padding: 20px 22px; border-radius: 18px; background: #fff; box-shadow: 0 16px 30px -22px rgba(194, 24, 91, .6); }
.mo-wall b { display: block; color: #3a1a2a; font-size: 18px; } .mo-wall small { color: var(--a); font-size: 14px; }
.ui.on .mo-wall p { animation: u-pop .8s var(--spring) backwards; } .ui.on .mo-wall p:nth-child(2) { animation-delay: .25s; } .ui.on .mo-wall p:nth-child(3) { animation-delay: .5s; } .ui.on .mo-wall p:nth-child(4) { animation-delay: .75s; }
.mo-heart { position: absolute; bottom: -30px; color: #ff4d7d; font-size: 28px; font-style: normal; animation: mo-float 5s ease-in infinite; }
.mo-heart.h1 { left: 10%; } .mo-heart.h2 { left: 35%; animation-delay: 1.4s; font-size: 20px; } .mo-heart.h3 { left: 70%; animation-delay: 2.5s; } .mo-heart.h4 { left: 90%; animation-delay: 3.4s; font-size: 22px; }
@keyframes mo-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-720px) scale(1.2); opacity: 0; } }

/* phone (300×672) */
.mo-phone .m-slide { padding: 40px 18px 20px; text-align: center; }
.mo-m1 { background: radial-gradient(circle at 50% 30%, #c2185b, #5a1238 80%); color: #fff; --a: #ffd166; }
.mo-m1 .mo-photo { width: 150px; height: 150px; margin-top: 60px; }
.mo-m1 .mo-photo em { width: 46px; height: 46px; font-size: 20px; }
.mo-m1 .mo-script { margin-top: 20px; font-size: 38px; }
.mo-name { display: block; font-family: var(--serif); font-size: 60px; line-height: 1; }
.mo-live { display: inline-block; margin-top: 30px; padding: 7px 14px; border-radius: 99px; background: rgba(0, 0, 0, .3); font-size: 12px; font-weight: 700; }
.m-slide.on .mo-live { animation: mo-tick 1.6s steps(1) infinite; }
.mo-m2 { background: #fff5f8; }
.mo-mh { display: block; margin: 14px 0 20px; color: #5a1238; font-size: 22px; }
.mo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mo-grid i { height: 170px; border-radius: 14px; background: #ddd var(--img) center / cover; }
.m-slide.on .mo-grid i { animation: u-pop .7s var(--spring) backwards; } .m-slide.on .mo-grid i:nth-child(2) { animation-delay: .15s; } .m-slide.on .mo-grid i:nth-child(3) { animation-delay: .3s; } .m-slide.on .mo-grid i:nth-child(4) { animation-delay: .45s; }
.mo-badge { display: inline-block; margin-top: 18px; padding: 8px 16px; border-radius: 99px; background: #c2185b; color: #fff; font-size: 13px; font-weight: 700; }
.mo-m3 { background: linear-gradient(180deg, #fff0f5, #fff); }
.mo-m3 .mo-mh { margin-top: 70px; }
.mo-in { height: auto; min-height: 90px; align-items: flex-start; padding: 12px; text-align: left; }
.mo-in i { white-space: normal; font-size: 15px; line-height: 1.4; }
.m-slide.on .mo-in i { animation: u-type 1.6s steps(20) .4s forwards; }
.mo-m3 .u-btn { background: #c2185b; color: #fff; margin-top: 8px; }
.m-slide.on .mo-m3 .u-btn, .mo-m3.on .u-btn { animation: u-press .4s 2.2s; }
.mo-sent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: linear-gradient(180deg, #fff0f5, #fff); opacity: 0; overflow: hidden; }
.mo-sent b { color: #c2185b; font-size: 26px; } .mo-sent small { color: #666; font-size: 14px; }
.m-slide.on .mo-sent { animation: u-show .5s 2.6s forwards; }
.mo-sent .mo-heart { font-size: 34px; }

/* ------------------------------------------------ online store */
/* our logo on the back of the laptop lid, and a live order feed beside the couple */
.lid-logo { position: absolute; left: 700px; top: 600px; width: 200px; display: grid; justify-items: center; gap: 10px; transform: skewX(6deg); opacity: .92; }
.lid-logo img:first-child { width: 110px; filter: drop-shadow(0 0 18px rgba(0, 163, 212, .55)); animation: lid-glow 3.6s ease-in-out infinite; }
.lid-logo img:last-child { width: 170px; opacity: .8; }
@keyframes lid-glow { 50% { filter: drop-shadow(0 0 34px rgba(0, 163, 212, .9)); } }
.ord-feed { position: absolute; left: 1235px; top: 70px; z-index: 3; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ord-feed li { display: flex; align-items: center; gap: 16px; width: 400px; padding: 14px 20px 14px 14px; border-radius: 20px; background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -26px rgba(11, 20, 48, .6); opacity: 0; }
.ord-feed i { flex: none; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #fff4dd; font-size: 26px; font-style: normal; }
.ord-feed b { display: block; color: var(--ink); font-size: 22px; letter-spacing: -.02em; }
.ord-feed small { display: block; color: var(--muted); font-size: 17px; }
.scene.in .ord-feed li { animation: feed 11s var(--ease) calc(var(--intro) + 2s + var(--n) * 1.1s) infinite; }
@keyframes feed { 0% { opacity: 0; transform: translate(-120px, 60px) scale(.7); } 6%, 72% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-30px); } }
.scene-chip i.up { background: linear-gradient(135deg, #22c55e, #16a34a); position: relative; }
.scene-chip i.up::after { content: "↑"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 800; font-style: normal; }
.sales-chip b { font-size: 30px; font-variant-numeric: tabular-nums; }

.st-ui { --b: #2f3e2e; --a: #e0a526; }
.st-cart { position: relative; font-size: 22px; }
.st-cart em { position: absolute; right: -10px; top: -6px; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; background: #e0a526; color: #2f3e2e; font-size: 11px; font-style: normal; font-weight: 800; }
.ui.on .st-bump em { animation: st-bump .5s var(--spring) 2.2s; }
@keyframes st-bump { 50% { transform: scale(1.6); } }
.ui .st-banner { position: relative; display: flex; align-items: center; height: 300px; margin: 0; padding: 0 40px; background: linear-gradient(90deg, #f6efe3 44%, rgba(246, 239, 227, 0) 70%), var(--img) right center / 56% auto no-repeat, #f6efe3; }
.st-banner > div { position: relative; z-index: 1; }
.st-banner small { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 750; letter-spacing: .18em; color: #b07d12; }
.st-banner h4 { color: var(--b); font-size: 34px; } .st-banner h4 em { color: #b07d12; }
.st-banner .u-btn { margin-top: 18px; background: var(--b); color: #fff; }
.st-free { position: absolute; z-index: 1; right: 20px; bottom: 16px; padding: 8px 14px; border-radius: 99px; background: #fff; font-size: 12.5px; font-weight: 700; color: var(--b); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .3); }
.ui.on .st-banner > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .st-banner h4 { animation-delay: .1s; } .ui.on .st-banner .u-btn { animation-delay: .2s; }
.st-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 20px 32px; }
.st-row span { display: grid; grid-template-columns: 1fr auto; padding: 10px 10px 12px; border-radius: 14px; border: 1px solid #eee7da; }
.st-row i { grid-column: span 2; height: 130px; margin-bottom: 10px; border-radius: 10px; }
.st-row b { grid-column: span 2; color: var(--b); font-size: 14.5px; } .st-row small { grid-column: span 2; color: #e0a526; font-size: 11.5px; }
.st-row em { align-self: center; font-style: normal; font-weight: 800; color: #111; }
.st-row u { padding: 6px 14px; border-radius: 99px; background: var(--b); color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; }
.ui.on .st-row span { animation: u-pop .7s var(--spring) backwards; } .ui.on .st-row span:nth-child(2) { animation-delay: .08s; } .ui.on .st-row span:nth-child(3) { animation-delay: .16s; } .ui.on .st-row span:nth-child(4) { animation-delay: .24s; }

.st-prod { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 28px 36px; }
.st-gal { display: grid; gap: 10px; } .st-gal .big { height: 380px; border-radius: 16px; } .st-gal div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .st-gal div i { height: 100px; border-radius: 12px; }
.ui.on .st-gal .big { animation: pf-in 1s var(--ease) backwards; }
.st-info { position: relative; }
.st-info small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #b07d12; }
.st-info h4 { margin: 6px 0; font-size: 34px; }
.st-stars { color: #e0a526; } .st-stars span { color: #6b7280; font-size: 13px; }
.st-price { margin: 12px 0; font-size: 28px; font-weight: 800; color: #111; } .st-price s { color: #9ca3af; font-size: 18px; font-weight: 500; } .st-price em { color: #16a34a; font-size: 15px; font-style: normal; }
.st-sizes { display: flex; gap: 10px; } .st-sizes span { padding: 9px 16px; border-radius: 12px; border: 1.5px solid #e5e7eb; font-weight: 650; font-size: 14px; } .st-sizes .on { border-color: var(--b); background: #f1f5ef; }
.st-buy { display: flex; gap: 10px; margin: 22px 0 14px; } .st-buy .u-btn { padding: 14px 28px; font-size: 14px; } .st-add { background: var(--b); color: #fff; }
.ui.on .st-add { animation: u-press .4s 2s; }
.st-note { color: #4b5563; font-size: 13px; }
.st-toast { position: absolute; right: 0; top: 0; padding: 10px 16px; border-radius: 12px; background: #16a34a; color: #fff; font-size: 13px; font-weight: 700; opacity: 0; }
.ui.on .st-toast { animation: st-toast 2.6s var(--ease) 2.2s forwards; }
@keyframes st-toast { 0% { opacity: 0; transform: translateY(-10px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.st-steps { display: flex; gap: 6px; margin-left: auto; font-size: 13px; font-weight: 650; color: #9ca3af; }
.st-steps span { padding: 6px 14px; border-radius: 99px; background: #f3f4f6; } .st-steps .done { background: #e8f5e9; color: #2e7d32; } .st-steps .on { background: var(--b); color: #fff; }
.st-secure { font-size: 13px; font-weight: 700; color: #16a34a; }
.st-check { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 28px 36px; background: #faf8f4; height: 590px; }
.st-pay, .st-sum { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.st-pay > b, .st-sum > b { color: var(--b); font-size: 16px; }
.st-pay > span:not(.u-btn) { padding: 13px 14px; border-radius: 12px; border: 1.5px solid #e5e7eb; font-size: 14px; font-weight: 650; }
.st-pay > span small { display: block; color: #6b7280; font-weight: 500; }
.st-pay > span.on { border-color: var(--a); background: #fff8e6; }
.st-pay .u-btn { margin-top: 6px; background: var(--b); color: #fff; padding: 14px; font-size: 14px; }
.ui.on .st-pay .u-btn { animation: u-press .4s 1.8s; }
.st-sum p { display: flex; align-items: center; gap: 12px; font-size: 14px; } .st-sum p i { width: 50px; height: 50px; border-radius: 10px; } .st-sum p span { flex: 1; } .st-sum p em { font-style: normal; font-weight: 700; }
.st-line { padding-top: 10px; border-top: 1px dashed #e5e7eb; } .st-line.tot { font-size: 17px; } .st-line.tot em { color: var(--b); font-size: 20px; }
.st-ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: rgba(250, 248, 244, .97); opacity: 0; }
.st-ok i, .st-m-ok i { width: 80px; height: 80px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 42px no-repeat; }
.st-ok b { margin-top: 10px; color: var(--b); font-size: 26px; }
.ui.on .st-ok { animation: u-show .5s 2.2s forwards; } .ui.on .st-ok i { animation: u-pop .7s var(--spring) 2.3s backwards; }

.st-track { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; padding: 28px 36px; }
.st-map { position: relative; height: 380px; border-radius: 18px; background: #eef3ec linear-gradient(rgba(47, 62, 46, .06) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, rgba(47, 62, 46, .06) 1px, transparent 1px) 0 0 / 30px 30px; overflow: hidden; }
.st-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-map path { fill: none; stroke-width: 10; stroke-linecap: round; }
.st-map .road { stroke: #d4dccf; } .st-map .done { stroke: #e0a526; stroke-dasharray: 700; stroke-dashoffset: 700; }
.ui.on .st-map .done { animation: st-route 3.4s var(--ease-io) .4s forwards; }
@keyframes st-route { to { stroke-dashoffset: 260; } }
.st-pin { position: absolute; font-size: 30px; font-style: normal; } .st-pin.a { left: 18px; top: 296px; } .st-pin.b { right: 18px; top: 40px; }
.st-truck { position: absolute; left: 0; top: 0; font-size: 34px; font-style: normal; offset-path: path("M40 300 C 160 300, 140 120, 280 160 S 420 60, 520 70"); offset-rotate: 0deg; offset-distance: 0%; }
.ui.on .st-truck { animation: st-drive 3.4s var(--ease-io) .4s forwards; }
@keyframes st-drive { to { offset-distance: 62%; } }
.st-status small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #b07d12; }
.st-status h4 { margin: 8px 0 18px; font-size: 32px; } .st-status h4 em { color: #b07d12; }
.st-status p { position: relative; display: grid; padding: 0 0 18px 34px; font-weight: 650; color: #111; }
.st-status p::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: #e5e7eb; } .st-status p:last-child::before { display: none; }
.st-status p i { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #e5e7eb; background: #fff; }
.st-status p.done i { border-color: #22c55e; background: #22c55e; } .st-status p.now i { border-color: var(--a); animation: u-pulse 1.6s infinite; box-shadow: 0 0 0 0 rgba(224, 165, 38, .7); }
.st-status p small { color: #6b7280; font-weight: 500; letter-spacing: 0; font-size: 12.5px; }

.st-admin { --b: #2f3e2e; --a: #e0a526; }
.st-stock { padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .25); }
.st-stock p { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f2f6; font-size: 13px; color: #6b7280; }
.st-stock p i { width: 42px; height: 42px; border-radius: 10px; } .st-stock p span { flex: 1; } .st-stock p b { display: block; color: #111; font-size: 14px; }
.st-stock p em { padding: 5px 12px; border-radius: 99px; background: #fee2e2; color: #b91c1c; font-size: 11.5px; font-style: normal; font-weight: 700; }
.st-stock p.ok em { background: #dcfce7; color: #166534; }
.ui.on .st-stock p:not(.ok) em { animation: mo-tick 1.4s steps(1) infinite; }

.st-sale { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; padding: 34px 40px; background: linear-gradient(120deg, #2f3e2e, #46603f); color: #e8efe3; }
.st-sale small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #e0a526; }
.st-timer { display: flex; gap: 10px; margin: 12px 0 16px; }
.st-timer span { width: 74px; padding: 10px 0; border-radius: 12px; background: rgba(255, 255, 255, .1); text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.st-timer b { display: block; color: #fff; font-size: 26px; letter-spacing: 0; }
.st-timer .tick { animation: mo-tick 1s steps(1) infinite; }
.st-sale h4 { color: #fff; font-size: 34px; } .st-sale h4 em { color: #e0a526; }
.st-coupon { position: relative; display: grid; justify-items: center; gap: 4px; padding: 24px; border-radius: 18px; border: 2px dashed #e0a526; background: rgba(224, 165, 38, .1); }
.st-coupon b { color: #fff; font-size: 30px; letter-spacing: .12em; } .st-coupon span { font-size: 13px; }
.st-copy { position: absolute; top: -14px; padding: 6px 12px; border-radius: 99px; background: #22c55e; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; opacity: 0; }
.ui.on .st-copy { animation: st-toast 2.4s var(--ease) 1.6s forwards; }
.st-combos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px 40px; }
.st-combos span { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border-radius: 16px; border: 1px solid #eee7da; }
.st-combos i { height: 110px; border-radius: 10px; } .st-combos b { grid-column: span 2; color: var(--b); } .st-combos em { grid-column: span 2; font-style: normal; font-weight: 800; } .st-combos s { color: #9ca3af; font-weight: 500; }
.ui.on .st-combos span { animation: u-up .7s var(--ease) backwards; } .ui.on .st-combos span:nth-child(2) { animation-delay: .1s; } .ui.on .st-combos span:nth-child(3) { animation-delay: .2s; }

/* store phone (300×640) */
.st-phone { --b: #2f3e2e; --a: #e0a526; }
.st-phone .m-slide { padding: 30px 16px 16px; }
.st-m1 .st-m-img { display: block; height: 250px; margin: 0 -16px 14px; background: #eee var(--img) center / cover; }
.st-m1 > b { display: block; color: var(--b); font-size: 20px; }
.st-m1 .st-price { margin: 6px 0 12px; font-size: 22px; }
.st-m1 .u-btn, .st-m2 .u-btn { background: var(--b); color: #fff; }
.st-m1 .m-tap { left: 50%; top: 455px; }
.st-mh { display: block; margin: 20px 0 14px; color: var(--b); font-size: 22px; }
.st-upi { display: block; margin-bottom: 10px; padding: 14px; border-radius: 12px; border: 1.5px solid #e5e7eb; font-weight: 650; }
.st-upi.on { border-color: var(--a); background: #fff8e6; }
.m-slide.on .st-m2 .u-btn, .st-m2.on .u-btn { animation: u-press .4s 1.6s; }
.st-m-ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: #fff; opacity: 0; }
.st-m-ok b { margin-top: 8px; color: var(--b); font-size: 24px; }
.st-m2.on .st-m-ok { animation: u-show .5s 2s forwards; }
.st-m3 { display: grid; justify-items: center; align-content: center; text-align: center; background: linear-gradient(180deg, #fff8e6, #fff); }
.st-m-box { font-size: 80px; font-style: normal; }
.st-m3.on .st-m-box { animation: mo-pop .9s var(--spring) backwards; }
.st-rate { margin: 14px 0; font-size: 15px; font-weight: 700; color: #b7791f; }

@keyframes st-stars { from { color: #e5e7eb; } to { color: #e0a526; } }
.st-m-review { padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .3); font-size: 14px; font-style: italic; opacity: 0; }
.st-m3.on .st-m-review { animation: u-show .5s 2s forwards; }
.st-chips li { width: 360px; }
.st-chips b { font-size: 21px; } .st-chips small { font-size: 16px; }

/* ------------------------------------------------ real estate */
.tv-powered { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 99px; background: rgba(255, 255, 255, .94); font-size: 17px; font-weight: 650; color: var(--muted); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); opacity: 0; }
.tv-powered img { height: 35px; width: auto; }
.scene.in .tv-powered { animation: chip-in .9s var(--spring) calc(var(--intro) + 1.2s) forwards; }
.lid-logo.lid-sm { width: 200px; transform: none; }
.lid-sm img:first-child { width: 100px; }
.feed-slots li { position: absolute; left: 0; width: 380px; }
.feed-slots li:nth-child(even) { top: 96px; } .feed-slots li:nth-child(odd) { top: 0; }
.scene.in .feed-slots li { animation: feed-slot 8s var(--ease) calc(var(--intro) + 2s + var(--n) * 2s) infinite; }
@keyframes feed-slot { 0% { opacity: 0; transform: translateY(20px) scale(.9); } 6%, 44% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-16px); } }
.tap-ring { position: absolute; z-index: 2; width: 90px; height: 90px; margin: -45px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 6px rgba(0, 163, 212, .5); opacity: 0; }
.scene.in .tap-ring { animation: tap-ring 6s var(--ease) 1.4s infinite; }
@keyframes tap-ring { 0% { opacity: 0; transform: scale(.4); } 6% { opacity: 1; } 16%, 100% { opacity: 0; transform: scale(1.5); } }
.tab-toast { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; width: 280px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55); opacity: 0; }
.tab-toast i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 22px no-repeat; }
.tab-toast b { display: block; color: var(--ink); font-size: 18px; } .tab-toast small { display: block; color: var(--muted); font-size: 13px; }
.scene.in .tab-toast { animation: tab-toast 6s var(--ease) 1.4s infinite; }
@keyframes tab-toast { 0%, 8% { opacity: 0; transform: translateY(16px) scale(.9); } 14%, 78% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; } }
.re-chips li { width: 360px; } .re-chips b { font-size: 21px; } .re-chips small { font-size: 16px; }

.re-ui { --b: #123a5c; --a: #f2b705; }
.re-ui .u-btn { background: #1f9d55; color: #fff; }
.re-ui .u-btn.ghost { background: transparent; color: var(--b); }
.ui .re-hero { display: flex; align-items: center; height: 330px; padding: 0 40px; background: linear-gradient(90deg, rgba(10, 30, 50, .88) 30%, rgba(10, 30, 50, .1) 75%), var(--img) right center / 62% auto no-repeat, #0f2a44; color: #fff; }
.re-hero small { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--a); }
.re-hero h4 { margin: 8px 0 18px; color: #fff; font-size: 34px; } .re-hero h4 em { color: var(--a); }
.re-search { display: flex; gap: 6px; padding: 6px; border-radius: 14px; background: #fff; width: 470px; color: #374151; font-size: 13px; }
.re-search span { flex: 1; padding: 10px 12px; border-radius: 10px; background: #f3f4f6; } .re-search b { padding: 10px 18px; border-radius: 10px; background: #1f9d55; color: #fff; }
.ui.on .re-hero > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .re-hero h4 { animation-delay: .1s; } .ui.on .re-search { animation-delay: .25s; }
.re-tabs { display: flex; gap: 8px; padding: 18px 32px 0; } .re-tabs span { padding: 7px 16px; border-radius: 99px; background: #f3f4f6; font-size: 13px; font-weight: 650; } .re-tabs .on { background: var(--b); color: #fff; }
.re-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px 32px; }
.re-cards span { padding: 8px 8px 12px; border-radius: 14px; border: 1px solid #e5e7eb; } .re-cards i { display: block; height: 100px; margin-bottom: 8px; border-radius: 10px; } .re-cards b { display: block; color: var(--b); } .re-cards small { font-size: 12px; }
.ui.on .re-cards span { animation: u-pop .7s var(--spring) backwards; } .ui.on .re-cards span:nth-child(2) { animation-delay: .1s; } .ui.on .re-cards span:nth-child(3) { animation-delay: .2s; }

.re-proj { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; padding: 26px 32px; }
.re-gal { display: grid; gap: 10px; } .re-gal .big { height: 360px; border-radius: 14px; } .re-gal div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .re-gal div i { height: 110px; border-radius: 10px; }
.ui.on .re-gal .big { animation: pf-wipe 1.3s var(--ease-io) both; }
.re-info small { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #1f9d55; }
.re-info h4 { margin: 6px 0 2px; font-size: 36px; }
.re-loc { color: #6b7280; font-size: 14px; }
.re-hl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.re-hl span { padding: 12px; border-radius: 14px; background: #f1f6fb; font-size: 12px; color: #6b7280; text-align: center; } .re-hl b { display: block; color: var(--b); font-size: 20px; }
.re-amen { display: flex; flex-wrap: wrap; gap: 8px; } .re-amen span { padding: 7px 12px; border-radius: 99px; border: 1px solid #e5e7eb; font-size: 13px; }
.ui.on .re-amen span { animation: u-pop .5s var(--spring) backwards; } .ui.on .re-amen span:nth-child(2) { animation-delay: .06s; } .ui.on .re-amen span:nth-child(3) { animation-delay: .12s; } .ui.on .re-amen span:nth-child(4) { animation-delay: .18s; } .ui.on .re-amen span:nth-child(5) { animation-delay: .24s; } .ui.on .re-amen span:nth-child(6) { animation-delay: .3s; }
.re-btns { display: flex; gap: 10px; margin-top: 22px; } .re-btns .u-btn { padding: 13px 22px; }

.re-plan { display: grid; grid-template-columns: 1.3fr .7fr; gap: 24px; padding: 24px 32px; background: #f8fafc; height: 590px; }
.re-plan-draw { padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.re-types { display: flex; gap: 8px; margin-bottom: 12px; } .re-types span { padding: 7px 14px; border-radius: 99px; background: #f3f4f6; font-size: 13px; font-weight: 650; } .re-types .on { background: var(--b); color: #fff; }
.re-plan svg { width: 100%; height: auto; }
.re-plan svg .w { fill: none; stroke: var(--b); stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.re-plan svg .d { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 300; stroke-dashoffset: 300; }
.re-plan svg text { font: 600 15px var(--sans); fill: #64748b; opacity: 0; }
.ui.on .re-plan svg .w { animation: re-draw 2.4s var(--ease-io) forwards; } .ui.on .re-plan svg .w + .w { animation-delay: .5s; }
.ui.on .re-plan svg .d { animation: re-draw 1s var(--ease) 2.2s forwards; }
.ui.on .re-plan svg text { animation: u-show .6s 2.4s forwards; }
@keyframes re-draw { to { stroke-dashoffset: 0; } }
.re-area { display: grid; gap: 4px; align-content: start; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.re-area > b { margin-bottom: 8px; color: var(--b); font-size: 17px; }
.re-area p { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #f0f2f6; font-size: 14px; color: #6b7280; } .re-area p em { color: #111; font-style: normal; font-weight: 700; }
.re-area p.tot em { color: var(--b); font-size: 20px; } .re-area .u-btn { margin-top: 14px; }

.re-emi { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; padding: 30px 36px; background: #f8fafc; height: 590px; }
.re-sliders h4 { margin-bottom: 18px; font-size: 30px; } .re-sliders h4 em { color: #1f9d55; }
.re-sliders p { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 18px; font-size: 14px; color: #6b7280; } .re-sliders p b { color: #111; }
.re-sl { grid-column: span 2; position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #1f9d55 calc(var(--v) * 100%), #e5e7eb 0); }
.re-sl::after { content: ""; position: absolute; left: calc(var(--v) * 100%); top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: #fff; border: 3px solid #1f9d55; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); }
.ui.on .re-sl { animation: re-sl 1.6s var(--ease-io) backwards .3s; }
@keyframes re-sl { from { --v: .1; } }
@property --v { syntax: "<number>"; inherits: true; initial-value: 0; }
.re-result { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 26px; border-radius: 20px; background: var(--b); color: #cfe0f0; text-align: center; }
.re-result small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--a); }
.re-emi-v { color: #fff; font-size: 44px; }
.ui.on .re-emi-v { animation: u-pop .8s var(--spring) 1.6s backwards; }
.re-donut { position: relative; width: 170px; height: 170px; margin: 8px 0; border-radius: 50%; background: conic-gradient(#1f9d55 0 64%, var(--a) 0); display: grid; place-items: center; }
.re-donut i { position: absolute; inset: 22px; border-radius: 50%; background: var(--b); }
.re-donut span { position: relative; font-size: 12px; } .re-donut b { color: #fff; font-size: 18px; }
.ui.on .re-donut { animation: re-spin 1.4s var(--ease) backwards .4s; }
@keyframes re-spin { from { transform: rotate(-120deg) scale(.6); opacity: 0; } }
.re-result p { display: flex; gap: 14px; font-size: 13px; } .re-result .p { color: #4ade80; } .re-result .i { color: var(--a); }

.re-leads { display: grid; grid-template-columns: 72px 1fr; background: #f5f6fa; }
.re-leads .u-side { background: var(--b); }
.re-board { padding: 20px 24px; }
.re-board .u-dash-head b { color: var(--b); }
.re-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.re-cols > div { display: grid; gap: 10px; align-content: start; min-height: 470px; padding: 12px; border-radius: 16px; background: #eceff5; }
.re-cols small { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: #374151; } .re-cols small em { font-style: normal; color: #6b7280; }
.re-cols p { padding: 12px; border-radius: 12px; background: #fff; font-size: 12.5px; color: #6b7280; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .25); }
.re-cols p b { display: block; color: #111; font-size: 14px; }
.re-cols p.ghost { min-height: 52px; background: transparent; border: 2px dashed #c7cedb; box-shadow: none; }
.re-cols p.won { background: #e9f9ef; border: 1px solid #a7e3bd; } .re-cols p.won b { color: #166534; }
.ui.on .re-cols p.mv { animation: re-move 4s var(--ease-io) 1s forwards; position: relative; z-index: 2; }
@keyframes re-move { 0% { transform: none; } 40%, 100% { transform: translate(calc(100% + 36px), 136px) rotate(-2deg); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .35); } }
.ui.on .re-cols p.won { animation: u-pop .8s var(--spring) .6s backwards; }

.re-inv { padding: 22px 32px; }
.re-inv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .re-inv-head h4 { font-size: 24px; }
.re-inv-head p { display: flex; gap: 14px; font-size: 12.5px; font-weight: 650; } .re-inv-head span::before { content: "●"; margin-right: 5px; }
.re-inv-head .a::before { color: #22c55e; } .re-inv-head .h::before { color: var(--a); } .re-inv-head .b::before { color: #cbd5e1; }
.re-units { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.re-units i { padding: 12px 0; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 700; font-style: normal; }
.re-units .a { background: #dcfce7; color: #166534; } .re-units .h { background: #fef3c7; color: #92400e; } .re-units .b { background: #f1f5f9; color: #94a3b8; }
.ui.on .re-units i { animation: u-pop .4s var(--spring) backwards; }
.ui.on .re-units i:nth-child(6n+2) { animation-delay: .05s; } .ui.on .re-units i:nth-child(6n+3) { animation-delay: .1s; } .ui.on .re-units i:nth-child(6n+4) { animation-delay: .15s; } .ui.on .re-units i:nth-child(6n+5) { animation-delay: .2s; } .ui.on .re-units i:nth-child(6n) { animation-delay: .25s; }
.ui.on .re-units .flip { animation: re-book 1s var(--spring) 1.6s forwards; }
@keyframes re-book { 50% { transform: scale(1.25); } to { background: #fef3c7; color: #92400e; } }

/* ------------------------------------------------ school & college */
.feed-narrow li { width: 300px; padding: 10px 14px 10px 10px; gap: 12px; }
.feed-narrow li:nth-child(even) { top: 98px; }
.feed-narrow i { width: 44px; height: 44px; font-size: 22px; }
.feed-narrow b { font-size: 19px; } .feed-narrow small { font-size: 15px; }
.ok-ring { border-color: rgba(34, 197, 94, .95); box-shadow: 0 0 0 6px rgba(34, 197, 94, .4); }

.ed-ui { --b: #1e3a8a; --a: #fbbf24; }
.ed-ui .u-btn { background: var(--a); color: #1e3a8a; } .ed-ui .u-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.ed-ticker { display: flex; align-items: center; height: 36px; background: #fef3c7; overflow: hidden; font-size: 13px; color: #78350f; }
.ed-ticker b { flex: none; height: 100%; display: grid; place-items: center; padding: 0 14px; background: #b91c1c; color: #fff; font-size: 11.5px; letter-spacing: .12em; }
.ed-ticker div { display: flex; white-space: nowrap; animation: marquee 24s linear infinite; } .ed-ticker span { padding-left: 20px; }
.ui .ed-hero { display: flex; align-items: center; height: 380px; padding: 0 40px; background: linear-gradient(90deg, rgba(23, 37, 84, .92) 32%, rgba(23, 37, 84, .15) 78%), var(--img) right center / cover no-repeat; color: #fff; }
.ed-hero small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--a); }
.ed-hero h4 { margin: 10px 0 20px; color: #fff; font-size: 38px; } .ed-hero h4 em { color: var(--a); }
.ui.on .ed-hero > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .ed-hero h4 { animation-delay: .1s; } .ui.on .ed-hero .u-ctas { animation-delay: .2s; }
.ed-quick { display: grid; grid-template-columns: repeat(4, 1fr); margin: -30px 40px 0; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -24px rgba(30, 58, 138, .5); text-align: center; font-size: 12.5px; color: #6b7280; position: relative; }
.ed-quick b { display: block; color: var(--b); font-size: 24px; }

.ed-courses { padding: 22px 32px; }
.ed-filter { display: flex; gap: 8px; margin-bottom: 16px; } .ed-filter span { padding: 7px 16px; border-radius: 99px; background: #f3f4f6; font-size: 13px; font-weight: 650; } .ed-filter .on { background: var(--b); color: #fff; }
.ed-cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ed-cgrid p { display: grid; gap: 3px; padding: 16px; border-radius: 16px; border: 1px solid #e5e7eb; }
.ed-cgrid i { width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px; display: grid; place-items: center; background: hsl(var(--h) 80% 93%); font-size: 22px; font-style: normal; }
.ed-cgrid b { color: var(--b); font-size: 16px; } .ed-cgrid span { font-size: 13px; font-weight: 600; color: #374151; } .ed-cgrid small { font-size: 12px; }
.ed-cgrid em { margin-top: 6px; font-style: normal; font-weight: 800; color: #111; }
.ui.on .ed-cgrid p { animation: u-pop .6s var(--spring) backwards; } .ui.on .ed-cgrid p:nth-child(2) { animation-delay: .07s; } .ui.on .ed-cgrid p:nth-child(3) { animation-delay: .14s; } .ui.on .ed-cgrid p:nth-child(4) { animation-delay: .21s; } .ui.on .ed-cgrid p:nth-child(5) { animation-delay: .28s; } .ui.on .ed-cgrid p:nth-child(6) { animation-delay: .35s; }

.ed-apply { padding: 22px 36px; background: #f8fafc; height: 590px; }
.ed-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; font-size: 13px; font-weight: 650; color: #9ca3af; }
.ed-steps span { display: flex; align-items: center; gap: 8px; } .ed-steps i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e5e7eb; font-style: normal; color: #6b7280; }
.ed-steps .done { color: #16a34a; } .ed-steps .done i { background: #22c55e; color: #fff; } .ed-steps .now { color: var(--b); } .ed-steps .now i { background: var(--b); color: #fff; animation: u-pulse 1.6s infinite; box-shadow: 0 0 0 0 rgba(30, 58, 138, .6); }
.ed-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ed-f { box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.ed-docs { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.ed-docs > b { color: var(--b); }
.ed-docs p { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid #e5e7eb; font-size: 13.5px; font-weight: 600; }
.ed-docs p i { font-style: normal; font-size: 20px; grid-row: span 2; }
.ed-docs em { display: block; height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden; position: relative; }
.ed-docs em::after { content: ""; position: absolute; inset: 0; background: #22c55e; transform-origin: 0 50%; transform: scaleX(0); }
.ui.on .ed-docs .p1::after { animation: u-fill 1s var(--ease-io) 1s forwards; } .ui.on .ed-docs .p2::after { animation: u-fill 1s var(--ease-io) 1.6s forwards; } .ui.on .ed-docs .p3::after { animation: u-fill 1s var(--ease-io) 2.2s forwards; }
.ed-docs .u-btn { background: var(--b); color: #fff; margin-top: 4px; }
.ui.on .ed-docs .u-btn { animation: u-press .4s 3.4s; }
.ed-done { border-radius: 20px; }
.ui.on .ed-done { animation: u-show .6s var(--ease) 3.8s forwards; } .ui.on .ed-done i { animation: u-pop .7s var(--spring) 3.9s backwards; }

.ed-pay { --b: #1e3a8a; --a: #fbbf24; }
.ed-pay .u-btn { background: var(--b); color: #fff; }

.ed-notice { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; padding: 24px 32px; background: #f8fafc; height: 590px; }
.ed-board, .ed-result { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.ed-board > b, .ed-result > b { color: var(--b); font-size: 16px; }
.ed-board p { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid #eef0f4; font-size: 14px; font-weight: 600; }
.ed-board em { padding: 4px 9px; border-radius: 6px; background: #e0e7ff; color: var(--b); font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .06em; }
.ed-board em.new { background: #fee2e2; color: #b91c1c; animation: mo-tick 1.4s steps(1) infinite; }
.ed-board small { font-size: 12px; }
.ui.on .ed-board p { animation: mo-slide .7s var(--ease) backwards; } .ui.on .ed-board p:nth-of-type(2) { animation-delay: .1s; } .ui.on .ed-board p:nth-of-type(3) { animation-delay: .2s; } .ui.on .ed-board p:nth-of-type(4) { animation-delay: .3s; }
.ed-result .u-btn { background: var(--b); color: #fff; }
.ui.on .ed-result .u-btn { animation: u-press .4s 1.6s; }
.ed-res { display: grid; gap: 6px; padding: 18px; border-radius: 16px; background: linear-gradient(140deg, #ecfdf5, #f0fdf4); border: 1px solid #bbf7d0; text-align: center; opacity: 0; }
.ed-res small { font-size: 11px; font-weight: 800; letter-spacing: .14em; } .ed-res > b { color: #16a34a; font-size: 28px; letter-spacing: .1em; }
.ed-score { display: flex; justify-content: space-between; font-size: 14px; } .ed-score em { font-style: normal; font-weight: 800; color: #111; }
.ui.on .ed-res { animation: ed-res .7s var(--spring) 2s forwards; }
@keyframes ed-res { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.ed-admin { --b: #1e3a8a; --a: #fbbf24; }
.ed-hbars { display: grid; gap: 14px; margin-top: 14px; }
.ed-hbars p { display: grid; grid-template-columns: 54px 1fr 40px; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.ed-hbars i { display: block; height: 22px; width: calc(var(--v) * 100%); border-radius: 6px; background: linear-gradient(90deg, var(--b), #3b82f6); transform-origin: 0 50%; }
.ed-hbars b { color: var(--b); }
.ui.on .ed-hbars i { animation: re-bar 1.2s var(--ease) backwards; } .ui.on .ed-hbars p:nth-child(2) i { animation-delay: .1s; } .ui.on .ed-hbars p:nth-child(3) i { animation-delay: .2s; } .ui.on .ed-hbars p:nth-child(4) i { animation-delay: .3s; } .ui.on .ed-hbars p:nth-child(5) i { animation-delay: .4s; }
@keyframes re-bar { from { transform: scaleX(0); } }
.tv-powered.tv-sm { gap: 7px; padding: 6px 12px; font-size: 13px; } .tv-sm img { height: 26px; }

/* ------------------------------------------------ hospital & clinic */
.bf-chips li.bf-sm { width: 260px; padding: 12px 16px 12px 12px; } .bf-sm b { font-size: 18px; } .bf-sm small { font-size: 14px; } .bf-sm i { width: 44px; height: 44px; font-size: 22px; }
.hc-ui { --b: #0b5394; --a: #16a34a; }
.hc-ui .u-btn { background: var(--a); color: #fff; } .hc-ui .u-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.hc-mark { color: var(--b); } .hc-mark i { width: 26px; height: 26px; border-radius: 8px; background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ui .hc-hero { display: flex; align-items: center; height: 380px; padding: 0 40px; background: linear-gradient(90deg, rgba(8, 47, 92, .92) 34%, rgba(8, 47, 92, .1) 80%), var(--img) right center / cover no-repeat; color: #fff; }
.hc-hero small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #86efac; }
.hc-hero h4 { margin: 10px 0 20px; color: #fff; font-size: 38px; } .hc-hero h4 em { color: #86efac; }
.ui.on .hc-hero > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .hc-hero h4 { animation-delay: .1s; } .ui.on .hc-hero .u-ctas { animation-delay: .2s; }
.hc-quick { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: -34px 32px 0; }
.hc-quick span { display: grid; gap: 2px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 18px 36px -22px rgba(11, 83, 148, .55); font-size: 12px; color: #6b7280; }
.hc-quick i { font-size: 24px; font-style: normal; } .hc-quick b { color: var(--b); font-size: 14.5px; }
.hc-quick .em { background: #fef2f2; } .hc-quick .em b { color: #b91c1c; }
.ui.on .hc-quick .em { animation: hc-em 1.6s ease-in-out 1s infinite; }
@keyframes hc-em { 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, .25), 0 18px 36px -22px rgba(11, 83, 148, .55); } }
.ui.on .hc-quick span { animation: u-up .7s var(--ease) backwards; } .ui.on .hc-quick span:nth-child(2) { animation-delay: .08s; } .ui.on .hc-quick span:nth-child(3) { animation-delay: .16s; } .ui.on .hc-quick span:nth-child(4) { animation-delay: .24s; }
.ui.on .hc-quick .em { animation: u-up .7s var(--ease) backwards, hc-em 1.6s ease-in-out 1s infinite; }

.hc-docs { padding: 22px 32px; }
.hc-dgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hc-dgrid p { display: grid; justify-items: center; gap: 3px; padding: 18px 12px; border-radius: 18px; border: 1px solid #e5e7eb; text-align: center; }
.hc-dgrid i { width: 110px; height: 110px; margin-bottom: 8px; border-radius: 50%; box-shadow: 0 0 0 5px #e0f2fe; }
.hc-dgrid b { color: var(--b); font-size: 16px; } .hc-dgrid span { font-size: 12.5px; color: #6b7280; }
.hc-dgrid em { margin-top: 4px; font-size: 12px; font-style: normal; font-weight: 700; color: #9ca3af; } .hc-dgrid em.on { color: #16a34a; }
.hc-dgrid u { margin-top: 8px; padding: 8px 22px; border-radius: 99px; background: var(--a); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; }
.ui.on .hc-dgrid p { animation: u-pop .7s var(--spring) backwards; } .ui.on .hc-dgrid p:nth-child(2) { animation-delay: .1s; } .ui.on .hc-dgrid p:nth-child(3) { animation-delay: .2s; } .ui.on .hc-dgrid p:nth-child(4) { animation-delay: .3s; }

.hc-book { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; padding: 22px 32px; background: #f6f9fc; height: 590px; }
.hc-pick, .hc-confirm { position: relative; display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.hc-pick > b, .hc-confirm > b { color: var(--b); font-size: 15px; }
.hc-doc { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: #f0f7ff; } .hc-doc i { width: 50px; height: 50px; border-radius: 50%; } .hc-doc span { font-size: 13px; color: #6b7280; } .hc-doc b { display: block; color: #111; font-size: 15px; }
.hc-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.hc-days span { padding: 8px 0; border-radius: 12px; border: 1.5px solid #e5e7eb; text-align: center; font-size: 12px; color: #6b7280; } .hc-days b { display: block; color: #111; font-size: 18px; }
.ui.on .hc-days .on { animation: hc-pick .5s var(--spring) .8s forwards; }
@keyframes hc-pick { to { background: var(--b); border-color: var(--b); color: #cfe3f7; } }
.ui.on .hc-days .on b { animation: hc-pickb .5s .8s forwards; } @keyframes hc-pickb { to { color: #fff; } }
.hc-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.hc-slots span { padding: 9px 0; border-radius: 10px; border: 1.5px solid #e5e7eb; text-align: center; font-size: 13px; font-weight: 650; }
.hc-slots .off { color: #cbd5e1; text-decoration: line-through; background: #f8fafc; }
.ui.on .hc-slots .on { animation: hc-slot .5s var(--spring) 1.5s forwards; }
@keyframes hc-slot { to { background: var(--a); border-color: var(--a); color: #fff; } }
.hc-confirm p { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f2f6; font-size: 13.5px; color: #6b7280; } .hc-confirm p em { color: #111; font-style: normal; font-weight: 700; }
.ui.on .hc-confirm .u-btn { animation: u-press .4s 2.3s; }
.hc-token { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; border-radius: inherit; background: #fff; text-align: center; opacity: 0; }
.hc-token i { width: 60px; height: 60px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 32px no-repeat; }
.hc-token b { margin-top: 6px; color: var(--b); font-size: 18px; } .hc-token span { margin-top: 8px; font-size: 12px; color: #6b7280; }
.hc-token em { color: var(--b); font-size: 54px; font-weight: 900; font-style: normal; line-height: 1; }
.ui.on .hc-token { animation: u-show .5s 2.7s forwards; } .ui.on .hc-token em { animation: u-pop .7s var(--spring) 2.9s backwards; }

.hc-packs { padding: 26px 34px; text-align: center; }
.hc-packs h4 { font-size: 30px; } .hc-packs h4 em { color: var(--a); }
.hc-home { margin: 6px 0 20px !important; color: #16a34a; font-weight: 700; }
.hc-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.hc-pgrid p { position: relative; display: grid; gap: 4px; padding: 22px; border-radius: 18px; border: 1px solid #e5e7eb; }
.hc-pgrid p.pop { border: 2px solid var(--a); background: #f0fdf4; transform: translateY(-8px); }
.hc-pgrid p > i { position: absolute; top: -12px; left: 20px; padding: 4px 10px; border-radius: 99px; background: var(--a); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .1em; }
.hc-pgrid b { color: var(--b); font-size: 18px; } .hc-pgrid em { color: #111; font-size: 30px; font-weight: 900; font-style: normal; } .hc-pgrid span { font-weight: 700; color: #16a34a; font-size: 13px; } .hc-pgrid small { min-height: 34px; }
.hc-pgrid u { justify-self: start; margin-top: 10px; padding: 9px 24px; border-radius: 99px; background: var(--b); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; }
.ui.on .hc-pgrid p { animation: u-up .8s var(--ease) backwards; } .ui.on .hc-pgrid p:nth-child(2) { animation-delay: .12s; } .ui.on .hc-pgrid p:nth-child(3) { animation-delay: .24s; }

.hc-rep { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; padding: 24px 32px; background: #f6f9fc; height: 590px; }
.hc-rlist, .hc-vitals { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.hc-rlist > b, .hc-vitals > b { color: var(--b); font-size: 15px; }
.hc-rlist p { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid #eef0f4; font-size: 12.5px; color: #6b7280; }
.hc-rlist p i { font-size: 22px; font-style: normal; } .hc-rlist p span { flex: 1; } .hc-rlist p b { display: block; color: #111; font-size: 14px; }
.hc-rlist p em { color: var(--b); font-size: 12.5px; font-style: normal; font-weight: 750; }
.ui.on .hc-rlist p.new { animation: u-new 2.4s var(--ease) .6s backwards; }
.hc-vitals div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hc-vitals span { padding: 12px; border-radius: 12px; background: #f0f7ff; font-size: 11.5px; color: #6b7280; } .hc-vitals span b { display: block; color: var(--b); font-size: 20px; }
.hc-vitals svg { width: 100%; height: 90px; } .hc-vitals path { fill: none; stroke: var(--a); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.ui.on .hc-vitals path { animation: re-draw 1.8s var(--ease-io) .4s forwards; }

.hc-admin { --b: #0b5394; --a: #16a34a; }
.hc-queue { display: grid; gap: 8px; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .25); }
.hc-queue p { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid #eef0f4; }
.hc-queue p b { color: var(--b); font-size: 22px; } .hc-queue p span { font-weight: 650; color: #111; }
.hc-queue p em { padding: 5px 12px; border-radius: 99px; background: #f3f4f6; color: #6b7280; font-size: 12px; font-style: normal; font-weight: 700; }
.hc-queue p.now { background: #f0fdf4; border-color: #bbf7d0; } .hc-queue p.now em { background: #16a34a; color: #fff; animation: mo-tick 1.6s steps(1) infinite; }
.hc-queue p.next em { background: #dbeafe; color: #1d4ed8; } .hc-queue p.new em { background: #fef3c7; color: #92400e; }
.ui.on .hc-queue p.new { animation: u-new 2.4s var(--ease) .8s backwards; }

/* ------------------------------------------------ restaurant & café */
.rs-ui { --b: #2b1d14; --a: #f59e0b; }
.rs-ui .u-btn { background: var(--a); color: #2b1d14; } .rs-ui .u-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.rs-mark { font-family: var(--serif); font-style: italic; color: var(--b); }
.rs-hero { position: relative; display: flex; align-items: center; height: 450px; padding: 0 44px; overflow: hidden; background: radial-gradient(circle at 75% 55%, #4a2f1d, #1c120b 70%); color: #e9dccd; }
.rs-hero > div { position: relative; z-index: 1; }
.rs-hero small { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--a); }
.rs-hero h4 { margin: 10px 0 10px; color: #fff; font-family: var(--serif); font-size: 46px; } .rs-hero h4 em { color: var(--a); }
.rs-hero p { margin-bottom: 20px; opacity: .8; }
.rs-plate { position: absolute; right: 30px; top: 50%; width: 440px; height: 440px; margin-top: -220px; border-radius: 50%; background: #111 var(--img) center / 170% auto no-repeat; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 12px rgba(255, 255, 255, .04); }
.ui.on .rs-plate { animation: rs-spin 1.6s var(--ease) backwards; }
@keyframes rs-spin { from { transform: rotate(-90deg) scale(.6); opacity: 0; } }
.rs-steam { position: absolute; z-index: 2; bottom: 260px; width: 18px; height: 90px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .35), transparent 70%); filter: blur(6px); animation: rs-steam 3.2s ease-in infinite; }
.rs-steam.s1 { right: 230px; } .rs-steam.s2 { right: 270px; animation-delay: 1s; } .rs-steam.s3 { right: 200px; animation-delay: 2s; }
@keyframes rs-steam { 0% { transform: translateY(40px) scaleX(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-80px) scaleX(1.4); opacity: 0; } }
.ui.on .rs-hero > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .rs-hero h4 { animation-delay: .1s; } .ui.on .rs-hero p { animation-delay: .2s; } .ui.on .rs-hero .u-ctas { animation-delay: .3s; }
.rs-strip { display: flex; justify-content: space-around; padding: 16px; background: #fff7ea; font-size: 13.5px; font-weight: 650; color: var(--b); }

.rs-menu { padding: 20px 34px; background: #fffaf3; height: 590px; }
.rs-cats { display: flex; gap: 8px; margin-bottom: 14px; } .rs-cats span { padding: 8px 16px; border-radius: 99px; background: #f3e9dc; font-size: 13px; font-weight: 650; color: var(--b); } .rs-cats .on { background: var(--b); color: #fff; }
.rs-items { display: grid; gap: 10px; }
.rs-items p { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 16px; padding: 10px 16px 10px 10px; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px -16px rgba(43, 29, 20, .5); font-size: 13px; color: #78716c; }
.rs-items p > i { width: 70px; height: 70px; border-radius: 12px; display: grid; place-items: center; background-color: #f3e9dc; font-size: 34px; font-style: normal; }
.rs-items b { display: flex; align-items: center; gap: 8px; color: var(--b); font-size: 15.5px; }
.rs-items em { width: 14px; height: 14px; border: 2px solid; border-radius: 3px; position: relative; } .rs-items em::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; }
.rs-items em.v { color: #16a34a; } .rs-items em.nv { color: #b91c1c; }
.rs-items u { padding: 8px 14px; border-radius: 10px; background: #fff7ea; border: 1.5px solid var(--a); color: var(--b); text-decoration: none; font-weight: 800; }
.ui.on .rs-items p { animation: mo-slide .7s var(--ease) backwards; } .ui.on .rs-items p:nth-child(2) { animation-delay: .08s; } .ui.on .rs-items p:nth-child(3) { animation-delay: .16s; } .ui.on .rs-items p:nth-child(4) { animation-delay: .24s; } .ui.on .rs-items p:nth-child(5) { animation-delay: .32s; }

.rs-book { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: center; padding: 24px 36px; background: #fffaf3; height: 590px; }
.rs-bk { display: grid; gap: 14px; padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -30px rgba(43, 29, 20, .6); }
.rs-bk h4 { font-family: var(--serif); font-size: 30px; color: var(--b); } .rs-bk h4 em { color: var(--a); }
.rs-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #78716c; }
.rs-step { display: flex; align-items: center; gap: 14px; } .rs-step i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f3e9dc; font-style: normal; font-size: 18px; color: var(--b); } .rs-step b { color: var(--b); font-size: 20px; }
.rs-days { grid-template-columns: repeat(3, 1fr); } .rs-slots { grid-template-columns: repeat(5, 1fr); }
.rs-ui .hc-days .on { --b: #2b1d14; } .rs-ui .hc-slots .on { --a: #f59e0b; }
.rs-seat { display: flex; gap: 8px; } .rs-seat span { padding: 8px 14px; border-radius: 10px; border: 1.5px solid #e7ddd0; font-size: 13px; color: var(--b); } .rs-seat .on { border-color: var(--a); background: #fff7ea; }
.ui.on .rs-bk .u-btn { animation: u-press .4s 2.2s; }
.rs-ticket { position: relative; display: grid; gap: 4px; padding: 30px 26px; border-radius: 20px; background: var(--b); color: #e9dccd; text-align: center; opacity: 0; }
.rs-ticket small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--a); }
.rs-ticket b { color: #fff; font-family: var(--serif); font-size: 36px; }
.rs-cut { display: block; margin: 16px -26px; border-top: 2px dashed rgba(255, 255, 255, .25); position: relative; }
.rs-cut::before, .rs-cut::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: #fffaf3; } .rs-cut::before { left: -11px; } .rs-cut::after { right: -11px; }
.rs-ticket span { color: #86efac; font-size: 13px; font-weight: 700; }
.ui.on .rs-ticket { animation: rs-print 1s var(--spring) 2.6s forwards; }
@keyframes rs-print { from { opacity: 0; transform: translateY(40px) rotate(-4deg); } to { opacity: 1; transform: rotate(2deg); } }

.rs-order { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px 34px; background: #fffaf3; height: 590px; }
.rs-cart, .rs-track { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -30px rgba(43, 29, 20, .6); }
.rs-cart > b, .rs-track > b { color: var(--b); font-size: 16px; }
.rs-cart p { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #eee3d6; font-size: 14px; color: #57534e; } .rs-cart p em { font-style: normal; font-weight: 700; color: #111; }
.rs-cart p.tot { font-size: 16px; border: 0; } .rs-cart p.tot em { color: var(--b); font-size: 22px; }
.rs-cart p.save { justify-content: center; padding: 10px; border: 0; border-radius: 12px; background: #ecfdf5; color: #166534; font-weight: 700; }
.ui.on .rs-cart p.save { animation: u-pop .7s var(--spring) 1s backwards; }
.rs-track p { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-weight: 650; color: #a8a29e; }
.rs-track p i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f3e9dc; font-style: normal; font-size: 14px; }
.rs-track p.done { color: #111; } .rs-track p.done i { background: #22c55e; color: #fff; } .rs-track p.now { color: var(--b); } .rs-track p.now i { background: var(--a); }
.rs-road { position: relative; height: 54px; margin-top: 10px; border-radius: 14px; background: repeating-linear-gradient(90deg, #d6cfc6 0 24px, transparent 24px 40px) center / 100% 3px no-repeat, #f5efe7; overflow: hidden; }
.rs-bike { position: absolute; top: 10px; left: -40px; font-size: 30px; font-style: normal; transform: scaleX(-1); animation: rs-ride 4s linear infinite; }
@keyframes rs-ride { to { left: 105%; } }

.rs-dark { background: #111827; }
.rs-kds { padding: 24px 30px; }
.rs-kds-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: #fff; } .rs-kds-head b { font-size: 22px; } .rs-kds-head span { color: #4ade80; font-weight: 700; animation: mo-tick 1.6s steps(1) infinite; }
.rs-tix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.rs-tix p { display: grid; gap: 6px; padding: 16px; border-radius: 14px; background: #fff; border-top: 6px solid #9ca3af; }
.rs-tix small { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #6b7280; } .rs-tix b { color: #111; font-size: 15px; }
.rs-tix em { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: #f3f4f6; font-size: 12px; font-style: normal; font-weight: 700; color: #6b7280; text-align: center; }
.rs-tix .new { border-top-color: #ef4444; } .rs-tix .new em { background: #fee2e2; color: #b91c1c; }
.rs-tix em.cook { background: #fef3c7; color: #92400e; } .rs-tix em.ready { background: #dcfce7; color: #166534; }
.rs-tix p:has(.cook) { border-top-color: #f59e0b; } .rs-tix p:has(.ready) { border-top-color: #22c55e; }
.ui.on .rs-tix .new { animation: rs-drop .9s var(--spring) .6s backwards, hc-em 1.6s ease-in-out 1.6s infinite; }
@keyframes rs-drop { from { opacity: 0; transform: translateY(-60px); } }
.rs-admin { --b: #2b1d14; --a: #f59e0b; }
.rs-admin .ed-hbars i { background: linear-gradient(90deg, #b45309, #f59e0b); }
.rs-admin .u-table p { grid-template-columns: 46px 1fr auto 84px; } .rs-admin .u-table p > i { width: auto; border-radius: 8px; font-size: 11.5px; }

/* ------------------------------------------------ hotel & travel */
.ht-ui { --b: #1f2a37; --a: #b08d57; }
.ht-ui .u-btn { background: var(--a); color: #fff; }
.ht-mark { font-family: var(--serif); font-size: 18px; letter-spacing: .2em; color: var(--b); }
.ui .ht-hero { position: relative; display: flex; align-items: center; height: 400px; padding: 0 44px; background: linear-gradient(90deg, rgba(20, 26, 36, .85) 30%, rgba(20, 26, 36, .05) 75%), var(--img) center / cover no-repeat; color: #fff; }
.ht-hero small { font-size: 11px; font-weight: 800; letter-spacing: .22em; color: #e5cf9f; }
.ht-hero h4 { margin-top: 10px; color: #fff; font-family: var(--serif); font-size: 46px; font-weight: 600; } .ht-hero h4 em { color: #e5cf9f; font-style: italic; }
.ui.on .ht-hero { animation: pf-kb 7s ease-out both; } .ui.on .ht-hero h4 { animation: u-up 1s var(--ease) .2s backwards; }
.ht-bar { position: relative; display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 14px; margin: -38px 40px 0; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -26px rgba(20, 26, 36, .55); }
.ht-bar span:not(.u-btn) { padding-left: 14px; border-left: 2px solid #efe7da; } .ht-bar small { display: block; font-size: 11px; font-weight: 700; color: #9ca3af; } .ht-bar b { color: var(--b); font-size: 15px; }
.ht-bar .u-btn { padding: 13px 20px; }
.ui.on .ht-bar { animation: u-up .9s var(--ease) .4s backwards; }
.ht-best { margin-top: 20px !important; text-align: center; color: #16a34a; font-weight: 700; font-size: 14px; }

.ht-rooms { display: grid; gap: 12px; padding: 22px 32px; background: #faf7f2; height: 590px; }
.ht-rooms p { display: grid; grid-template-columns: 200px 1fr auto auto; grid-template-rows: auto auto auto; align-items: center; column-gap: 20px; padding: 10px 18px 10px 10px; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px -24px rgba(20, 26, 36, .55); }
.ht-rooms i { grid-row: span 3; height: 140px; border-radius: 12px; }
.ht-rooms b { align-self: end; color: var(--b); font-family: var(--serif); font-size: 20px; } .ht-rooms span { font-size: 13px; color: #6b7280; } .ht-rooms small { align-self: start; font-size: 12px; }
.ht-rooms em { grid-column: 3; grid-row: 1 / span 3; font-style: normal; font-size: 22px; font-weight: 800; color: #111; text-align: right; }
.ht-rooms s { display: block; color: #9ca3af; font-size: 13px; font-weight: 500; } .ht-rooms u { display: block; text-decoration: none; font-size: 12px; font-weight: 500; color: #6b7280; }
.ht-rooms a { grid-column: 4; grid-row: 1 / span 3; padding: 10px 20px; border-radius: 99px; background: var(--a); color: #fff; font-size: 13px; font-weight: 700; }
.ui.on .ht-rooms p { animation: mo-slide .8s var(--ease) backwards; } .ui.on .ht-rooms p:nth-child(2) { animation-delay: .12s; } .ui.on .ht-rooms p:nth-child(3) { animation-delay: .24s; }

.ht-book { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; padding: 22px 32px; background: #faf7f2; height: 590px; }
.ht-cal, .ht-sum { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.ht-cal > b, .ht-sum > b { color: var(--b); font-size: 16px; }
.ht-dates { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; text-align: center; }
.ht-dates i { padding: 9px 0; font-style: normal; font-size: 14px; font-weight: 600; color: #374151; }
.ht-dates .off { color: #d1d5db; } .ht-dates .full { color: #cbd5e1; text-decoration: line-through; }
.ht-dates .s { position: relative; color: #374151; }
.ui.on .ht-dates .s { animation: ht-range .4s var(--ease) forwards; } .ui.on .ht-dates .m { animation-delay: 1.15s; } .ui.on .ht-dates .a { animation-delay: .8s; } .ui.on .ht-dates .b { animation-delay: 1.5s; }
.ht-dates .a { border-radius: 10px 0 0 10px; } .ht-dates .b { border-radius: 0 10px 10px 0; }
@keyframes ht-range { to { background: var(--a); color: #fff; } }
.ht-legend { display: flex; gap: 16px; margin-top: 6px !important; font-size: 12px; color: #6b7280; } .ht-legend span::before { content: "■"; margin-right: 5px; } .ht-legend .sel::before { color: var(--a); } .ht-legend .full::before { color: #e5e7eb; }
.ht-room { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: #faf7f2; } .ht-room i { width: 70px; height: 54px; border-radius: 10px; } .ht-room span { font-size: 12.5px; color: #6b7280; } .ht-room b { display: block; color: var(--b); font-size: 15px; }
.ht-sum p:not(.ht-room) { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0ebe3; font-size: 13.5px; color: #6b7280; } .ht-sum p em { font-style: normal; font-weight: 700; color: #111; }
.ht-sum p.tot em { color: var(--b); font-size: 20px; }
.ui.on .ht-sum .u-btn { animation: u-press .4s 2.2s; }
.ht-ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; border-radius: inherit; background: #fff; text-align: center; opacity: 0; }
.ht-ok i { width: 64px; height: 64px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 34px no-repeat; }
.ht-ok b { margin-top: 8px; color: var(--b); font-family: var(--serif); font-size: 26px; } .ht-ok span { margin-top: 8px; font-size: 12px; color: #6b7280; }
.ht-ok em { color: var(--a); font-size: 34px; font-weight: 900; font-style: normal; letter-spacing: .06em; }
.ui.on .ht-ok { animation: u-show .5s 2.6s forwards; } .ui.on .ht-ok i { animation: u-pop .7s var(--spring) 2.7s backwards; }

.ht-pack { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 22px 32px; background: #f6faf9; height: 590px; }
.ht-pimg { position: relative; display: flex; align-items: flex-end; padding: 22px; border-radius: 20px; background: #ccc var(--img) center / cover; color: #fff; overflow: hidden; }
.ht-pimg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 55%); }
.ht-pimg > * { position: relative; } .ht-pimg > span { position: absolute; top: 18px; left: 18px; padding: 6px 12px; border-radius: 99px; background: #fff; color: var(--b); font-size: 12px; font-weight: 800; }
.ht-pimg b { display: block; font-family: var(--serif); font-size: 30px; } .ht-pimg em { font-style: normal; font-size: 24px; font-weight: 800; color: #fde68a; } .ht-pimg em small { font-size: 13px; color: #fff; font-weight: 500; }

.ht-days { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.ht-days > b { color: var(--b); font-size: 16px; }
.ht-days p { position: relative; display: flex; gap: 14px; padding-bottom: 6px; font-size: 13px; color: #6b7280; }
.ht-days p i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #0f766e; color: #fff; font-style: normal; font-weight: 800; }
.ht-days p::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: -6px; width: 2px; background: #ccfbf1; }
.ht-days p b { display: block; color: #111; font-size: 15px; }
.ht-days .u-btn { background: #25d366; margin-top: 6px; }
.ui.on .ht-days p { animation: u-up .7s var(--ease) backwards; } .ui.on .ht-days p:nth-of-type(2) { animation-delay: .15s; } .ui.on .ht-days p:nth-of-type(3) { animation-delay: .3s; } .ui.on .ht-days p:nth-of-type(4) { animation-delay: .45s; }

.ht-guest { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; padding: 22px 32px; background: #faf7f2; height: 590px; }
.ht-checkin { display: grid; gap: 8px; align-content: start; padding: 26px; border-radius: 20px; background: linear-gradient(150deg, #1f2a37, #374151); color: #d1d5db; }
.ht-checkin small { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #e5cf9f; } .ht-checkin h4 { color: #fff; font-family: var(--serif); font-size: 34px; } .ht-checkin p { color: #86efac; font-weight: 700; }
.ht-key { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 650; } .ht-key i { font-size: 30px; font-style: normal; }
.ui.on .ht-key i { animation: ht-key 1.2s var(--spring) .6s; } @keyframes ht-key { 40% { transform: rotate(-30deg) scale(1.2); } }
.ht-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ht-svc span { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13.5px; font-weight: 650; }
.ht-chat { position: relative; display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: 20px; background: #e7ddd2 linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)); }
.ht-chat > b { color: #075e54; font-size: 15px; }
.ht-chat p { max-width: 86%; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; opacity: 0; }
.ht-chat .me { justify-self: end; background: #dcf8c6; border-bottom-right-radius: 4px; } .ht-chat .them { justify-self: start; background: #fff; border-bottom-left-radius: 4px; }
.ht-chat .typing { display: flex; gap: 4px; justify-self: start; background: #fff; }
.ht-chat .typing i { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; animation: dots 1s infinite; } .ht-chat .typing i:nth-child(2) { animation-delay: .15s; } .ht-chat .typing i:nth-child(3) { animation-delay: .3s; }
.ui.on .ht-chat .me { animation: ht-msg .5s var(--ease) .5s forwards; }
.ui.on .ht-chat .typing { animation: ht-typ 1.6s 1.2s forwards; }
.ui.on .ht-chat .them { animation: ht-msg .5s var(--ease) 2.8s forwards; }
@keyframes ht-msg { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ht-typ { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; height: 0; padding: 0; margin: -5px 0; } }

.ht-admin { --b: #1f2a37; --a: #b08d57; }
.ht-grid { padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .25); }
.ht-rows { display: grid; gap: 6px; margin-top: 10px; }
.ht-rows p { display: grid; grid-template-columns: 110px repeat(10, 1fr); gap: 5px; align-items: center; font-size: 12.5px; font-weight: 600; color: #374151; }
.ht-rows p.hd b { font-size: 11px; color: #9ca3af; text-align: center; }
.ht-rows i { height: 26px; border-radius: 6px; } .ht-rows .b { background: #b08d57; } .ht-rows .f { background: #dcfce7; } .ht-rows .c { background: #fde68a; }
.ui.on .ht-rows i { animation: u-pop .4s var(--spring) backwards; }
.ui.on .ht-rows i:nth-child(3n) { animation-delay: .08s; } .ui.on .ht-rows i:nth-child(3n+1) { animation-delay: .16s; } .ui.on .ht-rows p:nth-child(n+4) i { animation-delay: .24s; }

/* ------------------------------------------------ NGO & trust */
.feed-one li { position: absolute; left: 0; top: 0; }
.scene.in .feed-one li { animation: feed-one 8s var(--ease) calc(var(--intro) + 2s + var(--n) * 2s) infinite; }
@keyframes feed-one { 0% { opacity: 0; transform: translateY(18px) scale(.92); } 3%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-14px); } }
.ng-ui { --b: #14532d; --a: #f59e0b; }
.ng-ui .u-btn { background: #16a34a; color: #fff; } .ng-ui .u-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.ng-mark { color: var(--b); } .ng-mark i { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 40%, #f59e0b 0 30%, transparent 31%), radial-gradient(circle at 65% 40%, #16a34a 0 30%, transparent 31%), #ecfdf5; }
.ui .ng-hero { display: flex; align-items: center; height: 410px; padding: 0 44px; background: linear-gradient(90deg, rgba(10, 46, 26, .9) 34%, rgba(10, 46, 26, .1) 80%), var(--img) right center / cover no-repeat; color: #fff; }
.ng-hero small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #fcd34d; }
.ng-hero h4 { margin: 10px 0 20px; color: #fff; font-size: 40px; } .ng-hero h4 em { color: #fcd34d; }
.ui.on .ng-hero > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .ng-hero h4 { animation-delay: .1s; } .ui.on .ng-hero .u-ctas { animation-delay: .2s; }
.ng-impact { display: grid; grid-template-columns: repeat(4, 1fr); padding: 22px 30px; background: #f0fdf4; text-align: center; font-size: 12.5px; color: #4b5563; }
.ng-impact b { display: block; color: var(--b); font-size: 26px; }
.ui.on .ng-impact span { animation: u-pop .7s var(--spring) backwards; } .ui.on .ng-impact span:nth-child(2) { animation-delay: .1s; } .ui.on .ng-impact span:nth-child(3) { animation-delay: .2s; } .ui.on .ng-impact span:nth-child(4) { animation-delay: .3s; }

.ng-causes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 26px 32px; background: #f7faf7; height: 590px; align-content: start; }
.ng-causes p { display: grid; gap: 6px; padding: 12px 12px 18px; border-radius: 18px; background: #fff; box-shadow: 0 16px 34px -26px rgba(20, 83, 45, .55); }
.ng-causes i { height: 180px; margin-bottom: 6px; border-radius: 12px; display: grid; place-items: center; font-size: 70px; font-style: normal; }
.ng-causes i.emo { background: hsl(var(--h) 60% 92%); }
.ng-causes b { color: var(--b); font-size: 17px; } .ng-causes small { font-size: 12.5px; }
.ng-bar { height: 10px; border-radius: 5px; background: #e5e7eb; overflow: hidden; }
.ng-bar em { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, #16a34a, #84cc16); transform-origin: 0 50%; }
.ui.on .ng-bar em { animation: re-bar 1.6s var(--ease-io) .4s backwards; }
.ng-amt { font-size: 13px; color: #6b7280; } .ng-amt b { font-size: 16px; color: #111; }
.ng-causes u { justify-self: start; margin-top: 4px; padding: 9px 22px; border-radius: 99px; background: #16a34a; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; }
.ui.on .ng-causes p { animation: u-up .8s var(--ease) backwards; } .ui.on .ng-causes p:nth-child(2) { animation-delay: .12s; } .ui.on .ng-causes p:nth-child(3) { animation-delay: .24s; }

.ng-donate { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: center; padding: 26px 40px; background: linear-gradient(150deg, #f0fdf4, #fffbeb); height: 590px; }
.ng-dform { display: grid; gap: 14px; padding: 26px; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -32px rgba(20, 83, 45, .55); }
.ng-dform h4 { font-size: 28px; color: var(--b); } .ng-dform h4 em { color: #16a34a; }
.ng-type { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: #f3f4f6; } .ng-type span { padding: 9px; border-radius: 9px; text-align: center; font-weight: 700; font-size: 13.5px; color: #6b7280; } .ng-type .on { background: #fff; color: var(--b); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .3); }
.ng-amts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .ng-amts span { padding: 12px 0; border-radius: 12px; border: 1.5px solid #e5e7eb; text-align: center; font-weight: 750; }
.ui.on .ng-amts .on { animation: ng-amt .5s var(--spring) .8s forwards; } @keyframes ng-amt { to { background: #16a34a; border-color: #16a34a; color: #fff; transform: scale(1.05); } }
.ng-what { padding: 10px 14px; border-radius: 12px; background: #fffbeb; color: #92400e; font-size: 13.5px; font-weight: 600; }
.ng-80g { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #374151; }
.ng-80g i { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #16a34a; }
.ui.on .ng-80g i { animation: ng-check .3s 1.4s forwards; } @keyframes ng-check { to { background: #16a34a; box-shadow: inset 0 0 0 3px #fff; } }
.ui.on .ng-dform .u-btn { animation: u-press .4s 2s; }
.ng-thanks { display: grid; justify-items: center; gap: 8px; padding: 30px; border-radius: 22px; background: var(--b); color: #d1fae5; text-align: center; opacity: 0; }
.ng-thanks i { font-size: 54px; font-style: normal; } .ng-thanks b { color: #fff; font-size: 26px; } .ng-thanks span { margin-top: 6px; padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .12); font-size: 13px; font-weight: 700; }
.ui.on .ng-thanks { animation: ed-res .8s var(--spring) 2.4s forwards; } .ui.on .ng-thanks i { animation: mo-beat 1.2s ease-in-out 3.2s infinite; }

.ng-vol { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 26px 34px; background: #f7faf7; height: 590px; align-content: start; }
.ng-vh { display: block; margin-bottom: 12px; color: var(--b); font-size: 17px; }
.ng-vform .u-btn { background: #16a34a; color: #fff; }
.ng-vol .u-done b { color: var(--b); }
.ng-events { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.ng-events > b { color: var(--b); font-size: 16px; }
.ng-events p { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #6b7280; } .ng-events p b { display: block; color: #111; font-size: 15px; }
.ng-events .d { flex: none; width: 58px; padding: 8px 0; border-radius: 14px; background: #ecfdf5; color: var(--b); text-align: center; font-size: 22px; font-weight: 900; line-height: 1; } .ng-events .d small { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .1em; color: #16a34a; }
.ui.on .ng-events p { animation: mo-slide .7s var(--ease) backwards; } .ui.on .ng-events p:nth-of-type(2) { animation-delay: .12s; } .ui.on .ng-events p:nth-of-type(3) { animation-delay: .24s; }

.ng-rep { display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; padding: 26px 34px; background: #f7faf7; height: 590px; align-content: start; }
.ng-use, .ng-docs { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.ng-use > b, .ng-docs > b { color: var(--b); font-size: 16px; }
.ng-donut { position: relative; justify-self: center; width: 200px; height: 200px; border-radius: 50%; background: conic-gradient(#16a34a 0 87%, #f59e0b 0 95%, #93c5fd 0); display: grid; place-items: center; }
.ng-donut i { position: absolute; inset: 28px; border-radius: 50%; background: #fff; } .ng-donut span { position: relative; color: var(--b); font-size: 34px; font-weight: 900; text-align: center; line-height: 1; } .ng-donut small { display: block; font-size: 12px; font-weight: 600; color: #6b7280; }
.ui.on .ng-donut { animation: re-spin 1.4s var(--ease) .3s backwards; }
.ng-use p { display: grid; gap: 4px; font-size: 13px; font-weight: 650; } .ng-use .a { color: #16a34a; } .ng-use .b { color: #d97706; } .ng-use .c { color: #3b82f6; }
.ng-docs p { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid #eef0f4; font-size: 14px; font-weight: 600; } .ng-docs p i { font-style: normal; font-size: 20px; } .ng-docs p em { margin-left: auto; color: #16a34a; font-size: 12.5px; font-style: normal; font-weight: 750; }
.ng-story { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: #fffbeb; font-size: 13px; color: #78716c; } .ng-story i { flex: none; width: 90px; height: 70px; border-radius: 10px; } .ng-story b { display: block; color: #111; font-size: 15px; }
.ng-admin { --b: #14532d; --a: #16a34a; }

/* ------------------------------------------------ blog & news */
.tab-toast i.bell { background: var(--grad); position: relative; } .tab-toast i.bell::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 1.5h-15z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / 18px no-repeat; }
.bl-ui { --b: #111827; --a: #eab308; }
.bl-ui .u-btn { background: #111827; color: #fff; }
.bl-mark { font-family: var(--serif); font-size: 22px; color: #111827; } .bl-mark b { color: #eab308; }
.bl-home { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; padding: 22px 32px 0; }
.bl-feat { position: relative; display: flex; align-items: flex-end; height: 330px; padding: 24px; border-radius: 18px; background: #333 var(--img) center / cover; overflow: hidden; color: #fff; }
.bl-feat::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent 60%); }
.bl-feat > div { position: relative; } .bl-feat em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #fde047; } .bl-feat h4 { margin: 8px 0 6px; color: #fff; font-family: var(--serif); font-size: 28px; } .bl-feat small { color: #d1d5db; }
.ui.on .bl-feat { animation: pf-in 1.1s var(--ease) backwards; }
.bl-side { display: grid; gap: 4px; align-content: start; } .bl-side > b { margin-bottom: 6px; font-size: 15px; color: #111827; }
.bl-side p { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-weight: 650; font-size: 14.5px; color: #111827; }
.bl-side p i { font-family: var(--serif); font-size: 24px; font-weight: 800; font-style: normal; color: #eab308; line-height: 1; } .bl-side small { display: block; font-weight: 500; font-size: 12px; color: #9ca3af; }
.ui.on .bl-side p { animation: mo-slide .6s var(--ease) backwards; } .ui.on .bl-side p:nth-of-type(2) { animation-delay: .1s; } .ui.on .bl-side p:nth-of-type(3) { animation-delay: .2s; } .ui.on .bl-side p:nth-of-type(4) { animation-delay: .3s; }
.bl-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px 32px; }
.bl-row span { display: grid; grid-template-columns: 74px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; font-size: 14px; } .bl-row i { grid-row: span 2; height: 74px; border-radius: 10px; } .bl-row em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: #ca8a04; } .bl-row b { color: #111827; }

.bl-prog { position: absolute; left: 0; top: 60px; height: 4px; width: 100%; background: #eab308; transform-origin: 0 50%; transform: scaleX(.05); z-index: 2; }
.ui.on .bl-prog { animation: bl-prog 5s linear .5s forwards; } @keyframes bl-prog { to { transform: scaleX(.7); } }
.bl-post { display: grid; grid-template-columns: 1fr 80px; gap: 20px; padding: 24px 60px 0 120px; }
.bl-art em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #ca8a04; }
.bl-art h4 { margin: 8px 0 10px; font-family: var(--serif); font-size: 36px; color: #111827; }
.bl-by { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6b7280; } .bl-by i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fde047; font-style: normal; font-weight: 800; color: #111827; }
.bl-img { display: block; height: 210px; margin: 16px 0; border-radius: 14px; }
.bl-txt { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: #374151; } .bl-txt.l2, .bl-txt.l3 { height: 10px; margin-top: 10px; border-radius: 5px; background: #f0f0f0; } .bl-txt.l3 { width: 70%; }
.bl-share { display: grid; gap: 12px; align-content: start; padding-top: 120px; } .bl-share span { display: grid; justify-items: center; padding: 10px 0; border-radius: 14px; background: #f9fafb; font-size: 20px; } .bl-share b { font-size: 11.5px; color: #374151; } .bl-share .wa { background: #25d366; color: #fff; font-size: 11px; font-weight: 700; }
.ui.on .bl-share span:first-child { animation: mo-beat 1.2s ease-in-out 1.6s 2; }

.bl-search { padding: 30px 60px; }
.bl-sbox { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 16px; border: 2px solid #111827; font-size: 18px; } .bl-sbox i { font-style: normal; clip-path: inset(0 100% 0 0); } .ui.on .bl-sbox i { animation: u-type .9s steps(11) .4s forwards; }
.bl-tags { display: flex; gap: 8px; margin: 18px 0; } .bl-tags span { padding: 7px 14px; border-radius: 99px; background: #f3f4f6; font-size: 13px; font-weight: 650; } .bl-tags .on { background: #fde047; }
.bl-results { display: grid; gap: 12px; } .bl-results p { display: flex; gap: 16px; padding: 12px; border-radius: 16px; border: 1px solid #f0f0f0; font-size: 13.5px; color: #6b7280; opacity: 0; } .bl-results i { flex: none; width: 110px; height: 76px; border-radius: 10px; } .bl-results b { display: block; color: #111827; font-size: 16px; margin-bottom: 4px; }
.ui.on .bl-results p { animation: ht-msg .6s var(--ease) 1.4s forwards; } .ui.on .bl-results p:nth-child(2) { animation-delay: 1.55s; } .ui.on .bl-results p:nth-child(3) { animation-delay: 1.7s; }

.bl-nl { display: grid; justify-items: center; align-content: center; gap: 10px; height: 100%; padding: 0 160px; text-align: center; background: radial-gradient(circle at 50% 30%, #fef9c3, #fff 65%); }
.bl-env { font-size: 74px; font-style: normal; } .ui.on .bl-env { animation: mo-pop 1s var(--spring) backwards, mo-rise 4s ease-in-out 1s infinite; }
.bl-nl h4 { font-family: var(--serif); font-size: 44px; color: #111827; } .bl-nl p { color: #6b7280; }
.bl-sub { display: flex; gap: 10px; width: 100%; margin-top: 10px; } .bl-sub .u-in { flex: 1; height: 50px; } .bl-sub .u-btn { padding: 0 26px; display: grid; place-items: center; }
.ui.on .bl-sub .u-btn { animation: u-press .4s 1.6s; }
.bl-ok { opacity: 0; color: #16a34a !important; font-weight: 700; } .ui.on .bl-ok { animation: ht-msg .5s 1.9s forwards; }

.bl-earn { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px 34px; }
.bl-ad { grid-column: span 2; display: grid; justify-items: center; gap: 2px; padding: 22px; border-radius: 16px; border: 2px dashed #d1d5db; background: repeating-linear-gradient(45deg, #fafafa 0 12px, #f3f4f6 12px 24px); }
.bl-ad small { font-size: 10px; letter-spacing: .2em; color: #9ca3af; } .bl-ad b { font-size: 22px; color: #111827; } .bl-ad span { font-size: 13px; color: #6b7280; }
.ui.on .bl-ad { animation: bl-ad 2.4s ease-in-out .4s infinite; } @keyframes bl-ad { 50% { border-color: #eab308; } }
.bl-mem { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bl-mem p { display: grid; gap: 4px; padding: 18px; border-radius: 16px; border: 1px solid #e5e7eb; font-size: 12.5px; color: #6b7280; } .bl-mem p b { color: #111827; } .bl-mem em { font-style: normal; font-size: 28px; font-weight: 900; color: #111827; } .bl-mem em small { font-size: 13px; }
.bl-mem .pop { border: 2px solid #eab308; background: #fefce8; } .bl-mem u { justify-self: start; margin-top: 6px; padding: 7px 18px; border-radius: 99px; background: #111827; color: #fff; text-decoration: none; font-weight: 700; }
.bl-spon { display: grid; gap: 4px; align-content: center; padding: 20px; border-radius: 16px; background: #111827; color: #d1d5db; font-size: 13px; } .bl-spon em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: #fde047; } .bl-spon b { color: #fff; font-size: 18px; }
.ui.on .bl-mem p, .ui.on .bl-spon { animation: u-up .7s var(--ease) backwards .2s; }

.bl-admin { --b: #111827; --a: #eab308; }
.bl-ed { position: relative; padding: 18px 24px; }
.bl-ed-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .bl-ed-bar b { margin-right: auto; font-size: 22px; color: #111827; } .bl-ed-bar .draft { font-size: 12.5px; color: #16a34a; font-weight: 700; } .bl-ed-bar .u-btn { background: #111827; color: #fff; }
.ui.on .bl-ed-bar .u-btn { animation: u-press .4s 3.2s; }
.bl-ed-in { display: grid; grid-template-columns: 1.5fr .8fr; gap: 16px; }
.bl-write, .bl-meta { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .25); }
.bl-title { font-family: var(--serif); font-size: 26px; font-weight: 700; color: #111827; } .bl-title i { font-style: normal; clip-path: inset(0 100% 0 0); } .ui.on .bl-title i { animation: u-type 1.4s steps(28) .4s forwards; }
.bl-tools { display: flex; gap: 6px; } .bl-tools > * { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #f3f4f6; font-size: 14px; color: #374151; }
.bl-lines { display: grid; gap: 9px; } .bl-lines i { height: 9px; border-radius: 5px; background: #e5e7eb; transform-origin: 0 50%; } .bl-lines .s { width: 55%; }
.ui.on .bl-lines i { animation: re-bar .6s var(--ease) backwards; } .ui.on .bl-lines i:nth-child(1) { animation-delay: 1.6s; } .ui.on .bl-lines i:nth-child(2) { animation-delay: 1.8s; } .ui.on .bl-lines i:nth-child(3) { animation-delay: 2s; } .ui.on .bl-lines i:nth-child(4) { animation-delay: 2.2s; }
.bl-drop { display: block; height: 150px; border-radius: 12px; } .ui.on .bl-drop { animation: rs-drop .8s var(--spring) 2.4s backwards; }
.bl-meta > b { font-size: 13px; color: #111827; } .bl-meta > span { padding: 9px 12px; border-radius: 10px; border: 1.5px solid #e5e7eb; font-size: 13.5px; font-weight: 600; } .bl-meta > span.on { border-color: #eab308; background: #fefce8; }
.bl-seo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #16a34a; font-weight: 650; } .bl-seo i { width: 12px; height: 12px; border-radius: 50%; background: #22c55e; }
.bl-pub { position: absolute; left: 50%; bottom: 30px; padding: 14px 24px; border-radius: 14px; background: #16a34a; color: #fff; font-weight: 700; transform: translateX(-50%); opacity: 0; box-shadow: 0 16px 30px -12px rgba(22, 163, 74, .6); }
.ui.on .bl-pub { animation: bl-pub .7s var(--spring) 3.6s forwards; } @keyframes bl-pub { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translate(-50%, 0); } }


/* ------------------------------------------------ security company */
.brand-patch { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #fff; transform-origin: 0 50%; }
.brand-patch i { flex: none; width: 34px; height: 40px; background: #0f1f3d; clip-path: path("M17 0 L34 6 V19 C34 29 27 37 17 40 C7 37 0 29 0 19 V6 Z"); }
.brand-patch b { white-space: nowrap; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #0f1f3d; line-height: 1.05; }
.bp-sm i { width: 28px; height: 34px; clip-path: path("M14 0 L28 5 V16 C28 25 22 31 14 34 C6 31 0 25 0 16 V5 Z"); } .bp-sm b { font-size: 19px; }
.sg-ui { --b: #0f1f3d; --a: #f5b400; }
.sg-ui .u-btn { background: var(--a); color: #0f1f3d; } .sg-ui .u-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.sg-mark { color: var(--b); } .sg-mark i { width: 24px; height: 28px; background: var(--b); clip-path: path("M12 0 L24 4 V14 C24 21 19 26 12 28 C5 26 0 21 0 14 V4 Z"); }
.ui .sg-hero { position: relative; display: flex; align-items: center; height: 420px; padding: 0 44px; overflow: hidden; background: linear-gradient(90deg, #0f1f3d 42%, rgba(15, 31, 61, .2) 75%), var(--img) right center / auto 100% no-repeat, #1e3a5f; color: #fff; }
.sg-hero > div { position: relative; z-index: 1; }
.sg-hero small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--a); }
.sg-hero h4 { margin: 10px 0 20px; color: #fff; font-size: 42px; } .sg-hero h4 em { color: var(--a); }
.sg-scan { position: absolute; right: 0; top: 0; width: 45%; height: 4px; background: linear-gradient(90deg, transparent, rgba(245, 180, 0, .9), transparent); box-shadow: 0 0 20px rgba(245, 180, 0, .7); animation: sg-scan 3.2s ease-in-out infinite; }
@keyframes sg-scan { 0%, 100% { top: 4%; } 50% { top: 94%; } }
.ui.on .sg-hero > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .sg-hero h4 { animation-delay: .1s; } .ui.on .sg-hero .u-ctas { animation-delay: .2s; }
.sg-trust { display: grid; grid-template-columns: repeat(4, 1fr); padding: 22px 30px; background: #f5f7fb; text-align: center; font-size: 12.5px; color: #4b5563; } .sg-trust b { display: block; color: var(--b); font-size: 26px; }
.ui.on .sg-trust span { animation: u-pop .7s var(--spring) backwards; } .ui.on .sg-trust span:nth-child(2) { animation-delay: .1s; } .ui.on .sg-trust span:nth-child(3) { animation-delay: .2s; } .ui.on .sg-trust span:nth-child(4) { animation-delay: .3s; }
.sg-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 26px 32px; background: #f5f7fb; height: 590px; align-content: start; }
.sg-svc p { display: grid; gap: 6px; padding: 22px; border-radius: 18px; background: #fff; border-bottom: 4px solid transparent; box-shadow: 0 14px 30px -24px rgba(15, 31, 61, .55); transition: border-color .3s; font-size: 13px; color: #6b7280; }
.sg-svc i { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: #0f1f3d; font-size: 26px; font-style: normal; } .sg-svc b { color: var(--b); font-size: 17px; }
.ui.on .sg-svc p { animation: u-pop .6s var(--spring) backwards; } .ui.on .sg-svc p:nth-child(2) { animation-delay: .07s; } .ui.on .sg-svc p:nth-child(3) { animation-delay: .14s; } .ui.on .sg-svc p:nth-child(4) { animation-delay: .21s; } .ui.on .sg-svc p:nth-child(5) { animation-delay: .28s; } .ui.on .sg-svc p:nth-child(6) { animation-delay: .35s; }
.ui.on .sg-svc p:nth-child(1) { animation: u-pop .6s var(--spring) backwards, sg-hl 6s 1s infinite; }
@keyframes sg-hl { 0%, 30% { border-color: var(--a); } 35%, 100% { border-color: transparent; } }
.sg-quote { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; padding: 24px 36px; background: #f5f7fb; height: 590px; }
.sg-qform { display: grid; gap: 16px; padding: 26px; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -30px rgba(15, 31, 61, .6); }
.sg-qform h4 { font-size: 30px; } .sg-qform h4 em { color: #d39b00; }
.sg-ui .rs-row { grid-template-columns: 80px 1fr; } .sg-ui .rs-step i { background: #eef2f8; color: var(--b); } .sg-ui .rs-step b { color: var(--b); }
.sg-ui .rs-seat span { border-color: #e2e8f0; color: var(--b); } .sg-ui .rs-seat .on { border-color: var(--a); background: #fff8e1; }
.ui.on .sg-qform .u-btn { animation: u-press .4s 1.8s; }
.sg-qok { display: grid; justify-items: center; gap: 8px; padding: 30px; border-radius: 20px; background: var(--b); color: #cbd5e1; text-align: center; opacity: 0; }
.sg-qok i { width: 64px; height: 64px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 34px no-repeat; }
.sg-qok b { color: #fff; font-size: 22px; } .sg-qok span { margin-top: 4px; color: var(--a); font-size: 13px; font-weight: 700; }
.ui.on .sg-qok { animation: ed-res .8s var(--spring) 2.2s forwards; }
.sg-guard { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; padding: 26px 40px; background: #f5f7fb; height: 590px; }
.sg-id { position: relative; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -30px rgba(15, 31, 61, .6); }
.sg-id-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--b); } .sg-id-top .sg-mark { color: #fff; font-size: 15px; } .sg-id-top .sg-mark i { background: var(--a); } .sg-id-top em { color: var(--a); font-style: normal; font-weight: 800; font-size: 13px; }
.sg-id-in { display: grid; grid-template-columns: 110px 1fr 80px; gap: 16px; align-items: center; padding: 22px 18px; }
.sg-face { width: 110px; height: 130px; border-radius: 12px; } .sg-id-in b { display: block; font-size: 20px; color: var(--b); } .sg-id-in span { display: block; font-size: 13px; color: #6b7280; }
.sg-qr { width: 80px; height: 80px; background: conic-gradient(from 90deg at 30% 30%, #111 0 25%, #fff 0 50%, #111 0 75%, #fff 0) 0 0 / 16px 16px, #fff; border: 6px solid #fff; outline: 2px solid #111; }
.sg-scanline { position: absolute; left: 0; right: 0; top: 50px; height: 3px; background: #22c55e; box-shadow: 0 0 16px #22c55e; animation: sg-scan2 2.4s ease-in-out infinite; }
@keyframes sg-scan2 { 0%, 100% { top: 56px; } 50% { top: 220px; } }
.sg-checks { display: grid; gap: 10px; } .sg-checks > b { color: var(--b); font-size: 17px; }
.sg-checks p { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; font-size: 14px; font-weight: 600; color: #111; opacity: 0; box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .4); }
.sg-checks p i { width: 24px; height: 24px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; } .sg-checks em { margin-left: auto; color: #16a34a; font-size: 12.5px; font-style: normal; font-weight: 750; }
.ui.on .sg-checks p { animation: ht-msg .5s var(--ease) forwards; } .ui.on .sg-checks .v1 { animation-delay: .6s; } .ui.on .sg-checks .v2 { animation-delay: 1.1s; } .ui.on .sg-checks .v3 { animation-delay: 1.6s; } .ui.on .sg-checks .v4 { animation-delay: 2.1s; }
.sg-portal { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; padding: 22px 32px; background: #f5f7fb; height: 590px; }
.sg-att, .sg-log { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.sg-att > b, .sg-log > b { color: var(--b); font-size: 16px; }
.sg-att-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .sg-att-row span { padding: 12px; border-radius: 14px; background: #f0fdf4; font-size: 12px; color: #6b7280; } .sg-att-row b { display: block; color: #16a34a; font-size: 22px; }
.sg-patrol { position: relative; height: 230px; border-radius: 16px; background: #0f1f3d linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 24px 24px; }
.sg-patrol svg { position: absolute; inset: 20px 30px; width: calc(100% - 60px); height: calc(100% - 40px); } .sg-patrol rect { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .15); stroke-width: 2; } .sg-patrol .r { fill: none; stroke: var(--a); stroke-width: 3; stroke-dasharray: 8 8; animation: path-flow 1.2s linear infinite; }
.sg-dot { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 6px rgba(34, 197, 94, .3); offset-path: inset(20% 13% 20% 13%); left: 0; top: 0; animation: sg-walk 8s linear infinite; }
.sg-patrol { --w: 1; } .sg-dot { offset-path: none; animation: sg-walk2 8s linear infinite; }
@keyframes sg-walk2 { 0% { left: 21%; top: 28%; } 25% { left: 79%; top: 28%; } 50% { left: 79%; top: 72%; } 75% { left: 21%; top: 72%; } 100% { left: 21%; top: 28%; } }
.sg-patrol span { position: absolute; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 11px; font-weight: 700; }
.sg-patrol .p1 { left: 8%; top: 8%; } .sg-patrol .p2 { right: 8%; top: 8%; } .sg-patrol .p3 { right: 8%; bottom: 8%; } .sg-patrol .p4 { left: 8%; bottom: 8%; }
.sg-log p { display: flex; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid #eef0f4; font-size: 13.5px; color: #374151; } .sg-log em { flex: none; font-style: normal; font-weight: 800; color: var(--b); }
.ui.on .sg-log p.new { animation: u-new 2.4s var(--ease) .6s backwards; }
.sg-admin { --b: #0f1f3d; --a: #f5b400; }
.sg-cams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sg-cams i { position: relative; height: 110px; border-radius: 10px; background: #222 var(--img) center / cover; filter: grayscale(.4) contrast(1.1); }
.sg-cams b { position: absolute; left: 8px; top: 6px; color: #ef4444; font-size: 10.5px; font-weight: 800; animation: mo-tick 1.4s steps(1) infinite; }
.blur-patch { position: absolute; z-index: 1; border-radius: 18px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask: radial-gradient(closest-side, #000 70%, transparent); mask: radial-gradient(closest-side, #000 70%, transparent); }

/* ------------------------------------------------ gym & fitness */
.bp-gym { background: #141414; }
.bp-gym b { color: #fff; }
.bp-gym i { width: 40px; height: 22px; clip-path: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22' fill='none' stroke='%23facc15' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M3 7v8M9 3v16M31 3v16M37 7v8M9 11h22'/%3E%3C/svg%3E") center / contain no-repeat; }
.bp-gym.bp-sm i { width: 32px; height: 18px; clip-path: none; }
.gm-ui { --b: #111; --a: #facc15; }
.gm-ui .u-btn { background: var(--a); color: #111; } .gm-ui .u-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.gm-mark { font-weight: 900; letter-spacing: .12em; color: #111; } .gm-mark i { width: 34px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22' fill='none' stroke='%23111' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M3 7v8M9 3v16M31 3v16M37 7v8M9 11h22'/%3E%3C/svg%3E") center / contain no-repeat; }
.ui .gm-hero { position: relative; display: flex; align-items: center; height: 440px; padding: 0 44px; overflow: hidden; background: linear-gradient(90deg, #0b0b0b 42%, rgba(11, 11, 11, .1) 78%), var(--img) right center / auto 100% no-repeat, #1a1a1a; color: #d4d4d4; }
.gm-hero > div { position: relative; z-index: 1; }
.gm-hero small { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--a); }
.gm-hero h4 { margin: 8px 0 10px; color: #fff; font-size: 64px; font-weight: 900; line-height: .95; letter-spacing: -.02em; font-style: italic; } .gm-hero h4 em { color: var(--a); }
.gm-hero p { margin-bottom: 20px; font-size: 14px; }
.ui.on .gm-hero h4 { animation: gm-slam .7s cubic-bezier(.2, 1.6, .4, 1) backwards; }
@keyframes gm-slam { from { opacity: 0; transform: scale(1.6) skewX(-8deg); } }
.ui.on .gm-hero p, .ui.on .gm-hero .u-ctas { animation: u-up .7s var(--ease) .35s backwards; }
.gm-pulse { position: absolute; right: 18%; top: 50%; width: 160px; height: 160px; margin: -80px; border-radius: 50%; border: 3px solid var(--a); opacity: 0; animation: gm-pulse 2.4s ease-out infinite; }
@keyframes gm-pulse { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
.gm-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 22px 30px; background: var(--a); text-align: center; font-size: 12.5px; font-weight: 600; color: #3f3f00; } .gm-stats b { display: block; color: #111; font-size: 26px; font-weight: 900; }
.gm-plans { padding: 24px 40px; background: #0f0f0f; height: 590px; text-align: center; }
.gm-plans h4 { color: #fff; font-size: 34px; font-weight: 900; font-style: italic; } .gm-plans h4 em { color: var(--a); }
.gm-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; text-align: left; }
.gm-pgrid p { position: relative; display: grid; gap: 6px; padding: 24px; border-radius: 18px; background: #1c1c1c; color: #a3a3a3; font-size: 13px; }
.gm-pgrid p.pop { background: var(--a); color: #333; transform: translateY(-10px); } .gm-pgrid p > i { position: absolute; top: -12px; left: 22px; padding: 4px 10px; border-radius: 99px; background: #111; color: var(--a); font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .1em; }
.gm-pgrid b { color: #fff; font-size: 18px; } .gm-pgrid .pop b { color: #111; } .gm-pgrid em { color: #fff; font-size: 32px; font-weight: 900; font-style: normal; } .gm-pgrid .pop em { color: #111; }
.gm-pgrid span::before { content: none; } .gm-pgrid .pop span::before { color: #111; }
.gm-pgrid u { justify-self: start; margin-top: 10px; padding: 9px 26px; border-radius: 99px; background: var(--a); color: #111; text-decoration: none; font-weight: 800; } .gm-pgrid .pop u { background: #111; color: var(--a); }
.ui.on .gm-pgrid p { animation: u-up .7s var(--ease) backwards; } .ui.on .gm-pgrid p:nth-child(2) { animation: gm-pop .9s var(--spring) .15s backwards; } .ui.on .gm-pgrid p:nth-child(3) { animation-delay: .3s; }
@keyframes gm-pop { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.gm-safe { margin-top: 22px !important; color: #a3a3a3; font-size: 13px; }
.gm-class { position: relative; padding: 22px 34px; background: #fafafa; height: 590px; }
.gm-days { display: flex; gap: 8px; margin-bottom: 16px; } .gm-days span { padding: 9px 18px; border-radius: 12px; background: #fff; border: 1px solid #e5e5e5; font-weight: 700; font-size: 13.5px; } .gm-days .on { background: #111; color: var(--a); border-color: #111; }
.gm-list { display: grid; gap: 10px; }
.gm-list p { display: grid; grid-template-columns: 70px 1fr auto auto; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .4); font-size: 13px; color: #737373; }
.gm-list em { font-style: normal; font-size: 20px; font-weight: 900; color: #111; } .gm-list b { display: block; color: #111; font-size: 16px; }
.gm-list .sp { font-style: normal; font-size: 12px; font-weight: 700; color: #16a34a; } .gm-list .sp.lo { color: #ea580c; } .gm-list .sp.full { color: #dc2626; }
.gm-list u { padding: 8px 18px; border-radius: 99px; background: var(--a); color: #111; text-decoration: none; font-weight: 800; } .gm-list u.w { background: #f5f5f5; color: #737373; }
.ui.on .gm-list .hit { animation: gm-hl 1s var(--ease) 1s forwards; } @keyframes gm-hl { to { background: #fefce8; box-shadow: 0 0 0 2px var(--a); } }
.ui.on .gm-list .bk { animation: u-press .4s 1.6s; }
.ui.on .gm-list .hit .sp.lo { animation: gm-sp .3s 1.9s forwards; } @keyframes gm-sp { to { color: #dc2626; } }
.gm-toast { position: absolute; left: 50%; bottom: 30px; padding: 14px 24px; border-radius: 14px; background: #111; color: var(--a); font-weight: 800; transform: translateX(-50%); opacity: 0; }
.ui.on .gm-toast { animation: bl-pub .7s var(--spring) 2s forwards; }
.gm-train { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px 34px; background: #fafafa; height: 590px; }
.gm-coach { position: relative; display: flex; align-items: flex-end; padding: 24px; border-radius: 22px; background: #222 var(--img) center top / cover; color: #e5e5e5; overflow: hidden; }
.gm-coach::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent 55%); }
.gm-coach > div { position: relative; } .gm-coach em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--a); } .gm-coach b { display: block; color: #fff; font-size: 28px; font-weight: 900; } .gm-coach span { font-size: 13px; }
.gm-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .gm-badges i { padding: 5px 10px; border-radius: 99px; background: rgba(250, 204, 21, .15); color: var(--a); font-size: 11.5px; font-style: normal; font-weight: 700; }
.ui.on .gm-coach { animation: pf-wipe 1.2s var(--ease-io) both; }
.gm-pt { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.gm-pt > b { font-size: 17px; color: #111; }
.gm-ba { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px 12px; font-size: 13px; font-weight: 600; color: #525252; }
.gm-ba .bar { height: 14px; border-radius: 7px; background: #e5e5e5; position: relative; overflow: hidden; } .gm-ba .bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; }
.gm-ba .a::after { background: #a3a3a3; transform: scaleX(.45); } .gm-ba .b::after { background: var(--a); transform: scaleX(.9); }
.ui.on .gm-ba .b::after { animation: re-bar 1.6s var(--ease-io) .5s backwards; }
.gm-pk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .gm-pk span { padding: 12px 8px; border-radius: 12px; border: 1.5px solid #e5e5e5; text-align: center; font-size: 12.5px; color: #525252; } .gm-pk b { display: block; color: #111; font-size: 17px; } .gm-pk .on { border-color: var(--a); background: #fefce8; }
.gm-pt .u-btn { background: #111; color: var(--a); }
.gm-appbg { background: linear-gradient(135deg, #111, #262626); }
.gm-app { display: grid; grid-template-columns: 320px 1fr; gap: 26px; align-items: center; height: 100%; padding: 30px 44px; }
.gm-phone { display: grid; justify-items: center; gap: 16px; padding: 28px 22px; border-radius: 34px; background: #0a0a0a; border: 6px solid #333; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.gm-hi { justify-self: start; color: #fff; font-size: 20px; }
.gm-ring { position: relative; width: 170px; height: 170px; } .gm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gm-ring circle { fill: none; stroke: #262626; stroke-width: 12; } .gm-ring .v { stroke: var(--a); stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 69; }
.ui.on .gm-ring .v { animation: gm-ring 1.8s var(--ease-io) .3s backwards; } @keyframes gm-ring { from { stroke-dashoffset: 314; } }
.gm-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #a3a3a3; font-size: 12px; } .gm-ring b { color: #fff; font-size: 34px; font-weight: 900; }
.gm-today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; } .gm-today p { display: grid; justify-items: center; padding: 10px 4px; border-radius: 12px; background: #171717; color: #e5e5e5; font-size: 12px; font-weight: 700; } .gm-today i { font-style: normal; font-size: 18px; }
.gm-side { display: grid; gap: 16px; }
.gm-wk, .gm-chart { display: grid; gap: 8px; padding: 20px; border-radius: 20px; background: #1c1c1c; color: #d4d4d4; } .gm-wk > b, .gm-chart > b { color: #fff; }
.gm-wk p { display: flex; align-items: center; gap: 10px; font-size: 14px; } .gm-wk p i { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #525252; } .gm-wk p.d i { border-color: var(--a); background: var(--a); }
.ui.on .gm-wk p:nth-of-type(3) i { animation: gm-tick .3s 1.6s forwards; } @keyframes gm-tick { to { border-color: var(--a); background: var(--a); } }
.gm-chart svg { width: 100%; height: 90px; } .gm-chart path { fill: none; stroke: var(--a); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.ui.on .gm-chart path { animation: re-draw 1.8s var(--ease-io) .5s forwards; }
.gm-chart span { color: #4ade80; font-weight: 800; }
.gm-admin { --b: #111; --a: #facc15; }
.gm-admin .u-bars i { background: linear-gradient(180deg, #facc15, #fde68a); }
.lid-logo { z-index: 2; }
.gm-pgrid { margin-top: 34px; }

/* ------------------------------------------------ salon & beauty */
.bp-salon { background: #141414; }
.bp-salon b { color: #f5e7c6; font-family: var(--serif); font-weight: 700; }
.bp-salon i, .bp-salon.bp-sm i { width: 28px; height: 30px; clip-path: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 30' fill='none' stroke='%23d4af37' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='24' r='4'/%3E%3Ccircle cx='21' cy='24' r='4'/%3E%3Cpath d='M10 21L23 2M18 21L5 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.sl-ui { --b: #1c1917; --a: #c9a227; }
.sl-ui .u-btn { background: #1c1917; color: #f5e7c6; } .sl-ui .u-btn.ghost { background: transparent; color: #1c1917; border-color: #1c1917; }
.sl-mark { font-family: var(--serif); font-size: 21px; color: #1c1917; } .sl-mark i { width: 22px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 30' fill='none' stroke='%23c9a227' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='24' r='4'/%3E%3Ccircle cx='21' cy='24' r='4'/%3E%3Cpath d='M10 21L23 2M18 21L5 2'/%3E%3C/svg%3E") center / contain no-repeat; }
.sl-hero { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; height: 460px; padding: 0 44px; overflow: hidden; background: linear-gradient(135deg, #faf3ea, #f3e1e6); }
.sl-hero small { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #a8841a; }
.sl-hero h4 { margin: 10px 0 12px; font-family: var(--serif); font-size: 50px; font-weight: 600; color: #1c1917; } .sl-hero h4 em { font-style: italic; color: #9f1239; }
.sl-hero p { margin-bottom: 20px; color: #57534e; font-size: 14px; }
.sl-photo { justify-self: end; width: 330px; height: 400px; border-radius: 200px 200px 20px 20px; background: #ddd var(--img) center top / cover; box-shadow: 0 30px 60px -30px rgba(80, 30, 40, .6); }
.ui.on .sl-photo { animation: sl-arch 1.2s var(--ease-io) both; } @keyframes sl-arch { from { clip-path: inset(100% 0 0 0 round 200px 200px 20px 20px); } to { clip-path: inset(0 round 200px 200px 20px 20px); } }
.ui.on .sl-hero > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .sl-hero h4 { animation-delay: .1s; } .ui.on .sl-hero p { animation-delay: .2s; } .ui.on .sl-hero .u-ctas { animation-delay: .3s; }
.sl-spark { position: absolute; color: #c9a227; font-style: normal; animation: mo-twinkle 2.4s ease-in-out infinite; } .sl-spark.s1 { right: 380px; top: 70px; font-size: 26px; } .sl-spark.s2 { right: 40px; top: 120px; font-size: 18px; animation-delay: .8s; } .sl-spark.s3 { right: 330px; bottom: 60px; font-size: 20px; animation-delay: 1.6s; }
.sl-strip { display: flex; justify-content: space-around; padding: 18px; background: #1c1917; color: #f5e7c6; font-size: 13.5px; font-weight: 650; }
.sl-menu { position: relative; padding: 20px 36px; background: #fdf8f3; height: 590px; }
.sl-cats span { background: #f3e8dc; color: #1c1917; } .sl-cats .on { background: #1c1917; color: #f5e7c6; }
.sl-items { display: grid; gap: 8px; }
.sl-items p { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px; background: #fff; font-size: 12.5px; color: #78716c; border: 1px solid #f0e6da; }
.sl-items b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; color: #1c1917; } .sl-items em { font-style: normal; font-weight: 800; font-size: 16px; color: #1c1917; }
.sl-items u { padding: 7px 16px; border-radius: 99px; border: 1.5px solid #c9a227; color: #1c1917; text-decoration: none; font-weight: 700; }
.ui.on .sl-items .pick { animation: sl-pick .5s var(--ease) 1s forwards; } @keyframes sl-pick { to { border-color: #c9a227; background: #fffbeb; } }
.ui.on .sl-items .pick u { animation: sl-add .4s 1s forwards; } @keyframes sl-add { to { background: #c9a227; color: #fff; } }
.sl-cartbar { position: absolute; left: 36px; right: 36px; bottom: 22px; display: flex; justify-content: space-between; padding: 16px 22px; border-radius: 16px; background: #1c1917; color: #d6d3d1; font-size: 13.5px; transform: translateY(120px); }
.sl-cartbar b { color: #f5e7c6; } .ui.on .sl-cartbar { animation: sl-bar .6s var(--spring) 1.4s forwards; } @keyframes sl-bar { to { transform: none; } }
.sl-book { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; padding: 22px 32px; background: #fdf8f3; height: 590px; }
.sl-pick, .sl-conf { position: relative; display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.sl-pick > b { font-family: var(--serif); font-size: 17px; color: #1c1917; }
.sl-sty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .sl-sty span { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; border: 1.5px solid #f0e6da; font-weight: 700; font-size: 13.5px; color: #1c1917; text-align: center; }
.sl-sty i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f3e1e6, #faf3ea); color: #9f1239; font-style: normal; font-weight: 800; font-size: 18px; } .sl-sty small { font-weight: 500; font-size: 11px; color: #78716c; }
.ui.on .sl-sty .on { animation: sl-pick .5s var(--ease) .8s forwards; }
.sl-slots .on { --a: #c9a227; }
.sl-conf small { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #a8841a; }
.sl-conf p { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5ede4; font-size: 13.5px; color: #78716c; } .sl-conf p em { color: #1c1917; font-style: normal; font-weight: 700; } .sl-conf .tot em { font-size: 20px; }
.ui.on .sl-conf .u-btn { animation: u-press .4s 2.1s; }
.sl-ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; border-radius: inherit; background: #1c1917; color: #d6d3d1; text-align: center; opacity: 0; padding: 20px; }
.sl-ok i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #c9a227; color: #1c1917; font-size: 30px; font-weight: 900; font-style: normal; } .sl-ok b { color: #f5e7c6; font-family: var(--serif); font-size: 24px; }
.ui.on .sl-ok { animation: u-show .6s 2.5s forwards; } .ui.on .sl-ok i { animation: u-pop .7s var(--spring) 2.6s backwards; }
.sl-looks { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; padding: 24px 40px; background: #fdf8f3; height: 590px; }
.sl-ba { position: relative; height: 500px; border-radius: 22px; overflow: hidden; }
.sl-ba i { position: absolute; inset: 0; background: #ddd var(--img) center top / cover; } .sl-ba .b { filter: grayscale(1) brightness(.9) contrast(.9); }
.sl-ba .a { clip-path: inset(0 0 0 50%); animation: sl-wipe 5s ease-in-out infinite; }
.sl-ba .h { left: 50%; right: auto; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); animation: sl-handle 5s ease-in-out infinite; }
.sl-ba .h::after { content: "⟷"; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1c1917; font-weight: 800; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
@keyframes sl-wipe { 0%, 100% { clip-path: inset(0 0 0 75%); } 50% { clip-path: inset(0 0 0 20%); } }
@keyframes sl-handle { 0%, 100% { left: 75%; } 50% { left: 20%; } }
.sl-ba span { position: absolute; top: 16px; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .1em; } .sl-ba .l1 { left: 16px; } .sl-ba .l2 { right: 16px; }
.sl-lside h4 { font-family: var(--serif); font-size: 38px; color: #1c1917; } .sl-lside h4 em { font-style: italic; color: #9f1239; } .sl-lside p { margin: 8px 0 18px; color: #78716c; }
.sl-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .sl-thumbs i { height: 110px; border-radius: 14px; background: #ddd var(--img) center / cover; }
.sl-pack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-content: center; padding: 30px 40px; background: linear-gradient(135deg, #faf3ea, #f3e1e6); height: 590px; }
.sl-pack p { display: grid; gap: 8px; padding: 26px; border-radius: 22px; background: #fff; color: #78716c; font-size: 13px; box-shadow: 0 20px 40px -28px rgba(80, 30, 40, .55); }
.sl-pack i { font-size: 44px; font-style: normal; } .sl-pack b { font-family: var(--serif); font-size: 22px; color: #1c1917; } .sl-pack em { font-style: normal; font-size: 28px; font-weight: 900; color: #1c1917; } .sl-pack em small { font-size: 13px; }
.sl-pack .gold { background: #1c1917; color: #d6d3d1; transform: translateY(-12px); } .sl-pack .gold b, .sl-pack .gold em { color: #f5e7c6; }
.sl-pack u { justify-self: start; margin-top: 6px; padding: 9px 22px; border-radius: 99px; background: #1c1917; color: #f5e7c6; text-decoration: none; font-weight: 700; } .sl-pack .gold u { background: #c9a227; color: #1c1917; }
.ui.on .sl-pack p { animation: u-up .8s var(--ease) backwards; } .ui.on .sl-pack .gold { animation: gm-pop .9s var(--spring) .15s backwards; } .ui.on .sl-pack .gift { animation-delay: .3s; } .ui.on .sl-pack .gift i { animation: mo-beat 1.4s ease-in-out 1.2s infinite; display: inline-block; }
.sl-admin { --b: #1c1917; --a: #c9a227; }
.sl-cal { padding: 20px 24px; }
.sl-cal .u-dash-head b { color: #1c1917; }
.sl-grid { display: grid; grid-template-columns: 40px repeat(4, 1fr); grid-auto-rows: 104px; gap: 8px; margin-top: 16px; }
.sl-grid > b { height: 30px; align-self: end; font-size: 14px; color: #1c1917; } .sl-grid > span { height: 30px; }
.sl-grid { grid-template-rows: 30px; } .sl-grid > em { font-style: normal; font-weight: 800; color: #a8a29e; font-size: 13px; }
.sl-grid > i { border-radius: 12px; background: #f5f5f4; font-style: normal; font-size: 13px; font-weight: 650; padding: 10px; color: #1c1917; }
.sl-grid .c1 { background: #fce7f3; border-left: 4px solid #db2777; } .sl-grid .c2 { background: #e0f2fe; border-left: 4px solid #0284c7; } .sl-grid .c3 { background: #fef3c7; border-left: 4px solid #d97706; } .sl-grid .c4 { background: #dcfce7; border-left: 4px solid #16a34a; }
.sl-grid .t2 { grid-row: span 2; }
.ui.on .sl-grid .new { animation: rs-drop .9s var(--spring) .8s backwards, hc-em 1.6s ease-in-out 1.8s 3; }

/* ------------------------------------------------ coaching & tuition */
.co-ui { --b: #1e3a8a; --a: #facc15; }
.co-ui .u-btn { background: var(--a); color: #1e3a8a; } .co-ui .u-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.co-mark { color: var(--b); } .co-mark i { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #1e3a8a 50%, #facc15 50%); }
.co-ticker b { background: #1e3a8a; }
.co-hero { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; height: 380px; padding: 0 44px; overflow: hidden; background: linear-gradient(120deg, #1e3a8a, #2546a8); color: #fff; }
.co-hero::before { content: ""; position: absolute; left: 0; top: 0; width: 110px; height: 70px; background: linear-gradient(135deg, var(--a) 0 22%, transparent 22% 34%, #fff 34% 44%, transparent 44%); opacity: .9; }
.co-hero small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--a); }
.co-hero h4 { margin: 10px 0 20px; color: #fff; font-size: 48px; } .co-hero h4 em { color: var(--a); font-style: italic; }
.co-cap { justify-self: end; width: 340px; height: 280px; border-radius: 20px; background: var(--img) center / cover; }
.ui.on .co-cap { animation: co-float 3.6s ease-in-out infinite, u-pop 1s var(--spring) backwards; }
@keyframes co-float { 50% { transform: translateY(-12px) rotate(-1deg); } }
.ui.on .co-hero > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .co-hero h4 { animation-delay: .1s; } .ui.on .co-hero .u-ctas { animation-delay: .2s; }
.co-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 22px 30px; text-align: center; font-size: 12.5px; color: #4b5563; } .co-stats b { display: block; color: var(--b); font-size: 26px; }
.co-batch { padding: 22px 32px; background: #f6f8fc; height: 590px; }
.co-bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.co-bgrid p { position: relative; display: grid; gap: 6px; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 16px 34px -26px rgba(30, 58, 138, .55); font-size: 13px; color: #6b7280; }
.co-bgrid em { justify-self: start; padding: 4px 10px; border-radius: 6px; background: #e0e7ff; color: var(--b); font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .1em; }
.co-bgrid b { color: var(--b); font-size: 18px; } .co-bgrid strong { color: #111; font-size: 18px; }
.co-seat { display: block; height: 8px; border-radius: 4px; background: #e5e7eb; overflow: hidden; margin-top: 6px; } .co-seat s { display: block; height: 100%; width: calc(var(--v) * 100%); background: linear-gradient(90deg, #22c55e, #facc15, #ef4444); transform-origin: 0 50%; }
.ui.on .co-seat s { animation: re-bar 1.4s var(--ease-io) .3s backwards; }
.co-bgrid small.lo { color: #dc2626; font-weight: 800; animation: mo-tick 1.4s steps(1) infinite; }
.co-bgrid .hot { box-shadow: 0 0 0 2px var(--a), 0 16px 34px -26px rgba(30, 58, 138, .55); }
.co-bgrid u { justify-self: start; margin-top: 8px; padding: 9px 24px; border-radius: 99px; background: var(--b); color: #fff; text-decoration: none; font-weight: 700; }
.ui.on .co-bgrid p { animation: u-up .8s var(--ease) backwards; } .ui.on .co-bgrid p:nth-child(2) { animation-delay: .12s; } .ui.on .co-bgrid p:nth-child(3) { animation-delay: .24s; }
.co-enrol { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px 34px; background: #f6f8fc; height: 590px; align-content: start; }
.co-form .u-in i { color: #111; }
.co-fee { position: relative; display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.co-fee > b { color: var(--b); font-size: 16px; margin-bottom: 4px; }
.co-fee p { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #e5e7eb; font-size: 13.5px; color: #6b7280; } .co-fee p em { font-style: normal; font-weight: 700; color: #111; }
.co-fee .disc em { color: #16a34a; } .co-fee .tot em { color: var(--b); font-size: 20px; }
.ui.on .co-fee .disc { animation: u-new 2.4s var(--ease) 1.2s backwards; }
.co-emi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .co-emi span { padding: 10px; border-radius: 10px; border: 1.5px solid #e5e7eb; text-align: center; font-size: 13px; font-weight: 700; }
.ui.on .co-emi span:last-child { animation: sl-pick .4s 1.8s forwards; } .co-ui .co-emi span.on { border-color: #e5e7eb; }
.ui.on .co-emi span.on { animation: co-off .4s 1.8s forwards; } @keyframes co-off { to { border-color: #e5e7eb; } }
.co-fee .u-btn { background: var(--b); color: #fff; } .ui.on .co-fee .u-btn { animation: u-press .4s 2.6s; }
.co-ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; border-radius: inherit; background: var(--b); color: #c7d2fe; text-align: center; padding: 20px; opacity: 0; }
.co-ok i { font-size: 56px; font-style: normal; } .co-ok b { color: #fff; font-size: 24px; } .co-ok span { color: var(--a); font-weight: 700; font-size: 13px; }
.ui.on .co-ok { animation: u-show .6s 3s forwards; } .ui.on .co-ok i { animation: mo-pop 1s var(--spring) 3.1s backwards; }
.co-test { display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px; padding: 26px 34px; background: #f6f8fc; height: 100%; align-content: start; }
.co-q, .co-score { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); }
.co-qhead { display: flex; justify-content: space-between; align-items: center; } .co-qhead b { color: var(--b); }
.co-timer { padding: 6px 12px; border-radius: 10px; background: #fef2f2; color: #dc2626; font-weight: 800; } .co-timer i { font-style: normal; font-variant-numeric: tabular-nums; }
.co-qn { color: #6b7280; font-size: 12.5px; font-weight: 700; }
.co-q h4 { font-size: 21px; line-height: 1.35; color: #111; font-weight: 700; }
.co-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .co-opts span { padding: 16px; border-radius: 14px; border: 2px solid #e5e7eb; font-weight: 700; color: #111; }
.ui.on .co-opts .ok { animation: co-right .5s var(--spring) 1.2s forwards; } @keyframes co-right { 50% { transform: scale(1.04); } to { border-color: #22c55e; background: #f0fdf4; color: #166534; } }
.co-score { justify-items: center; text-align: center; } .co-score > b { color: var(--b); }
.co-ring { width: 160px; height: 160px; } .co-ring .v { stroke: #facc15; stroke-dashoffset: 44; } .co-ring circle { stroke: #e5e7eb; } .co-ring span { color: #6b7280; } .co-ring b { color: var(--b); }
.co-score p { font-size: 14px; color: #374151; } .co-score strong { color: var(--b); font-size: 22px; } .co-score .up { color: #16a34a; font-weight: 700; }
.co-dark { background: radial-gradient(circle at 50% 0%, #2546a8, #0f1f4d 75%); }
.co-res { padding: 30px 40px; text-align: center; color: #c7d2fe; }
.co-res small { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--a); } .co-res h4 { margin: 6px 0 22px; color: #fff; font-size: 40px; } .co-res h4 em { color: var(--a); }
.co-tops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
.co-tops p { display: grid; justify-items: center; gap: 4px; padding: 20px 12px; border-radius: 18px; background: rgba(255, 255, 255, .08); font-size: 12px; }
.co-tops i { width: 70px; height: 70px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #facc15, #f59e0b); color: #1e3a8a; font-style: normal; font-weight: 900; font-size: 20px; box-shadow: 0 0 0 4px rgba(250, 204, 21, .25); }
.co-tops b { color: #fff; font-size: 16px; } .co-tops em { color: var(--a); font-style: normal; font-size: 22px; font-weight: 900; }
.co-tops .gold { background: rgba(250, 204, 21, .16); transform: translateY(-14px); box-shadow: 0 0 0 2px var(--a); }
.ui.on .co-tops p { animation: rs-drop .9s var(--spring) backwards; } .ui.on .co-tops p:nth-child(2) { animation-delay: .15s; } .ui.on .co-tops p:nth-child(3) { animation-delay: .3s; } .ui.on .co-tops p:nth-child(4) { animation-delay: .45s; }
.co-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; } .co-big span { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); font-size: 13px; } .co-big b { display: block; color: #fff; font-size: 32px; }
.co-admin { --b: #1e3a8a; --a: #facc15; }
.co-admin .u-bars i { background: linear-gradient(180deg, #1e3a8a, #93c5fd); }

/* ------------------------------------------------ furniture */
.fu-ui { --b: #3f2a1d; --a: #b9824a; }
.fu-ui .u-btn { background: #3f2a1d; color: #f7efe5; } .fu-ui .u-btn.ghost { background: transparent; color: #3f2a1d; border-color: #3f2a1d; }
.fu-tab .ui { height: 740px; }
.fu-mark { font-size: 20px; font-weight: 400; letter-spacing: -.01em; color: #3f2a1d; } .fu-mark b { font-weight: 800; color: #b9824a; }
.ui .fu-hero { display: flex; align-items: center; height: 420px; padding: 0 44px; background: linear-gradient(90deg, #f6efe6 40%, rgba(246, 239, 230, 0) 72%), var(--img) right center / 62% auto no-repeat, #ece2d5; }
.fu-hero small { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #a0703c; }
.fu-hero h4 { margin: 10px 0 20px; font-family: var(--serif); font-size: 44px; font-weight: 600; color: #3f2a1d; } .fu-hero h4 em { font-style: italic; color: #a0703c; }
.ui.on .fu-hero { animation: pf-kb 7s ease-out both; } .ui.on .fu-hero > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .fu-hero h4 { animation-delay: .1s; } .ui.on .fu-hero .u-ctas { animation-delay: .2s; }
.fu-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 18px 32px; }
.fu-cats span { display: grid; gap: 8px; text-align: center; font-weight: 700; font-size: 13.5px; color: #3f2a1d; } .fu-cats i { height: 120px; border-radius: 14px; background: #eee var(--img) center / cover; transition: transform .5s; }
.ui.on .fu-cats span { animation: u-pop .6s var(--spring) backwards; } .ui.on .fu-cats span:nth-child(2) { animation-delay: .07s; } .ui.on .fu-cats span:nth-child(3) { animation-delay: .14s; } .ui.on .fu-cats span:nth-child(4) { animation-delay: .21s; } .ui.on .fu-cats span:nth-child(5) { animation-delay: .28s; }
.fu-cat { display: grid; grid-template-columns: 180px 1fr; gap: 22px; padding: 22px 30px; background: #fbf7f2; height: 590px; }
.fu-tab .fu-cat { height: 680px; }
.fu-cat aside { display: grid; gap: 8px; align-content: start; } .fu-cat aside b { font-size: 13px; color: #3f2a1d; margin-top: 6px; }
.fu-cat aside p { display: grid; gap: 4px; } .fu-cat aside span { padding: 7px 10px; border-radius: 8px; font-size: 13px; color: #57534e; } .fu-cat aside span.on { background: #3f2a1d; color: #f7efe5; font-weight: 650; }
.fu-range { display: block; height: 6px; margin: 8px 0; border-radius: 3px; background: linear-gradient(90deg, #e7ded3 15%, #b9824a 15% 70%, #e7ded3 70%); }
.fu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; }
.fu-grid p { display: grid; gap: 2px; padding: 8px 8px 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px -20px rgba(63, 42, 29, .5); font-size: 12px; color: #78716c; }
.fu-grid i { height: 120px; margin-bottom: 6px; border-radius: 10px; background: #eee var(--img) center / cover; }
.fu-tab .fu-grid i { height: 150px; }
.fu-grid b { color: #3f2a1d; font-size: 14px; } .fu-grid em { font-style: normal; font-weight: 800; color: #111; font-size: 15px; } .fu-grid s { color: #a8a29e; font-weight: 500; font-size: 12px; }
.ui.on .fu-grid p { animation: u-pop .6s var(--spring) backwards; } .ui.on .fu-grid p:nth-child(2) { animation-delay: .06s; } .ui.on .fu-grid p:nth-child(3) { animation-delay: .12s; } .ui.on .fu-grid p:nth-child(4) { animation-delay: .18s; } .ui.on .fu-grid p:nth-child(5) { animation-delay: .24s; } .ui.on .fu-grid p:nth-child(6) { animation-delay: .3s; }
.fu-prod { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; padding: 24px 34px; background: #fbf7f2; height: 590px; }
.fu-tab .fu-prod { height: 680px; }
.fu-pimg { position: relative; border-radius: 18px; overflow: hidden; background: #ece2d5; }
.fu-pimg i { position: absolute; inset: 0; background: var(--img) center / cover; animation: fu-tint 8s steps(1) infinite; }
@keyframes fu-tint { 0% { filter: none; } 25% { filter: hue-rotate(70deg) saturate(1.6); } 50% { filter: sepia(.6) saturate(1.4) hue-rotate(-20deg); } 75% { filter: brightness(.7) contrast(1.1); } }
.fu-tag { position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 700; color: #3f2a1d; }
.fu-pinfo { display: grid; gap: 8px; align-content: start; } .fu-pinfo small { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #a0703c; }
.fu-pinfo h4 { font-family: var(--serif); font-size: 32px; color: #3f2a1d; } .fu-pinfo > b { font-size: 13px; color: #3f2a1d; margin-top: 4px; }
.fu-sw { display: flex; gap: 10px; } .fu-sw i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #d6cfc6; }
.fu-sw .c1 { background: #8a8d91; } .fu-sw .c2 { background: #7d9a7a; } .fu-sw .c3 { background: #c9a27a; } .fu-sw .c4 { background: #3a3a3c; }
.fu-sw i { animation: fu-ring 8s steps(1) infinite; } .fu-sw .c2 { animation-delay: 2s; } .fu-sw .c3 { animation-delay: 4s; } .fu-sw .c4 { animation-delay: 6s; }
@keyframes fu-ring { 0% { box-shadow: 0 0 0 3px #3f2a1d; } 25%, 100% { box-shadow: 0 0 0 1.5px #d6cfc6; } }
.fu-ui .st-add { background: #3f2a1d; } .fu-ui .st-sizes .on { border-color: #3f2a1d; background: #f6efe6; }
.fu-room { position: relative; height: 100%; overflow: hidden; }
.fu-wall { position: absolute; inset: 0 0 34% 0; background: #e9e1d6; animation: fu-wall 9s steps(1) infinite; }
@keyframes fu-wall { 0% { background: #e9e1d6; } 33% { background: #c9d6cf; } 66% { background: #e8d5c4; } }
.fu-floor { position: absolute; inset: 66% 0 0 0; background: repeating-linear-gradient(90deg, #b88a5e 0 90px, #ad7f54 90px 180px); }
.fu-room::after { content: ""; position: absolute; left: 0; right: 0; top: 66%; height: 4px; background: rgba(0, 0, 0, .1); }
.fu-sofa { position: absolute; left: 120px; bottom: 120px; width: 470px; height: 230px; border-radius: 16px; background: var(--img) center / cover; box-shadow: 0 30px 40px -24px rgba(0, 0, 0, .5); z-index: 1; }
.fu-chair { position: absolute; left: 600px; bottom: 120px; width: 160px; height: 210px; border-radius: 14px; background: var(--img) center / cover; box-shadow: 0 30px 40px -24px rgba(0, 0, 0, .5); z-index: 1; }
.ui.on .fu-sofa { animation: fu-place 1.2s var(--spring) backwards; } .ui.on .fu-chair { animation: fu-place 1.2s var(--spring) .3s backwards; }
@keyframes fu-place { from { opacity: 0; transform: translateY(-80px) scale(.9); } }
.fu-panel { position: absolute; right: 22px; top: 22px; z-index: 2; display: grid; gap: 8px; width: 230px; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .95); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .4); }
.fu-panel b { color: #3f2a1d; } .fu-panel p { font-size: 12px; font-weight: 700; color: #78716c; }
.fu-walls { display: flex; gap: 8px; } .fu-walls i { width: 30px; height: 30px; border-radius: 8px; animation: fu-ring 9s steps(1) infinite; } .fu-walls .w1 { background: #e9e1d6; } .fu-walls .w2 { background: #c9d6cf; animation-delay: 3s; } .fu-walls .w3 { background: #e8d5c4; animation-delay: 6s; }
.fu-panel .fu-sw i { width: 26px; height: 26px; }
.fu-dim { position: absolute; left: 230px; bottom: 80px; z-index: 2; padding: 4px 10px; border-radius: 8px; background: #3f2a1d; color: #fff; font-size: 12px; font-weight: 700; }
.fu-quote { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; padding: 22px 32px; background: #fbf7f2; height: 590px; align-content: start; }
.fu-draw { display: grid; gap: 8px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); } .fu-draw small { text-align: center; color: #78716c; }
.fu-draw svg { width: 100%; } .fu-draw .w { fill: none; stroke: #3f2a1d; stroke-width: 5; stroke-dasharray: 1400; stroke-dashoffset: 1400; } .fu-draw .d { stroke: #b9824a; stroke-width: 5; stroke-linecap: round; opacity: 0; } .fu-draw .m { stroke: #b9824a; stroke-width: 2; fill: none; opacity: 0; } .fu-draw text { font: 700 14px var(--sans); fill: #a0703c; opacity: 0; }
.ui.on .fu-draw .w { animation: re-draw 2s var(--ease-io) forwards; } .ui.on .fu-draw .d, .ui.on .fu-draw .m, .ui.on .fu-draw text { animation: u-show .5s 1.8s forwards; }
.fu-form .u-btn { background: #3f2a1d; color: #f7efe5; } .fu-form .u-done b { color: #3f2a1d; }
.fu-admin { --b: #3f2a1d; --a: #b9824a; }
.fu-pipe { display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .25); }
.fu-pipe p { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; border: 1px solid #f0ebe3; } .fu-pipe p b { color: #111; font-size: 14px; }
.fu-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .fu-steps i { padding: 7px 0; border-radius: 8px; background: #f5f5f4; color: #a8a29e; font-size: 11.5px; font-weight: 700; font-style: normal; text-align: center; }
.fu-steps .d { background: #dcfce7; color: #166534; } .fu-steps .n { background: #fef3c7; color: #92400e; animation: mo-tick 1.6s steps(1) infinite; }
.ui.on .fu-steps i { animation: u-pop .4s var(--spring) backwards; } .ui.on .fu-steps .n { animation: u-pop .4s var(--spring) backwards, mo-tick 1.6s steps(1) .6s infinite; }
.fu-order { background: linear-gradient(160deg, #f6efe6, #fff); }
.fu-ord { display: grid; justify-items: center; align-content: center; gap: 10px; height: 100%; text-align: center; color: #57534e; font-size: 20px; }
.fu-check { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: #3f2a1d; color: #f7efe5; font-size: 60px; font-style: normal; font-weight: 900; }
.ui.on .fu-check { animation: mo-pop 1s var(--spring) backwards; }
.fu-ord > b { font-family: var(--serif); font-size: 48px; color: #3f2a1d; }
.fu-deliv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; } .fu-deliv span { padding: 18px 26px; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px -16px rgba(63, 42, 29, .5); } .fu-deliv small { display: block; font-size: 13px; font-weight: 800; letter-spacing: .14em; color: #a0703c; } .fu-deliv b { color: #3f2a1d; font-size: 24px; }
.fu-inst { color: #16a34a; font-weight: 700; }

/* ------------------------------------------------ enterprises, trading & distribution */
.en-ui { --b: #0f3d3e; --a: #f59e0b; }
.en-ui .u-btn { background: #0f3d3e; color: #fff; } .en-ui .u-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.en-lap .ui { height: 564px; }
.en-mark { color: #0f3d3e; } .en-mark i { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #0f3d3e 0 55%, #f59e0b 55%); }
.ui .en-hero { display: flex; align-items: center; height: 330px; padding: 0 44px; background: linear-gradient(90deg, rgba(10, 42, 43, .94) 38%, rgba(10, 42, 43, .25) 75%), var(--img) right center / cover no-repeat; color: #fff; }
.en-hero small { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--a); }
.en-hero h4 { margin: 10px 0 20px; color: #fff; font-size: 40px; } .en-hero h4 em { color: var(--a); }
.en-hero .u-btn:not(.ghost) { background: var(--a); color: #0f3d3e; }
.ui.on .en-hero > div > * { animation: u-up .8s var(--ease) backwards; } .ui.on .en-hero h4 { animation-delay: .1s; } .ui.on .en-hero .u-ctas { animation-delay: .2s; }
.en-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 20px 30px 10px; text-align: center; font-size: 12.5px; color: #4b5563; } .en-stats b { display: block; color: #0f3d3e; font-size: 26px; }
.ui.on .en-stats span { animation: u-pop .7s var(--spring) backwards; } .ui.on .en-stats span:nth-child(2) { animation-delay: .1s; } .ui.on .en-stats span:nth-child(3) { animation-delay: .2s; } .ui.on .en-stats span:nth-child(4) { animation-delay: .3s; }
.en-cert { display: flex; justify-content: center; gap: 10px; padding: 8px 30px 18px; } .en-cert i { padding: 6px 12px; border-radius: 99px; background: #ecfdf5; color: #065f46; font-size: 12px; font-style: normal; font-weight: 700; }
.en-range { padding: 22px 32px; background: #f6faf9; height: 590px; }
.en-rgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.en-rgrid p { display: grid; gap: 4px; padding: 10px 10px 14px; border-radius: 16px; background: #fff; box-shadow: 0 12px 28px -22px rgba(15, 61, 62, .6); font-size: 12.5px; color: #6b7280; }
.en-rgrid i { height: 170px; margin-bottom: 6px; border-radius: 12px; background: #eee var(--img) center / cover; } .en-rgrid b { color: #0f3d3e; font-size: 15px; }
.ui.on .en-rgrid p { animation: u-pop .6s var(--spring) backwards; } .ui.on .en-rgrid p:nth-child(2) { animation-delay: .08s; } .ui.on .en-rgrid p:nth-child(3) { animation-delay: .16s; } .ui.on .en-rgrid p:nth-child(4) { animation-delay: .24s; }
.en-brands { margin-top: 22px; } .en-brands small { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #0f3d3e; }
.en-bscroll { overflow: hidden; margin-top: 12px; } .en-bscroll div { display: flex; gap: 14px; width: max-content; animation: marquee 18s linear infinite; }
.en-bscroll b { padding: 16px 30px; border-radius: 14px; background: #fff; border: 1px solid #e5e7eb; color: #9ca3af; font-size: 18px; letter-spacing: .04em; }
.en-deal { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; align-items: center; padding: 24px 40px; background: #f6faf9; height: 590px; }
.en-why h4 { margin-bottom: 16px; font-size: 34px; color: #0f3d3e; } .en-why h4 em { color: #d97706; }
.en-why p { margin-bottom: 10px; padding: 12px 16px; border-radius: 12px; background: #fff; font-weight: 650; color: #0f3d3e; box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .4); }
.ui.on .en-why p { animation: mo-slide .6s var(--ease) backwards; } .ui.on .en-why p:nth-of-type(2) { animation-delay: .1s; } .ui.on .en-why p:nth-of-type(3) { animation-delay: .2s; } .ui.on .en-why p:nth-of-type(4) { animation-delay: .3s; }
.en-form .u-btn { background: #0f3d3e; color: #fff; } .en-form .u-done b { color: #0f3d3e; }
.en-portalbg { background: linear-gradient(135deg, #0f3d3e, #165a5b); }
.en-portal { display: grid; grid-template-columns: 330px 1fr; gap: 34px; align-items: center; height: 100%; padding: 26px 44px; }
.en-phone { position: relative; display: grid; gap: 10px; padding: 22px 16px; border-radius: 34px; background: #fff; border: 7px solid #0a2a2b; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); overflow: hidden; }
.en-ph-top { display: flex; justify-content: space-between; align-items: center; } .en-ph-top b { color: #0f3d3e; font-size: 17px; } .en-ph-top span { padding: 4px 8px; border-radius: 8px; background: #ecfdf5; color: #065f46; font-size: 11px; font-weight: 700; }
.en-phone > p { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid #eef0f4; font-size: 11.5px; color: #6b7280; }
.en-phone > p > i { width: 48px; height: 48px; border-radius: 10px; background: #eee var(--img) center / cover; } .en-phone > p b { display: block; color: #111; font-size: 13px; }
.en-q { display: flex; align-items: center; gap: 6px; font-style: normal; } .en-q s { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: #f3f4f6; text-decoration: none; font-weight: 800; color: #0f3d3e; } .en-q b { min-width: 14px; text-align: center; color: #0f3d3e !important; font-size: 15px !important; }
.ui.on .en-q .up { animation: u-pop .5s var(--spring) 1s; }
.en-total { display: flex; justify-content: space-between; padding: 6px 4px; font-size: 13px; color: #6b7280; } .en-total b { color: #0f3d3e; font-size: 20px; }
.en-phone .u-btn { background: var(--a); color: #0f3d3e; } .ui.on .en-phone .u-btn { animation: u-press .4s 1.8s; }
.en-placed { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: #fff; text-align: center; opacity: 0; }
.en-placed i { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: #22c55e; color: #fff; font-size: 34px; font-style: normal; font-weight: 900; } .en-placed b { color: #0f3d3e; font-size: 22px; } .en-placed span { color: #6b7280; font-size: 13px; }
.ui.on .en-placed { animation: u-show .5s 2.2s forwards; } .ui.on .en-placed i { animation: u-pop .7s var(--spring) 2.3s backwards; }
.en-pside { color: #ccfbf1; } .en-pside h4 { margin-bottom: 18px; color: #fff; font-size: 36px; } .en-pside h4 em { color: var(--a); }
.en-pside p { margin-bottom: 10px; font-size: 16px; font-weight: 650; }
.en-disp { padding: 26px 40px; background: #f6faf9; height: 590px; }
.en-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px -28px rgba(0, 0, 0, .35); font-weight: 700; font-size: 14px; color: #0f3d3e; }
.en-road { position: relative; height: 54px; border-radius: 14px; background: repeating-linear-gradient(90deg, #d1d5db 0 24px, transparent 24px 40px) center / 100% 3px no-repeat, #f3f4f6; }
.en-truck { position: absolute; top: 8px; left: 0; font-size: 32px; font-style: normal; transform: scaleX(-1); }
.ui.on .en-truck { animation: en-drive 3s var(--ease-io) .4s forwards; } @keyframes en-drive { to { left: 62%; } }
.en-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.en-steps p { display: grid; justify-items: center; gap: 6px; padding: 18px 10px; border-radius: 16px; background: #fff; text-align: center; font-weight: 700; font-size: 13.5px; color: #9ca3af; box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .4); }
.en-steps i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #f3f4f6; font-style: normal; } .en-steps small { font-weight: 500; font-size: 12px; }
.en-steps .done { color: #0f3d3e; } .en-steps .done i { background: #22c55e; color: #fff; } .en-steps .now { color: #0f3d3e; box-shadow: 0 0 0 2px var(--a); } .en-steps .now i { background: #fef3c7; animation: u-pulse 1.6s infinite; box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); }
.en-admin { --b: #0f3d3e; --a: #f59e0b; }
.en-admin .ed-hbars i { background: linear-gradient(90deg, #0f3d3e, #14b8a6); }
/* shopkeeper phone */
.en-mob { --b: #0f3d3e; } .en-mob .m-slide { padding: 34px 16px 16px; }
.en-mh { margin: 0 -16px 14px; padding: 18px 16px; background: #0f3d3e; color: #ccfbf1; } .en-mh b { display: block; color: #fff; font-size: 18px; } .en-mh span { font-size: 13px; }
.en-mcred { display: flex; justify-content: space-between; padding: 14px; border-radius: 14px; background: #ecfdf5; color: #065f46; font-weight: 700; font-size: 13px; } .en-mcred b { font-size: 16px; }
.en-mlast { margin: 12px 0; padding: 16px; border-radius: 14px; background: #f59e0b; color: #0f3d3e; font-weight: 800; font-size: 16px; } .en-mlast small { display: block; font-weight: 600; font-size: 12px; }
.en-mcat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .en-mcat i { height: 110px; border-radius: 12px; background: #eee var(--img) center / cover; }
.en-mi { display: flex; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid #f0f0f0; font-size: 13px; color: #374151; } .en-mi b { color: #111; }
.en-mt { display: flex; justify-content: space-between; padding: 16px 4px; font-size: 15px; color: #0f3d3e; } .en-mt b { font-size: 22px; }
.en-mob .u-btn { background: #f59e0b; color: #0f3d3e; }
.en-mok { display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; }
.en-mok i { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; background: #22c55e; color: #fff; font-size: 44px; font-style: normal; font-weight: 900; }
.en-mok.on i { animation: mo-pop .9s var(--spring) backwards; } .en-mok b { color: #0f3d3e; font-size: 26px; } .en-mok span { color: #f59e0b; font-weight: 800; font-size: 18px; } .en-mok small { color: #6b7280; font-size: 14px; }


/* ============================================================ any other business */
.any-hero { padding-bottom: clamp(60px, 7vw, 100px); }
.any-in { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.any-hero h1 { font-size: clamp(38px, 1.5rem + 2.8vw, 62px); }
.any-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.any-cloud { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.any-cloud i { position: absolute; left: var(--x); top: var(--y); font-size: calc(34px * var(--s)); font-style: normal; opacity: .55; filter: saturate(.9); animation: any-drift var(--t) ease-in-out infinite alternate; }
@keyframes any-drift { from { transform: translate(0, 0) rotate(-6deg); } to { transform: translate(18px, -26px) rotate(8deg); } }
.any-stage { position: relative; }
.any-search { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin: 0 auto 18px; padding: 12px 18px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(18, 32, 79, .55); font-size: 16px; }
.any-type { min-width: 2ch; color: var(--ink); font-weight: 750; }
.any-caret { width: 2px; height: 22px; background: var(--cyan); animation: mo-tick 1s steps(1) infinite; }
.any-search em { color: var(--muted); font-style: normal; font-size: 14px; }
.any-site { --c1: #9a3412; --c2: #fdba74; --bg: #fff7ed; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -50px rgba(11, 20, 48, .6), 0 0 0 1px rgba(11, 20, 48, .06); transition: --c1 .8s, --c2 .8s; }
.any-page { background: var(--bg); transition: background .8s var(--ease); }
.any-nav { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff; }
.any-logo { display: flex; align-items: center; gap: 8px; margin-right: auto; } .any-logo b { color: var(--c1); font-size: 16px; transition: color .8s; } .any-emo { font-style: normal; font-size: 20px; }
.any-links { display: flex; gap: 8px; } .any-links i { width: 42px; height: 8px; border-radius: 4px; background: #e5e7eb; }
.any-cta { padding: 7px 14px; border-radius: 99px; background: var(--c1); color: #fff; font-size: 12px; font-weight: 700; transition: background .8s; }
.any-heroin { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 26px 24px; min-height: 190px; background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 70%, #000)); color: #fff; transition: background .8s; }
.any-kick { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; color: var(--c2); transition: color .8s; }
.any-head { display: block; margin: 8px 0 14px; font-size: 24px; line-height: 1.15; }
.any-btn { display: inline-block; padding: 8px 16px; border-radius: 99px; background: var(--c2); color: #111; font-size: 12.5px; font-weight: 800; transition: background .8s; }
.any-big { font-size: 86px; line-height: 1; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3)); }
.any-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; }
.any-cards span { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 14px; background: #fff; box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .4); text-align: center; }
.any-cards i { font-size: 26px; font-style: normal; } .any-cards b { color: var(--c1); font-size: 13px; transition: color .8s; }
.any-site.swap .any-heroin > div, .any-site.swap .any-big, .any-site.swap .any-cards span, .any-site.swap .any-logo { animation: any-swap .7s var(--ease) both; }
.any-site.swap .any-cards span:nth-child(2) { animation-delay: .06s; } .any-site.swap .any-cards span:nth-child(3) { animation-delay: .12s; } .any-site.swap .any-big { animation: any-pop .8s var(--spring) both; }
@keyframes any-swap { 0% { opacity: 0; transform: translateY(14px); } }
@keyframes any-pop { 0% { opacity: 0; transform: scale(.4) rotate(-20deg); } }
.any-badge { position: absolute; right: -14px; bottom: -18px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -26px rgba(11, 20, 48, .6); }
.any-badge i { width: 38px; height: 38px; border-radius: 50%; background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px no-repeat; }
.any-badge b { display: block; font-size: 13px; color: var(--muted); font-weight: 600; } .any-badge small { display: block; color: var(--ink); font-size: 16px; font-weight: 750; }
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #9a3412; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #fdba74; }

.any-blocks { background: var(--paper); }
.bk-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.bk-list { display: flex; flex-wrap: wrap; gap: 10px; }
.bk { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-weight: 650; color: var(--ink); box-shadow: 0 10px 24px -20px rgba(18, 32, 79, .5); }
.bk i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--cyan-50); font-style: normal; font-size: 18px; }
.js .bk { opacity: 0; transform: translateY(16px) scale(.94); transition: opacity .6s var(--ease), transform .7s var(--spring); transition-delay: calc(var(--n) * .07s); }
.bk-wrap.in .bk { opacity: 1; transform: none; }
.bk-site { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -50px rgba(11, 20, 48, .55), 0 0 0 1px rgba(11, 20, 48, .06); }
.bk-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 110px 110px; gap: 10px; padding: 16px; }
.bs { display: grid; place-items: center; border-radius: 12px; border: 2px dashed #cbd5e1; color: transparent; font-style: normal; font-weight: 750; font-size: 14px; }
.bs.b1 { grid-column: span 2; }
.bk-wrap.in .bs { animation: bk-fill .7s var(--spring) forwards; animation-delay: calc(.6s + var(--n) * .22s); }
@keyframes bk-fill { from { transform: scale(.85); } to { transform: none; border-style: solid; border-color: transparent; background: var(--bgc); color: #fff; } }
.bs.b1 { --bgc: var(--navy); } .bs.b2 { --bgc: #0891b2; } .bs.b3 { --bgc: #7c3aed; } .bs.b4 { --bgc: #ea580c; } .bs.b5 { --bgc: #16a34a; } .bs.b6 { --bgc: #db2777; }
.bk-done { display: block; margin: 0 16px 16px; padding: 12px; border-radius: 12px; background: #ecfdf5; color: #166534; font-weight: 700; text-align: center; opacity: 0; }
.bk-wrap.in .bk-done { animation: ht-msg .6s var(--ease) 2.2s forwards; }

.any-strip { padding: 34px 0; overflow: hidden; background: var(--navy); }
.any-row { overflow: hidden; } .any-row + .any-row { margin-top: 14px; }
.any-row div { display: flex; gap: 14px; width: max-content; animation: marquee 40s linear infinite; }
.any-row.rev div { animation-direction: reverse; animation-duration: 46s; }
.any-row span { padding: 12px 20px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font-weight: 600; white-space: nowrap; }

.any-form-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: start; }
.any-steps { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.any-steps li { display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--ink); }
.any-steps b { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; }
.any-form { display: grid; gap: 16px; padding: 30px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgba(18, 32, 79, .5); }
.any-form .field { display: grid; gap: 6px; } .any-form .field > span { font-size: 14px; font-weight: 650; color: var(--ink); }
.any-form .field input, .any-form .field textarea { padding: 14px 16px; min-height: 0; }
.any-need { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; } .any-need legend { margin-bottom: 8px; font-size: 14px; font-weight: 650; color: var(--ink); }
.any-need label { position: relative; cursor: pointer; } .any-need input { position: absolute; opacity: 0; }
.any-need span { display: inline-block; padding: 9px 16px; border-radius: 99px; border: 1.5px solid var(--line); font-size: 14px; font-weight: 600; color: var(--navy); transition: background .3s, color .3s, border-color .3s, transform .4s var(--spring); }
.any-need input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; transform: scale(1.04); }
.any-need input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.any-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.any-note { font-size: 13.5px; color: var(--muted); text-align: center; } .any-note.ok { color: #138a53; font-weight: 600; }

/* click "Any other business": a circle expands from the click into the next page */
.any-wipe { position: fixed; z-index: 400; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: var(--grad); pointer-events: none; transform: scale(0); animation: any-wipe .75s var(--ease-io) forwards; }
@keyframes any-wipe { to { transform: scale(var(--k)); } }

@media (max-width: 1080px) {
  .any-in, .bk-wrap, .any-form-in { grid-template-columns: 1fr; gap: 34px; }
  .any-badge { right: 8px; }
}
@media (max-width: 640px) {
  .any-head { font-size: 19px; } .any-big { font-size: 58px; } .any-heroin { padding: 20px 16px; min-height: 160px; }
  .any-links { display: none; } .any-cards b { font-size: 11.5px; }
  .any-two { grid-template-columns: 1fr; } .any-form { padding: 22px 18px; }
  .bk-grid { grid-template-rows: 80px 80px; } .bs { font-size: 12px; }
  .any-cloud i { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .any-cloud i, .any-row div { animation: none !important; }
  .bk, .bs, .bk-done { opacity: 1 !important; transform: none !important; }
}


.bk-grid { grid-template-rows: 96px 96px 70px; } .bs.b6 { grid-column: span 3; }
@keyframes any-swap { 0% { opacity: .15; transform: translateY(12px); } }
@media (max-width: 640px) { .bk-grid { grid-template-rows: 74px 74px 56px; } }

/* photo screens: laid out at their real size, content zoomed (not scaled) so text stays sharp */
.scr-z { position: relative; overflow: hidden; }
.scr { backface-visibility: hidden; }
/* small laptop/tablet screens: zoomed in 1.6x and slowly panning across the page like a screen recording */
.scr-z.pan .ui, .scr-z.pan .tv-screens .ui { animation: scr-pan 15s ease-in-out infinite; }
.scr-z.pan .tv-bar { zoom: .7; }
@keyframes scr-pan { 0%, 16% { left: 0; top: 0; } 36%, 50% { left: var(--px); top: 0; } 70%, 84% { left: var(--px); top: var(--py); } 100% { left: 0; top: 0; } }
.scr-z.pan .ui.on { opacity: 1; }
/* phones laid out narrower so text renders larger */
.scr-z.ph .m-screens .m-slide { padding-left: 12px; padding-right: 12px; }
@media (prefers-reduced-motion: reduce) { .scr-z.pan .ui { animation: none !important; } }

/* big, simple screens for the smallest laptops in the photos */
.big-scr { position: absolute; inset: 0; display: grid; align-content: start; gap: 14px; padding: 22px 26px; background: #f5f6fa; font-family: var(--sans); }
.bs-h { display: flex; align-items: center; gap: 14px; margin: 0; } .bs-h b { color: #14213d; font-size: 44px; font-weight: 800; letter-spacing: -.03em; }
.bs-h em { padding: 6px 16px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 24px; font-style: normal; font-weight: 800; }
.bs-admin .bs-h em { background: #16a34a; }
.bs-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 16px; margin: 0; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .3); }
.bs-row > i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #e8edf7; color: #14213d; font-style: normal; font-size: 30px; font-weight: 800; }
.bs-row b { display: block; color: #111827; font-size: 32px; font-weight: 750; } .bs-row small { display: block; color: #6b7280; font-size: 22px; }
.bs-row.new { animation: bs-glow 2.4s ease-in-out infinite alternate; }
@keyframes bs-glow { to { background: #fff4dd; box-shadow: 0 0 0 3px #fcd34d; } }
.bs-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .bs-kpi span { padding: 14px 18px; border-radius: 18px; background: #fff; box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .3); }
.bs-kpi small { display: block; color: #6b7280; font-size: 22px; } .bs-kpi b { color: #14213d; font-size: 50px; font-weight: 800; line-height: 1.1; }
.bs-admin .bs-row > i { background: #fff4dd; color: #b45309; }


/* no tick marks: confirmation circles hidden, text carries the message */
.u-done i, .m-ok i, .st-ok i, .st-m-ok i, .hc-token i, .ht-ok i, .sg-qok i, .sg-checks p i, .any-badge i, .scene-chip i:not(.bell):not(.heart), .tab-toast i:not(.bell) { display: none !important; }