/* =====================================================================
   Inner pages: every page has its own layout and signature animation.
   Shared bits: .ph (hero shell), .frame (canvas panel), .chips, .pg-more, FAQ.
   ===================================================================== */

/* ---------- hero shell ---------- */
.ph { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 500px at 15% 10%, rgba(243,146,33,.18), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(80,120,255,.18), transparent 60%); }
.ph__orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; animation: orb 14s ease-in-out infinite alternate; }
.ph__orb--a { width: 420px; height: 420px; left: -120px; top: -100px; background: #c65d2e; }
.ph__orb--b { width: 520px; height: 520px; right: -160px; bottom: -220px; background: #1f5fa8; animation-delay: -6s; }
.ph__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(48px, 7vw, 88px) 0; }
.ph .kicker { color: var(--sun); }
.ph h1 { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.08; }
.ph .lead { color: rgba(255,255,255,.85); font-size: 1.12rem; max-width: 56ch; }
.ph .btn--outline { color: #fff; border-color: rgba(255,255,255,.7); }
.ph .btn--outline:hover { background: #fff; color: var(--navy); }
.ph__copy > * { opacity: 0; transform: translateY(18px); animation: rise .9s var(--ease) forwards; }
.ph__copy > :nth-child(2) { animation-delay: .1s; } .ph__copy > :nth-child(3) { animation-delay: .2s; } .ph__copy > :nth-child(4) { animation-delay: .3s; } .ph__copy > :nth-child(5) { animation-delay: .4s; }
.ph__visual { position: relative; opacity: 0; transform: translateY(24px) scale(.96); animation: rise 1.1s var(--ease) .25s forwards; }
.frame { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: #0a0d1f; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 10px rgba(255,255,255,.04), 0 0 120px rgba(243,146,33,.18); }
.frame .mini { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 35%, transparent 70%, rgba(255,255,255,.06)); pointer-events: none; }
.frame__glow { position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent, rgba(243,146,33,.45), transparent 30%, transparent 60%, rgba(80,120,255,.35), transparent 90%); animation: spin 9s linear infinite; filter: blur(30px); }
.ph__visual > .frame__glow { position: absolute; inset: -10%; border-radius: 50%; z-index: 0; }
.ph__visual > .frame { z-index: 1; }
.chips { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.chips span { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.28); color: #fff; font-weight: 700; font-size: .92rem; opacity: 0; animation: chip 9s ease-in-out infinite; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.chips span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #38D96B; box-shadow: 0 0 12px #38D96B; }
.chips span:nth-child(2) { animation-delay: 3s; } .chips span:nth-child(3) { animation-delay: 6s; }
@keyframes chip { 0%, 33%, 100% { opacity: 0; transform: translateY(14px) scale(.9); } 4%, 27% { opacity: 1; transform: none; } }
@keyframes orb { to { transform: translate(40px, 30px) scale(1.15); } }
@media (max-width: 960px) { .ph__grid { grid-template-columns: 1fr; } .ph__visual { max-width: 560px; } }

/* ---------- "more services" strip ---------- */
.pg-more { padding: 36px 0 48px; background: var(--sand); border-top: 1px solid var(--line); }
.pg-more__list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pg-more__list a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--navy); font-weight: 700; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s, background .3s; }
.pg-more__list a:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(43,33,23,.14); background: var(--sun); }
.pg-more__list a .ico { width: 18px; height: 18px; }
.pg-more__list li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pg-more__list.is-in li { opacity: 1; transform: none; }
.pg-more__list.is-in li:nth-child(n) { transition-delay: calc(var(--i, 0) * 60ms); }

/* ---------- FAQ (shared) ---------- */
.pg-faq { background: var(--sand); }
.faq { max-width: 860px; display: grid; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 22px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.faq__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--orange), var(--terracotta)); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.faq__item[open]::before { transform: scaleY(1); }
.faq__item:hover { transform: translateX(4px); box-shadow: 0 16px 40px rgba(43,33,23,.12); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; color: var(--navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ico { transform: rotate(90deg); transition: transform .35s var(--ease); color: var(--terracotta); flex: none; }
.faq__item[open] summary .ico { transform: rotate(-90deg); }
.faq__body { animation: pop .45s var(--ease); }
.faq__body p { margin: 0 0 18px; color: var(--ink-soft); }
.faq.reveal--stagger .faq__item { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.faq.reveal--stagger.is-in .faq__item { opacity: 1; transform: none; }
.faq.reveal--stagger.is-in .faq__item:nth-child(2) { transition-delay: .1s; } .faq.reveal--stagger.is-in .faq__item:nth-child(3) { transition-delay: .2s; }

/* ---------- generic signature helpers ---------- */
.band { position: relative; overflow: hidden; }
.band--navy { background: var(--navy); color: #fff; }
.band--navy h2, .band--navy h3 { color: #fff; } .band--navy .kicker { color: var(--sun); } .band--navy p { color: rgba(255,255,255,.78); }
.band--navy::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 80% 20%, rgba(243,146,33,.22), transparent 60%); }
.band--sun { background: linear-gradient(135deg, #f6ead3, #e6c48f 70%); }
.band--sun h2, .band--sun h3 { color: var(--navy); } .band--sun .kicker { color: var(--navy); } .band--sun p { color: rgba(1,5,45,.75); }
.band > .wrap { position: relative; z-index: 1; }
.glass { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); border-radius: 24px; padding: 26px; transition: transform .35s var(--ease), background .3s, border-color .3s; }
.glass:hover { transform: translateY(-6px); background: rgba(255,255,255,.13); border-color: rgba(246,177,60,.6); }
.glass__icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(246,177,60,.18); color: var(--sun); margin-bottom: 14px; animation: iconFloat 5s ease-in-out infinite; }
.glass__icon .ico { width: 26px; height: 26px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.three h3 { font-size: 1.15rem; margin-bottom: 6px; }
.three > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.three.is-in > * { opacity: 1; transform: none; } .three.is-in > :nth-child(2) { transition-delay: .12s; } .three.is-in > :nth-child(3) { transition-delay: .24s; }
.bignum { counter-reset: bn; }
.bignum > * { position: relative; padding-top: 70px; }
.bignum > *::before { counter-increment: bn; content: "0" counter(bn); position: absolute; top: 0; left: 0; font-family: var(--font-head); font-weight: 800; font-size: 4rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(243,146,33,.6); }
@media (max-width: 900px) { .three { grid-template-columns: 1fr; } }

/* =====================================================================
   AEPS: fingerprint scanner + 2x2 tiles + vertical beam timeline
   ===================================================================== */
.scanner { position: relative; aspect-ratio: 1; max-width: 460px; margin: 0 auto; border-radius: 36px; background: linear-gradient(160deg, #141a3f, #080b22); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 90px rgba(0,0,0,.5), inset 0 0 80px rgba(80,120,255,.12); display: grid; place-items: center; overflow: hidden; }
.scanner__ring { position: absolute; width: 70%; height: 70%; border-radius: 50%; border: 1px solid rgba(246,177,60,.35); animation: ripple 3s ease-out infinite; }
.scanner__ring:nth-child(2) { animation-delay: 1s; } .scanner__ring:nth-child(3) { animation-delay: 2s; }
.scanner__fp { width: 52%; height: auto; position: relative; z-index: 1; }
.scanner__fp path { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: fpDraw 6s ease-in-out infinite; }
.scanner__fp path:nth-child(2) { animation-delay: .15s; } .scanner__fp path:nth-child(3) { animation-delay: .3s; } .scanner__fp path:nth-child(4) { animation-delay: .45s; } .scanner__fp path:nth-child(5) { animation-delay: .6s; } .scanner__fp path:nth-child(6) { animation-delay: .75s; }
.scanner__beam { position: absolute; left: 14%; right: 14%; height: 3px; background: linear-gradient(90deg, transparent, #38D96B, transparent); box-shadow: 0 0 24px #38D96B; top: 20%; animation: beam 6s ease-in-out infinite; z-index: 2; }
.scanner__tick { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%) scale(0); width: 64px; height: 64px; border-radius: 50%; background: #38D96B; display: grid; place-items: center; color: #04210f; box-shadow: 0 0 40px rgba(56,217,107,.6); animation: tickPop 6s ease-in-out infinite; z-index: 3; }
.scanner__tick .ico { width: 32px; height: 32px; }
.scanner__label { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
@keyframes fpDraw { 0% { stroke-dashoffset: 600; stroke: rgba(255,255,255,.35); } 40% { stroke-dashoffset: 0; stroke: rgba(255,255,255,.7); } 60%, 85% { stroke-dashoffset: 0; stroke: #38D96B; } 100% { stroke-dashoffset: 600; } }
@keyframes beam { 0%, 10% { top: 20%; opacity: 0; } 15% { opacity: 1; } 45% { top: 72%; opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes tickPop { 0%, 55% { transform: translateX(-50%) scale(0); } 62% { transform: translateX(-50%) scale(1.15); } 66%, 86% { transform: translateX(-50%) scale(1); } 92%, 100% { transform: translateX(-50%) scale(0); } }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.tile { position: relative; overflow: hidden; background: #fff; border-radius: 28px; padding: 34px 32px 32px 110px; box-shadow: var(--shadow); border: 1px solid var(--line); min-height: 180px; transition: transform .35s var(--ease), box-shadow .35s; }
.tile:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(43,33,23,.16); }
.tile__num { position: absolute; right: 18px; top: -14px; font-family: var(--font-head); font-weight: 800; font-size: 7rem; line-height: 1; color: rgba(246,177,60,.16); transition: transform .5s var(--ease); }
.tile:hover .tile__num { transform: translateY(-8px) rotate(-6deg); color: rgba(246,177,60,.3); }
.tile__icon { position: absolute; left: 30px; top: 34px; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--sun), var(--orange)); color: var(--navy); box-shadow: 0 10px 24px rgba(243,146,33,.35); animation: iconFloat 4.5s ease-in-out infinite; }
.tile__icon .ico { width: 28px; height: 28px; }
.tile:nth-child(2) .tile__icon { animation-delay: -1s; } .tile:nth-child(3) .tile__icon { animation-delay: -2s; } .tile:nth-child(4) .tile__icon { animation-delay: -3s; }
.tile h3 { font-size: 1.25rem; margin-bottom: 6px; } .tile p { margin: 0; color: var(--ink-soft); }
.tiles.reveal--stagger .tile { opacity: 0; transform: translateY(40px) scale(.95); transition: opacity .7s var(--ease), transform .8s cubic-bezier(.2,1.3,.4,1); }
.tiles.reveal--stagger.is-in .tile { opacity: 1; transform: none; }
.tiles.is-in .tile:nth-child(2) { transition-delay: .1s; } .tiles.is-in .tile:nth-child(3) { transition-delay: .2s; } .tiles.is-in .tile:nth-child(4) { transition-delay: .3s; }
.tl { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; max-width: 900px; margin-inline: auto; }
.tl::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 4px; background: linear-gradient(var(--line), var(--line)); }
.tl::after { content: ""; position: absolute; left: 50%; top: 0; width: 4px; height: 100%; margin-left: -2px; border-radius: 4px; background: linear-gradient(180deg, var(--orange), var(--terracotta)); transform: scaleY(0); transform-origin: top; transition: transform 1.6s var(--ease) .2s; }
.tl.is-in::after { transform: scaleY(1); }
.tl__dot { position: absolute; left: 50%; top: 0; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; border: 4px solid var(--orange); box-shadow: 0 0 0 8px rgba(243,146,33,.2), 0 0 24px rgba(243,146,33,.6); animation: tlDot 4s ease-in-out infinite; z-index: 2; }
@keyframes tlDot { 0% { top: 0; } 100% { top: calc(100% - 18px); } }
.tl__step { position: relative; width: calc(50% - 40px); background: #fff; border-radius: 22px; padding: 22px 24px; border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; transform: translateX(-40px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.tl__step:nth-child(even) { margin-left: auto; transform: translateX(40px); }
.tl.is-in .tl__step { opacity: 1; transform: none; }
.tl.is-in .tl__step:nth-child(2) { transition-delay: .3s; } .tl.is-in .tl__step:nth-child(3) { transition-delay: .6s; } .tl.is-in .tl__step:nth-child(4) { transition-delay: .9s; }
.tl__step::before { content: attr(data-n); position: absolute; top: 18px; right: -62px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--navy); font-family: var(--font-head); font-weight: 800; z-index: 1; box-shadow: 0 8px 20px rgba(243,146,33,.4); }
.tl__step:nth-child(even)::before { right: auto; left: -62px; }
.tl__step h3 { font-size: 1.1rem; margin-bottom: 4px; } .tl__step p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } .tl::before, .tl::after, .tl__dot { left: 22px; } .tl__step, .tl__step:nth-child(even) { width: auto; margin-left: 60px; } .tl__step::before, .tl__step:nth-child(even)::before { left: -60px; right: auto; } }

/* =====================================================================
   MONEY TRANSFER: route map arc + zigzag + phone chat
   ===================================================================== */
.route { position: relative; aspect-ratio: 4 / 3; max-width: 520px; margin: 0 auto; }
.route svg { width: 100%; height: 100%; overflow: visible; }
.route__path { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 3; stroke-dasharray: 8 10; animation: dash 2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -36; } }
.route__coin { offset-path: path('M 70 240 Q 260 20 450 220'); offset-rotate: 0deg; animation: coin 4s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes coin { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 80% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.route__node { transform-box: fill-box; transform-origin: center; }
.route__pulse { transform-box: fill-box; transform-origin: center; animation: ripple 4s ease-out infinite; animation-delay: 3.2s; }
.route__label { font-family: var(--font-head); font-weight: 800; font-size: 14px; fill: #fff; }
.route__tag { font-weight: 700; font-size: 11px; fill: var(--navy); }
.route__badge { position: absolute; display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); font-weight: 800; font-size: .85rem; letter-spacing: .06em; animation: iconFloat 4s ease-in-out infinite; }
.route__badge--a { left: 4%; top: 6%; } .route__badge--b { right: 2%; top: 20%; animation-delay: -2s; }
.route__badge i { width: 8px; height: 8px; border-radius: 50%; background: #38D96B; box-shadow: 0 0 10px #38D96B; }
.zig { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; }
.zig::before { content: ""; position: absolute; left: 50%; top: 20px; bottom: 20px; border-left: 3px dashed rgba(198,93,46,.35); }
.zig li { width: min(520px, calc(50% - 44px)); background: #fff; border-radius: 24px; padding: 24px 26px 24px 92px; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; opacity: 0; transform: translateX(-50px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.zig li:nth-child(even) { margin-left: auto; transform: translateX(50px); }
.zig.is-in li { opacity: 1; transform: none; }
.zig.is-in li:nth-child(2) { transition-delay: .15s; } .zig.is-in li:nth-child(3) { transition-delay: .3s; } .zig.is-in li:nth-child(4) { transition-delay: .45s; }
.zig__icon { position: absolute; left: 24px; top: 24px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #e9f1ff; color: #1f5fa8; }
.zig__icon .ico { width: 24px; height: 24px; }
.zig li::after { content: ""; position: absolute; top: 36px; width: 44px; border-top: 3px dashed rgba(198,93,46,.35); right: -44px; }
.zig li:nth-child(even)::after { right: auto; left: -44px; }
.zig h3 { font-size: 1.15rem; margin-bottom: 4px; } .zig p { margin: 0; color: var(--ink-soft); }
.chatgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.chat { position: relative; max-width: 340px; margin: 0 auto; background: #0a0d1f; border-radius: 34px; padding: 14px; box-shadow: 0 40px 80px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.1); }
.chat__screen { background: linear-gradient(#f4ece0, #efe3d1); border-radius: 24px; padding: 54px 14px 20px; min-height: 480px; position: relative; overflow: hidden; }
.chat__screen::before { content: ""; position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 34%; height: 10px; border-radius: 6px; background: #0a0d1f; }
.chat__head { position: absolute; top: 0; left: 0; right: 0; padding: 30px 16px 10px; background: var(--navy); color: #fff; font-weight: 800; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.chat__head i { width: 10px; height: 10px; border-radius: 50%; background: #38D96B; }
.chat__msgs { display: grid; gap: 10px; margin-top: 34px; }
.chat__msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: .85rem; line-height: 1.35; opacity: 0; transform: translateY(14px) scale(.96); animation: chatIn 14s ease-in-out infinite; background: #fff; color: var(--ink); border-bottom-left-radius: 4px; box-shadow: 0 4px 14px rgba(43,33,23,.1); }
.chat__msg--me { margin-left: auto; background: var(--orange); color: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
.chat__msg:nth-child(2) { animation-delay: 2.5s; } .chat__msg:nth-child(3) { animation-delay: 5s; } .chat__msg:nth-child(4) { animation-delay: 7.5s; } .chat__msg:nth-child(5) { animation-delay: 10s; }
.chat__msg strong { display: block; font-size: .78rem; opacity: .7; margin-bottom: 2px; }
@keyframes chatIn { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 4%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.chat__ok { margin-top: 10px; display: flex; justify-content: center; }
.chat__ok span { padding: 8px 14px; border-radius: 999px; background: #38D96B; color: #04210f; font-weight: 800; font-size: .8rem; opacity: 0; animation: chatIn 14s ease-in-out infinite; animation-delay: 11.5s; }
.steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: sl; }
.steps-list li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); opacity: 0; transform: translateX(30px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.steps-list.is-in li { opacity: 1; transform: none; }
.steps-list.is-in li:nth-child(2) { transition-delay: .12s; } .steps-list.is-in li:nth-child(3) { transition-delay: .24s; } .steps-list.is-in li:nth-child(4) { transition-delay: .36s; }
.steps-list li::before { counter-increment: sl; content: counter(sl); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--cream-2); color: var(--terracotta); font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; }
.steps-list h3 { font-size: 1.08rem; margin-bottom: 2px; } .steps-list p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.steps-list li { animation: howStep 16s ease-in-out infinite; animation-delay: calc(var(--i) * 4s); }
@media (max-width: 860px) { .zig::before, .zig li::after { display: none; } .zig li, .zig li:nth-child(even) { width: auto; margin-left: 0; } .chatgrid { grid-template-columns: 1fr; } }

/* =====================================================================
   BILLS: orbiting utilities + bill papers + receipt printer
   ===================================================================== */
.orbit { position: relative; aspect-ratio: 1; max-width: 460px; margin: 0 auto; display: grid; place-items: center; }
.orbit__seal { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 30% 30%, #fff3d6, var(--sun) 60%, var(--orange)); color: var(--navy); font-family: var(--font-head); font-weight: 800; line-height: 1.05; box-shadow: 0 0 0 14px rgba(246,177,60,.18), 0 0 0 28px rgba(246,177,60,.08), 0 30px 60px rgba(0,0,0,.45); animation: numPulse 4s ease-in-out infinite; position: relative; z-index: 2; }
.orbit__seal small { display: block; font-size: .7rem; letter-spacing: .14em; opacity: .7; }
.orbit__seal b { font-size: 1.6rem; }
.orbit { container-type: inline-size; }
.orbit__track { position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.25); }
.orbit__track--2 { inset: 24%; }
.orbit__item { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); animation: orbitItem 36s linear infinite; }
.orbit__track--2 .orbit__item { animation-duration: 24s; animation-direction: reverse; }
.orbit__item .ico { width: 26px; height: 26px; }
.orbit__item::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(246,177,60,.6); opacity: 0; animation: ripple 3s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes orbitItem { to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc(-1 * var(--a) - 360deg)); } }
.papers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; perspective: 1200px; }
.paper { position: relative; background: #fff; padding: 30px 24px 34px; border-radius: 6px 6px 18px 18px; box-shadow: 0 20px 50px rgba(43,33,23,.16); transform: rotate(var(--rot)); transition: transform .5s var(--ease), box-shadow .4s; min-height: 260px; }
.paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--sand) 0 10px, #fff 10px 20px); border-radius: 6px 6px 0 0; }
.paper::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 16px; border-top: 2px dashed var(--line); }
.paper:hover { transform: rotate(0) translateY(-8px); box-shadow: 0 30px 70px rgba(43,33,23,.22); }
.paper__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px; color: #fff; background: var(--c, var(--orange)); box-shadow: 0 10px 22px rgba(0,0,0,.15); }
.paper__icon .ico { width: 26px; height: 26px; animation: wobble 4s ease-in-out infinite; }
.paper h3 { font-size: 1.12rem; margin-bottom: 6px; } .paper p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.paper__stamp { position: absolute; right: 16px; top: 18px; padding: 4px 10px; border: 3px solid #38a05a; color: #38a05a; font-family: var(--font-head); font-weight: 800; letter-spacing: .1em; border-radius: 6px; opacity: 0; transform: scale(2.2) rotate(-25deg); }
.papers.is-in .paper__stamp { animation: stamp 2.4s var(--ease) forwards; animation-delay: calc(var(--i) * .25s + .6s); }
.papers.reveal--stagger .paper { opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.papers.reveal--stagger.is-in .paper { opacity: 1; }
.printer { max-width: 760px; margin: 0 auto; }
.printer__top { background: var(--navy); border-radius: 22px 22px 8px 8px; padding: 18px 22px; color: #fff; display: flex; align-items: center; gap: 10px; font-weight: 800; box-shadow: 0 20px 40px rgba(0,0,0,.25); position: relative; z-index: 2; }
.printer__top i { width: 10px; height: 10px; border-radius: 50%; background: #38D96B; animation: pulse 1.4s ease-in-out infinite; }
.printer__slot { height: 12px; background: #050828; margin: 0 14px; border-radius: 0 0 6px 6px; position: relative; z-index: 2; }
.receipt { margin: 0 34px; background: #fff; padding: 26px 28px 30px; box-shadow: 0 20px 50px rgba(43,33,23,.16); font-family: ui-monospace, "Courier New", monospace; position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 97% 100%, 94% calc(100% - 10px), 91% 100%, 88% calc(100% - 10px), 85% 100%, 82% calc(100% - 10px), 79% 100%, 76% calc(100% - 10px), 73% 100%, 70% calc(100% - 10px), 67% 100%, 64% calc(100% - 10px), 61% 100%, 58% calc(100% - 10px), 55% 100%, 52% calc(100% - 10px), 49% 100%, 46% calc(100% - 10px), 43% 100%, 40% calc(100% - 10px), 37% 100%, 34% calc(100% - 10px), 31% 100%, 28% calc(100% - 10px), 25% 100%, 22% calc(100% - 10px), 19% 100%, 16% calc(100% - 10px), 13% 100%, 10% calc(100% - 10px), 7% 100%, 4% calc(100% - 10px), 1% 100%, 0 calc(100% - 10px)); transform: translateY(-100%); opacity: 0; transition: transform 1.8s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.printer.is-in .receipt { transform: none; opacity: 1; }
.receipt ol { list-style: none; padding: 0; margin: 0; counter-reset: rc; }
.receipt li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-bottom: 2px dashed var(--line); opacity: 0; transition: opacity .5s; }
.printer.is-in .receipt li { opacity: 1; transition-delay: calc(var(--i) * .35s + 1.2s); }
.receipt li::before { counter-increment: rc; content: "0" counter(rc); font-weight: 800; color: var(--terracotta); }
.receipt h3 { font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 2px; } .receipt p { margin: 0; color: var(--ink-soft); font-size: .92rem; font-family: var(--font-body, inherit); }
.receipt__total { display: flex; justify-content: space-between; padding-top: 14px; font-weight: 800; }
.receipt__total b { color: #38a05a; }
@media (max-width: 1000px) { .papers { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .papers { grid-template-columns: 1fr; } }

/* =====================================================================
   RECHARGE: plan cards + stopwatch ring + shine bars
   ===================================================================== */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.plan { position: relative; background: #fff; border-radius: 24px; border: 2px solid var(--line); overflow: hidden; transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.plan:hover { transform: translateY(-8px); border-color: var(--orange); box-shadow: 0 24px 50px rgba(243,146,33,.2); }
.plan__top { background: linear-gradient(135deg, var(--navy), #1f2a6b); color: #fff; padding: 22px 22px 18px; display: flex; align-items: center; justify-content: space-between; }
.plan__top .ico { width: 30px; height: 30px; color: var(--sun); animation: iconFloat 4s ease-in-out infinite; }
.plan__tag { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--sun); }
.plan__body { padding: 20px 22px 24px; }
.plan h3 { font-size: 1.12rem; margin-bottom: 6px; } .plan p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.plan__ribbon { position: absolute; top: 14px; right: -36px; transform: rotate(45deg); background: #38D96B; color: #04210f; font-weight: 800; font-size: .7rem; letter-spacing: .1em; padding: 4px 40px; }
.plan__bar { height: 6px; background: var(--sand); margin-top: 16px; border-radius: 3px; overflow: hidden; }
.plan__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sun), #38D96B); border-radius: 3px; transition: width 1.4s var(--ease) .3s; }
.plans.is-in .plan__bar i { width: var(--w); }
.plans.reveal--stagger .plan { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .3s, box-shadow .35s; }
.plans.reveal--stagger.is-in .plan { opacity: 1; transform: none; }
.plans.is-in .plan:nth-child(2) { transition-delay: .1s; } .plans.is-in .plan:nth-child(3) { transition-delay: .2s; } .plans.is-in .plan:nth-child(4) { transition-delay: .3s; }
.clockgrid { display: grid; grid-template-columns: 1fr 300px 1fr; gap: 26px; align-items: center; }
.clock { width: 300px; height: 300px; position: relative; display: grid; place-items: center; }
.clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.clock__track { fill: none; stroke: var(--line); stroke-width: 14; }
.clock__seg { fill: none; stroke: var(--orange); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 0 1000; animation: clockSeg 12s linear infinite; }
.clock__seg:nth-child(3) { stroke: var(--sun); animation-delay: 3s; } .clock__seg:nth-child(4) { stroke: var(--terracotta); animation-delay: 6s; } .clock__seg:nth-child(5) { stroke: #38a05a; animation-delay: 9s; }
@keyframes clockSeg { 0% { stroke-dasharray: 0 1000; opacity: 1; } 25%, 95% { stroke-dasharray: 190 1000; opacity: 1; } 100% { stroke-dasharray: 190 1000; opacity: 0; } }
.clock__face { text-align: center; font-family: var(--font-head); font-weight: 800; }
.clock__face b { display: block; font-size: 3rem; line-height: 1; color: var(--navy); animation: numPulse 3s ease-in-out infinite; }
.clock__face span { font-size: .85rem; color: var(--ink-soft); letter-spacing: .1em; text-transform: uppercase; }
.clock-steps { display: grid; gap: 18px; }
.clock-step { background: #fff; border-radius: 20px; padding: 18px 20px; border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; grid-template-columns: 44px 1fr; gap: 14px; opacity: 0; transform: scale(.9); transition: opacity .6s var(--ease), transform .6s var(--ease); animation: howStep 12s ease-in-out infinite; animation-delay: calc(var(--i) * 3s); }
.clock-steps.is-in .clock-step { opacity: 1; transform: none; }
.clock-step::before { content: attr(data-n); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--navy); font-family: var(--font-head); font-weight: 800; }
.clock-step h3 { font-size: 1.05rem; margin-bottom: 2px; } .clock-step p { margin: 0; font-size: .94rem; color: var(--ink-soft); }
.bars { display: grid; gap: 16px; max-width: 980px; }
.bar { position: relative; overflow: hidden; display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: center; padding: 20px 24px; border-radius: 20px; background: linear-gradient(90deg, #fff, #fff8ec); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; transform: translateX(-40px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.bars.is-in .bar { opacity: 1; transform: none; } .bars.is-in .bar:nth-child(2) { transition-delay: .15s; } .bars.is-in .bar:nth-child(3) { transition-delay: .3s; }
.bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; background: linear-gradient(90deg, transparent, rgba(246,177,60,.35), transparent); animation: shine 4s ease-in-out infinite; animation-delay: calc(var(--i) * 1.3s); }
@keyframes shine { 0% { left: -140px; } 60%, 100% { left: 110%; } }
.bar__icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--navy); color: var(--sun); }
.bar__icon .ico { width: 28px; height: 28px; }
.bar h3 { font-size: 1.12rem; margin-bottom: 2px; } .bar p { margin: 0; color: var(--ink-soft); }
@media (max-width: 1000px) { .plans { grid-template-columns: repeat(2, 1fr); } .clockgrid { grid-template-columns: 1fr; justify-items: center; } } @media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

/* =====================================================================
   GIFT CARDS: confetti + voucher marquee + opening boxes + festive lights
   ===================================================================== */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; background: var(--c); left: var(--x); animation: confetti var(--t) linear infinite; animation-delay: var(--d); opacity: .9; }
@keyframes confetti { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(110vh) rotate(720deg); } }
.vmarquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vmarquee__track { display: flex; gap: 22px; width: max-content; animation: marquee 32s linear infinite; }
.vmarquee:hover .vmarquee__track { animation-play-state: paused; }
.voucher { width: 320px; flex: none; border-radius: 22px; padding: 24px; color: #fff; background: var(--g); position: relative; overflow: hidden; box-shadow: 0 20px 50px rgba(43,33,23,.18); transition: transform .35s var(--ease); min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; }
.voucher:hover { transform: translateY(-8px) rotate(-1.5deg); }
.voucher::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -60px; top: -60px; background: rgba(255,255,255,.18); }
.voucher::after { content: ""; position: absolute; left: -12px; top: 58%; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); box-shadow: 344px 0 0 var(--cream); }
.voucher__icon { position: absolute; top: 22px; left: 24px; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.2); }
.voucher__icon .ico { width: 24px; height: 24px; }
.voucher__code { font-family: ui-monospace, monospace; font-size: .8rem; letter-spacing: .14em; opacity: .75; margin-bottom: 8px; }
.voucher h3 { color: #fff; font-size: 1.2rem; margin-bottom: 4px; } .voucher p { margin: 0; color: rgba(255,255,255,.85); font-size: .92rem; }
.boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.box { position: relative; text-align: center; padding-top: 70px; }
.box__gift { position: relative; width: 110px; height: 90px; margin: 0 auto 22px; }
.box__base { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(#e2572c, #c65d2e); border-radius: 8px; }
.box__base::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; margin-left: -7px; background: var(--sun); }
.box__lid { position: absolute; left: -6px; right: -6px; top: 14px; height: 26px; background: linear-gradient(#f08a5d, #e2572c); border-radius: 6px; transform-origin: left bottom; transition: transform .8s cubic-bezier(.3,1.4,.4,1); z-index: 2; }
.box__lid::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 14px; margin-left: -7px; background: var(--sun); }
.box__pop { position: absolute; left: 50%; bottom: 30px; transform: translate(-50%, 20px) scale(0); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--terracotta); box-shadow: 0 10px 30px rgba(0,0,0,.2); transition: transform .7s cubic-bezier(.3,1.5,.4,1) .35s; z-index: 1; }
.box__pop .ico { width: 28px; height: 28px; }
.boxes.is-in .box__lid { transform: rotate(-110deg) translateY(-10px); transition-delay: calc(var(--i) * .25s); }
.boxes.is-in .box__pop { transform: translate(-50%, -34px) scale(1); transition-delay: calc(var(--i) * .25s + .35s); }
.box h3 { font-size: 1.08rem; margin-bottom: 4px; } .box p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.box::before { content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--sun); font-family: var(--font-head); font-weight: 800; }
.lights { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; justify-content: space-around; }
.lights i { width: 14px; height: 18px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--c); box-shadow: 0 0 14px var(--c); animation: twinkle 1.6s ease-in-out infinite; animation-delay: var(--d); margin-top: 6px; }
@media (max-width: 960px) { .boxes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .boxes { grid-template-columns: 1fr; } }

/* =====================================================================
   TRAVEL: boarding passes + road with a driving bus + season tags
   ===================================================================== */
.passes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pass { display: grid; grid-template-columns: 1fr 120px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); position: relative; transition: transform .35s var(--ease), box-shadow .35s; }
.pass:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 24px 60px rgba(43,33,23,.16); }
.pass__main { padding: 24px 26px; }
.pass__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pass__head .ico { width: 26px; height: 26px; color: var(--terracotta); }
.pass__head small { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-size: .72rem; }
.pass h3 { font-size: 1.2rem; margin-bottom: 4px; } .pass p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.pass__stub { border-left: 2px dashed var(--line); background: var(--sand); display: grid; place-items: center; padding: 14px; position: relative; }
.pass__stub::before, .pass__stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); }
.pass__stub::before { top: -10px; } .pass__stub::after { bottom: -10px; }
.pass__bar { width: 70px; height: 70px; background: repeating-linear-gradient(90deg, var(--navy) 0 3px, transparent 3px 6px, var(--navy) 6px 8px, transparent 8px 11px, var(--navy) 11px 15px, transparent 15px 17px); position: relative; overflow: hidden; }
.pass__bar::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: #e2572c; box-shadow: 0 0 10px #e2572c; animation: scanbar 2.2s ease-in-out infinite; }
@keyframes scanbar { 0%, 100% { top: 0; } 50% { top: calc(100% - 3px); } }
.passes.reveal--stagger .pass { opacity: 0; transform: translateX(-40px); transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s; }
.passes.reveal--stagger .pass:nth-child(even) { transform: translateX(40px); }
.passes.reveal--stagger.is-in .pass { opacity: 1; transform: none; }
.passes.is-in .pass:nth-child(2) { transition-delay: .1s; } .passes.is-in .pass:nth-child(3) { transition-delay: .2s; } .passes.is-in .pass:nth-child(4) { transition-delay: .3s; }
.road { position: relative; padding-top: 90px; }
.road__strip { position: absolute; left: 0; right: 0; top: 30px; height: 34px; background: #2b2a35; border-radius: 17px; overflow: hidden; }
.road__strip::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1px; background: repeating-linear-gradient(90deg, #f6b13c 0 30px, transparent 30px 60px); animation: roadLine 1.2s linear infinite; }
@keyframes roadLine { to { background-position: -60px 0; } }
.road__bus { position: absolute; top: 2px; left: 0; width: 56px; height: 56px; display: grid; place-items: center; color: var(--navy); background: var(--sun); border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.25); animation: busRide 16s ease-in-out infinite; }
.road__bus .ico { width: 32px; height: 32px; animation: busBounce .3s ease-in-out infinite alternate; }
@keyframes busRide { 0% { left: 0; } 20%, 25% { left: calc(25% - 28px); } 45%, 50% { left: calc(50% - 28px); } 70%, 75% { left: calc(75% - 28px); } 95%, 100% { left: calc(100% - 56px); } }
.road__stops { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.road__stop { position: relative; background: #fff; border-radius: 20px; padding: 22px 20px; border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); animation: howStep 16s ease-in-out infinite; animation-delay: calc(var(--i) * 4s + 3.5s); }
.road__stops.is-in .road__stop { opacity: 1; transform: none; } .road__stops.is-in .road__stop:nth-child(2) { transition-delay: .12s; } .road__stops.is-in .road__stop:nth-child(3) { transition-delay: .24s; } .road__stops.is-in .road__stop:nth-child(4) { transition-delay: .36s; }
.road__stop::before { content: ""; position: absolute; left: 50%; top: -34px; width: 4px; height: 26px; margin-left: -2px; background: var(--line); }
.road__stop::after { content: attr(data-n); position: absolute; left: 50%; top: -58px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #fff; color: var(--terracotta); border: 3px solid var(--terracotta); font-family: var(--font-head); font-weight: 800; display: grid; place-items: center; font-size: .9rem; }
.road__stop h3 { font-size: 1.05rem; margin-bottom: 4px; } .road__stop p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tag { background: #fff; border-radius: 24px; padding: 26px; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.tag::before { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(246,177,60,.35), transparent 70%); animation: blob 6s ease-in-out infinite alternate; }
.tag__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--sand); color: var(--terracotta); font-weight: 800; font-size: .8rem; margin-bottom: 14px; }
.tag__chip .ico { width: 16px; height: 16px; }
.tag h3 { font-size: 1.12rem; margin-bottom: 6px; } .tag p { margin: 0; color: var(--ink-soft); }
@media (max-width: 900px) { .passes, .tags { grid-template-columns: 1fr; } .road__stops { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   DISTRIBUTOR: dashboard panels + org tree + KPIs
   ===================================================================== */
.panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.panel { background: #fff; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.panel__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; background: var(--navy); color: #fff; font-weight: 800; }
.panel__toggle { width: 46px; height: 26px; border-radius: 13px; background: rgba(255,255,255,.2); position: relative; transition: background .4s; }
.panel__toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .4s var(--ease); }
.panels.is-in .panel__toggle { background: #38D96B; transition-delay: calc(var(--i) * .2s + .4s); }
.panels.is-in .panel__toggle::after { left: 23px; transition-delay: calc(var(--i) * .2s + .4s); }
.panel__body { padding: 20px 22px 24px; display: grid; grid-template-columns: 1fr 90px; gap: 16px; align-items: end; }
.panel h3 { font-size: 1.12rem; margin-bottom: 6px; } .panel p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.panel__chart { display: flex; align-items: flex-end; gap: 5px; height: 70px; }
.panel__chart i { flex: 1; background: linear-gradient(var(--sun), var(--orange)); border-radius: 3px 3px 0 0; height: var(--h); transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--ease); }
.panels.is-in .panel__chart i { transform: scaleY(1); transition-delay: calc(var(--j) * 80ms + .3s); }
.panels.reveal--stagger .panel { opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.panels.reveal--stagger.is-in .panel { opacity: 1; transform: none; }
.tree { position: relative; max-width: 980px; margin: 0 auto; }
.tree__root { width: 220px; margin: 0 auto; background: var(--navy); color: #fff; border-radius: 20px; padding: 18px; text-align: center; font-weight: 800; position: relative; z-index: 1; box-shadow: 0 0 0 10px rgba(1,5,45,.08), 0 20px 40px rgba(0,0,0,.25); animation: numPulse 4s ease-in-out infinite; }
.tree__root .ico { width: 28px; height: 28px; color: var(--sun); display: block; margin: 0 auto 6px; }
.tree__lines { display: block; width: 100%; height: 90px; }
.tree__lines path { fill: none; stroke: var(--terracotta); stroke-width: 3; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.2s var(--ease); }
.tree.is-in .tree__lines path { stroke-dashoffset: 0; }
.tree.is-in .tree__lines path:nth-child(2) { transition-delay: .2s; } .tree.is-in .tree__lines path:nth-child(3) { transition-delay: .4s; } .tree.is-in .tree__lines path:nth-child(4) { transition-delay: .6s; }
.tree__pkt { fill: var(--sun); offset-path: path('M 490 0 C 490 45, 122 45, 122 90'); animation: coin 3s linear infinite; }
.tree__pkt:nth-of-type(2) { offset-path: path('M 490 0 C 490 45, 367 45, 367 90'); animation-delay: .75s; } .tree__pkt:nth-of-type(3) { offset-path: path('M 490 0 C 490 45, 612 45, 612 90'); animation-delay: 1.5s; } .tree__pkt:nth-of-type(4) { offset-path: path('M 490 0 C 490 45, 857 45, 857 90'); animation-delay: 2.25s; }
.tree__nodes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tree__node { background: #fff; border-radius: 20px; padding: 22px 20px; border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; opacity: 0; transform: scale(.7); transition: opacity .6s var(--ease), transform .7s cubic-bezier(.2,1.4,.4,1); }
.tree.is-in .tree__node { opacity: 1; transform: none; transition-delay: calc(var(--i) * .2s + .6s); }
.tree__node::before { content: attr(data-n); display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: var(--sun); color: var(--navy); font-family: var(--font-head); font-weight: 800; }
.tree__node h3 { font-size: 1.02rem; margin-bottom: 4px; } .tree__node p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kpi { padding: 28px; border-radius: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; inset: auto -40px -40px auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(246,177,60,.3), transparent 70%); }
.kpi__icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: rgba(246,177,60,.18); color: var(--sun); margin-bottom: 14px; animation: iconFloat 5s ease-in-out infinite; }
.kpi__icon .ico { width: 24px; height: 24px; }
.kpi h3 { font-size: 1.12rem; margin-bottom: 6px; }
@media (max-width: 900px) { .panels, .kpis { grid-template-columns: 1fr; } .tree__nodes { grid-template-columns: repeat(2, 1fr); } .tree__lines, .tree__pkt { display: none; } }

/* =====================================================================
   API: endpoint docs + pipeline + terminal
   ===================================================================== */
.endpoints { display: grid; gap: 14px; }
.endpoint { display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center; background: #fff; border-radius: 18px; padding: 18px 22px; border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; transform: translateX(-30px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .3s; }
.endpoints.is-in .endpoint { opacity: 1; transform: none; } .endpoints.is-in .endpoint:nth-child(2) { transition-delay: .1s; } .endpoints.is-in .endpoint:nth-child(3) { transition-delay: .2s; } .endpoints.is-in .endpoint:nth-child(4) { transition-delay: .3s; }
.endpoint:hover { border-color: var(--orange); }
.endpoint__m { font-family: ui-monospace, monospace; font-weight: 800; font-size: .8rem; padding: 6px 10px; border-radius: 8px; text-align: center; color: #fff; background: var(--m, #1f5fa8); }
.endpoint__path { font-family: ui-monospace, monospace; font-size: .85rem; color: var(--terracotta); margin-bottom: 4px; display: block; }
.endpoint h3 { font-size: 1.1rem; margin-bottom: 2px; } .endpoint p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.endpoint__status { font-family: ui-monospace, monospace; font-size: .78rem; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: #e7f8ec; color: #1f7a3f; animation: pulse 2.4s ease-in-out infinite; }
.pipe { position: relative; padding-top: 70px; }
.pipe__line { position: absolute; left: 6%; right: 6%; top: 24px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pipe__line::after { content: ""; position: absolute; left: -30%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--orange), #38D96B); animation: pipeFlow 3.5s linear infinite; }
@keyframes pipeFlow { to { left: 100%; } }
.pipe__stations { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pipe__st { position: relative; text-align: center; padding: 24px 18px; background: #fff; border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.pipe__stations.is-in .pipe__st { opacity: 1; transform: none; } .pipe__stations.is-in .pipe__st:nth-child(2) { transition-delay: .15s; } .pipe__stations.is-in .pipe__st:nth-child(3) { transition-delay: .3s; } .pipe__stations.is-in .pipe__st:nth-child(4) { transition-delay: .45s; }
.pipe__st::before { content: ""; position: absolute; left: 50%; top: -56px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; border: 5px solid var(--orange); box-shadow: 0 0 0 6px rgba(243,146,33,.2); animation: dotPulse 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
.pipe__st h3 { font-size: 1.05rem; margin-bottom: 4px; } .pipe__st p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.termgrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.term { background: #0a0d1f; border-radius: 20px; padding: 0; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.1); font-family: ui-monospace, "Courier New", monospace; }
.term__bar { display: flex; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,.06); }
.term__bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; } .term__bar i:nth-child(2) { background: #febc2e; } .term__bar i:nth-child(3) { background: #28c840; }
.term pre { margin: 0; padding: 20px 22px; color: #cfe3ff; font-size: .84rem; line-height: 1.6; min-height: 300px; white-space: pre-wrap; }
.term .k { color: #8cc8ff; } .term .s { color: #ffd27a; } .term .ok { color: #38D96B; } .term .c { color: #6b7aa8; }
.term__cursor { display: inline-block; width: 9px; height: 16px; background: #38D96B; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@media (max-width: 900px) { .endpoint { grid-template-columns: 70px 1fr; } .endpoint__status { display: none; } .pipe__stations { grid-template-columns: repeat(2, 1fr); } .termgrid { grid-template-columns: 1fr; } }

/* =====================================================================
   ABOUT: stats + story chapters + manifesto + India map
   ===================================================================== */
.chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: ch; }
.chapter { position: relative; background: #fff; border-radius: 26px; padding: 70px 24px 28px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; transition: transform .35s var(--ease); }
.chapter:hover { transform: translateY(-6px); }
.chapter::before { counter-increment: ch; content: "0" counter(ch); position: absolute; top: 14px; left: 22px; font-family: var(--font-head); font-weight: 800; font-size: 3rem; color: transparent; -webkit-text-stroke: 2px var(--orange); line-height: 1; }
.chapter::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--sun), var(--terracotta)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.chapters.is-in .chapter::after { transform: scaleX(1); transition-delay: calc(var(--i) * .2s); }
.chapter__icon { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sand); color: var(--terracotta); animation: iconFloat 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.2s); }
.chapter__icon .ico { width: 22px; height: 22px; }
.chapter h3 { font-size: 1.1rem; margin-bottom: 6px; } .chapter p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.chapters.reveal--stagger .chapter { opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.chapters.reveal--stagger.is-in .chapter { opacity: 1; transform: none; } .chapters.is-in .chapter:nth-child(2) { transition-delay: .1s; } .chapters.is-in .chapter:nth-child(3) { transition-delay: .2s; } .chapters.is-in .chapter:nth-child(4) { transition-delay: .3s; }
.manifesto { list-style: none; padding: 0; margin: 0; max-width: 900px; counter-reset: mf; }
.manifesto li { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.manifesto.is-in li { opacity: 1; transform: none; } .manifesto.is-in li:nth-child(2) { transition-delay: .15s; } .manifesto.is-in li:nth-child(3) { transition-delay: .3s; } .manifesto.is-in li:nth-child(4) { transition-delay: .45s; }
.manifesto li::before { counter-increment: mf; content: counter(mf, decimal-leading-zero); font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; color: var(--terracotta); line-height: 1; }
.manifesto h3 { font-size: 1.35rem; margin-bottom: 6px; position: relative; display: inline-block; }
.manifesto h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; border-radius: 2px; background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .3s; }
.manifesto.is-in h3::after { transform: scaleX(1); }
.manifesto p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }
.mapgrid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.india { width: 100%; max-width: 380px; margin: 0 auto; display: block; }
.india__land { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.3); stroke-width: 1.5; }
.india__dot { fill: var(--sun); }
.india__ring { fill: none; stroke: var(--sun); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ripple 3s ease-out infinite; animation-delay: var(--d); }
.about-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 26px; }
.about-stats .stat__num { font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--sun); line-height: 1; }
.about-stats .stat__label { font-weight: 600; font-size: .9rem; color: rgba(255,255,255,.8); }
@media (max-width: 960px) { .chapters { grid-template-columns: repeat(2, 1fr); } .mapgrid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .chapters { grid-template-columns: 1fr; } .manifesto li { grid-template-columns: 56px 1fr; } }

/* ---------- compact laptops ---------- */
@media (max-height: 820px) and (min-width: 960px) { .ph__grid { padding: 40px 0 44px; } .ph h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); } .ph .lead { font-size: 1.02rem; } .scanner, .orbit, .route { max-width: 380px; } .frame { max-width: 520px; margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .pages-anim, .ph__copy > *, .ph__visual, .chips span, .scanner *, .route__coin, .orbit__track, .orbit__item, .chat__msg, .road__bus, .tl__dot, .confetti i, .vmarquee__track, .steps-list li, .clock-step, .road__stop { animation: none !important; opacity: 1 !important; transform: none !important; } }

/* =====================================================================
   Rural India layer: hero background scene, service strip, people cards
   ===================================================================== */
.ph__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ph::before { z-index: 1; background: linear-gradient(90deg, rgba(1,5,45,.84) 0%, rgba(1,5,45,.6) 48%, rgba(1,5,45,.3) 100%), radial-gradient(900px 500px at 15% 10%, rgba(243,146,33,.18), transparent 60%); }
.ph__orb { z-index: 1; opacity: .35; }
.ph__grid { z-index: 2; }
.strip { position: relative; min-height: clamp(420px, 48vw, 600px); overflow: hidden; background: var(--navy); display: flex; align-items: flex-end; }
.strip__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,5,45,.15), transparent 35%, transparent 70%, rgba(1,5,45,.35)); pointer-events: none; }
.strip__inner { position: relative; z-index: 1; padding: 48px 0; width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.strip__card { max-width: 560px; background: rgba(6,10,40,.72); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.18); border-radius: 26px; padding: 28px 30px; color: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.45); opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.strip__card.is-in { opacity: 1; transform: none; }
.strip__card .kicker { color: var(--sun); }
.strip__card h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 10px; }
.strip__card p { color: rgba(255,255,255,.85); margin: 0 0 10px; font-size: 1rem; line-height: 1.6; }
.strip__card p:last-child { margin: 0; }
.strip__clock { position: absolute; top: 22px; right: 22px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(6,10,40,.6); border: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 700; font-size: .85rem; backdrop-filter: blur(8px); }
.strip__clock i { width: 8px; height: 8px; border-radius: 50%; background: #38D96B; box-shadow: 0 0 10px #38D96B; animation: pulse 1.6s ease-in-out infinite; }
.users { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.user { position: relative; background: #fff; border-radius: 26px; padding: 26px 24px 26px 118px; border: 1px solid var(--line); box-shadow: var(--shadow); min-height: 150px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.user:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(43,33,23,.16); }
.user::before { content: ""; position: absolute; left: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(246,177,60,.35), transparent 70%); }
.user__face { position: absolute; left: 24px; top: 26px; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(160deg, #4a3a2f, #2a2033); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.2); animation: iconFloat 5s ease-in-out infinite; }
.user__face::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: #120d1f; transform: translateY(-8px); }
.user__face::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 44px; height: 24px; margin-left: -22px; border-radius: 22px 22px 0 0; background: var(--c, var(--orange)); }
.user:nth-child(2) .user__face { animation-delay: -1.5s; } .user:nth-child(3) .user__face { animation-delay: -3s; }
.user h3 { font-size: 1.12rem; margin-bottom: 6px; } .user p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.users.reveal--stagger .user { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s; }
.users.reveal--stagger.is-in .user { opacity: 1; transform: none; } .users.is-in .user:nth-child(2) { transition-delay: .12s; } .users.is-in .user:nth-child(3) { transition-delay: .24s; }
@media (max-width: 960px) { .users { grid-template-columns: 1fr; } .strip { min-height: 0; display: block; } .strip__scene { position: relative; height: 260px; } .strip__inner { padding: 20px 0 32px; } .strip__card { max-width: none; } }

/* ---------- contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.ready { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ready__card { background: #fff; border-radius: 24px; padding: 26px; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.ready.is-in .ready__card { opacity: 1; transform: none; } .ready.is-in .ready__card:nth-child(2) { transition-delay: .12s; } .ready.is-in .ready__card:nth-child(3) { transition-delay: .24s; }
.ready__card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--sun), var(--terracotta)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .3s; }
.ready.is-in .ready__card::after { transform: scaleX(1); }
.ready__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--navy); color: var(--sun); margin-bottom: 14px; animation: iconFloat 5s ease-in-out infinite; }
.ready__icon .ico { width: 26px; height: 26px; }
.ready__card h3 { font-size: 1.12rem; margin-bottom: 6px; } .ready__card p { margin: 0; color: var(--ink-soft); }
.cinfo { background: var(--navy); color: #fff; border-radius: 28px; padding: 30px; position: sticky; top: 100px; overflow: hidden; }
.cinfo::before { content: ""; position: absolute; inset: auto -60px -60px auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(243,146,33,.4), transparent 70%); animation: blob 8s ease-in-out infinite alternate; }
.cinfo h2 { color: #fff; font-size: 1.3rem; margin-bottom: 14px; }
.cinfo ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; position: relative; }
.cinfo li { display: flex; gap: 12px; align-items: flex-start; }
.cinfo li .ico { width: 22px; height: 22px; color: var(--sun); flex: none; margin-top: 2px; }
.cinfo a { color: #fff; font-weight: 700; text-decoration: none; } .cinfo a:hover { color: var(--sun); }
.cinfo__block { position: relative; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.15); }
.cinfo__block h3 { color: var(--sun); font-size: .95rem; margin-bottom: 4px; } .cinfo__block p { margin: 0 0 12px; color: rgba(255,255,255,.8); font-size: .95rem; }
.pinmap { position: relative; aspect-ratio: 4 / 3; max-width: 520px; margin: 0 auto; }
.pinmap .frame { position: absolute; inset: 0; aspect-ratio: auto; }
.pin { position: absolute; left: 50%; top: 38%; width: 44px; height: 44px; margin-left: -22px; z-index: 3; animation: pinDrop 4s cubic-bezier(.3,1.4,.4,1) infinite; }
.pin::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.pin::after { content: ""; position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.pin__ring { position: absolute; left: 50%; top: 48%; width: 60px; height: 24px; margin: -12px 0 0 -30px; border-radius: 50%; border: 2px solid var(--sun); z-index: 2; animation: pinRing 4s ease-out infinite; }
@keyframes pinDrop { 0% { transform: translateY(-80px); opacity: 0; } 25% { transform: translateY(0); opacity: 1; } 85% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
@keyframes pinRing { 0%, 24% { transform: scale(.2); opacity: 0; } 30% { opacity: .9; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@media (max-width: 960px) { .contact-grid, .ready { grid-template-columns: 1fr; } .cinfo { position: static; } }

/* ---------- careers page ---------- */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.job { position: relative; background: #fff; border-radius: 24px; padding: 24px; border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, border-color .3s; }
.job:hover { transform: translateY(-6px); border-color: var(--orange); box-shadow: 0 24px 60px rgba(243,146,33,.18); }
.job__top { display: flex; align-items: center; gap: 12px; }
.job__avatar { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy), #1f2a6b); color: var(--sun); font-family: var(--font-head); font-weight: 800; }
.job__type { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta); display: block; }
.job h3 { font-size: 1.12rem; margin: 0; }
.job p { margin: 0; color: var(--ink-soft); font-size: .95rem; flex: 1; }
.job__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.job__tags span { font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--sand); color: var(--navy); }
.job .btn { align-self: flex-start; }
.job__open { position: absolute; top: 18px; right: 18px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; background: #e7f8ec; color: #1f7a3f; animation: pulse 2.4s ease-in-out infinite; }
.jobs.reveal--stagger .job { opacity: 0; transform: translateY(30px); transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .35s, border-color .3s; }
.jobs.reveal--stagger.is-in .job { opacity: 1; transform: none; }
.jobs.is-in .job:nth-child(n) { transition-delay: calc(var(--i, 0) * .1s); }
.life { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.life__text p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.65; }
.life__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.life__stat { background: var(--navy); color: #fff; border-radius: 22px; padding: 22px; position: relative; overflow: hidden; }
.life__stat::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(246,177,60,.4), transparent 70%); }
.life__stat b { display: block; font-family: var(--font-head); font-size: 2rem; color: var(--sun); line-height: 1; margin-bottom: 6px; }
.life__stat span { font-size: .9rem; color: rgba(255,255,255,.8); }
@media (max-width: 960px) { .jobs { grid-template-columns: 1fr 1fr; } .life { grid-template-columns: 1fr; } } @media (max-width: 600px) { .jobs { grid-template-columns: 1fr; } }

/* =====================================================================
   Step-by-step process flow: pipeline of nodes with a travelling packet,
   then the page's four steps auto-advancing beneath.
   ===================================================================== */
.pflow { position: relative; }
.pflow__track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding-top: 30px; margin-bottom: 36px; }
.pflow__track::before { content: ""; position: absolute; left: 8%; right: 8%; top: 68px; height: 6px; border-radius: 3px; background: var(--line); }
.pflow__track::after { content: ""; position: absolute; left: 8%; top: 68px; height: 6px; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--orange), var(--sun)); transition: width 2s var(--ease) .3s; }
.pflow.is-in .pflow__track::after { width: 84%; }
.pflow__pkt { position: absolute; top: 61px; left: 8%; width: 20px; height: 20px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 6px rgba(246,177,60,.25), 0 0 24px rgba(246,177,60,.8); z-index: 2; animation: pflowPkt 12s cubic-bezier(.4,0,.2,1) infinite; }
.pflow__pkt::after { content: "₹"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--navy); }
@keyframes pflowPkt { 0% { left: 8%; } 16% { left: 23.2%; } 20% { left: 23.2%; } 36% { left: 38.4%; } 40% { left: 38.4%; } 56% { left: 53.6%; } 60% { left: 53.6%; } 76% { left: 68.8%; } 80% { left: 68.8%; } 96% { left: 84%; } 100% { left: 84%; } }
.pflow__node { position: relative; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pflow.is-in .pflow__node { opacity: 1; transform: none; transition-delay: calc(var(--i) * .12s); }
.pflow__ico { position: relative; z-index: 1; width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 24px; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); color: var(--navy); box-shadow: var(--shadow); animation: pflowNode 12s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
.pflow__ico .ico { width: 34px; height: 34px; }
@keyframes pflowNode { 0%, 4% { transform: scale(1); border-color: var(--line); background: #fff; color: var(--navy); box-shadow: var(--shadow); } 8%, 16% { transform: scale(1.12); border-color: var(--orange); background: var(--navy); color: var(--sun); box-shadow: 0 0 0 10px rgba(243,146,33,.18), 0 20px 40px rgba(1,5,45,.3); } 22%, 100% { transform: scale(1); border-color: var(--line); background: #fff; color: var(--navy); box-shadow: var(--shadow); } }
.pflow__node b { display: block; font-family: var(--font-head); font-size: .95rem; color: var(--navy); }
.pflow__node small { display: block; color: var(--ink-soft); font-size: .8rem; margin-top: 2px; }
.pflow__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pflow__step { position: relative; background: #fff; border-radius: 22px; padding: 22px 22px 26px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pflow.is-in .pflow__step { opacity: 1; transform: none; transition-delay: calc(var(--i) * .15s + .8s); }
.pflow__step::before { content: attr(data-n); position: absolute; top: -6px; right: 14px; font-family: var(--font-head); font-weight: 800; font-size: 3.4rem; line-height: 1; color: rgba(246,177,60,.18); }
.pflow__step::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--orange), var(--sun)); transform: scaleX(0); transform-origin: left; animation: pflowBar 12s linear infinite; animation-delay: calc(var(--i) * 3s); }
@keyframes pflowBar { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 26%, 100% { transform: scaleX(0); } }
.pflow__step h3 { font-size: 1.05rem; margin-bottom: 6px; padding-right: 40px; }
.pflow__step p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.pflow__step { animation: pflowStep 12s ease-in-out infinite; animation-delay: calc(var(--i) * 3s); }
@keyframes pflowStep { 0% { border-color: var(--line); } 4%, 24% { border-color: var(--orange); box-shadow: 0 18px 40px rgba(243,146,33,.2); } 28%, 100% { border-color: var(--line); } }
@media (max-width: 1000px) { .pflow__track { grid-template-columns: repeat(3, 1fr); row-gap: 26px; } .pflow__track::before, .pflow__track::after, .pflow__pkt { display: none; } .pflow__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pflow__steps { grid-template-columns: 1fr; } .pflow__track { grid-template-columns: repeat(2, 1fr); } }

/* ---------- typography refinements for the new font pairing ---------- */
h1, h2, h3 { letter-spacing: -.01em; font-weight: 600; }
h1 { letter-spacing: -.02em; }
.btn, .kicker { letter-spacing: .01em; }
.lead, p { font-weight: 400; }
/* minimalist: no decorative orbs behind inner-page heroes */
.ph__orb { display: none; }
.ph::before { background: linear-gradient(90deg, rgba(1,5,45,.82) 0%, rgba(1,5,45,.55) 48%, rgba(1,5,45,.3) 100%); }
html.font-knda h1, html.font-taml h1, html.font-telu h1, html.font-mlym h1, html.font-beng h1, html.font-gujr h1, html.font-deva h1, html.font-knda h2, html.font-taml h2, html.font-telu h2, html.font-mlym h2, html.font-beng h2, html.font-gujr h2, html.font-deva h2 { letter-spacing: 0; line-height: 1.25; }

.ph, .pinmap, .ph__visual { overflow: hidden; }
.ph__visual { overflow: visible; }
.ph { overflow: hidden; }
.pinmap { overflow: visible; }
.ph__visual > .frame__glow { inset: -6%; }

/* ---------- phone safety: long Indic words and wide buttons never blow out a column ---------- */
.btn { white-space: normal; max-width: 100%; text-align: center; }
h1, h2, h3, p, li, .lead { overflow-wrap: anywhere; }
.ph__grid > *, .contact-grid > *, .mapgrid > *, .chatgrid > *, .termgrid > *, .life > *, .clockgrid > *, .motto__grid > *, .how > *, .three > *, .users > *, .tiles > *, .zig > li, .tl > li, .pflow__steps > *, .pflow__track > * { min-width: 0; }
@media (max-width: 600px) {
  .hero__actions .btn, .cta-band__actions .btn, .ph .hero__actions .btn { width: 100%; }
  .cinfo { position: static; }
  .paper__stamp { right: 10px; }
  .ph__visual { max-width: 100%; }
  .ph__visual > .frame__glow { display: none; }
  .frame { box-shadow: 0 24px 50px rgba(0,0,0,.4); }
}

/* =====================================================================
   Round 4: story heroes on every page, softer palette, site-wide rural
   background, animated footer, header rhythm.
   ===================================================================== */

/* ---------- softer palette (contrast reduced, brand orange kept for actions) ---------- */
:root { --cream: #FBF7EF; --cream-2: #F7EEDD; --sand: #F3EADA; --navy: var(--navy); --terracotta: #C8744E; --sun: #F2C06A; --ink: #2E2A2B; --ink-soft: #6F6560; --line: rgba(30,38,38,.08); }
body { background: var(--cream); }
.section--sand, .pg-faq, .pg-more { background: rgba(243,234,218,.78); }
.section:not(.section--sand):not(.band):not(.app):not(.section--navy) { background: rgba(251,247,239,.72); }
.band--navy, .section--navy { background: var(--navy); }
.band--navy::before { background: radial-gradient(700px 400px at 80% 20%, rgba(242,192,106,.16), transparent 60%); }
.band--sun { background: linear-gradient(135deg, #F7E6C3, #F2C06A 70%); }
.glass { background: rgba(255,255,255,.07); }
.kpi { background: rgba(255,255,255,.07); }

/* ---------- site-wide rural background (fixed, soft) ---------- */
.site-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .55; }
main, .cta-band, .site-footer { position: relative; z-index: 1; }
.site-header { position: sticky; top: 0; z-index: 900; }
.nav__sub, .lang__list { z-index: 950; }
main { background: transparent; }

/* ---------- header rhythm ---------- */
.site-header__row { min-height: 84px; gap: 40px; }
.site-header.is-scrolled .site-header__row { min-height: 72px; }
.nav { margin-left: 12px; }
.nav__list { gap: 8px; }
.nav__item > a, .nav__btn { padding: 11px 16px; font-size: .97rem; }
.nav__item > a::after, .nav__btn::after { left: 16px; right: 16px; bottom: 6px; }
.site-header__tools { gap: 14px; }
.lang__btn { padding: 10px 16px 10px 13px; }
.site-header__cta { padding: 12px 22px; font-size: .95rem; }
.brand img { height: 30px; image-rendering: auto; }
@media (max-width: 1500px) and (min-width: 1101px) { .site-header__row { gap: 24px; } .nav__item > a, .nav__btn { padding: 10px 11px; font-size: .9rem; } }

/* ---------- story hero ---------- */
.ph--story { min-height: min(calc(100vh - 84px), 860px); display: flex; align-items: center; background: var(--navy); }
.ph--story::before { display: none; }
.ph__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(30,38,38,.72) 0%, rgba(30,38,38,.42) 42%, rgba(30,38,38,.05) 70%), linear-gradient(0deg, rgba(30,38,38,.55) 0%, rgba(30,38,38,0) 35%); }
.ph--story .ph__inner { position: relative; z-index: 2; padding: 56px 0 170px; }
.ph--story .ph__copy { max-width: 620px; }
.ph--story h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.06; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.ph--story .lead { color: rgba(255,255,255,.9); font-size: 1.12rem; max-width: 54ch; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.ph--story .btn--outline { background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.ph__caps { position: absolute; right: 24px; bottom: 26px; z-index: 3; max-width: min(560px, calc(100% - 48px)); }
.ph__cap { display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 18px; background: rgba(30,38,38,.62); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.18); color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.4; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.ph__clock { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--orange); color: #fff; font-size: .82rem; font-variant-numeric: tabular-nums; }
.ph__clock:empty { display: none; }
.ph__q { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.ph__q.is-out { opacity: 0; transform: translateY(6px); }
.ph__stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 4px; }
.ph__stats b { display: block; font-family: var(--font-head); font-size: 1.7rem; color: var(--sun); line-height: 1; }
.ph__stats span { font-size: .88rem; color: rgba(255,255,255,.85); }
@media (max-width: 900px) { .ph--story { min-height: 0; } .ph--story .ph__inner { padding: 40px 0 150px; } .ph__caps { left: 16px; right: 16px; bottom: 20px; max-width: none; } .ph__cap { font-size: .92rem; } .ph__shade { background: linear-gradient(0deg, rgba(30,38,38,.85) 0%, rgba(30,38,38,.55) 50%, rgba(30,38,38,.35) 100%); } }

/* ---------- "in the village" becomes calm text (the scene now lives in the hero) ---------- */
.village { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.village__text p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; margin: 0 0 14px; }
.village__quote { position: relative; padding: 28px 28px 28px 36px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); font-family: var(--font-head); font-size: 1.3rem; line-height: 1.4; color: var(--navy); }
.village__quote::before { content: "“"; position: absolute; left: 14px; top: 2px; font-size: 4rem; color: var(--sun); line-height: 1; }
.village__quote small { display: block; margin-top: 14px; font-family: var(--font-body); font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.village__quote { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.village.is-in .village__quote { opacity: 1; transform: none; }
@media (max-width: 900px) { .village { grid-template-columns: 1fr; } }

/* ---------- footer: rural scene + animated links ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--navy); }
.footer__scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; pointer-events: none; }
.site-footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,38,38,.85) 0%, rgba(30,38,38,.6) 60%, rgba(30,38,38,.9) 100%); pointer-events: none; }
.site-footer > .wrap, .site-footer .warli-strip { position: relative; z-index: 1; }
.footer__col ul li { opacity: 0; transform: translateX(-14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.footer__grid.is-in .footer__col ul li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms); }
.footer__col a { position: relative; display: inline-block; padding-left: 0; transition: color .2s, padding-left .25s var(--ease); }
.footer__col a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--sun); transition: width .25s var(--ease); }
.footer__col a:hover { color: var(--sun); padding-left: 16px; }
.footer__col a:hover::before { width: 10px; }
.footer__brand { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.footer__grid.is-in .footer__brand { opacity: 1; transform: none; }
.footer__langs a { transition: background .2s, transform .2s var(--ease); }
.footer__langs a:hover { transform: translateY(-2px); }
.cta-band { background: linear-gradient(135deg, #E8A96A, #D98B4C); }

/* ---------- home: motto background + hover-driven village scene ---------- */
.motto__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .7; }
.motto > .wrap { position: relative; z-index: 1; }
.village-live { background: var(--navy); color: #fff; }
.village-live .village-live__scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; transition: opacity .4s; }
.village-live__shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(30,38,38,.78) 0%, rgba(30,38,38,.35) 45%, rgba(30,38,38,.15) 100%); pointer-events: none; transition: background .5s; }
.village-live.is-focus .village-live__shade { background: linear-gradient(180deg, rgba(30,38,38,.6) 0%, rgba(30,38,38,.2) 45%, rgba(30,38,38,.05) 100%); }
.village-live > .wrap { position: relative; z-index: 1; }
.village-live .section-head h2, .village-live .kicker { color: #fff; }
.village-live .lead { color: rgba(255,255,255,.85); }
.village-live .card { background: rgba(255,255,255,.96); }
.village-live .card:hover { box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.village-live::before, .village-live::after { display: none; }

/* ---------- home: real app screens in the how-it-works phone ---------- */
.how__phone--real { width: min(300px, 80%); margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(43,33,23,.25)); animation: phoneFloat 6s ease-in-out infinite; }
.how__phone--real .phone__frame { border-radius: 30px; padding: 10px; background: #0a0d1f; box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.12); position: relative; }
.how__phone--real .phone__frame::before { display: none; }
.how__shots { position: relative; aspect-ratio: 480 / 1008; border-radius: 22px; overflow: hidden; background: #fff; }
.how__shot { position: absolute; inset: 0; opacity: 0; animation: howShot 14s linear infinite; animation-delay: calc(var(--i) * 3.5s); }
.how__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes howShot { 0% { opacity: 0; transform: scale(1.02); } 3%, 24% { opacity: 1; transform: none; } 27%, 100% { opacity: 0; } }
.how__shot:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .how__shot { animation: none; } .how__shot:first-child { opacity: 1; } }

/* ---------- home: 3D app carousel over a dimmed village ---------- */
.app--3d { position: relative; overflow: hidden; background: var(--navy); }
.app__bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .5; }
.app__shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(30,38,38,.9), rgba(30,38,38,.55) 50%, rgba(30,38,38,.92)); pointer-events: none; }
.app--3d > .wrap { position: relative; z-index: 1; }
.app__stage { display: block; position: relative; height: 640px; perspective: 1500px; margin-top: 10px; transform: none; }
.app__stage .phone { position: absolute; left: 50%; top: 0; width: 250px; margin: 0 0 0 -125px; transform: translateX(calc(var(--d) * 190px)) translateZ(calc(var(--ad) * -260px)) rotateY(calc(var(--d) * -18deg)) scale(calc(1 - var(--ad) * .1)); opacity: calc(1 - var(--ad) * .22); filter: blur(calc(var(--ad) * .6px)); transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s, filter .9s; cursor: pointer; z-index: calc(10 - var(--ad)); will-change: transform; }
.app__stage .phone.is-active { cursor: default; z-index: 20; }
.app__stage .phone__frame { transform: none; }
.app__stage .phone.is-active .phone__frame { box-shadow: 0 50px 100px rgba(0,0,0,.6), 0 0 0 2px rgba(243,146,33,.6), 0 0 90px rgba(243,146,33,.35); }
.app__stage .phone figcaption { position: absolute; left: 50%; top: calc(100% + 16px); width: 420px; margin-left: -210px; text-align: center; font-size: 1.05rem; font-weight: 600; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.app__stage .phone.is-active figcaption { opacity: 1; transform: none; transition-delay: .4s; }
.app__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(243,146,33,.28), transparent 65%); filter: blur(10px); pointer-events: none; }
.app__dots { display: flex; justify-content: center; gap: 8px; margin: 70px 0 10px; }
.app__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); transition: width .3s, background .3s; }
.app__dots i.is-on { width: 26px; border-radius: 4px; background: var(--sun); }
.app--3d .app__note { text-align: center; color: rgba(255,255,255,.7); }
@media (max-width: 760px) { .app__stage { height: auto; perspective: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 4px 20px; } .app__stage .phone { position: static; width: 72vw; flex: none; margin: 0; transform: none; opacity: 1; filter: none; scroll-snap-align: center; } .app__stage .phone figcaption { position: static; width: auto; margin: 10px 0 0; opacity: 1; transform: none; } .app__stage::before, .app__dots { display: none; } }
/* ---------- home: journey over a village that changes with the step ---------- */
.journey-live { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.journey-live__scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.journey-live__shade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(30,38,38,.85) 0%, rgba(30,38,38,.45) 40%, rgba(30,38,38,.35) 100%); pointer-events: none; }
.journey-live > .wrap { position: relative; z-index: 1; }
.journey-live h2, .journey-live h3 { color: #fff; } .journey-live .kicker { color: var(--sun); } .journey-live p { color: rgba(255,255,255,.8); }
.journey-live .journey__path .track { stroke: rgba(255,255,255,.3); }
.journey-live .journey__dot { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; transition: transform .5s var(--ease), background .4s, color .4s, box-shadow .4s; }
.journey-live .journey__step.is-active .journey__dot { background: var(--orange); color: #fff; transform: scale(1.18); box-shadow: 0 0 0 10px rgba(243,146,33,.2), 0 20px 40px rgba(0,0,0,.4); }
.journey-live .journey__step { opacity: .62; transition: opacity .4s; } .journey-live .journey__step.is-active { opacity: 1; }

/* ---------- home: service cards (clean, light, icon-led) ---------- */
.svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.svc__card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 26px 26px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 10px 30px rgba(43,33,23,.06); color: inherit; text-decoration: none; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s, border-color .3s; }
.svc__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.svc__card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(43,33,23,.14); border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.svc__card:hover::before { transform: scaleX(1); }
.svc__icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); transition: background .3s, color .3s, transform .45s var(--ease); }
.svc__icon .ico { width: 30px; height: 30px; }
.svc__card:hover .svc__icon { background: var(--c); color: #fff; transform: rotate(-6deg) scale(1.06); }
.svc__card h3 { font-size: 1.22rem; margin: 6px 0 0; color: var(--navy); }
.svc__card p { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.6; flex: 1; }
.svc__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; color: var(--c); font-size: .95rem; }
.svc__more .ico { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.svc__card:hover .svc__more .ico { transform: translateX(4px); }
.svc.reveal--stagger > .svc__card { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .7s var(--ease), box-shadow .35s, border-color .3s; }
.svc.reveal--stagger.is-in > .svc__card { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .1s); }
.svc.reveal--stagger.is-in > .svc__card:hover { transform: translateY(-8px); transition-delay: 0s; }
@media (max-width: 1000px) { .svc { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .svc { grid-template-columns: 1fr; } }
/* ---------- home: app section, phone left + explanation right ---------- */
.app--split { background: var(--navy); }
.appx { display: grid; grid-template-columns: 320px 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; margin-top: 10px; }
.appx__phone { width: 300px; margin: 0 auto; }
.appx__phone .phone__frame { border-radius: 32px; padding: 10px; background: #0a0d1f; box-shadow: 0 40px 80px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.12), 0 0 0 1px rgba(243,146,33,.35); animation: phoneFloat 7s ease-in-out infinite; }
.appx__shots { position: relative; aspect-ratio: 480 / 1008; border-radius: 24px; overflow: hidden; background: #fff; }
.appx__shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.appx__shot.is-on { opacity: 1; transform: none; }
.appx__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.appx__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.appx__item { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); cursor: pointer; overflow: hidden; transition: background .3s, border-color .3s, transform .3s var(--ease); }
.appx__item:hover { background: rgba(255,255,255,.08); }
.appx__item.is-on { background: rgba(255,255,255,.1); border-color: rgba(243,146,33,.55); transform: translateX(6px); }
.appx__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(243,146,33,.16); color: var(--sun); transition: background .3s, color .3s; }
.appx__ico .ico { width: 24px; height: 24px; }
.appx__item.is-on .appx__ico { background: var(--orange); color: #fff; }
.appx__item b { display: block; font-family: var(--font-head); font-size: 1.02rem; color: #fff; margin-bottom: 2px; }
.appx__item p { margin: 0; color: rgba(255,255,255,.75); font-size: .93rem; line-height: 1.45; }
.appx__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sun); transform: scaleX(0); transform-origin: left; }
.appx__item.is-on .appx__bar { animation: appxBar 4.2s linear forwards; }
@keyframes appxBar { to { transform: scaleX(1); } }
.app--split .app__note { text-align: center; color: rgba(255,255,255,.65); margin-top: 36px; }
@media (max-width: 900px) { .appx { grid-template-columns: 1fr; } .appx__phone { width: min(280px, 80%); } }

/* journey: plain, light, calm */
.journey-plain { background: rgba(251,247,239,.72); }
.journey-plain .journey__dot { transition: transform .5s var(--ease), background .4s, color .4s, box-shadow .4s; }
.journey-plain .journey__step.is-active .journey__dot { background: var(--orange); color: #fff; border-color: var(--orange); transform: scale(1.15); box-shadow: 0 0 0 10px rgba(243,146,33,.15), 0 16px 34px rgba(243,146,33,.3); }
.journey-plain .journey__step { opacity: .7; transition: opacity .4s; } .journey-plain .journey__step.is-active { opacity: 1; }
/* ---------- palette: brand orange only on actions; calm earthy tones elsewhere ---------- */
:root { --navy: #1f2a2a; --sun: #e6c48f; --terracotta: #b86b47; --mustard: #c9a05a; --clay: #e3cfae; --cream: #fbf8f2; --cream-2: #f6efe3; --sand: #f1e9dc; --ink: #26231f; --ink-soft: #6f675e; --line: rgba(38,35,31,.09); --leaf: #5f7a4e; }
.kicker { color: var(--terracotta); } .kicker::before { background: var(--terracotta); }
.site-header__cta, .btn--primary { background: var(--orange); }
.pillar__num, .stat__num, .ph__stats b, .about-stats .stat__num { color: var(--sun); }
.scroll-progress { background: var(--terracotta); }
.nav__item > a::after, .nav__btn::after { background: var(--terracotta); }
.nav__item > a:hover, .nav__btn:hover, .nav__item--sub:hover .nav__btn { color: var(--terracotta); }
.lang__btn .ico, .nav__sub a .ico { color: var(--terracotta); }
.cta-band { background: linear-gradient(135deg, #c98a63, #b86b47); }
.ph__clock, .strip__clock i, .chips span::before { background: var(--terracotta); }
.pflow__track::after, .pflow__pkt { background: linear-gradient(90deg, var(--terracotta), var(--sun)); }
.pflow__pkt { background: var(--sun); box-shadow: 0 0 0 6px rgba(230,196,143,.3), 0 0 20px rgba(230,196,143,.7); }
.tl::after { background: linear-gradient(180deg, var(--terracotta), var(--sun)); } .tl__dot { border-color: var(--terracotta); box-shadow: 0 0 0 8px rgba(184,107,71,.18), 0 0 20px rgba(184,107,71,.5); } .tl__step::before { background: var(--sun); color: var(--navy); }
.tile__icon { background: linear-gradient(135deg, var(--sun), var(--terracotta)); color: #fff; box-shadow: 0 10px 24px rgba(184,107,71,.3); }
.faq__item::before { background: var(--terracotta); }
.svc__card[style*="#f39221"] { --c: #b86b47; } .svc__card[style*="#1f5fa8"] { --c: #3f6a8a; } .svc__card[style*="#38a05a"] { --c: #5f7a4e; }
.journey-plain .journey__step.is-active .journey__dot { background: var(--terracotta); border-color: var(--terracotta); box-shadow: 0 0 0 10px rgba(184,107,71,.15), 0 16px 34px rgba(184,107,71,.3); }
.appx__item.is-on { border-color: rgba(230,196,143,.55); } .appx__item.is-on .appx__ico { background: var(--terracotta); } .appx__ico { background: rgba(230,196,143,.16); }
.how__step h3, .steps-list h3 { color: var(--navy); }

/* last brand-orange leftovers off non-action elements */
.lang__list a.is-active, .footer__langs a.is-active { background: var(--terracotta); border-color: var(--terracotta); }
.stat__num small { color: var(--sun); }
.hero--scene .kicker::before { background: var(--terracotta); }
.hero__clock { background: var(--terracotta); }
.nav__sub a:hover .ico { background: var(--terracotta); }
.card:hover .card__badge { background: var(--terracotta); border-color: var(--terracotta); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--terracotta); box-shadow: 0 0 0 4px rgba(184,107,71,.15); }

/* ---------- header: final tidy ---------- */
.site-header { border-bottom: 1px solid rgba(38,35,31,.08); }
.site-header__row { min-height: 76px; gap: 32px; }
.site-header.is-scrolled .site-header__row { min-height: 66px; }
.brand img { height: 32px; }
.nav__list { gap: 4px; }
.nav__item > a, .nav__btn { font-weight: 500; font-size: .95rem; padding: 10px 14px; color: var(--ink); }
.nav__item.is-active > a { color: var(--navy); font-weight: 600; }
.nav__item > a::after, .nav__btn::after { left: 14px; right: 14px; bottom: 5px; height: 2px; }
.lang__btn { background: none; border: 0; padding: 8px 10px; font-weight: 500; color: var(--ink); }
.lang__btn:hover { background: var(--sand); }
.site-header__cta { white-space: nowrap; padding: 11px 20px; font-size: .93rem; border-radius: 10px; font-weight: 600; }
@media (min-width: 1101px) and (max-width: 1500px) { .site-header__row { gap: 18px; } .nav__item > a, .nav__btn { padding: 10px 10px; font-size: .9rem; } .site-header__cta { padding: 10px 16px; font-size: .88rem; } }

/* ---------- footer: quiet, no scene ---------- */
.site-footer { background: #1a2222; color: rgba(255,255,255,.72); border-top: 1px solid rgba(255,255,255,.06); }
.site-footer::before, .footer__scene, .site-footer .warli-strip { display: none !important; }
.footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding: 64px 0 40px; }
.footer__brand img { height: 32px; margin-bottom: 16px; }
.footer__brand p { color: rgba(255,255,255,.7); font-size: .95rem; line-height: 1.6; max-width: 340px; }
.footer__contact { gap: 8px; margin-top: 18px; }
.footer__contact li { font-size: .95rem; } .footer__contact .ico { color: #e6c48f; width: 18px; height: 18px; } .footer__contact a { color: #fff; font-weight: 600; }
.footer__col h3 { color: #e6c48f; font-size: .78rem; letter-spacing: .14em; margin-bottom: 16px; font-weight: 600; }
.footer__col ul { gap: 10px; }
.footer__col a { color: rgba(255,255,255,.72); font-size: .95rem; font-weight: 500; text-decoration: none; }
.footer__col a:hover { color: #fff; padding-left: 12px; } .footer__col a::before { background: #e6c48f; }
.footer__col a:hover::before { width: 8px; }
.footer__langs { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.footer__langs > span { color: rgba(255,255,255,.6); font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.footer__langs > span .ico { width: 16px; height: 16px; }
.footer__langs a { padding: 6px 12px; border-radius: 999px; font-size: .85rem; color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.footer__langs a:hover { background: rgba(255,255,255,.1); color: #fff; }
.footer__langs a.is-active { background: #b86b47; border-color: #b86b47; color: #fff; }
.footer__bottom { padding: 18px 0 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: rgba(255,255,255,.5); font-size: .85rem; }
.footer__made { color: rgba(255,255,255,.6); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; padding: 48px 0 32px; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- rotating customer feedback card ---------- */
.fb { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 30px 30px 24px 38px; min-height: 190px; opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.village.is-in .fb { opacity: 1; transform: none; }
.fb::before { content: "\201C"; position: absolute; left: 16px; top: 4px; font-family: var(--font-head); font-size: 4rem; line-height: 1; color: var(--sun); }
.fb__track { position: relative; min-height: 120px; }
.fb__item { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.fb__item.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fb__item p { margin: 0 0 12px; font-family: var(--font-head); font-size: 1.22rem; line-height: 1.42; color: var(--navy); }
.fb__item footer { font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.fb__item p:has(+ .fb__sample), .fb__item:has(.fb__sample) p { padding-right: 76px; }
.fb__sample { position: absolute; right: 0; top: -4px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--sand); color: var(--terracotta); }
.fb__dots { display: flex; gap: 6px; margin-top: 14px; }
.fb__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: width .3s, background .3s; }
.fb__dots i.is-on { width: 20px; border-radius: 4px; background: var(--terracotta); }
/* ---------- story hero on the home engine ---------- */
.ph--story .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.ph--story { min-height: min(calc(100vh - 72px), 900px); background: #2b2f5a; }
.ph--story .hero__weather { z-index: 3; }
@media (max-width: 900px) { .ph--story { min-height: 520px; } .ph--story .hero__weather { display: none; } }

/* ---------- story hero: copy left / right / centred per page ---------- */
.ph--right .ph__inner { display: flex; justify-content: flex-end; }
.ph--right .ph__shade { background: linear-gradient(270deg, rgba(30,38,38,.74) 0%, rgba(30,38,38,.44) 42%, rgba(30,38,38,.05) 70%), linear-gradient(0deg, rgba(30,38,38,.55) 0%, rgba(30,38,38,0) 35%); }
.ph--center .ph__inner { display: flex; justify-content: center; text-align: center; padding-bottom: 240px; }
.ph--center .ph__copy { max-width: 760px; }
.ph--center .ph__copy .lead { margin-left: auto; margin-right: auto; }
.ph--center .hero__actions { justify-content: center; }
.ph--center .kicker { justify-content: center; }
.ph--center .ph__shade { background: radial-gradient(60% 70% at 50% 35%, rgba(30,38,38,.6), rgba(30,38,38,.15) 70%, rgba(30,38,38,0)), linear-gradient(0deg, rgba(30,38,38,.5) 0%, rgba(30,38,38,0) 35%); }
@media (max-width: 900px) { .ph--right .ph__inner, .ph--center .ph__inner { justify-content: flex-start; text-align: left; padding-bottom: 150px; } .ph--center .hero__actions, .ph--center .kicker { justify-content: flex-start; } .ph--right .ph__shade, .ph--center .ph__shade { background: linear-gradient(0deg, rgba(30,38,38,.85) 0%, rgba(30,38,38,.55) 50%, rgba(30,38,38,.35) 100%); } }

/* ---------- body helpers in several looks (no two pages share the same chain) ---------- */
.pflow__steps { display: none; }
.pflow--dark .pflow__track::before { background: rgba(255,255,255,.14); }
.pflow--dark .pflow__ico { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--sun); box-shadow: none; }
.pflow--dark .pflow__node b { color: #fff; } .pflow--dark .pflow__node small { color: rgba(255,255,255,.65); }
.pflow--strip { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0 18px; }
.pflow--strip .kicker { margin-bottom: 4px; }
.pflow--strip .pflow__track { padding-top: 14px; margin-bottom: 0; gap: 6px; }
.pflow--strip .pflow__track::before, .pflow--strip .pflow__track::after { top: 42px; height: 4px; }
.pflow--strip .pflow__pkt { top: 36px; width: 16px; height: 16px; }
.pflow--strip .pflow__ico { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 6px; }
.pflow--strip .pflow__ico .ico { width: 24px; height: 24px; }
.pflow--strip .pflow__node b { font-size: .84rem; } .pflow--strip .pflow__node small { display: none; }

.village--band .village__text p { color: rgba(255,255,255,.82); }
.village--band .fb { box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.village--wide { grid-template-columns: 1.15fr .85fr; align-items: center; }
.village__stats { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 14px 40px; }
.village__stats b { display: block; font-family: var(--font-head); font-size: 2rem; line-height: 1; color: var(--terracotta); }
.village__stats span { font-size: .88rem; color: var(--ink-soft); font-weight: 600; }

.section--navy.pg-faq--cols { background: #fff; }
.faq--cols { max-width: none; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.faq__card { position: relative; background: var(--sand); border-radius: 24px; padding: 30px 26px 26px; border: 1px solid var(--line); opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * .12s); }
.faq--cols.is-in .faq__card { opacity: 1; transform: none; }
.faq__card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.faq__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--sun); font-family: var(--font-head); font-weight: 700; margin-bottom: 14px; }
.faq__card h3 { font-size: 1.08rem; margin-bottom: 8px; } .faq__card p { margin: 0; color: var(--ink-soft); }
.pg-faq--list { background: var(--navy); color: #fff; }
.pg-faq--list .kicker { color: var(--sun); } .pg-faq--list h2 { color: #fff; }
.faq--list { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.faq--dl { margin: 0; display: grid; gap: 0; max-width: none; }
.faq__row { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.14); opacity: 0; transform: translateX(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * .12s); }
.faq--list.is-in .faq__row { opacity: 1; transform: none; }
.faq__row dt { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; color: #fff; margin-bottom: 8px; }
.faq__row dd { margin: 0; color: rgba(255,255,255,.75); }

.pg-more--grid { background: #fff; }
.pg-more__grid { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pg-more__grid li { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.pg-more__grid.is-in li { opacity: 1; transform: none; }
.pg-more__grid a { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--sand); border: 1px solid var(--line); color: var(--navy); font-weight: 600; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pg-more__grid a:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pg-more__grid a .ico { width: 22px; height: 22px; color: var(--terracotta); } .pg-more__grid a .ico--go { margin-left: auto; width: 18px; height: 18px; color: var(--ink-soft); }
@media (max-width: 900px) { .faq--cols { grid-template-columns: 1fr; } .faq--list { grid-template-columns: 1fr; } .pg-more__grid { grid-template-columns: 1fr 1fr; } .village--wide { grid-template-columns: 1fr; } .pflow--strip .pflow__node b { display: none; } }
/* ---------- per-page themes: accent, backgrounds, card shape, heading alignment ---------- */
.pg--aeps   { --acc: #b86b47; --acc-soft: #f6e4da; --bg-a: #fbf7ef; --bg-b: #f3eada; --dark: #1f2a2a; --r: 22px; }
.pg--dmt    { --acc: #2f6f73; --acc-soft: #dcecec; --bg-a: #f4f7f6; --bg-b: #e4eeed; --dark: #17302f; --r: 10px; }
.pg--bills  { --acc: #c2762f; --acc-soft: #f8e4cc; --bg-a: #fff9f1; --bg-b: #f5e6cd; --dark: #2b2118; --r: 4px; }
.pg--rech   { --acc: #3b6fb6; --acc-soft: #dde8f6; --bg-a: #f5f8fc; --bg-b: #e3ecf7; --dark: #16223a; --r: 30px; }
.pg--gift   { --acc: #9a4a7a; --acc-soft: #f1dfe9; --bg-a: #fcf6f9; --bg-b: #f2e2eb; --dark: #2d1a28; --r: 26px; }
.pg--travel { --acc: #6b7d3a; --acc-soft: #e8ecd4; --bg-a: #f8f9f2; --bg-b: #eaeedb; --dark: #232a18; --r: 14px; }
.pg--dist   { --acc: #2f6b4f; --acc-soft: #dbeae0; --bg-a: #f4f8f5; --bg-b: #e2eee6; --dark: #152820; --r: 8px; }
.pg--api    { --acc: #3a8f7a; --acc-soft: #d9ece7; --bg-a: #f3f6f6; --bg-b: #e3ecec; --dark: #121b1e; --r: 6px; }
.pg--about  { --acc: #b86b47; --acc-soft: #f6e4da; --bg-a: #fbf7ef; --bg-b: #f3eada; --dark: #1f2a2a; --r: 22px; }
.pg .kicker { color: var(--acc, var(--terracotta)); } .pg .kicker::before { background: var(--acc, var(--terracotta)); }
.pg .section:not(.section--sand):not(.band):not(.app):not(.section--navy) { background: var(--bg-a, rgba(251,247,239,.72)); }
.pg .section--sand, .pg .pg-faq:not(.pg-faq--cols):not(.pg-faq--list), .pg .pg-more:not(.pg-more--grid) { background: var(--bg-b, rgba(243,234,218,.78)); }
.pg .band--navy, .pg .section--navy:not(.pg-faq--cols), .pg .village--band, .pg .pflow--dark { background: var(--dark, var(--navy)); }
.pg .band--navy::before { background: radial-gradient(700px 400px at 80% 20%, var(--acc-soft, rgba(242,192,106,.16)), transparent 60%); opacity: .22; }
.pg .faq__n, .pg .fb__dots i.is-on, .pg .pflow__pkt, .pg .pflow__track::after, .pg .tl::after, .pg .pflow__step::after, .pg .plan__bar, .pg .road__strip, .pg .tree__pkt { background: var(--acc, var(--terracotta)); }
.pg .faq__item::before { background: var(--acc, var(--terracotta)); }
.pg .village__stats b, .pg .tile__num, .pg .bignum > *::before, .pg .tile__icon .ico, .pg .zig__icon .ico, .pg .paper__icon .ico, .pg .bar__icon .ico, .pg .box__gift, .pg .pass__head, .pg .kpi__icon .ico, .pg .endpoint__m, .pg .pg-more__grid a .ico, .pg .glass__icon .ico, .pg .pcard__icon .ico, .pg .pflow__ico .ico, .pg .clock-step b { color: var(--acc, var(--terracotta)); }
.pg .tile__icon, .pg .zig__icon, .pg .paper__icon, .pg .bar__icon, .pg .kpi__icon, .pg .pcard__icon, .pg .pflow__ico, .pg .faq__card { background: var(--acc-soft, #f6e4da); }
.pg .tile, .pg .glass, .pg .pcard, .pg .fb, .pg .faq__item, .pg .faq__card, .pg .plan, .pg .paper, .pg .pass, .pg .panel, .pg .kpi, .pg .endpoint, .pg .voucher, .pg .village__quote, .pg .chat, .pg .term, .pg .bar, .pg .tag, .pg .steps-list li, .pg .zig li, .pg .tl__step, .pg .clock-step, .pg .pg-more__grid a, .pg .pg-more__list a, .pg .box { border-radius: var(--r, 22px); }
.pg .tile__icon, .pg .zig__icon, .pg .paper__icon, .pg .bar__icon, .pg .kpi__icon, .pg .pcard__icon, .pg .glass__icon, .pg .pflow__ico { border-radius: calc(var(--r, 22px) * .7); }
.pg .btn--primary { background: var(--orange); }
/* heading rhythm: centred on some pages, split (title left, lead right) on others */
.pg--rech .section-head, .pg--gift .section-head, .pg--dist .section-head { margin-inline: auto; text-align: center; }
.pg--rech .section-head .kicker, .pg--gift .section-head .kicker, .pg--dist .section-head .kicker { justify-content: center; }
.pg--rech .faq--list .section-head, .pg--gift .faq--list .section-head, .pg--dist .faq--list .section-head { text-align: left; margin-inline: 0; }
.pg--dmt .section-head, .pg--api .section-head { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 48px; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.pg--dmt .section-head .kicker, .pg--api .section-head .kicker { grid-column: 1 / -1; }
.pg--dmt .section-head .lead, .pg--api .section-head .lead { margin: 0; }
.pg--dmt .faq--list .section-head, .pg--api .faq--list .section-head, .pg--dmt .village .section-head { display: block; border: 0; }
.pg--bills .section-head h2, .pg--travel .section-head h2 { font-weight: 500; letter-spacing: -.01em; }
.pg--bills .section-head h2 strong, .pg--travel .section-head h2 strong { font-weight: 700; }
/* partner section formats */
.pcard { background: #fff; border: 1px solid var(--line); padding: 24px 22px; box-shadow: var(--shadow); }
.pcard__icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 14px; } .pcard__icon .ico { width: 24px; height: 24px; }
.pcard h3 { font-size: 1.1rem; margin-bottom: 6px; } .pcard p { margin: 0; color: var(--ink-soft); }
.three--strip { grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.three--strip .pcard { background: none; border: 0; box-shadow: none; padding: 34px 28px; display: grid; grid-template-columns: 50px 1fr; gap: 0 16px; align-items: start; }
.three--strip .pcard + .pcard { border-left: 1px solid var(--line); }
.three--strip .pcard__icon { margin: 0; grid-row: 1 / 3; } .three--strip .pcard h3 { font-size: 1rem; }
.three--list { grid-template-columns: 1fr; gap: 0; max-width: 820px; counter-reset: pl; }
.three--list .pcard { background: none; border: 0; box-shadow: none; border-top: 1px solid var(--line); padding: 26px 0 26px 92px; position: relative; }
.three--list .pcard::before { counter-increment: pl; content: "0" counter(pl); position: absolute; left: 0; top: 24px; font-family: var(--font-head); font-size: 2rem; font-weight: 300; color: var(--acc); line-height: 1; }
.three--list .pcard__icon { display: none; }
@media (max-width: 900px) { .three--strip { grid-template-columns: 1fr; } .three--strip .pcard + .pcard { border-left: 0; border-top: 1px solid var(--line); } .three--list .pcard { padding-left: 60px; } .pg--dmt .section-head, .pg--api .section-head { grid-template-columns: 1fr; } }
/* ---------- header v3: charcoal care strip + white main bar, nav centred, Login + CTA right ---------- */
.site-header { top: -40px; background: none; border-bottom: 0; }
.site-header.is-scrolled { box-shadow: none; }
.topbar { background: var(--navy); color: rgba(255,255,255,.85); height: 40px; font-size: .82rem; }
.topbar__row { display: flex; align-items: center; gap: 26px; height: 40px; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.85); text-decoration: none; font-weight: 500; white-space: nowrap; }
.topbar__item .ico { width: 15px; height: 15px; color: var(--sun); }
a.topbar__item:hover { color: #fff; }
.topbar__spacer { margin-left: auto; }
.topbar__login { font-weight: 600; color: #fff; }
.topbar .lang { margin-left: 4px; }
.topbar .lang__btn { background: none; border: 1px solid rgba(255,255,255,.28); color: #fff; padding: 4px 10px 4px 8px; font-size: .8rem; font-weight: 600; }
.topbar .lang__btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.topbar .lang__btn .ico { color: var(--sun); width: 15px; height: 15px; }
.topbar .lang__list { right: 0; left: auto; }
.site-header__main { background: #fff; border-bottom: 1px solid rgba(31,42,42,.1); transition: box-shadow .3s; }
.site-header.is-scrolled .site-header__main { box-shadow: 0 10px 30px rgba(31,42,42,.1); }
.site-header__row { min-height: 78px; gap: 24px; }
.site-header.is-scrolled .site-header__row { min-height: 68px; }
.brand img { height: 30px; image-rendering: auto; }
.nav { margin: 0 auto; }
.nav__list { gap: 4px; }
.nav__item > a, .nav__btn { font-weight: 500; font-size: .96rem; padding: 10px 14px; color: var(--navy); }
.nav__item > a::after, .nav__btn::after { bottom: 5px; height: 2px; border-radius: 2px; background: var(--terracotta); }
.nav__item.is-active > a { font-weight: 600; }
.site-header__tools { gap: 12px; }
.site-header__tools .lang { display: none; }
.site-header__login { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid rgba(31,42,42,.35); color: var(--navy); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.site-header__login .ico { width: 17px; height: 17px; }
.site-header__login:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.site-header__cta { padding: 11px 20px; font-size: .92rem; }
.nav__item--mobile { display: none; }
@media (max-width: 1280px) { .topbar__hours { display: none; } .nav__item > a, .nav__btn { padding: 10px 10px; font-size: .9rem; } .site-header__login span { display: none; } .site-header__login { padding: 9px 11px; } }
@media (max-width: 1100px) {
  .site-header { top: 0; }
  .topbar { display: none; }
  .site-header__tools .lang { display: block; }
  .site-header__login { display: none; }
  .nav__item--mobile { display: block; }
  .nav { margin: 0; }
  .site-header__row { min-height: 70px; }
}
@media (max-width: 560px) { .site-header__cta { display: none; } }
/* ---------- become a DuePe CSP ---------- */
.pg--csp { --acc: #b86b47; --acc-soft: #f6e4da; --bg-a: #fbf7ef; --bg-b: #f3eada; --dark: #1f2a2a; --r: 20px; }
.need { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.need .section-head { margin-bottom: 0; }
.need__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.need__list li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; opacity: 0; transform: translateX(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * .1s); }
.need.is-in .need__list li { opacity: 1; transform: none; }
.need__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc); }
.need__ico .ico { width: 22px; height: 22px; }
.need__list b { display: block; font-family: var(--font-head); font-size: 1.02rem; color: var(--navy); margin-bottom: 2px; }
.need__list p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.apply { background: var(--dark); }
.apply .contact-grid { grid-template-columns: 1.2fr .8fr; }
.apply__form { background: #fff; border-radius: 28px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.apply__head { margin-bottom: 22px; } .apply__head h2 { font-size: 1.6rem; margin: 4px 0 8px; } .apply__head p { margin: 0; color: var(--ink-soft); }
.apply .cinfo { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.field--radio { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.field--radio legend { font-weight: 600; font-size: .92rem; color: var(--navy); margin-bottom: 8px; width: 100%; }
.field--radio label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.field--radio input { accent-color: var(--terracotta); width: 18px; height: 18px; }
.apply__consent { font-size: .84rem; color: var(--ink-soft); margin: 0 0 16px; }
@media (max-width: 900px) { .need { grid-template-columns: 1fr; } .apply .contact-grid { grid-template-columns: 1fr; } }/* kickers on dark backgrounds stay wheat, whatever the page accent */
.pg .ph--story .kicker, .pg .band--navy .kicker, .pg .section--navy .kicker, .pg .village--band .kicker, .pg .pflow--dark .kicker, .pg .pg-faq--list .kicker, .pg .apply .kicker { color: var(--sun); }
.pg .ph--story .kicker::before, .pg .band--navy .kicker::before, .pg .section--navy .kicker::before, .pg .village--band .kicker::before, .pg .pflow--dark .kicker::before, .pg .pg-faq--list .kicker::before { background: var(--sun); }
.pg .apply__form .kicker { color: var(--acc); } .pg .apply__form .kicker::before { background: var(--acc); }


/* data deletion request */
.request__aside p { margin: 10px 0 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }
.request__aside a { color: var(--navy); font-weight: 600; text-decoration: none; }
.request__form { max-width: 560px; margin-top: 18px; }
/* Company menu: two entries, single column */
.nav__item--sub:nth-child(4) .nav__sub { min-width: 240px; grid-template-columns: 1fr; }

/* review mode */
.is-static *, .is-static *::before, .is-static *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }

/* review fixes */
.chat__screen--img { padding: 0; min-height: 0; background: #0a0d1f; }
.chat__screen--img::before { display: none; }
.chat__screen--img img { display: block; width: 100%; height: auto; border-radius: 24px; }
.chat__screen--img .chat__ok { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); }
.zig { gap: 14px; }
.zig li:nth-child(even) { transform: translateX(20px); }
.section--navy.pg-faq--cols h2, .section--navy.pg-faq--cols h3 { color: var(--navy); }
.section--navy.pg-faq--cols .kicker { color: var(--acc, var(--terracotta)); } .section--navy.pg-faq--cols .kicker::before { background: var(--acc, var(--terracotta)); }