/* =====================================================================
   DuePe "clean" system (v3): white corporate layout, one accent, real
   product imagery. Modelled on what the leading assisted-banking
   networks do on their sites: calm white sections, big numbers,
   phones with real screens, audience blocks, trust band, app download.
   ===================================================================== */
:root { --c-navy: #0e1a3a; --c-ink: #1a2233; --c-muted: #5d6675; --c-line: #e6e9ef; --c-soft: #f5f7fb; --c-soft2: #eef2f8; --c-orange: #f39221; --c-orange-d: #d97a0c; --c-green: #1f9d55; --c-radius: 18px; --c-shadow: 0 10px 30px rgba(14,26,58,.08); --c-shadow-lg: 0 30px 70px rgba(14,26,58,.16); }
.clean { background: #fff; color: var(--c-ink); }
.clean .c-section { padding: clamp(60px, 8vw, 104px) 0; }
.clean .c-section--soft { background: var(--c-soft); }
.clean .c-section--navy { background: var(--c-navy); color: #fff; }
.clean .c-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.clean .c-head--left { margin-left: 0; text-align: left; }
.clean .c-kicker { display: inline-block; font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-orange-d); margin-bottom: 12px; }
.clean .c-section--navy .c-kicker { color: #f6c27a; }
.clean h1, .clean h2, .clean h3 { color: var(--c-navy); letter-spacing: -.02em; }
.clean .c-section--navy h2, .clean .c-section--navy h3 { color: #fff; }
.clean h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.15; margin: 0 0 14px; }
.clean .c-head p { margin: 0; color: var(--c-muted); font-size: 1.08rem; line-height: 1.65; }
.clean .c-section--navy .c-head p { color: rgba(255,255,255,.75); }
.clean .c-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; white-space: nowrap; }
.clean .c-btn .ico { width: 20px; height: 20px; }
.clean .c-btn--primary { background: var(--c-orange); color: #fff; box-shadow: 0 10px 24px rgba(243,146,33,.3); }
.clean .c-btn--primary:hover { background: var(--c-orange-d); transform: translateY(-2px); }
.clean .c-btn--ghost { background: #fff; color: var(--c-navy); border: 1.5px solid var(--c-line); }
.clean .c-btn--ghost:hover { border-color: var(--c-navy); }
.clean .c-section--navy .c-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }

/* ---------- hero ---------- */
.c-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #f5f7fb 100%); padding: clamp(40px, 6vw, 80px) 0 0; }
.c-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.c-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); line-height: 1.08; margin: 0 0 18px; }
.c-hero h1 em { font-style: normal; color: var(--c-orange-d); }
.c-hero__sub { font-size: 1.12rem; line-height: 1.65; color: var(--c-muted); max-width: 54ch; margin: 0 0 28px; }
.c-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.c-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.c-hero__trust b { display: block; font-size: 1.5rem; color: var(--c-navy); line-height: 1; }
.c-hero__trust span { font-size: .84rem; color: var(--c-muted); font-weight: 500; }
.c-hero__visual { position: relative; min-height: 560px; }
.c-hero__blob { position: absolute; inset: 8% 4% 0; border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%; background: radial-gradient(circle at 30% 30%, #ffe6c8, #f8ddc0 45%, #e9eef8 100%); opacity: .9; }
.c-phone { position: absolute; width: 250px; border-radius: 36px; background: #0b1220; padding: 10px; box-shadow: var(--c-shadow-lg), inset 0 0 0 2px rgba(255,255,255,.08); }
.c-phone img { display: block; width: 100%; height: auto; border-radius: 28px; }
.c-phone--a { left: 6%; top: 40px; z-index: 2; }
.c-phone--b { right: 6%; top: 110px; transform: rotate(6deg) scale(.92); opacity: .96; }
.c-hero__badge { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: var(--c-shadow); font-size: .86rem; font-weight: 600; color: var(--c-navy); }
.c-hero__badge i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e6f6ec; color: var(--c-green); font-style: normal; font-weight: 700; }
.c-hero__badge--1 { left: 0; bottom: 120px; }
.c-hero__badge--2 { right: 0; top: 40px; }
.c-hero__badge--3 { right: 4%; bottom: 60px; }
.c-hero__badge small { display: block; font-weight: 500; color: var(--c-muted); }
.c-hero__strip { margin-top: clamp(40px, 6vw, 70px); padding: 18px 0; border-top: 1px solid var(--c-line); background: #fff; }
.c-hero__strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; font-size: .9rem; font-weight: 600; color: var(--c-muted); }
.c-hero__strip li { display: inline-flex; align-items: center; gap: 8px; } .c-hero__strip .ico { width: 18px; height: 18px; color: var(--c-orange-d); }

/* ---------- stats ---------- */
.c-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.c-stat { padding: 28px 24px; border-radius: var(--c-radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.c-stat b { display: block; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; color: #fff; margin-bottom: 8px; }
.c-stat b small { font-size: .6em; color: #f6c27a; }
.c-stat span { color: rgba(255,255,255,.72); font-size: .95rem; }
.c-stats__note { margin: 18px 0 0; text-align: center; color: rgba(255,255,255,.5); font-size: .82rem; }

/* ---------- service grid ---------- */
.c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.c-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; border-radius: var(--c-radius); background: #fff; border: 1px solid var(--c-line); text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; }
.c-card:hover { transform: translateY(-5px); box-shadow: var(--c-shadow); border-color: transparent; }
.c-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #fff3e4; color: var(--c-orange-d); }
.c-card__icon .ico { width: 26px; height: 26px; }
.c-card h3 { font-size: 1.12rem; margin: 6px 0 0; }
.c-card p { margin: 0; color: var(--c-muted); line-height: 1.6; font-size: .96rem; flex: 1; }
.c-card__more { margin-top: 6px; font-weight: 600; color: var(--c-orange-d); font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.c-card__more .ico { width: 16px; height: 16px; transition: transform .2s; } .c-card:hover .c-card__more .ico { transform: translateX(4px); }

/* ---------- audience blocks (retailer / distributor / api) ---------- */
.c-aud { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; padding: clamp(30px, 5vw, 60px) 0; }
.c-aud + .c-aud { border-top: 1px solid var(--c-line); }
.c-aud--flip .c-aud__media { order: 2; }
.c-aud h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 12px; }
.c-aud__lead { color: var(--c-muted); font-size: 1.05rem; line-height: 1.65; margin: 0 0 18px; }
.c-aud__earn { display: inline-block; padding: 8px 14px; border-radius: 10px; background: #fff3e4; color: var(--c-orange-d); font-weight: 600; font-size: .92rem; margin-bottom: 18px; }
.c-aud ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.c-aud li { display: flex; gap: 10px; align-items: flex-start; color: var(--c-ink); line-height: 1.5; }
.c-aud li .ico { width: 20px; height: 20px; color: var(--c-green); flex: none; margin-top: 2px; }
.c-aud__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.c-aud__media { position: relative; min-height: 420px; display: grid; place-items: center; }
.c-aud__media::before { content: ""; position: absolute; inset: 10% 8%; border-radius: 30px; background: var(--c-soft2); }
.c-aud__media .c-phone { position: relative; width: 240px; }
.c-aud__media .c-phone--side { position: absolute; width: 190px; right: 6%; bottom: 0; transform: rotate(8deg); }
.c-aud__media .c-shot { position: relative; width: min(100%, 460px); border-radius: 18px; box-shadow: var(--c-shadow-lg); overflow: hidden; background: #0b1220; }
.c-aud__media .c-shot pre { margin: 0; padding: 22px; color: #d9e2ff; font-size: .8rem; line-height: 1.6; font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.c-aud__media .c-shot .ok { color: #7ee3a3; } .c-aud__media .c-shot .k { color: #f6c27a; }

/* ---------- steps with real screens ---------- */
.c-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.c-step { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); overflow: hidden; }
.c-step__shot { background: var(--c-soft2); padding: 22px 36px 0; }
.c-step__shot img { display: block; width: 100%; height: auto; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(14,26,58,.12); }
.c-step__body { padding: 20px 22px 24px; }
.c-step__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-navy); color: #fff; font-weight: 700; font-size: .9rem; margin-bottom: 10px; }
.c-step h3 { font-size: 1.05rem; margin: 0 0 6px; } .c-step p { margin: 0; color: var(--c-muted); font-size: .94rem; line-height: 1.55; }

/* ---------- advantage grid ---------- */
.c-adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.c-adv__item { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 24px; border-radius: var(--c-radius); background: #fff; border: 1px solid var(--c-line); }
.c-adv__item .c-card__icon { background: #e8f0ff; color: #2f5bd1; }
.c-adv__item h3 { font-size: 1.05rem; margin: 4px 0 6px; } .c-adv__item p { margin: 0; color: var(--c-muted); font-size: .94rem; line-height: 1.55; }

/* ---------- trust / rails ---------- */
.c-rails { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.c-rail { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 150px; padding: 18px 22px; border-radius: 14px; background: #fff; border: 1px solid var(--c-line); }
.c-rail b { color: var(--c-navy); font-size: 1rem; } .c-rail span { color: var(--c-muted); font-size: .8rem; }
.c-trust__line { text-align: center; color: var(--c-muted); margin: 26px 0 0; font-size: .95rem; }

/* ---------- testimonials ---------- */
.c-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.c-quote { padding: 28px; border-radius: var(--c-radius); background: #fff; border: 1px solid var(--c-line); }
.c-quote p { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.6; color: var(--c-ink); }
.c-quote footer { font-size: .88rem; color: var(--c-muted); font-weight: 600; }
.c-quote .fb__sample { position: static; display: inline-block; margin-left: 10px; vertical-align: middle; }

/* ---------- app download ---------- */
.c-app { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.c-app h2 { color: #fff; }
.c-app p { color: rgba(255,255,255,.78); font-size: 1.05rem; line-height: 1.65; }
.c-app__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.c-app__badges img { height: 56px; width: auto; }
.c-app__badges span { color: rgba(255,255,255,.7); font-size: .9rem; }
.c-app__media { position: relative; min-height: 460px; }
.c-app__media .c-phone { position: absolute; left: 50%; top: 0; transform: translateX(-62%); }
.c-app__media .c-phone--b { transform: translateX(-10%) rotate(6deg) scale(.9); top: 60px; }

/* ---------- faq (clean) ---------- */
.c-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.c-faq details { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 0 22px; }
.c-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; color: var(--c-navy); }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary .ico { width: 18px; height: 18px; transform: rotate(90deg); color: var(--c-orange-d); transition: transform .3s; }
.c-faq details[open] summary .ico { transform: rotate(-90deg); }
.c-faq p { margin: 0 0 18px; color: var(--c-muted); line-height: 1.6; }

/* ---------- final cta ---------- */
.c-cta { border-radius: 28px; background: linear-gradient(135deg, #ffb45c, #f39221 60%, #e3851a); color: #fff; padding: clamp(32px, 5vw, 56px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.c-cta h2 { color: #fff; margin: 0 0 6px; } .c-cta p { margin: 0; color: rgba(255,255,255,.9); }
.c-cta .c-btn--primary { background: #fff; color: var(--c-navy); box-shadow: none; } .c-cta .c-btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); background: transparent; }

@media (max-width: 1100px) { .c-grid, .c-adv, .c-steps { grid-template-columns: 1fr 1fr; } .c-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .c-hero__grid, .c-aud, .c-app { grid-template-columns: 1fr; }
  .c-aud--flip .c-aud__media { order: 0; }
  .c-hero__visual { min-height: 480px; } .c-phone { width: 200px; } .c-phone--a { left: 4%; } .c-phone--b { right: 4%; }
  .c-hero__badge--2 { top: 10px; }
  .c-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .c-grid, .c-adv, .c-steps, .c-stats { grid-template-columns: 1fr; } .c-hero__visual { min-height: 440px; } .c-phone--b { display: none; } .c-phone--a { left: 50%; transform: translateX(-50%); } .c-hero__badge--1 { left: 0; } }

/* the village scene lives behind the hero, washed out so the copy and phones stay crisp */
.c-hero__scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .95; }
.c-hero__fade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 40%, rgba(255,255,255,.3) 68%, rgba(255,255,255,.08) 100%), linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 78%, rgba(255,255,255,.7) 100%); }
.c-hero__grid, .c-hero__strip { position: relative; z-index: 1; }
.c-hero__blob { display: none; }
@media (max-width: 860px) { .c-hero__fade { background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,.7) 100%); } }

/* service cards with a living village vignette */
.c-card--art { padding: 0 0 26px; overflow: hidden; }
.c-card--art > h3, .c-card--art > p, .c-card--art > .c-card__more { margin-left: 26px; margin-right: 26px; }
.c-card__art { position: relative; display: block; height: 170px; background: #eef2f8; margin-bottom: 44px; }
.c-card__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.c-card--art:hover .c-card__art canvas { transform: scale(1.06); }
.c-card__art .c-card__icon { position: absolute; left: 26px; bottom: -26px; width: 56px; height: 56px; border: 3px solid #fff; box-shadow: 0 8px 20px rgba(14,26,58,.12); transition: transform .3s; }
.c-card--art:hover .c-card__art .c-card__icon { transform: translateY(-4px) rotate(-6deg); }
.c-card--art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(243,146,33,0); transition: box-shadow .3s; }
.c-card--art:hover::after { box-shadow: inset 0 0 0 2px rgba(243,146,33,.35); }

/* ---------- service cards: one colour each, a watermark, no motion inside the card ---------- */
.c-card--tint { position: relative; overflow: hidden; border-top: 3px solid var(--tint); }
.c-card--tint .c-card__icon { background: color-mix(in srgb, var(--tint) 14%, #fff); color: var(--tint); }
.c-card--tint .c-card__more { color: var(--tint); }
.c-card__wm { position: absolute; right: -18px; bottom: -22px; width: 150px; height: 150px; color: var(--tint); opacity: .06; pointer-events: none; transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.c-card__wm .ico { width: 100%; height: 100%; }
.c-card--tint:hover .c-card__wm { transform: translate(-6px, -6px) rotate(-8deg); opacity: .1; }
.c-card--tint:hover { border-color: var(--tint); }
/* ---------- section background effect: drifting light + fine dot grid ---------- */
.c-section--fx { position: relative; overflow: hidden; background-color: #f5f7fb; background-image: radial-gradient(rgba(14,26,58,.09) 1px, transparent 1.2px); background-size: 22px 22px; }
.c-section--fx::before, .c-section--fx::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; z-index: 0; }
.c-section--fx::before { width: 560px; height: 560px; left: -160px; top: -120px; background: radial-gradient(circle, #ffd9a8, transparent 65%); animation: fxDrift 26s ease-in-out infinite alternate; }
.c-section--fx::after { width: 640px; height: 640px; right: -200px; bottom: -220px; background: radial-gradient(circle, #cfe0ff, transparent 65%); animation: fxDrift 32s ease-in-out infinite alternate-reverse; }
@keyframes fxDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(120px, 60px) scale(1.15); } }
.c-section--fx > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .c-section--fx::before, .c-section--fx::after { animation: none; } }

.c-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .c-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .c-grid--4 { grid-template-columns: 1fr; } }

/* ---------- card effects: cursor spotlight, 3D tilt, sheen, icon pulse ---------- */
.c-card--tint { --mx: 50%; --my: 50%; transform-style: preserve-3d; will-change: transform; transition: transform .25s ease, box-shadow .3s, border-color .3s; }
.c-card--tint::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--tint) 16%, transparent), transparent 42%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.c-card--tint:hover::before { opacity: 1; }
.c-card--tint::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: radial-gradient(300px circle at var(--mx) var(--my), var(--tint), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; pointer-events: none; }
.c-card--tint:hover::after { opacity: .9; }
.c-card--tint:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); box-shadow: 0 24px 50px rgba(14,26,58,.14); }
.c-card--tint .c-card__sheen { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.c-card--tint:hover .c-card__sheen { animation: sheen .9s ease forwards; }
@keyframes sheen { to { transform: translateX(120%); } }
.c-card--tint .c-card__icon { position: relative; z-index: 1; }
.c-card--tint .c-card__icon::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid var(--tint); opacity: 0; }
.c-card--tint:hover .c-card__icon::after { animation: ring 1.1s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
.c-card--tint > h3, .c-card--tint > p, .c-card--tint > .c-card__more { position: relative; z-index: 1; }
@media (hover: none) { .c-card--tint:hover { transform: none; } }


/* ---------- services: the phone (left) shows the selected service (list, right) ---------- */
.c-svc { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.c-svc__stage { --stage: #f39221; position: relative; display: grid; justify-items: center; padding: 30px 0 70px; }
.c-svc__halo { position: absolute; top: 4%; left: 50%; width: 460px; height: 460px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--stage) 30%, #fff) 0%, color-mix(in srgb, var(--stage) 10%, #fff) 45%, transparent 70%); transition: background .6s ease; }
.c-svc__halo::after { content: ""; position: absolute; inset: 60px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--stage) 35%, transparent); animation: haloSpin 40s linear infinite; }
@keyframes haloSpin { to { transform: rotate(360deg); } }
/* device: titanium-style frame, side buttons, layered shadow, floor shadow */
.c-device { position: relative; width: 300px; padding: 11px; border-radius: 46px; background: linear-gradient(145deg, #2b3242 0%, #0d111a 45%, #1e2431 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 5px #0a0d14, 0 2px 4px rgba(14,26,58,.12), 0 14px 28px rgba(14,26,58,.16), 0 40px 70px -10px rgba(14,26,58,.28); z-index: 1; }
.c-device__btn { position: absolute; right: -3px; width: 4px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #1c2230, #3a4254); }
.c-device__btn--a { top: 120px; height: 64px; } .c-device__btn--b { top: 200px; height: 40px; }
.c-device__screen { position: relative; border-radius: 36px; overflow: hidden; background: #eef0f5; aspect-ratio: 480 / 1008; }
.c-device__screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 28%); }
.c-device__floor { width: 260px; height: 26px; margin-top: -10px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(14,26,58,.28) 0%, rgba(14,26,58,0) 70%); filter: blur(4px); }
.c-svc__shot { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.c-svc__shot.is-on { opacity: 1; transform: none; }
.c-svc__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.c-svc__chip { position: absolute; right: max(0px, calc(50% - 250px)); top: 90px; z-index: 2; min-width: 170px; height: 58px; }
.c-svc__cap { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px rgba(14,26,58,.14); border-left: 4px solid var(--stage); font-size: .82rem; color: var(--c-muted); white-space: nowrap; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.c-svc__cap b { color: var(--c-navy); font-size: 1rem; }
.c-svc__cap.is-on { opacity: 1; transform: none; }
/* screens drawn in the app's style (until a capture exists) */
.appscr { position: absolute; inset: 0; display: flex; flex-direction: column; background: #eef0f5; font-family: var(--font-head); color: #1a2233; font-size: 11px; }
.appscr__bar { display: flex; align-items: center; gap: 12px; padding: 34px 16px 14px; background: linear-gradient(180deg, #f7e9da, #f1dfcb); font-weight: 600; font-size: 14px; }
.appscr__back { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; font-size: 13px; }
.appscr__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.appscr__card { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.appscr__search { background: #fff; border-radius: 12px; padding: 10px 12px; color: #8a93a3; border: 1px solid #e3e6ec; }
.appscr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.appscr__tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; background: #fff; border-radius: 12px; font-weight: 500; font-size: 10px; }
.appscr__tile i { width: 30px; height: 30px; border-radius: 9px; opacity: .9; }
.appscr__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; }
.appscr__row span { color: #6b7383; } .appscr__row b { font-weight: 600; }
.appscr__row--earn b { color: #1f9d55; }
.appscr__chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.appscr__chips em { font-style: normal; padding: 5px 9px; border-radius: 999px; border: 1px solid #d9dde5; font-size: 10px; }
.appscr__chips em.on { border-color: #c77a2c; background: #fbeee0; color: #9a5413; font-weight: 600; }
.appscr__route { display: flex; justify-content: space-between; align-items: center; } .appscr__route small { display: block; color: #8a93a3; font-size: 9px; } .appscr__route b { font-size: 13px; } .appscr__route span { color: #c77a2c; font-size: 16px; }
.appscr__ok { color: #1f9d55 !important; font-weight: 500; }
.appscr__amt small { display: block; color: #8a93a3; } .appscr__amt b { font-size: 22px; }
.appscr__qrbox { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .appscr__qr { width: 62%; height: auto; border-radius: 8px; border: 6px solid #fff; box-shadow: 0 0 0 1px #e3e6ec; } .appscr__qrbox p { margin: 0; color: #6b7383; font-size: 10px; line-height: 1.4; }
.appscr__wait { color: #c77a2c !important; font-weight: 500; }
.appscr__cta { margin-top: auto; padding: 12px; border-radius: 12px; text-align: center; color: #fff; font-weight: 600; font-size: 12px; background: linear-gradient(180deg, #a85c18, #8a4a12); }
@media (max-width: 860px) { .c-device { width: 250px; } .c-svc__chip { right: 0; } .c-svc__halo { width: 360px; height: 360px; } }
/* ---------- services v3: tile grid + detail card (no accordion) ---------- */
.c-svc__side { display: grid; gap: 16px; }
.c-svc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-svc__item { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--c-line); cursor: pointer; font: inherit; color: inherit; overflow: hidden; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s, background .35s; }
.c-svc__item:focus { outline: none; } .c-svc__item:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
.c-svc__item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 70%, #0e1a3a)); opacity: 0; transition: opacity .35s; }
.c-svc__item::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); opacity: 0; }
.c-svc__item > * { position: relative; z-index: 1; }
.c-svc__item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tint) 45%, #fff); box-shadow: 0 12px 26px rgba(14,26,58,.08); }
.c-svc__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: color-mix(in srgb, var(--tint) 12%, #fff); color: var(--tint); transition: background .35s, color .35s; }
.c-svc__ico .ico { width: 22px; height: 22px; }
.c-svc__text b { display: block; font-family: var(--font-head); font-weight: 600; font-size: .98rem; line-height: 1.25; color: var(--c-navy); transition: color .35s; }
.c-svc__text small { display: block; margin-top: 3px; font-size: .8rem; color: var(--c-muted); transition: color .35s; }
.c-svc__item.is-on { border-color: transparent; transform: translateY(-3px); box-shadow: 0 18px 36px color-mix(in srgb, var(--tint) 35%, transparent); }
.c-svc__item.is-on::before { opacity: 1; }
.c-svc__item.is-on::after { animation: tileShine 1.2s ease .1s 1 forwards; }
@keyframes tileShine { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.c-svc__item.is-on .c-svc__ico { background: rgba(255,255,255,.18); color: #fff; }
.c-svc__item.is-on .c-svc__text b { color: #fff; } .c-svc__item.is-on .c-svc__text small { color: rgba(255,255,255,.82); }
.c-svc__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255,255,255,.75); z-index: 2; }
.c-svc__item.is-on .c-svc__bar { animation: svcBar 5s linear forwards; }
@keyframes svcBar { to { width: 100%; } }
.c-svc__join { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed rgba(243,146,33,.6); background: rgba(243,146,33,.05); text-decoration: none; color: inherit; transition: background .3s, transform .25s; }
.c-svc__join span { grid-row: 1 / 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--c-orange); color: #fff; } .c-svc__join span .ico { width: 22px; height: 22px; }
.c-svc__join b { font-weight: 600; color: var(--c-navy); font-size: .98rem; } .c-svc__join small { font-size: .78rem; color: var(--c-muted); }
.c-svc__join:hover { background: rgba(243,146,33,.1); transform: translateY(-3px); }
.c-svc__detail { position: relative; min-height: 150px; }
.c-svc__det { position: absolute; inset: 0; padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--tint); box-shadow: 0 14px 34px rgba(14,26,58,.07); opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; pointer-events: none; }
.c-svc__det.is-on { opacity: 1; transform: none; pointer-events: auto; }
.c-svc__det h3 { margin: 0 0 6px; font-size: 1.15rem; } .c-svc__det p { margin: 0 0 10px; color: var(--c-muted); line-height: 1.6; font-size: .95rem; }
.c-svc__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--tint); text-decoration: none; } .c-svc__more .ico { width: 15px; height: 15px; transition: transform .2s; } .c-svc__more:hover .ico { transform: translateX(4px); }
@media (max-width: 860px) { .c-svc { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .c-svc__grid { grid-template-columns: 1fr; } .c-svc__detail { min-height: 190px; } }
.c-svc__soon { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #eceaf8; color: #5b4bc4; font-style: normal; font-size: .68rem; font-weight: 600; vertical-align: 2px; }
.c-svc__item.is-on .c-svc__soon { background: rgba(255,255,255,.22); color: #fff; }

/* numbers band: big figures, icon, accent line (overrides the old .stat__num size) */
.c-stat { position: relative; overflow: hidden; padding: 30px 26px 26px; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); }
.c-stat::before { content: ""; position: absolute; left: 26px; top: 0; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: #f39221; }
.c-stat__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 12px; background: rgba(243,146,33,.14); color: #f6c27a; }
.c-stat__ico .ico { width: 22px; height: 22px; }
.clean .c-stat b, .clean .c-stat .stat__num { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1; color: #fff; letter-spacing: -.02em; margin-bottom: 10px; }
.clean .c-stat .stat__num { margin: 0; }
.clean .c-stat .stat__num small { font-size: .55em; color: #f6c27a; }
.c-stat span:last-child { color: rgba(255,255,255,.72); font-size: .95rem; }

/* home polish */
.c-rails { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.c-rail { min-width: 0; padding: 20px 14px; text-align: center; transition: transform .25s, box-shadow .3s, border-color .3s; }
.c-rail:hover { transform: translateY(-4px); box-shadow: var(--c-shadow); border-color: transparent; }
.c-quotes { grid-template-columns: repeat(3, 1fr); }
.c-quote { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding-top: 46px; }
.c-quote::before { content: "\201C"; position: absolute; left: 24px; top: 6px; font-family: Georgia, serif; font-size: 3.6rem; line-height: 1; color: #f39221; opacity: .35; }
@media (max-width: 1100px) { .c-rails { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .c-quotes { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .c-rails { grid-template-columns: 1fr 1fr; } }

/* footer in the clean system (all pages): orange CTA card on white, deep navy footer */
body .cta-band { background: #fff; padding: 0 0 clamp(50px, 7vw, 90px); animation: none; }
body .cta-band .wrap { max-width: var(--wrap, 1180px); }
body .cta-band__inner { border-radius: 28px; padding: clamp(30px, 5vw, 54px); background: radial-gradient(600px 300px at 90% 0%, rgba(255,255,255,.22), transparent 60%), linear-gradient(135deg, #ffb45c, #f39221 55%, #e3851a); box-shadow: 0 30px 60px rgba(243,146,33,.25); }
body .cta-band__title { color: #fff; } body .cta-band__sub { color: rgba(255,255,255,.92); }
body .cta-band .btn--light { background: #fff; color: #0e1a3a; animation: none; }
body .cta-band .btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.65); }
body .site-footer { background: #0e1a3a; border-top: 0; }
body .site-footer::before { background: radial-gradient(700px 300px at 10% 0%, rgba(243,146,33,.1), transparent 60%); }
body .footer__col a:hover { color: #f6c27a; } body .footer__col a::before { background: #f39221; }
body .footer__langs a.is-active { background: #f39221; border-color: #f39221; }
body .cta-band::before, body .cta-band::after { display: none; }

/* ---------- reach: counts + India dot map ---------- */
.c-reach { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 78% 40%, rgba(243,146,33,.12), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(80,120,255,.12), transparent 60%), #0b1533; }
.c-reach__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.c-reach h2 { color: #fff; margin-bottom: 10px; }
.c-reach__sub { color: rgba(255,255,255,.7); margin: 0 0 26px; font-size: 1.04rem; }
.c-reach__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.c-reach__stats > div { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.c-reach__ico { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(243,146,33,.14); color: #f6c27a; } .c-reach__ico .ico { width: 20px; height: 20px; }
.clean .c-reach__stats b, .clean .c-reach__stats .stat__num { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; line-height: 1.05; color: #fff; }
.clean .c-reach__stats .stat__num small { font-size: .6em; color: #f6c27a; }
.c-reach__stats > div > span:last-child { color: rgba(255,255,255,.65); font-size: .84rem; }
.c-reach__states { list-style: none; margin: 0; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.c-reach__states li { display: grid; grid-template-columns: 10px minmax(0, 1fr) 36px auto; gap: 10px; align-items: center; padding: 6px 6px; border-radius: 8px; cursor: default; transition: background .2s; }
.c-reach__states li:hover, .c-reach__states li.is-hot { background: rgba(243,146,33,.12); }
.c-reach__dot { width: 8px; height: 8px; border-radius: 50%; background: #f39221; box-shadow: 0 0 0 0 rgba(243,146,33,.6); animation: reachBlink 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes reachBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(243,146,33,.55); opacity: 1; } 50% { box-shadow: 0 0 0 6px rgba(243,146,33,0); opacity: .55; } }
.c-reach__name { color: rgba(255,255,255,.88); font-size: .85rem; line-height: 1.25; }
.c-reach__bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; } .c-reach__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f39221, #ffcf8a); }
.c-reach__states li b { color: #fff; font-size: .86rem; font-weight: 600; min-width: 46px; text-align: right; }
.c-reach .c-stats__note { text-align: left; margin-top: 14px; }
.c-reach__map { position: relative; }
.imap { display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
.imap__base circle { fill: rgba(255,255,255,.26); }
.imap__lit circle { fill: #f39221; }
.imap__state { animation: stateBlink 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes stateBlink { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
.imap__pin { fill: #fff; stroke: #f39221; stroke-width: 2.5; }
.imap__ring { fill: none; stroke: #f39221; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: imapRing 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
.imap__ring--2 { animation-delay: calc(var(--d, 0s) + 1.2s); }
@keyframes imapRing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.imap__state.is-hot .imap__pin { r: 7; } .imap__state.is-hot { opacity: 1 !important; animation: none; }
.imap__state.is-hot .imap__glow { transform-box: fill-box; transform-origin: center; transform: scale(1.25); transition: transform .3s; }
@media (prefers-reduced-motion: reduce) { .imap__state, .imap__ring, .c-reach__dot { animation: none; } }
@media (max-width: 960px) { .c-reach__grid { grid-template-columns: 1fr; } .c-reach__map { order: -1; max-width: 420px; margin: 0 auto; } }
@media (max-width: 520px) { .c-reach__states { grid-template-columns: 1fr; } .c-reach__stats { grid-template-columns: 1fr 1fr; } }
/* covered states as chips, no counts */
.c-reach__live { margin: 0 0 10px; color: rgba(255,255,255,.55); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.clean .c-reach__states { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; background: none; border: 0; }
.clean .c-reach__states li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); grid-template-columns: none; transition: background .2s, border-color .2s; }
.clean .c-reach__states li:hover, .clean .c-reach__states li.is-hot { background: rgba(243,146,33,.16); border-color: rgba(243,146,33,.45); }
.clean .c-reach__name { font-size: .86rem; color: #fff; }

/* India flag */
.flag-in { display: inline-block; vertical-align: -3px; margin-left: 6px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.c-reach__live { display: flex; align-items: center; gap: 10px; } .c-reach__live .flag-in { margin: 0; vertical-align: 0; }
.footer__made { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- audiences: two cards ---------- */
.c-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.c-duo__card { display: flex; flex-direction: column; border-radius: 26px; background: #fff; border: 1px solid var(--c-line); overflow: hidden; box-shadow: 0 1px 2px rgba(14,26,58,.04); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.c-duo__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(14,26,58,.12); }
.c-duo__media { position: relative; height: 300px; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--tint) 28%, #fff) 0%, color-mix(in srgb, var(--tint) 10%, #fff) 55%, #f7f8fb 100%); }
.c-duo__ring { position: absolute; left: 50%; bottom: -170px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent); transform: translateX(-50%); }
.c-duo__ring--1 { width: 420px; height: 420px; } .c-duo__ring--2 { width: 600px; height: 600px; opacity: .6; }
.c-duo__phone { position: absolute; left: 50%; top: 40px; width: 230px; transform: translateX(-50%); padding: 9px 9px 0; border-radius: 36px 36px 0 0; background: linear-gradient(145deg, #2b3242, #0d111a 45%, #1e2431); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), 0 30px 60px -10px rgba(14,26,58,.35); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.c-duo__phone img { display: block; width: 100%; height: auto; border-radius: 28px 28px 0 0; }
.c-duo__card:hover .c-duo__phone { transform: translateX(-50%) translateY(-10px); }
.c-duo__chip { position: absolute; right: 24px; top: 34px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); box-shadow: 0 12px 28px rgba(14,26,58,.14); animation: chipFloat 5s ease-in-out infinite; }
.c-duo__chip > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tint); color: #fff; } .c-duo__chip > span .ico { width: 18px; height: 18px; }
.c-duo__chip b { display: block; font-size: .92rem; color: var(--c-navy); } .c-duo__chip small { display: block; font-size: .74rem; color: var(--c-muted); }
@keyframes chipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.c-duo__body { display: flex; flex-direction: column; flex: 1; padding: 30px 32px 32px; }
.c-duo__label { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tint); }
.c-duo__body h3 { font-size: clamp(1.35rem, 2.2vw, 1.65rem); margin: 8px 0 10px; line-height: 1.2; }
.c-duo__body p { margin: 0 0 18px; color: var(--c-muted); line-height: 1.65; }
.c-duo__body ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.c-duo__body li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; font-size: .96rem; }
.c-duo__body li .ico { flex: none; width: 20px; height: 20px; margin-top: 1px; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--tint) 14%, #fff); color: var(--tint); }
.c-duo__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.c-duo__card .c-btn--primary { background: var(--tint); box-shadow: 0 10px 24px color-mix(in srgb, var(--tint) 35%, transparent); }
.c-duo__card .c-btn--primary .ico { width: 18px; height: 18px; }
.c-duo__link { font-weight: 600; color: var(--c-navy); text-decoration: none; border-bottom: 1.5px solid var(--c-line); padding-bottom: 2px; transition: border-color .2s; } .c-duo__link:hover { border-color: var(--tint); }
@media (max-width: 900px) { .c-duo { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .c-duo__media { height: 260px; } .c-duo__phone { width: 200px; } .c-duo__chip { right: 12px; top: 14px; } .c-duo__body { padding: 24px 22px 26px; } }
@media (prefers-reduced-motion: reduce) { .c-duo__chip { animation: none; } }
/* ---------- why DuePe: bento grid ---------- */
.c-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "a a b" "c d d" "c e f"; gap: 18px; }
.c-bento__tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 24px; background: #f6f7fb; border: 1px solid var(--c-line); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.c-bento__tile:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(14,26,58,.1); }
.c-bento__tile--a { grid-area: a; flex-direction: row; align-items: center; gap: 30px; background: radial-gradient(500px 260px at 100% 0%, rgba(243,146,33,.22), transparent 60%), #0e1a3a; border-color: transparent; color: #fff; }
.c-bento__tile--b { grid-area: b; background: linear-gradient(160deg, #fff6ec, #fdecd8); }
.c-bento__tile--c { grid-area: c; background: linear-gradient(180deg, #eef3ff, #e3ebfb); padding-bottom: 0; }
.c-bento__tile--d { grid-area: d; flex-direction: row; align-items: center; gap: 24px; }
.c-bento__tile--e { grid-area: e; background: linear-gradient(160deg, #ecf8f1, #dff2e7); }
.c-bento__tile--f { grid-area: f; background: linear-gradient(160deg, #f3efff, #e9e3fb); }
.c-bento__txt { flex: 1; min-width: 0; }
.c-bento__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: #fff; color: var(--c-orange-d); box-shadow: 0 6px 16px rgba(14,26,58,.08); } .c-bento__ico .ico { width: 22px; height: 22px; }
.c-bento__tile--a .c-bento__ico { background: rgba(255,255,255,.1); color: #f6c27a; box-shadow: none; }
.c-bento__tile h3 { font-size: 1.15rem; margin: 0 0 6px; } .c-bento__tile p { margin: 0; color: var(--c-muted); font-size: .94rem; line-height: 1.6; }
.c-bento__tile--a h3 { color: #fff; font-size: 1.45rem; } .c-bento__tile--a p { color: rgba(255,255,255,.72); }
/* ledger */
.c-ledger { flex: 0 0 300px; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.c-ledger__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 12px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; }
.c-ledger__head span { color: rgba(255,255,255,.65); font-size: .82rem; } .c-ledger__head b { color: #fff; font-size: 1.5rem; }
.c-ledger__row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 4px; font-size: .86rem; color: rgba(255,255,255,.85); opacity: 0; transform: translateX(12px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i) * .15s + .2s); }
.c-bento.is-in .c-ledger__row { opacity: 1; transform: none; }
.c-ledger__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(243,146,33,.15); color: #f6c27a; } .c-ledger__ic .ico { width: 16px; height: 16px; }
.c-ledger__row b { color: #6ee7a0; font-weight: 600; }
/* languages */
.c-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.c-langs span { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid #f4dcc0; font-size: .9rem; font-weight: 500; color: var(--c-navy); animation: langOn 9s infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes langOn { 0%, 9% { background: #f39221; color: #fff; border-color: #f39221; transform: translateY(-2px); } 12%, 100% { background: #fff; color: var(--c-navy); border-color: #f4dcc0; transform: none; } }
/* receipt phone */
.c-bento__phone { margin: auto auto 0; width: min(230px, 80%); padding: 9px 9px 0; border-radius: 34px 34px 0 0; background: linear-gradient(145deg, #2b3242, #0d111a 45%, #1e2431); box-shadow: 0 -10px 40px rgba(14,26,58,.18); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.c-bento__phone img { display: block; width: 100%; height: auto; border-radius: 26px 26px 0 0; }
.c-bento__tile--c:hover .c-bento__phone { transform: translateY(-8px); }
/* funding flow */
.c-flow { flex: 0 0 400px; display: grid; grid-template-columns: auto 60px minmax(140px, 1fr); align-items: center; }
.c-flow__src { display: grid; gap: 10px; }
.c-flow__src span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--c-line); font-size: .84rem; font-weight: 600; color: var(--c-navy); white-space: nowrap; } .c-flow__src .ico { width: 16px; height: 16px; color: var(--c-orange-d); }
.c-flow__lines { width: 100%; height: 120px; overflow: visible; } .c-flow__lines path { fill: none; stroke: #f39221; stroke-width: 1.5; stroke-dasharray: 4 5; animation: flowDash 1.2s linear infinite; vector-effect: non-scaling-stroke; }
@keyframes flowDash { to { stroke-dashoffset: -18; } }
.c-flow__dst { display: grid; justify-items: center; gap: 4px; padding: 14px 16px; border-radius: 16px; background: #0e1a3a; color: #fff; text-align: center; }
.c-flow__wallet { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #f39221; } .c-flow__wallet .ico { width: 20px; height: 20px; }
.c-flow__dst b { font-size: .88rem; white-space: nowrap; } .c-flow__dst small { font-size: .72rem; color: rgba(255,255,255,.65); }
/* support */
.c-help { display: grid; gap: 8px; margin-top: auto; }
.c-help a, .c-help span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; font-weight: 600; font-size: .9rem; color: var(--c-navy); text-decoration: none; } .c-help .ico { width: 18px; height: 18px; color: #1f9d55; }
.c-help small { display: flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: .8rem; } .c-help small i { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; animation: reachBlink 2.4s infinite; }
/* kyc */
.c-kyc { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 8px; }
.c-kyc li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; font-weight: 600; font-size: .9rem; color: var(--c-navy); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i) * .15s + .3s); }
.c-bento.is-in .c-kyc li { opacity: 1; transform: none; }
.c-kyc .ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #5b4bc4; color: #fff; }
@media (max-width: 1000px) { .c-bento { grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b c" "d d" "e f"; } .c-bento__tile--c { min-height: 380px; } }
@media (max-width: 700px) { .c-bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; } .c-bento__tile--a, .c-bento__tile--d { flex-direction: column; align-items: stretch; } .c-ledger, .c-flow { flex: none; } .c-flow { grid-template-columns: auto 50px auto; } }
@media (prefers-reduced-motion: reduce) { .c-langs span, .c-flow__lines path { animation: none; } }
/* ---------- rails: hub and spoke ---------- */
.c-rails2 { background: linear-gradient(180deg, #f5f7fb, #eef2f9); }
.c-rails2__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.c-rails2 h2 { margin-bottom: 12px; }
.c-rails2__sub { color: var(--c-muted); font-size: 1.05rem; line-height: 1.65; margin: 0 0 24px; }
.c-rails2__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.c-rails2__list li { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--c-line); border-left: 3px solid #f39221; transition: transform .25s, box-shadow .25s; }
.c-rails2__list li:hover, .c-rails2__list li.is-hot { transform: translateX(4px); box-shadow: var(--c-shadow); }
.c-rails2__list b { color: var(--c-navy); font-size: .98rem; } .c-rails2__list span { color: var(--c-muted); font-size: .84rem; }
.c-rails2__note { margin: 0; color: #8a93a3; font-size: .82rem; line-height: 1.6; }
.c-hub { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.c-hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c-hub__lines line { stroke: #c9d3e6; stroke-width: 1.5; stroke-dasharray: 3 5; }
.c-hub__orbit { fill: none; stroke: #dde4f1; stroke-width: 1; } .c-hub__orbit--in { stroke-dasharray: 2 6; animation: haloSpin 60s linear infinite; transform-origin: 200px 200px; }
.c-hub__pkt { fill: #f39221; filter: drop-shadow(0 0 4px rgba(243,146,33,.8)); }
.c-hub__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; background: #0e1a3a; color: #fff; box-shadow: 0 30px 60px rgba(14,26,58,.3), 0 0 0 10px rgba(14,26,58,.06); z-index: 2; }
.c-hub__core img { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 4px; }
.c-hub__core b { font-size: 1.1rem; } .c-hub__core small { font-size: .68rem; color: rgba(255,255,255,.65); max-width: 110px; line-height: 1.3; }
.c-hub__pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(243,146,33,.5); animation: imapRing 2.6s ease-out infinite; }
.c-hub__node { position: absolute; transform: translate(-50%, -50%); z-index: 2; min-width: 82px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 12px 28px rgba(14,26,58,.1); text-align: center; font-weight: 700; font-size: .9rem; color: var(--c-navy); transition: transform .25s, box-shadow .25s, background .25s, color .25s; }
.c-hub__node:hover, .c-hub__node.is-hot { transform: translate(-50%, -50%) scale(1.08); background: #f39221; color: #fff; border-color: #f39221; box-shadow: 0 16px 34px rgba(243,146,33,.35); }
@media (max-width: 900px) { .c-rails2__grid { grid-template-columns: 1fr; } .c-hub { width: min(100%, 360px); } }
@media (max-width: 520px) { .c-rails2__list { grid-template-columns: 1fr; } .c-hub__core { width: 120px; height: 120px; } .c-hub__node { min-width: 64px; padding: 9px 10px; font-size: .8rem; } }
/* ---------- voices v2 ---------- */
.c-quotes { gap: 22px; }
.c-quote--v2 { margin: 0; padding: 30px 28px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--tint); box-shadow: 0 14px 34px rgba(14,26,58,.06); display: flex; flex-direction: column; gap: 22px; }
.c-quote--v2::before { color: var(--tint); }
.c-quote--v2 p { margin: 0; font-size: 1.06rem; line-height: 1.65; color: var(--c-navy); flex: 1; }
.c-quote--v2 footer { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.c-quote__av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--tint) 14%, #fff); color: var(--tint); font-weight: 700; flex: none; }
.c-quote--v2 footer b { display: block; color: var(--c-navy); font-size: .92rem; } .c-quote--v2 footer small { display: block; color: var(--c-muted); font-size: .8rem; }
.c-quote--v2 .fb__sample { position: static; margin-left: auto; font-style: normal; }
/* ---------- final: app + call to action ---------- */
.c-final { position: relative; overflow: hidden; background: radial-gradient(700px 420px at 20% 50%, rgba(243,146,33,.18), transparent 60%), radial-gradient(600px 400px at 100% 0%, rgba(80,120,255,.14), transparent 60%), #0b1533; }
.c-final__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.c-final__media { position: relative; height: 520px; }
.c-final__glow { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(243,146,33,.28), transparent 65%); }
.c-final__phone { position: absolute; width: 240px; padding: 9px; border-radius: 38px; background: linear-gradient(145deg, #2b3242, #0d111a 45%, #1e2431); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), 0 40px 80px -10px rgba(0,0,0,.55); }
.c-final__phone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.c-final__phone--front { left: 8%; top: 10px; z-index: 2; }
.c-final__phone--back { right: 6%; top: 60px; transform: rotate(7deg) scale(.9); opacity: .9; }
.c-final__chip { position: absolute; left: 0; bottom: 70px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #fff; box-shadow: 0 16px 36px rgba(0,0,0,.3); animation: chipFloat 5s ease-in-out infinite; }
.c-final__chip > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e6f6ec; color: #1f9d55; font-weight: 700; }
.c-final__chip b { display: block; font-size: .9rem; color: var(--c-navy); } .c-final__chip small { display: block; font-size: .74rem; color: var(--c-muted); }
.c-final__copy h2 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 0 0 14px; }
.c-final__copy p { color: rgba(255,255,255,.76); font-size: 1.06rem; line-height: 1.7; margin: 0 0 28px; max-width: 52ch; }
.c-final__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.c-final .c-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .c-final .c-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.c-final__store { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); }
.c-final__store img { height: 52px; width: auto; display: block; } .c-final__store span { color: rgba(255,255,255,.6); font-size: .88rem; max-width: 34ch; }
@media (max-width: 900px) { .c-final__grid { grid-template-columns: 1fr; } .c-final__media { height: 440px; } .c-final__phone { width: 200px; } }
@media (max-width: 520px) { .c-final__phone--back { display: none; } .c-final__phone--front { left: 50%; transform: translateX(-50%); } .c-final__chip { left: 50%; transform: translateX(-50%); bottom: 20px; animation: none; } }
/* ---------- footer v2 (all pages) ---------- */
.f2 { position: relative; overflow: hidden; background: #0a1330; color: rgba(255,255,255,.72); padding: 0 0 26px; isolation: isolate; }
.f2__aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.f2__aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; }
.f2__aurora i:nth-child(1) { width: 520px; height: 520px; left: -140px; top: -160px; background: rgba(243,146,33,.35); animation: f2Drift 28s ease-in-out infinite alternate; }
.f2__aurora i:nth-child(2) { width: 600px; height: 600px; right: -200px; top: 20%; background: rgba(70,110,255,.28); animation: f2Drift 34s ease-in-out infinite alternate-reverse; }
.f2__aurora i:nth-child(3) { width: 420px; height: 420px; left: 40%; bottom: -260px; background: rgba(31,157,85,.22); animation: f2Drift 30s ease-in-out infinite alternate; }
@keyframes f2Drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(90px, 50px) scale(1.15); } }
.f2__edge { height: 3px; background: linear-gradient(90deg, transparent, #f39221, #ffcf8a, #f39221, transparent); background-size: 200% 100%; animation: f2Edge 6s linear infinite; }
@keyframes f2Edge { to { background-position: -200% 0; } }
/* contact cards */
.f2__contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 50px; }
.f2__card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); text-decoration: none; color: inherit; backdrop-filter: blur(6px); transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, border-color .3s; }
.f2__card:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); border-color: rgba(243,146,33,.45); }
.f2__ic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: rgba(255,255,255,.07); color: #f6c27a; transition: transform .3s, background .3s, color .3s; } .f2__ic .ico { width: 22px; height: 22px; }
.f2__ic--hot { background: #f39221; color: #fff; }
.f2__card:hover .f2__ic { transform: rotate(-8deg) scale(1.06); background: #f39221; color: #fff; }
.f2__card small { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.f2__card b { display: block; margin: 2px 0; font-size: 1.08rem; color: #fff; }
.f2__card em { display: block; font-style: normal; font-size: .82rem; color: rgba(255,255,255,.55); }
/* main */
.f2__main { display: grid; grid-template-columns: 1.1fr 2fr; gap: clamp(30px, 6vw, 80px); padding: 54px 0 40px; margin-top: 46px; border-top: 1px solid rgba(255,255,255,.08); }
.f2__brand img { height: 34px; width: auto; display: block; }
.f2__brand p { margin: 16px 0 0; line-height: 1.7; font-size: .95rem; max-width: 40ch; }
.f2__addr { display: flex; gap: 8px; align-items: flex-start; color: rgba(255,255,255,.6); } .f2__addr .ico { width: 18px; height: 18px; flex: none; margin-top: 3px; color: #f6c27a; }
.f2__play { display: inline-block; margin-top: 20px; transition: transform .25s; } .f2__play img { height: 48px; } .f2__play:hover { transform: translateY(-2px); }
.f2__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.f2__col h3 { margin: 0 0 16px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f6c27a; }
.f2__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.f2__col li { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.f2__main.is-in .f2__col li { opacity: 1; transform: none; }
.f2__main.is-in .f2__col:nth-child(1) li { transition-delay: .05s; } .f2__main.is-in .f2__col:nth-child(2) li { transition-delay: .15s; } .f2__main.is-in .f2__col:nth-child(3) li { transition-delay: .25s; } .f2__main.is-in .f2__col:nth-child(4) li { transition-delay: .35s; }
.f2__col a { position: relative; display: inline-block; color: rgba(255,255,255,.78); text-decoration: none; font-size: .93rem; transition: color .25s, transform .25s; }
.f2__col a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: #f39221; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.f2__col a:hover { color: #fff; transform: translateX(3px); } .f2__col a:hover::after { transform: scaleX(1); }
/* languages */
.f2__langs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.f2__langs > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .88rem; color: rgba(255,255,255,.6); } .f2__langs > span .ico { width: 18px; height: 18px; }
.f2__langs div { display: flex; flex-wrap: wrap; gap: 8px; }
.f2__langs a { padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.8); text-decoration: none; font-size: .86rem; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.f2__langs a:hover { transform: translateY(-2px); border-color: rgba(243,146,33,.6); color: #fff; }
.f2__langs a.is-active { background: #f39221; border-color: #f39221; color: #fff; }
/* big wordmark */
.f2__word { margin: 10px 0 -18px; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: clamp(5rem, 17vw, 15rem); line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09); background: linear-gradient(90deg, rgba(243,146,33,0) 0%, rgba(243,146,33,.22) 50%, rgba(243,146,33,0) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: f2Edge 9s linear infinite; user-select: none; pointer-events: none; }
/* bottom */
.f2__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding-top: 22px; font-size: .85rem; color: rgba(255,255,255,.55); }
.f2__made { display: inline-flex; align-items: center; gap: 4px; }
.f2__made .flag-in { animation: flagWave 3.5s ease-in-out infinite; transform-origin: left center; }
@keyframes flagWave { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-4deg) scaleX(.96); } }
.f2__top { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; transition: background .25s, transform .25s; } .f2__top .ico { width: 18px; height: 18px; transform: rotate(-90deg); }
.f2__top:hover { background: #f39221; transform: translateY(-3px); }
@media (max-width: 1000px) { .f2__main { grid-template-columns: 1fr; } .f2__cols { grid-template-columns: repeat(2, 1fr); } .f2__contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .f2__cols { grid-template-columns: 1fr 1fr; gap: 26px 16px; } .f2__bottom { justify-content: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .f2__aurora i, .f2__edge, .f2__word, .f2__made .flag-in { animation: none; } .f2__col li { opacity: 1; transform: none; } }
/* ---------- rails v3: counter -> platform -> networks ---------- */
.c-net { position: relative; overflow: hidden; background: radial-gradient(800px 420px at 50% 55%, rgba(243,146,33,.13), transparent 60%), linear-gradient(180deg, #0b1533, #0e1a3a); }
.c-net .c-head h2 { color: #fff; } .c-net .c-head p { color: rgba(255,255,255,.7); } .c-net .c-kicker { color: #f6c27a; }
.c-net__flow { display: grid; grid-template-columns: 250px 1fr 180px 1.1fr 300px; align-items: center; min-height: 520px; }
.c-net__src { padding: 24px; border-radius: 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; }
.c-net__srcic { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 14px; border-radius: 14px; background: #f39221; } .c-net__srcic .ico { width: 24px; height: 24px; }
.c-net__src b { display: block; font-size: 1.1rem; } .c-net__src small { display: block; margin: 6px 0 14px; color: rgba(255,255,255,.62); font-size: .86rem; line-height: 1.5; }
.c-net__tags { display: flex; flex-wrap: wrap; gap: 6px; } .c-net__tags span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: .76rem; color: rgba(255,255,255,.85); } .c-net__tags .ico { width: 13px; height: 13px; color: #f6c27a; }
.c-net__wire { width: 100%; overflow: visible; }
.c-net__wire--in { height: 20px; } .c-net__wire--out { height: 520px; }
.c-net__wire path { fill: none; stroke: rgba(246,194,122,.4); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; animation: flowDash 1.4s linear infinite; }
.c-net__wire circle { fill: #f39221; filter: drop-shadow(0 0 6px rgba(243,146,33,.9)); }
.c-net__core { position: relative; justify-self: center; width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; color: #fff; background: radial-gradient(circle at 30% 25%, #26345f, #0e1a3a 70%); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 12px rgba(243,146,33,.06), 0 30px 80px rgba(0,0,0,.45); }
.c-net__core img { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 6px; }
.c-net__core b { font-size: 1.2rem; } .c-net__core small { font-size: .74rem; color: rgba(255,255,255,.62); max-width: 130px; line-height: 1.35; }
.c-net__halo { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(243,146,33,.45); animation: imapRing 3s ease-out infinite; } .c-net__halo--2 { animation-delay: 1.5s; }
.c-net__rails { list-style: none; margin: 0; padding: 0; height: 520px; display: grid; grid-template-rows: repeat(6, 1fr); align-items: center; }
.c-net__rails li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: #fff; opacity: 0; transform: translateX(16px); transition: opacity .5s, transform .5s, background .25s, border-color .25s; transition-delay: calc(var(--i) * .08s); }
.c-net__flow.is-in .c-net__rails li { opacity: 1; transform: none; }
.c-net__rails li:hover { background: rgba(243,146,33,.12); border-color: rgba(243,146,33,.45); }
.c-net__ric { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(243,146,33,.14); color: #f6c27a; } .c-net__ric .ico { width: 19px; height: 19px; }
.c-net__rails b { display: block; font-size: .95rem; } .c-net__rails small { display: block; font-size: .78rem; color: rgba(255,255,255,.6); }
.c-net__note { max-width: 760px; margin: 34px auto 0; text-align: center; color: rgba(255,255,255,.45); font-size: .82rem; line-height: 1.6; }
@media (max-width: 1100px) { .c-net__flow { grid-template-columns: 1fr; gap: 0; min-height: 0; justify-items: center; } .c-net__src { max-width: 420px; width: 100%; } .c-net__wire--in { width: 20px; height: 50px; transform: rotate(90deg); } .c-net__wire--out { display: none; } .c-net__core { margin: 10px 0 30px; } .c-net__rails { height: auto; width: 100%; max-width: 560px; grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 10px; } }
@media (max-width: 520px) { .c-net__rails { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .c-net__wire path, .c-net__halo { animation: none; } .c-net__wire circle { display: none; } }
/* footer v2.1: village skyline, wider columns */
.f2__main { grid-template-columns: minmax(260px, .85fr) 2.4fr; }
.f2__cols { grid-template-columns: 1.25fr 1.15fr .85fr 1.1fr; gap: 28px; }
.f2__col a { white-space: nowrap; }
.f2__brand p { max-width: 34ch; }
.f2__play img { height: 52px; }
.f2__village { position: relative; margin-top: 28px; height: 130px; }
.vs { display: block; width: 100%; height: 130px; }
.vs__hill { fill: rgba(120,150,255,.07); }
.vs__sil, .vs__sil path, .vs__sil rect { fill: #24387a; stroke: #24387a; }
.vs__sil path[fill=none] { fill: none; }
.vs__sil .vs__wire { fill: none; stroke: #22336d; stroke-width: 1; }
.vs__ground { fill: #1a2a5e; } .vs__road { stroke: rgba(255,255,255,.12); stroke-width: 1; stroke-dasharray: 10 10; }
.vs__board { fill: #f39221; } .vs__text { fill: #fff; font: 700 4.6px var(--font-head, sans-serif); text-anchor: middle; }
.vs__shopwin { fill: #ffcf8a; filter: drop-shadow(0 0 6px rgba(243,146,33,.9)); animation: shopGlow 3s ease-in-out infinite; }
@keyframes shopGlow { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }
.vs__win { fill: #ffd28a; opacity: .2; animation: winTw 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
@keyframes winTw { 0%, 40%, 100% { opacity: .2; } 55%, 85% { opacity: .95; } }
.vs__bus rect, .vs__bus circle { fill: #f39221; } .vs__bus circle { fill: #0e1a3a; } .vs__bus .vs__buswin { fill: #ffd28a; opacity: .8; }
.vs__bus { animation: busRide 26s linear infinite; }
@keyframes busRide { from { transform: translateX(-60px); } to { transform: translateX(1260px); } }
.f2__bottom { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.f2__right { display: inline-flex; align-items: center; gap: 18px; }
@media (max-width: 1100px) { .f2__main { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .f2__cols { grid-template-columns: 1fr 1fr; } .f2__col a { white-space: normal; } .f2__village { height: 90px; } .vs { height: 90px; } }
@media (prefers-reduced-motion: reduce) { .vs__bus, .vs__win, .vs__shopwin { animation: none; } }

/* footer logo on a white badge so the mark keeps its true colours */
.f2__logo { display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .25s; }
.f2__logo:hover { transform: translateY(-2px); }
.f2__brand .f2__logo img { height: 30px; width: auto; display: block; }

/* long scripts: header and hero sizing for Indic languages (words run wider than Latin) */
html:not(.font-latin) .nav__item > a, html:not(.font-latin) .nav__btn { font-size: .86rem; padding: 10px 8px; }
html:not(.font-latin) .site-header__cta { font-size: .84rem; padding: 10px 14px; }
html:not(.font-latin) .site-header__row { gap: 14px; }
html:not(.font-latin) .c-hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.22; }
html:not(.font-latin) .c-final__copy h2, html:not(.font-latin) .clean h2 { line-height: 1.3; }
@media (max-width: 1440px) { html:not(.font-latin) .site-header__login span { display: none; } html:not(.font-latin) .site-header__login { padding: 9px 11px; } }
@media (max-width: 1240px) { html:not(.font-latin) .nav__item > a, html:not(.font-latin) .nav__btn { font-size: .8rem; padding: 10px 6px; } html:not(.font-latin) .site-header__cta { font-size: .78rem; padding: 9px 12px; } }
html.font-taml .c-hero h1, html.font-mlym .c-hero h1 { font-size: clamp(1.8rem, 2.9vw, 2.45rem); }
html.font-taml .clean h2, html.font-mlym .clean h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }