/* Brilliant Property Manager website, Direction C "One tap".
   Light and airy (the Cold look), glass and depth, Brilliant shown on a phone: iPhone-easy. */
:root {
  --bg: #f8fafc;
  --ink: #0f172a;
  --text: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --soft: #f1f5f9;
  --blue: #1976d2;
  --blue-dark: #1565c0;
  --bright: #2196f3;
  --sky: #5ccbf5;
  --tint: #e3f0fc;
  --navy: #0a1324;
  --navy-2: #111b2e;
  --navy-deep: #060c18;
  --gold: #ffc845;
  --green: #2e7d32;
  --green-tint: #e8f3ea;
  --red: #b42318;
  --radius: 22px;
  --page: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, system-ui, sans-serif; color: var(--text); background: #fff; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; }
h1, h2, h3 { font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); font-weight: 700; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--blue-dark); font-weight: 500; }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 32px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; border-radius: 8px; }
.anchor { position: absolute; top: -100px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); color: #fff; border: 1.5px solid var(--blue); border-radius: 999px; padding: 12px 22px; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 15px; white-space: nowrap; transition: transform .15s, background .15s; }
.btn:hover { background: var(--blue-dark); transform: translateY(-1px); }
.btn.big { padding: 16px 28px; font-size: 17px; box-shadow: 0 14px 30px -12px rgba(25,118,210,.7); }
.btn.ghost { background: rgba(255,255,255,.75); color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { background: #fff; }
.btn.white { background: #fff; color: var(--blue); border-color: #fff; }
.btn.gold { background: var(--gold); color: #1d1500; border-color: var(--gold); }
.btn.clear { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); box-shadow: none; }
.btn.clear:hover { background: rgba(255,255,255,.1); }
a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 3px solid #90caf9; outline-offset: 3px; }

/* Promo + header (navy, so the white logo stays exactly as it is) */
.promo { background: var(--navy-deep); color: #cbd5e1; font-size: 13px; text-align: center; padding: 9px 16px; }
.promo .chip { background: var(--gold); color: #3b2a00; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 1px; padding: 3px 10px; border-radius: 20px; font-weight: 500; margin-right: 10px; }
.promo a { color: var(--gold); margin-left: 8px; font-weight: 500; }
.site-header { background: var(--navy); position: sticky; top: 0; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; height: 80px; gap: 44px; }
.brand img { height: 58px; width: auto; }
.nav { display: flex; gap: 32px; font-family: "DM Sans", sans-serif; font-weight: 500; font-size: 15px; color: #cbd5e1; }
.nav a:hover { color: #fff; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 15px; color: #fff; }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); padding: 80px 0 90px; }
.mesh { position: absolute; inset: 0; z-index: -1; filter: blur(60px); }
.mesh i { position: absolute; border-radius: 50%; display: block; }
.mesh i:nth-child(1) { width: 640px; height: 640px; right: -120px; top: -160px; background: #cfe5fb; }
.mesh i:nth-child(2) { width: 520px; height: 520px; left: -160px; bottom: -220px; background: #dff3fd; }
.mesh i:nth-child(3) { width: 380px; height: 380px; right: 22%; bottom: -120px; background: #fff1c9; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.label { display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--blue); background: rgba(255,255,255,.8); border: 1px solid #d6e6f7; border-radius: 999px; padding: 8px 16px; backdrop-filter: blur(8px); }
.label i { font-size: 16px; }
.hero h1 { font-size: clamp(44px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.03em; font-weight: 800; margin: 26px 0 26px; text-wrap: balance; }
.hero h1 span { display: block; background: linear-gradient(92deg, var(--blue) 10%, var(--bright) 60%, var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.lead { font-size: 20px; line-height: 1.6; color: var(--text); max-width: 560px; }
.lead b { color: var(--blue); }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.mini-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; padding-top: 24px; border-top: 1px solid #dbe5f0; }
.mini-proof li { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; color: var(--ink); font-weight: 500; }
.mini-proof i { color: var(--blue); font-size: 19px; }

/* Device stage */
.device-stage { position: relative; height: 680px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-left: 40px; perspective: 1800px; }
.back-win { position: absolute; left: 6%; top: 96px; width: 100%; height: 420px; background: rgba(255,255,255,.75); border: 1px solid #fff; border-radius: 20px; box-shadow: 0 40px 80px -40px rgba(15,23,42,.35); transform: rotateY(-12deg) rotateX(3deg); backdrop-filter: blur(6px); overflow: hidden; }
.bw-bar { height: 34px; background: rgba(241,245,249,.9); display: flex; gap: 6px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--line); }
.bw-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; display: block; }
.bw-bar i:nth-child(2) { background: #febc2e; } .bw-bar i:nth-child(3) { background: #28c840; }
.bw-body { display: flex; height: calc(100% - 34px); }
.bw-side { width: 18%; background: linear-gradient(180deg, #1e3a64, var(--navy)); opacity: .9; }
.bw-main { flex: 1; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.bw-line { height: 14px; border-radius: 7px; background: #e2e8f0; }
.bw-line.w60 { width: 60%; height: 20px; background: #cbd5e1; } .bw-line.w40 { width: 40%; }
.bw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0; }
.bw-cards span { height: 62px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.bw-row { height: 34px; border-radius: 8px; background: #fff; border: 1px solid var(--soft); }

.phone { position: relative; z-index: 2; width: 312px; height: 630px; border-radius: 54px; background: #0b1220; padding: 12px; box-shadow: 0 0 0 2px #1f2a3d, 0 0 0 6px #0b1220, 0 60px 100px -30px rgba(10,19,36,.55), 0 30px 50px -30px rgba(25,118,210,.5); }
.island { position: absolute; top: 22px; left: 50%; width: 96px; height: 28px; margin-left: -48px; background: #000; border-radius: 20px; z-index: 3; }
.screen { position: relative; width: 100%; height: 100%; border-radius: 43px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; text-align: left; }
.s-top { background: var(--navy); padding: 58px 18px 14px; display: flex; align-items: center; }
.s-top img { height: 40px; width: auto; }
.s-sample { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; border: 1px dashed #334155; border-radius: 5px; padding: 1px 6px; }
.s-body { flex: 1; padding: 16px 14px 10px; }
.s-hi { font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 23px; color: var(--ink); letter-spacing: -.5px; line-height: 1.1; }
.s-sub { font-size: 13px; color: var(--muted); margin: 6px 0 14px; line-height: 1.45; }
.s-sub b { color: var(--ink); }
.cards { display: flex; flex-direction: column; gap: 9px; }
.card { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 11px 11px; box-shadow: 0 6px 18px -10px rgba(15,23,42,.35); border: 1px solid #eef2f7; overflow: hidden; }
.c-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: 19px; flex: none; }
.c-ic.gas { background: linear-gradient(135deg, #ff9f43, #f97316); }
.c-ic.lease { background: linear-gradient(135deg, var(--bright), var(--blue)); }
.c-ic.rent { background: linear-gradient(135deg, #34d399, #059669); }
.c-t { min-width: 0; flex: 1; }
.c-t b { display: block; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-t small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-btn { background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.c-btn.soft { background: var(--tint); color: var(--blue); }
/* final state of card 1: approved */
.c1 { background: var(--green-tint); border-color: #cfe8d4; }
.c1 .c-btn { display: none; }
.c-done { display: inline-flex; gap: 4px; align-items: center; color: var(--green); font-weight: 700; font-size: 12px; white-space: nowrap; }
.c-done i { width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 13px; }
.tap { display: none; }
.s-done { margin-top: 9px; display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 14px; padding: 10px 12px; font-size: 12px; color: var(--ink); border: 1px solid #eef2f7; }
.s-done i { color: var(--green); font-size: 18px; }
.s-tab { display: flex; justify-content: space-around; padding: 12px 20px 22px; background: rgba(255,255,255,.9); border-top: 1px solid var(--line); color: #94a3b8; font-size: 22px; }
.s-tab .on { color: var(--blue); }
.float { position: absolute; z-index: 3; display: inline-flex; gap: 10px; align-items: center; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border: 1px solid #fff; border-radius: 16px; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--ink); box-shadow: 0 20px 40px -18px rgba(15,23,42,.4); }
.float i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 18px; }
.float b { color: var(--green); }
.f1 { right: -2%; bottom: 200px; }
.f2 { right: -2%; top: 130px; } .f2 i { background: var(--blue); }
.lang { position: relative; z-index: 3; margin-top: 22px; margin-left: -29px; display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.85); border: 1px solid #dbe5f0; border-radius: 999px; padding: 4px; backdrop-filter: blur(8px); box-shadow: 0 10px 24px -16px rgba(15,23,42,.4); }
.lang button { border: 0; background: transparent; color: var(--text); font-weight: 600; font-size: 14px; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.lang button.on { background: var(--navy); color: #fff; }
.lang-note { font-size: 11px; font-weight: 600; color: var(--blue-dark); background: var(--tint); border-radius: 999px; padding: 3px 9px; margin: 0 6px 0 4px; }

/* ---------- SECTIONS ---------- */
section { position: relative; scroll-margin-top: 80px; }
h2 { font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.026em; line-height: 1.03; margin: 12px 0 16px; font-weight: 800; }
h2 span { color: var(--blue); }
.giant { font-size: clamp(44px, 6.4vw, 92px); letter-spacing: -0.034em; line-height: .99; text-wrap: balance; }
.head { margin-bottom: 52px; max-width: 760px; }
.head.center { text-align: center; margin-left: auto; margin-right: auto; max-width: 1000px; }
.head p:not(.mono) { font-size: 19px; color: var(--muted); max-width: 720px; }
.head.center p:not(.mono) { margin: 0 auto; }

.how { padding: 120px 0; }
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.scr { position: relative; }
.scr-face { background: linear-gradient(180deg, #fff, var(--bg)); border: 1px solid var(--line); border-radius: 32px; padding: 26px 22px; height: 290px; box-shadow: 0 30px 50px -36px rgba(15,23,42,.45); display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.scr-k { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 4px; }
.pdf { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.pdf i { font-size: 28px; color: var(--red); }
.pdf b { font-size: 14px; color: var(--ink); } .pdf small { display: block; color: var(--muted); font-size: 12px; }
.kv { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 4px; border-bottom: 1px dashed var(--line); color: var(--muted); }
.kv b { color: var(--ink); }
.pair { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 13px; color: var(--muted); }
.pair b { font-family: "DM Sans", sans-serif; font-size: 20px; color: var(--ink); }
.pair.bank { border-color: #cfe8d4; background: var(--green-tint); }
.eq { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12.5px; color: var(--green); font-weight: 600; }
.tap-btn { background: var(--blue); color: #fff; border-radius: 16px; padding: 18px; text-align: center; font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 20px; display: flex; justify-content: center; align-items: center; gap: 8px; box-shadow: 0 0 0 8px rgba(33,150,243,.12), 0 16px 30px -14px rgba(25,118,210,.9); margin: 4px 10px; }
.stamp, .undo { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 12.5px; color: var(--muted); }
.stamp i { color: var(--green); } .undo { color: var(--blue); font-weight: 600; }
.step-n { position: absolute; top: -16px; left: 22px; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 18px; box-shadow: 0 0 0 5px #fff; }
.scr h3 { font-size: 24px; letter-spacing: -.4px; margin: 22px 4px 6px; }
.scr p:not(.scr-k):not(.stamp):not(.undo) { color: var(--muted); font-size: 16px; margin: 0 4px; }

.product { padding: 120px 0; background: linear-gradient(180deg, var(--bg), #fff); border-top: 1px solid var(--line); overflow: hidden; }
.springboard { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 18px; max-width: 1040px; margin: 0 auto; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 40px; padding: 44px 40px; box-shadow: 0 40px 80px -50px rgba(15,23,42,.45); }
.app-i { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.ic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; color: #fff; font-size: 34px; background: linear-gradient(145deg, var(--bright), var(--blue)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 22px -12px rgba(15,23,42,.55); }
.i-home { background: linear-gradient(145deg, #42a5f5, #1565c0); }
.i-prop { background: linear-gradient(145deg, #1e3a64, #0a1324); }
.i-people { background: linear-gradient(145deg, #5ccbf5, #1e88e5); }
.i-lease { background: linear-gradient(145deg, #ffd56e, #f5a300); color: #3b2a00; }
.i-maint { background: linear-gradient(145deg, #ff9f43, #ea580c); }
.i-rent { background: linear-gradient(145deg, #34d399, #047857); }
.i-bills { background: linear-gradient(145deg, #60a5fa, #1d4ed8); }
.i-bank { background: linear-gradient(145deg, #1e3a64, #0a1324); color: var(--gold); }
.i-owner { background: linear-gradient(145deg, #a78bfa, #6d28d9); }
.i-docs { background: linear-gradient(145deg, #5ccbf5, #0284c7); }
.i-chat { background: linear-gradient(145deg, #4ade80, #16a34a); }
.i-act { background: linear-gradient(145deg, #94a3b8, #475569); }
.i-del { background: linear-gradient(145deg, #f87171, #b91c1c); }
.app-i.soon .ic { background: #fff; color: var(--blue); border: 2px dashed #9cc4ec; box-shadow: none; }
.app-i em, .legend em { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: var(--tint); color: var(--blue-dark); }
.app-i em.live, .legend em.live { background: var(--green-tint); color: var(--green); }
.legend { display: flex; justify-content: center; gap: 22px; margin-top: 26px; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.legend > span { display: inline-flex; gap: 8px; align-items: center; }

.ba { padding: 120px 0; }
.ba-grid { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 18px; align-items: stretch; }
.ba-card { border-radius: 32px; padding: 34px; }
.ba-card.before { background: #f3f4f6; border: 1px solid #e5e7eb; }
.ba-card.after { background: linear-gradient(160deg, var(--navy-2), var(--navy)); color: #cbd5e1; display: flex; flex-direction: column; }
.ba-k { display: inline-flex; gap: 8px; align-items: center; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 20px; color: #6b7280; margin-bottom: 18px; }
.ba-k i { font-size: 24px; }
.after .ba-k { color: #fff; } .after .ba-k i { color: var(--gold); }
.ba-steps { counter-reset: n; }
.ba-steps li { counter-increment: n; display: flex; gap: 14px; align-items: center; padding: 10px 0; font-size: 17px; color: #4b5563; border-top: 1px solid #e5e7eb; }
.ba-steps li::before { content: counter(n); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 700; background: #e5e7eb; color: #6b7280; }
.after .ba-steps li { font-size: 22px; color: #fff; border-color: #1e2b47; padding: 16px 0; font-family: "DM Sans", sans-serif; }
.after .ba-steps li::before { background: var(--gold); color: #3b2a00; width: 34px; height: 34px; font-size: 15px; }
.after .ba-steps b { color: var(--gold); }
.after-note { margin-top: auto; display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.05); border: 1px solid #1e2b47; border-radius: 16px; padding: 14px 16px; font-size: 15px; }
.after-note i { color: var(--sky); font-size: 22px; }
.ba-arrow { display: grid; place-items: center; }
.ba-arrow i { width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 26px; box-shadow: 0 0 0 8px var(--tint); }

.plans-sec { padding: 120px 0; background: var(--bg); border-top: 1px solid var(--line); }
.wallet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pass { border-radius: 30px; padding: 28px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.pass::before { content: ""; position: absolute; left: -18px; top: 194px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); }
.pass::after { content: ""; position: absolute; right: -18px; top: 194px; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); }
.p-white { background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 50px -40px rgba(15,23,42,.4); }
.p-blue { background: linear-gradient(150deg, var(--blue-dark), var(--blue) 70%); color: #e3f0fc; box-shadow: 0 34px 60px -34px rgba(25,118,210,.8); }
.p-navy { background: linear-gradient(150deg, #13213c, var(--navy) 70%); color: #cbd5e1; box-shadow: 0 34px 60px -34px rgba(10,19,36,.8); }
.pass-top { display: flex; align-items: center; justify-content: space-between; }
.pass-size { display: inline-flex; gap: 8px; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 500; color: var(--blue); }
.p-blue .pass-size { color: #fff; } .p-navy .pass-size { color: var(--gold); }
.chip-ic { width: 40px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, #ffe08a, #e0a800); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.pass h3 { font-size: 32px; letter-spacing: -.8px; margin: 22px 0 4px; }
.p-blue h3, .p-navy h3 { color: #fff; }
.pass .d { font-size: 15px; color: var(--muted); padding-bottom: 22px; border-bottom: 2px dashed var(--line); margin-bottom: 14px; min-height: 68px; }
.p-blue .d { color: #fff; border-color: rgba(255,255,255,.3); } .p-navy .d { color: #94a3b8; border-color: #24324f; }
.pass li { display: flex; gap: 10px; font-size: 15px; padding: 7px 0; color: var(--ink); }
.p-blue li { color: #fff; } .p-navy li { color: #e2e8f0; }
.pass li i { color: var(--green); margin-top: 2px; }
.p-blue li i { color: var(--gold); } .p-navy li i { color: var(--gold); }
.pass-foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: "DM Sans", sans-serif; font-weight: 600; color: var(--muted); }
.p-blue .pass-foot, .p-navy .pass-foot { color: #fff; }
.policy { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 40px; color: var(--muted); font-size: 16px; text-align: center; }
.policy i { color: var(--blue); font-size: 22px; flex: none; }

.close { background: var(--navy); color: #b8c4d6; text-align: center; padding: 130px 0; overflow: hidden; isolation: isolate; }
.mesh.dark i:nth-child(1) { background: rgba(33,150,243,.45); right: -60px; top: -260px; }
.mesh.dark i:nth-child(2) { background: rgba(25,118,210,.4); left: -120px; bottom: -300px; }
.mesh.dark i:nth-child(3) { background: rgba(255,200,69,.16); right: 30%; bottom: -260px; }
.close h2 { color: #fff; max-width: 1080px; margin: 0 auto 22px; }
.close h2 span { display: block; background: linear-gradient(92deg, #90caf9, var(--sky) 50%, #b3e5fc); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.close p { font-size: 20px; }
.close .ctas { justify-content: center; }

.site-footer { background: var(--navy-deep); color: #94a3b8; font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding-top: 36px; padding-bottom: 36px; }
.site-footer img { height: 54px; width: auto; }
.site-footer a:hover { color: #fff; }
.site-footer .copy { margin-left: auto; }

/* ---------- MOTION (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-copy > :nth-child(3) { animation-delay: .16s; } .hero-copy > :nth-child(4) { animation-delay: .24s; } .hero-copy > :nth-child(5) { animation-delay: .32s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .phone { animation: phone-in 1.3s .2s cubic-bezier(.2,.7,.2,1) both, hover 7s 1.6s ease-in-out infinite alternate; }
  @keyframes phone-in { from { opacity: 0; transform: translateY(60px) rotate(4deg); } to { opacity: 1; transform: none; } }
  @keyframes hover { to { translate: 0 -10px; } }
  .back-win { animation: win-in 1.4s .1s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes win-in { from { opacity: 0; transform: rotateY(-28deg) rotateX(3deg) translateX(40px); } to { opacity: 1; transform: rotateY(-12deg) rotateX(3deg); } }
  .float { animation: pop .7s cubic-bezier(.2,.9,.3,1.3) both; }
  .f1 { animation-delay: 1.4s; } .f2 { animation-delay: 3.6s; }
  @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
  /* the tap: card 1 starts "waiting", a finger taps Approve, it turns green "Done" */
  .c1 { animation: approved .5s 2.5s both; }
  @keyframes approved { from { background: #fff; border-color: #eef2f7; } to { background: var(--green-tint); border-color: #cfe8d4; } }
  .c1 .c-btn { display: inline-block; position: absolute; right: 11px; animation: btn-out .3s 2.5s both; }
  @keyframes btn-out { to { opacity: 0; transform: scale(.6); visibility: hidden; } }
  .c-done { animation: done-in .45s 2.6s cubic-bezier(.2,.9,.3,1.4) both; }
  @keyframes done-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
  .tap { display: block; position: absolute; right: 26px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: rgba(25,118,210,.35); border: 2px solid rgba(25,118,210,.6); opacity: 0; animation: tap 1s 1.8s both; pointer-events: none; }
  @keyframes tap { 0% { opacity: 0; transform: scale(1.6); } 40% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(2.2); } }
  .s-done { animation: rise .6s 3.2s both; }
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .springboard.reveal .app-i { opacity: 0; transform: scale(.7); transition: opacity .5s, transform .5s cubic-bezier(.2,.9,.3,1.4); }
  .js .springboard.reveal.in .app-i { opacity: 1; transform: none; }
  .springboard .app-i:nth-child(n) { transition-delay: calc(var(--i, 0) * 40ms); }
}

/* ---------- TABLET ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .hero-in { grid-template-columns: 1fr; gap: 20px; }
  .device-stage { height: 700px; align-items: center; padding-left: 0; }
  .lang { margin-left: 0; }
  .back-win { left: 8%; width: 84%; }
  .screens { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 44px; }
  .springboard { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-arrow i { transform: rotate(90deg); }
  .wallet { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .pass::before, .pass::after { display: none; }
}

/* ---------- PHONE ---------- */
@media (max-width: 680px) {
  .wrap { padding: 0 16px; }
  .promo { font-size: 12px; } .promo .chip { display: none; }
  .site-header .wrap { height: 68px; gap: 12px; }
  .brand img { height: 46px; }
  .header-actions { gap: 14px; font-size: 14px; }
  .header-actions .btn { padding: 9px 14px; font-size: 14px; }
  .hero { padding: 44px 0 60px; }
  .label { font-size: 11px; letter-spacing: 2px; padding: 7px 13px; }
  .hero h1 { font-size: 44px; margin: 20px 0; }
  .lead { font-size: 17px; }
  .ctas { flex-direction: column; align-items: stretch; }
  .mini-proof { flex-direction: column; gap: 10px; }
  .device-stage { height: auto; padding: 20px 0 0; }
  .back-win, .float { display: none; }
  .phone { width: 290px; height: 590px; }
  .lang { flex-wrap: wrap; justify-content: center; border-radius: 20px; }
  .lang button { padding: 7px 11px; font-size: 13px; }
  .how, .product, .ba, .plans-sec { padding: 72px 0; }
  .giant { font-size: 44px; }
  .springboard { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 8px; padding: 26px 12px; border-radius: 28px; }
  .ic { width: 62px; height: 62px; border-radius: 18px; font-size: 28px; }
  .app-i { font-size: 12.5px; }
  .ba-card { padding: 24px; }
  .after .ba-steps li { font-size: 19px; }
  .pass-foot { flex-direction: column; align-items: flex-start; }
  .policy { flex-direction: column; }
  .close { padding: 90px 0; }
  .site-footer .copy { margin-left: 0; width: 100%; }
}

/* Page not found */
.nf { min-height: 72vh; background: var(--bg); text-align: center; padding: 130px 16px; }
.nf h1 { font-size: clamp(36px, 5vw, 60px); letter-spacing: -0.03em; font-weight: 800; margin: 16px auto; }
.nf p.lead-nf { font-size: 19px; color: var(--muted); max-width: 520px; margin: 0 auto 30px; }
.nf .ctas { justify-content: center; }

/* Demo video ("See it work") */
.demo { margin: 0 auto 60px; max-width: 1080px; }
.demo-frame { position: relative; border-radius: 20px; overflow: hidden; background: #0a1324; aspect-ratio: 16 / 9; box-shadow: 0 40px 80px -40px rgba(10,19,36,.6), 0 0 0 1px rgba(15,23,42,.08); }
.demo-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-toggle { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(10,19,36,.72); color: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; }
.demo-toggle:hover { background: rgba(10,19,36,.9); }
.demo-toggle:focus-visible { outline: 3px solid #90caf9; outline-offset: 3px; }
.demo figcaption { text-align: center; font-size: 14px; color: var(--muted); margin-top: 14px; }
@media (max-width: 680px) { .demo { margin-bottom: 40px; } .demo-frame { border-radius: 12px; } .demo-toggle { width: 34px; height: 34px; right: 8px; top: 8px; font-size: 15px; } }
/* Headline "One tap. Done." with Mia's line under it (Nov 4) */
.hero-sub { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--ink, #0f172a); margin: -6px 0 18px; max-width: 640px; }
@media (max-width: 600px) { .hero-sub { font-size: 21px; margin: -4px 0 14px; } .hs-br { display: none; } }

.i-comp { background: linear-gradient(145deg, #a78bfa, #7c3aed); }
.i-invest { background: linear-gradient(145deg, #ffd56e, #f5a300); color: #3b2a00; }

/* ===== Richer site (Nov 2026): menus, department pages, features, how it works, security ===== */
:root { --dept: #1976d2; --dept-2: #1565c0; --dept-ink: #1565c0; --dept-tint: #e3f0fc; --dept-on: #fff; }
.d-maint { --dept: #ff9f43; --dept-2: #ea580c; --dept-ink: #c2410c; --dept-tint: #fff1e6; --dept-on: #fff; }
.d-lease { --dept: #ffd56e; --dept-2: #f5a300; --dept-ink: #8a5a00; --dept-tint: #fff7e0; --dept-on: #3b2a00; }
.d-bill  { --dept: #34d399; --dept-2: #047857; --dept-ink: #047857; --dept-tint: #e7f8f0; --dept-on: #fff; }
.d-office{ --dept: #42a5f5; --dept-2: #1565c0; --dept-ink: #1565c0; --dept-tint: #e3f0fc; --dept-on: #fff; }

/* Header: departments menu + phone menu */
.site-header .wrap { gap: 32px; }
.nav { align-items: center; gap: 26px; }
.nav a[aria-current="page"], .dd summary[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--gold); padding-bottom: 4px; }
.dd { position: relative; }
.dd summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: #cbd5e1; }
.dd summary::-webkit-details-marker { display: none; }
.dd summary:hover, .dd[open] summary { color: #fff; }
.dd summary i { font-size: 16px; transition: transform .15s; }
.dd[open] summary i { transform: rotate(180deg); }
.dd-panel { position: absolute; left: -18px; top: calc(100% + 16px); width: 560px; background: #fff; border-radius: 20px; padding: 12px; box-shadow: 0 30px 60px -20px rgba(2,8,23,.45), 0 0 0 1px rgba(15,23,42,.06); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; z-index: 30; }
.dd-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; color: var(--ink); }
.dd-item:hover, .dd-item:focus-visible { background: var(--soft); }
.dd-item b { display: block; font-family: "DM Sans", sans-serif; font-size: 16px; }
.dd-item small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: 2px; }
.d-ic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 21px; color: var(--dept-on); background: linear-gradient(145deg, var(--dept), var(--dept-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 16px -10px rgba(15,23,42,.6); }
.d-ic.big { width: 64px; height: 64px; border-radius: 18px; font-size: 32px; }
.mm { display: none; }
.mm summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: #fff; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 15px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 8px 14px; }
.mm summary::-webkit-details-marker { display: none; }
.mm-panel { position: absolute; left: 0; right: 0; top: 100%; background: #0a1324; border-top: 1px solid rgba(255,255,255,.08); padding: 10px 16px 22px; box-shadow: 0 30px 40px -20px rgba(0,0,0,.6); }
.mm-panel p { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #94a3b8; margin: 14px 4px 6px; }
.mm-panel a { display: flex; align-items: center; gap: 12px; color: #fff; padding: 10px 6px; border-radius: 12px; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 17px; }
.mm-panel a .d-ic { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
.mm-panel a.plain { font-weight: 500; color: #cbd5e1; padding-left: 8px; }

/* Page hero (department and inner pages) */
.page-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); padding: 64px 0 80px; }
.page-hero .mesh i:nth-child(1) { background: var(--dept-tint); }
.ph-in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ph-in > * { min-width: 0; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--blue-dark); font-weight: 600; }
.d-label { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.85); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px 6px 6px; font-family: "JetBrains Mono", monospace; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--dept-ink); font-weight: 500; }
.d-label .d-ic { width: 30px; height: 30px; font-size: 17px; border-radius: 999px; }
.page-hero h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; margin: 22px 0 20px; text-wrap: balance; }
.page-hero h1 span { color: var(--dept-ink); }
.page-hero .lead { max-width: 580px; }
.page-hero.center-hero { text-align: center; padding-bottom: 64px; }
.page-hero.center-hero .lead { margin: 0 auto; }
.page-hero.center-hero h1 { max-width: 980px; margin-left: auto; margin-right: auto; }

/* The desk picture (an illustration with sample data) */
.desk { background: #fff; border-radius: 26px; border: 1px solid #e6edf5; box-shadow: 0 40px 80px -40px rgba(10,19,36,.45), 0 0 0 8px rgba(255,255,255,.6); overflow: hidden; text-align: left; }
.desk-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #0a1324; color: #fff; }
.desk-top img { height: 34px; width: auto; }
.desk-top .desk-name { margin-left: 6px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 14px; color: #cbd5e1; display: inline-flex; gap: 8px; align-items: center; }
.desk-top .desk-name .d-ic { width: 24px; height: 24px; font-size: 14px; border-radius: 7px; }
.desk-top .sample { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #94a3b8; border: 1px dashed #334155; border-radius: 6px; padding: 2px 8px; }
.desk-body { padding: 18px 20px 20px; }
.desk-hi { font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 24px; color: var(--ink); letter-spacing: -.4px; }
.desk-sub { color: var(--muted); font-size: 14px; margin: 2px 0 14px; }
.desk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.desk-tiles div { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.desk-tiles b { display: block; font-family: "DM Sans", sans-serif; font-size: 24px; color: var(--ink); line-height: 1.1; }
.desk-tiles .t-red b { color: #b42318; } .desk-tiles .t-ok b { color: var(--green); }
.desk-h { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
.desk-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #eef2f7; border-radius: 14px; margin-bottom: 8px; background: #fff; }
.desk-row .r-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 18px; color: #fff; background: #94a3b8; }
.desk-row .r-ic.red { background: #dc2626; } .desk-row .r-ic.amber { background: #f59e0b; } .desk-row .r-ic.blue { background: var(--blue); } .desk-row .r-ic.green { background: var(--green); } .desk-row .r-ic.purple { background: #7c3aed; }
.desk-row div { min-width: 0; flex: 1; }
.desk-row b { display: block; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-row small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-btn { background: var(--blue); color: #fff; font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 7px 13px; white-space: nowrap; }
.desk-btn.soft { background: var(--tint); color: var(--blue-dark); }
.desk-done { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink); padding: 6px 2px; }
.desk-done i { color: var(--green); font-size: 18px; }
.desk-wrap { position: relative; }
.desk-wrap .float { position: absolute; }
.desk-wrap .fa { left: -30px; bottom: -50px; }
.desk-wrap .fb { right: -20px; top: 92px; }

/* Step-by-step strip */
.steps-sec { padding: 104px 0; }
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: st; }
.stepper .scr-face { height: 270px; }
.stepper h3 { font-size: 21px; }
.stepper .step-n { background: linear-gradient(145deg, var(--dept), var(--dept-2)); color: var(--dept-on); }
.mini-field { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 12px; color: var(--muted); }
.mini-field b { display: block; font-size: 15px; color: var(--ink); font-family: "DM Sans", sans-serif; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: var(--soft); color: var(--text); }
.chips .on { background: #fde2e2; color: #b42318; }
.chips .ok { background: var(--green-tint); color: var(--green); }
.chips .info { background: var(--tint); color: var(--blue-dark); }
.big-count { font-family: "DM Sans", sans-serif; font-weight: 800; font-size: 44px; color: var(--green); text-align: center; line-height: 1; }
.big-count small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 6px; font-family: Inter, sans-serif; }
.note-line { font-size: 12.5px; color: var(--muted); text-align: center; }
.note-line b { color: var(--ink); }

/* Your desk explainer */
.desk-explain { padding: 104px 0; background: linear-gradient(180deg, var(--bg), #fff); border-top: 1px solid var(--line); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.three > div { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 26px; }
.three h3 { font-size: 22px; margin: 14px 0 8px; display: flex; gap: 10px; align-items: center; }
.three p { color: var(--muted); font-size: 16px; }
.three ul { margin-top: 12px; }
.three li { display: flex; gap: 8px; font-size: 15px; padding: 5px 0; color: var(--ink); }
.three li i { color: var(--dept-ink); margin-top: 3px; }
.dot-h { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.dot-h.red { background: #dc2626; } .dot-h.blue { background: var(--blue); } .dot-h.green { background: var(--green); }

/* Feature grid */
.feat-sec { padding: 104px 0; }
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feat { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px 24px 22px; }
.feat > i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 23px; background: var(--dept-tint); color: var(--dept-ink); }
.feat h3 { font-size: 19px; margin: 16px 0 6px; letter-spacing: -.2px; padding-right: 64px; }
.feat p { font-size: 15px; color: var(--muted); line-height: 1.55; }
.feat .st { position: absolute; top: 22px; right: 20px; }
.st { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--green-tint); color: var(--green); white-space: nowrap; }
.st.soon { background: var(--tint); color: var(--blue-dark); }

/* Hand-offs between desks */
.hand-sec { padding: 96px 0; background: #0a1324; color: #b8c4d6; overflow: hidden; }
.hand-sec h2 { color: #fff; }
.hand-sec h2 span { color: var(--sky); }
.hand-sec .mono { color: var(--gold); }
.hand-sec .head p:not(.mono) { color: #94a3b8; }
.hands { display: grid; gap: 14px; }
.hand { display: grid; grid-template-columns: 220px 40px 220px 1fr; align-items: center; gap: 14px; background: rgba(255,255,255,.04); border: 1px solid #1e2b47; border-radius: 20px; padding: 16px 20px; }
.hand .who { display: flex; gap: 10px; align-items: center; color: #fff; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 16px; }
.hand .who .d-ic { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
.hand > i { color: var(--gold); font-size: 22px; justify-self: center; }
.hand p { font-size: 15px; color: #cbd5e1; }

/* Rules box */
.ma-sec { padding: 0 0 104px; }
.ma-box { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; background: var(--dept-tint); border: 1px solid rgba(15,23,42,.06); border-radius: 28px; padding: 30px 34px; }
.ma-box .ma-ic { width: 60px; height: 60px; border-radius: 18px; background: #0a1324; color: var(--gold); display: grid; place-items: center; font-size: 30px; }
.ma-box h3 { font-size: 24px; margin-bottom: 8px; }
.ma-box ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; margin-top: 10px; }
.ma-box li { display: flex; gap: 8px; font-size: 15.5px; color: var(--ink); padding: 3px 0; }
.ma-box li i { color: var(--dept-ink); margin-top: 3px; }
.ma-box .fine { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* Other desks (cross links) + the 4 desks on Home */
.desks-sec { padding: 104px 0; }
.desk-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.desk-cards.dc3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 24px; transition: transform .15s, box-shadow .15s; color: var(--ink); }
.dcard:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -36px rgba(15,23,42,.5); }
.dcard h3 { font-size: 22px; margin: 16px 0 6px; }
.dcard p { color: var(--muted); font-size: 15px; }
.dcard ul { margin: 12px 0 16px; }
.dcard li { display: flex; gap: 8px; font-size: 14.5px; padding: 4px 0; }
.dcard li i { color: var(--dept-ink); margin-top: 3px; }
.dcard .go { margin-top: auto; font-family: "DM Sans", sans-serif; font-weight: 700; color: var(--dept-ink); display: inline-flex; gap: 6px; align-items: center; }

/* Security strip on Home + security page */
.sec-strip { padding: 0 0 104px; }
.sec-box { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 34px; align-items: center; background: #0a1324; color: #b8c4d6; border-radius: 30px; padding: 40px 44px; position: relative; overflow: hidden; }
.sec-box h2 { color: #fff; font-size: clamp(30px, 3.4vw, 44px); }
.sec-box h2 span { color: var(--sky); }
.sec-box .mono { color: var(--gold); }
.sec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sec-list div { background: rgba(255,255,255,.05); border: 1px solid #1e2b47; border-radius: 18px; padding: 16px; font-size: 14.5px; }
.sec-list b { display: flex; gap: 8px; align-items: center; color: #fff; font-family: "DM Sans", sans-serif; font-size: 16px; margin-bottom: 4px; }
.sec-list b i { color: var(--gold); font-size: 20px; }
.sec-box .btn { margin-top: 18px; }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rule { display: flex; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 24px; }
.rule > i { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: #0a1324; color: var(--gold); }
.rule h3 { font-size: 20px; margin-bottom: 6px; }
.rule p { color: var(--muted); font-size: 15.5px; }
.rule .st { margin-left: 6px; vertical-align: middle; }

/* Features page: department blocks */
.fx-sec { padding: 80px 0; border-top: 1px solid var(--line); }
.fx-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.fx-head h2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); }
.fx-head a { margin-left: auto; font-family: "DM Sans", sans-serif; font-weight: 700; color: var(--dept-ink); display: inline-flex; gap: 6px; align-items: center; }
.fx-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.fx-list li { display: flex; gap: 10px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--soft); font-size: 15.5px; color: var(--ink); }
.fx-list li i { color: var(--dept-ink); font-size: 19px; margin-top: 1px; }
.fx-list li span { flex: 1; }
.fx-list li small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.jump a { display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px 8px 8px; font-family: "DM Sans", sans-serif; font-weight: 600; color: var(--ink); }
.jump a .d-ic { width: 28px; height: 28px; font-size: 15px; border-radius: 999px; }

/* How it works page: a day with Brilliant */
.day { position: relative; max-width: 900px; margin: 0 auto; }
.day::before { content: ""; position: absolute; left: 90px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--blue), var(--gold)); opacity: .35; }
.day-row { display: grid; grid-template-columns: 76px 30px 1fr; gap: 14px; align-items: start; padding: 12px 0; }
.day-row time { font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--muted); padding-top: 14px; text-align: right; }
.day-row .dd-dot { width: 16px; height: 16px; border-radius: 50%; margin-top: 16px; justify-self: center; background: #fff; border: 4px solid var(--dept-2); position: relative; z-index: 1; }
.day-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; }
.day-card b { font-family: "DM Sans", sans-serif; font-size: 17px; color: var(--ink); }
.day-card p { font-size: 15px; color: var(--muted); margin-top: 2px; }
.day-card .who { font-size: 12px; font-weight: 700; color: var(--dept-ink); text-transform: uppercase; letter-spacing: 1px; }

/* Richer footer */
.site-footer .wrap.fcols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; align-items: start; padding-top: 52px; padding-bottom: 26px; }
.fcols h4 { font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #64748b; font-weight: 500; margin-bottom: 12px; }
.fcols a { display: block; padding: 5px 0; color: #cbd5e1; }
.fcols a:hover { color: #fff; }
.fcols .fbrand p { font-size: 14px; color: #94a3b8; margin-top: 14px; max-width: 280px; line-height: 1.55; }
.fbottom { border-top: 1px solid #16213a; }
.fbottom .wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; padding-top: 18px; padding-bottom: 26px; font-size: 13px; color: #64748b; }
.fbottom .wrap span:last-child { margin-left: auto; }

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .page-hero .ph-copy > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .page-hero .ph-copy > :nth-child(2) { animation-delay: .06s; } .page-hero .ph-copy > :nth-child(3) { animation-delay: .12s; } .page-hero .ph-copy > :nth-child(4) { animation-delay: .18s; } .page-hero .ph-copy > :nth-child(5) { animation-delay: .24s; }
  .desk-wrap .desk { animation: phone-in 1.2s .15s cubic-bezier(.2,.7,.2,1) both; }
  .desk-wrap .float { animation: pop .7s 1.1s cubic-bezier(.2,.9,.3,1.3) both; }
  .desk-wrap .fb { animation-delay: 1.6s; }
}

/* ---- tablet ---- */
@media (max-width: 1100px) {
  .mm { display: block; }
  .header-actions .login { display: none; }
  .ph-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .three, .feat-grid { grid-template-columns: 1fr 1fr; }
  .desk-cards, .desk-cards.dc3 { grid-template-columns: 1fr 1fr; }
  .hand { grid-template-columns: 1fr 30px 1fr; }
  .hand p { grid-column: 1 / -1; }
  .sec-box { grid-template-columns: 1fr; }
  .fx-list { grid-template-columns: 1fr 1fr; }
  .site-footer .wrap.fcols { grid-template-columns: 1fr 1fr; }
  .desk-wrap .fa { left: 8px; } .desk-wrap .fb { right: 8px; }
}
/* ---- phone ---- */
@media (max-width: 680px) {
  .site-header .wrap { gap: 10px; }
  .header-actions .btn { padding: 8px 12px; font-size: 13.5px; }
  .mm summary { padding: 7px 11px; font-size: 14px; }
  .page-hero { padding: 36px 0 56px; }
  .page-hero h1 { font-size: 38px; }
  .d-label { font-size: 11px; letter-spacing: 1.4px; }
  .desk-body { padding: 14px; }
  .desk-hi { font-size: 21px; }
  .desk-tiles div { padding: 8px; font-size: 11.5px; } .desk-tiles b { font-size: 20px; }
  .desk-top .desk-name { display: none; }
  .desk-wrap .float { display: none; }
  .steps-sec, .desk-explain, .feat-sec, .desks-sec { padding: 64px 0; }
  .hand-sec { padding: 64px 0; }
  .ma-sec, .sec-strip { padding-bottom: 64px; }
  .stepper, .three, .feat-grid, .desk-cards, .desk-cards.dc3, .rules, .sec-list, .fx-list, .ma-box ul { grid-template-columns: 1fr; }
  .stepper .scr-face { height: auto; min-height: 220px; }
  .ma-box { grid-template-columns: 1fr; padding: 24px; }
  .sec-box { padding: 28px 22px; border-radius: 22px; }
  .hand { grid-template-columns: 1fr; gap: 8px; } .hand > i { transform: rotate(90deg); justify-self: start; margin-left: 8px; }
  .rule { flex-direction: column; gap: 12px; }
  .day::before { left: 22px; } .day-row { grid-template-columns: 30px 1fr; } .day-row time { grid-column: 2; text-align: left; padding: 0; order: -1; } .day-row .dd-dot { grid-row: 1 / span 2; grid-column: 1; }
  .site-footer .wrap.fcols { grid-template-columns: 1fr; gap: 18px; }
  .fbottom .wrap span:last-child { margin-left: 0; }
}

/* headings take the department's color */
.steps-sec h2 span, .desk-explain h2 span, .feat-sec h2 span, .desks-sec h2 span { color: var(--dept-ink); }
.desks-sec:not([class*="d-"]) h2 span { color: var(--blue); }

.ma-box h3 .st { margin-left: 8px; vertical-align: middle; }