/* Brit Angels body: a story told through deep-navy space, glass panels and 3D depth.
   Loaded after hero.css, which holds the header, the hero and shared buttons. */
:root {
  --deep: #030b33; --space: #050f45; --glass: rgba(22, 40, 118, .42); --glass-2: rgba(12, 24, 80, .55);
  --edge: rgba(150, 185, 255, .22); --edge-2: rgba(150, 185, 255, .4);
  --text: #eef2ff; --soft: #b7c3ee; --dim: #8796c9;
  --bg: var(--deep); --ink: var(--text); --muted: var(--soft); --line: var(--edge); --bg-alt: rgba(255, 255, 255, .06); --surface: var(--glass);
  color-scheme: dark;
}
body { background: var(--deep); color: var(--text); }
::selection { background: var(--orange); color: #fff; }

/* the 3D space behind every section */
#space3d { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; }
main, .footer { position: relative; }
.hero { background: transparent; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(transparent, var(--deep)); pointer-events: none; z-index: -1; }

/* shared section furniture */
.section { padding: 120px 0; position: relative; }
.section.tight { padding: 70px 0; }
.sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }
.sec-head h2, .sub-h { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; margin: 10px 0 18px; color: #fff; }
.sub-h { font-size: clamp(26px, 3vw, 38px); margin-bottom: 28px; }
.sec-head > p { color: var(--soft); font-size: 18px; }
.eyebrow, .chapter, .tagline { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #ffc07a; }
.chapter::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--orange), transparent); }
.sec-head:not(.left) .chapter::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(270deg, var(--orange), transparent); }
.bridge { margin: 16px auto 0; max-width: 620px; font: 500 italic 17px/1.6 var(--font); color: #9fb2ec; }
.sec-head.left .bridge { margin-left: 0; }
.more { text-align: center; margin-top: 44px; }
.glass { background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* 3D tilt cards (JS sets --rx/--ry/--mx/--my) */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; will-change: transform; }
.tilt.reveal.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tilt:hover { transition-duration: .12s; }
.shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 45%); }
.tilt:hover .shine { opacity: 1; }

/* chapter rail */
.rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 14px; }
.rail::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(transparent, var(--edge-2), transparent); }
.rail a { position: relative; display: grid; place-items: center; min-width: 44px; height: 24px; padding: 0 8px; border-radius: 7px; text-decoration: none;
  font: 600 10.5px/1 ui-monospace, Consolas, monospace; letter-spacing: .04em; color: var(--dim); background: rgba(5, 15, 69, .85); border: 1px solid var(--edge); transition: all .25s; }
.rail a:hover { color: #fff; border-color: var(--edge-2); }
.rail a.on { color: #fff; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(253, 120, 1, .18), 0 0 18px rgba(253, 120, 1, .5); }
@media (max-width: 1180px) { .rail { display: none; } }

/* ---------- STORY: the product build ---------- */
.build { position: relative; height: calc(var(--steps, 6) * 90vh + 100vh); }
.build-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); align-items: center; gap: 30px; padding: 90px clamp(20px, 4vw, 72px) 40px; }
#build3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.build-head { position: absolute; left: clamp(20px, 4vw, 72px); top: 96px; max-width: 520px; z-index: 2; }
.build-head h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 10px 0 10px; }
.build-head p { color: var(--soft); font-size: 16px; }
.build-steps { grid-column: 2; position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; height: 260px; }
.bstep { position: absolute; inset: 0; padding: 26px 26px 24px; border-radius: 24px; background: var(--glass-2); border: 1px solid var(--edge); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; transform: translateY(40px) rotateX(-18deg) scale(.96); transform-origin: 50% 100%; transition: opacity .55s, transform .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.bstep.on { opacity: 1; transform: none; pointer-events: auto; }
.bstep.done { opacity: 0; transform: translateY(-40px) rotateX(18deg) scale(.96); }
.bnum { font: 700 56px/1 var(--display); background: linear-gradient(180deg, #ffd27a, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bstep h3 { font-size: 28px; margin: 6px 0 10px; }
.bstep p { color: var(--soft); }
.build-bar { position: absolute; left: clamp(20px, 4vw, 72px); right: clamp(20px, 4vw, 72px); bottom: 28px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); z-index: 2; overflow: hidden; }
.build-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--amber)); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 880px) {
  .build-sticky { grid-template-columns: 1fr; align-items: end; padding-bottom: 60px; }
  .build-steps { grid-column: 1; height: 230px; }
  .build-head { top: 84px; right: 20px; }
  .build-head p { display: none; }
}

/* ---------- 1: brands on a turning ring ---------- */
.brands { padding: 110px 0 40px; text-align: center; overflow: hidden; }
.brands-title { color: var(--soft); margin: 14px 0 10px; }
.ring-stage { height: 220px; perspective: 1200px; display: grid; place-items: center; -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.brand-ring { --r: 520px; position: relative; width: 190px; height: 96px; transform-style: preserve-3d; animation: ringTurn 36s linear infinite; }
.ring-stage:hover .brand-ring { animation-play-state: paused; }
.ring-item { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; border-radius: 18px; background: rgba(255, 255, 255, .92); box-shadow: 0 14px 30px -14px #000;
  transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 16px 22px; }
.ring-item img { max-width: 100%; max-height: 58px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .85; transition: filter .3s, opacity .3s; }
.ring-item:hover img { filter: none; opacity: 1; }
@keyframes ringTurn { from { transform: rotateX(-8deg) rotateY(0); } to { transform: rotateX(-8deg) rotateY(-360deg); } }
@media (max-width: 640px) { .brand-ring { --r: 300px; width: 140px; height: 74px; } .ring-stage { height: 170px; } }

/* ---------- 2: products ---------- */
.filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.chip { font: 500 14px/1 var(--font); padding: 10px 18px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); color: var(--soft); cursor: pointer; transition: all .2s; }
.chip:hover { color: #fff; border-color: var(--edge-2); }
.chip[aria-pressed="true"] { background: linear-gradient(135deg, #ffa024, var(--orange)); border-color: transparent; color: #fff; box-shadow: 0 10px 24px -10px rgba(253, 120, 1, .8); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.pcard { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, rgba(22, 40, 118, .55)), rgba(8, 16, 60, .78)); border: 1px solid var(--edge);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); }
.pcard:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .95), 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 50px -12px color-mix(in srgb, var(--c) 50%, transparent); }
.pcard.hidden { display: none; }
.pimg { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #071447; transform: translateZ(30px); }
.pimg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.pcard:hover .pimg img { transform: scale(1.05); }
.pcard-in { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 22px; flex: 1; transform: translateZ(40px); }
.glyph { position: absolute; right: 22px; top: -26px; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--c); color: #0b1440;
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--c) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4); transform: translateZ(30px); }
.glyph svg { width: 24px; height: 24px; }
.pcard .tagline { font-size: 11px; color: color-mix(in srgb, var(--c) 70%, #fff); }
.pcard .tagline::before { display: none; }
.pcard .h3 { font: 700 25px/1.15 var(--display); color: #fff; }
.pcard .desc { color: var(--soft); font-size: 15px; }
.pcard-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.cats { color: var(--dim); }
.go { display: inline-flex; align-items: center; gap: 6px; color: #ffc07a; font-weight: 500; }
.go svg { width: 14px; height: 14px; transition: transform .2s; }
.pcard:hover .go svg, .case:hover .go svg { transform: translateX(4px); }
.pcard.featured { grid-column: span 2; flex-direction: row; }
.pcard.featured .pimg { aspect-ratio: auto; width: 54%; flex: none; }
.pcard.featured .h3 { font-size: 34px; }
.product-grid.teaser .pcard.featured { grid-column: span 2; }
@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .product-grid { grid-template-columns: 1fr; } .pcard.featured, .product-grid.teaser .pcard.featured { grid-column: auto; flex-direction: column; } .pcard.featured .pimg { width: auto; aspect-ratio: 16 / 10; } }

/* ---------- 3: services, a stack of cards you flip through ---------- */
.services-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.services-wrap .sec-head { margin-bottom: 0; }
.svc-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.svc-tab { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); color: var(--soft); font: 500 14.5px/1 var(--font); cursor: pointer; transition: all .2s; }
.svc-tab svg { width: 18px; height: 18px; }
.svc-tab:hover { color: #fff; border-color: var(--edge-2); }
.svc-tab[aria-selected="true"] { color: #fff; border-color: var(--orange); background: rgba(253, 120, 1, .14); box-shadow: 0 0 22px -6px rgba(253, 120, 1, .7); }
.svc-stage { position: relative; height: 440px; perspective: 1400px; transform-style: preserve-3d; }
.svc-card { position: absolute; inset: 0; padding: 36px; border-radius: 30px; background: linear-gradient(160deg, rgba(36, 62, 150, .9), rgba(10, 20, 70, .95)); border: 1px solid var(--edge-2);
  box-shadow: 0 40px 80px -30px #000; transform-origin: 50% 110%; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s, filter .5s;
  transform: translate3d(calc(var(--d, 0) * 34px), calc(var(--d, 0) * -22px), calc(var(--d, 0) * -90px)) rotateZ(calc(var(--d, 0) * 3deg)); opacity: calc(1 - var(--d, 0) * .28); filter: brightness(calc(1 - var(--d, 0) * .18)); z-index: calc(10 - var(--d, 0)); }
.svc-card.gone { transform: translate3d(-120%, 40px, 120px) rotateZ(-14deg) rotateY(-30deg); opacity: 0; }
.svc-num { position: absolute; right: 30px; top: 22px; font: 700 76px/1 var(--display); color: rgba(255, 255, 255, .07); }
.svc-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, #ffa024, var(--orange)); color: #fff; box-shadow: 0 16px 34px -10px rgba(253, 120, 1, .8); }
.svc-icon svg { width: 30px; height: 30px; }
.svc-card h3 { font-size: 34px; margin: 22px 0 18px; }
.svc-card ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.svc-card li { display: flex; align-items: center; gap: 12px; color: var(--soft); font-size: 16.5px; }
.svc-card li svg { width: 20px; height: 20px; flex: none; color: #6ef0b0; padding: 3px; border-radius: 50%; background: rgba(110, 240, 176, .12); }
@media (max-width: 980px) { .services-wrap { grid-template-columns: 1fr; gap: 40px; } .svc-stage { height: 420px; max-width: 560px; } }

/* ---------- 4: work, panels that turn to face you ---------- */
.work-list { display: grid; gap: 30px; perspective: 1400px; }
.case { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: stretch; text-decoration: none; color: inherit; border-radius: 30px; overflow: hidden;
  background: linear-gradient(120deg, rgba(22, 40, 118, .6), rgba(8, 16, 60, .85)); border: 1px solid var(--edge); box-shadow: 0 30px 60px -30px #000;
  transform: rotateY(calc(var(--turn, 0) * 1deg)) rotateX(calc(var(--tilt, 0) * 1deg)); transform-origin: 50% 50%; transition: border-color .3s, box-shadow .3s; }
.case.flip { grid-template-columns: minmax(0, 1fr) 42%; }
.case.flip .case-logo { order: 2; }
.case:hover { border-color: var(--edge-2); box-shadow: 0 40px 80px -30px #000, 0 0 60px -20px rgba(61, 139, 255, .6); }
.case-logo { display: grid; place-items: center; padding: 40px; background: radial-gradient(circle at 50% 50%, rgba(61, 139, 255, .35), transparent 70%); min-height: 260px; }
.plate { display: grid; place-items: center; width: min(320px, 100%); aspect-ratio: 16 / 9; padding: 22px 28px; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -20px #000; transform: rotate(-3deg) translateZ(40px); transition: transform .4s; }
.case:hover .plate { transform: rotate(0) translateZ(60px) scale(1.04); }
.plate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.case-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 40px 44px; }
.meta { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #ffc07a; }
.case .h3 { font: 700 30px/1.15 var(--display); color: #fff; }
.case .desc { color: var(--soft); font-size: 16px; }
.case .go { margin-top: 8px; }
@media (max-width: 820px) { .case, .case.flip { grid-template-columns: 1fr; } .case.flip .case-logo { order: 0; } .case-logo { min-height: 200px; padding: 30px; } .case-body { padding: 28px; } }

/* ---------- 5: process, steps along a tilted plane ---------- */
.plane-stage { perspective: 1300px; }
.plane { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 22px; position: relative;
  transform: rotateX(var(--plane, 22deg)); transform-style: preserve-3d; transition: transform .2s linear; }
.plane::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 2px; background: linear-gradient(90deg, transparent, var(--orange), var(--amber), #3d8bff, transparent); box-shadow: 0 0 18px rgba(253, 120, 1, .6); transform: translateZ(-1px); }
.pstep { position: relative; padding: 0 6px; text-align: center; transform: translateZ(calc(var(--lift, 0) * 1px)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.pin { width: 68px; height: 68px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 22px; font: 700 28px/1 var(--display); color: #fff;
  background: linear-gradient(145deg, #2a55e6, #0f2a8a); border: 1px solid var(--edge-2); box-shadow: 0 18px 30px -12px #000, 0 0 0 6px rgba(61, 139, 255, .12); transform: translateZ(30px); }
.pstep:nth-child(even) .pin { background: linear-gradient(145deg, #ffa024, #d9520a); box-shadow: 0 18px 30px -12px #000, 0 0 0 6px rgba(253, 120, 1, .14); }
.pstep h3 { font-size: 22px; margin-bottom: 8px; }
.pstep p { color: var(--soft); font-size: 15px; }
@media (max-width: 880px) { .plane { grid-template-columns: 1fr 1fr; row-gap: 40px; transform: none; } .plane::before { display: none; } }
@media (max-width: 520px) { .plane { grid-template-columns: 1fr; } }

/* ---------- 6: team, disciplines orbit a first-class medal ---------- */
.team-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 70px; align-items: center; }
.orbit-stage { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin: 0 auto; perspective: 1000px; display: grid; place-items: center; }
.medal { position: relative; z-index: 2; width: 42%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #ffe3a0, #ffb21f 40%, #d9520a 100%); box-shadow: 0 30px 60px -20px rgba(253, 120, 1, .7), inset 0 -10px 30px rgba(120, 40, 0, .5), inset 0 8px 20px rgba(255, 255, 255, .6); animation: medalTurn 8s ease-in-out infinite; }
.medal b { font: 700 clamp(44px, 6vw, 70px)/1 var(--display); color: #fff; text-shadow: 0 3px 0 #b5470a, 0 8px 18px rgba(0, 0, 0, .3); }
.medal small { font: 600 14px/1 var(--font); letter-spacing: .3em; text-transform: uppercase; color: #fff; margin-top: 6px; }
@keyframes medalTurn { 0%, 100% { transform: rotateY(-18deg); } 50% { transform: rotateY(18deg); } }
.orbit { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(68deg); animation: orbitSpin 22s linear infinite; }
.orbit::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 1px dashed rgba(150, 185, 255, .35); }
.orb { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotateZ(calc(var(--i) * 360deg / var(--n))) translateX(min(210px, 44vw)); transform-style: preserve-3d; }
.orb-in { position: absolute; left: -29px; top: -29px; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #2a55e6, #0f2a8a); border: 1px solid var(--edge-2); box-shadow: 0 0 24px rgba(61, 139, 255, .55);
  transform: rotateZ(calc(var(--i) * -360deg / var(--n))) rotateX(-68deg); animation: orbUpright 22s linear infinite; }
.orb:nth-child(even) .orb-in { background: linear-gradient(145deg, #ffa024, #d9520a); box-shadow: 0 0 24px rgba(253, 120, 1, .55); }
.orb-in svg { width: 26px; height: 26px; }
@keyframes orbitSpin { to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes orbUpright { from { transform: rotateZ(calc(var(--i) * -360deg / var(--n))) rotateX(-68deg); } to { transform: rotateZ(calc(var(--i) * -360deg / var(--n) - 360deg)) rotateX(-68deg); } }
.fields { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fields li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--edge); font-size: 15px; }
.fields svg { width: 22px; height: 22px; flex: none; color: #ffc07a; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 80px; }
.stat { position: relative; padding: 28px 24px; border-radius: 24px; background: linear-gradient(160deg, rgba(36, 62, 150, .55), rgba(10, 20, 70, .8)); border: 1px solid var(--edge); text-align: center; }
.stat b { display: block; font: 700 52px/1 var(--display); background: linear-gradient(180deg, #ffe0a0, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateZ(30px); }
.stat small { display: block; margin-top: 10px; color: var(--soft); font-size: 14.5px; }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.value { padding: 28px; border-radius: 24px; background: rgba(255, 255, 255, .035); border: 1px solid var(--edge); }
.value h3 { font-size: 22px; margin-bottom: 8px; }
.value p { color: var(--soft); font-size: 15px; }
@media (max-width: 980px) { .team-grid { grid-template-columns: 1fr; gap: 50px; } .stats { grid-template-columns: 1fr 1fr; } .values { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .fields { grid-template-columns: 1fr; } .orb { transform: rotateZ(calc(var(--i) * 360deg / var(--n))) translateX(40vw); } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid var(--edge); transition: background .25s, border-color .25s; }
.faq details[open] { background: rgba(36, 62, 150, .35); border-color: var(--edge-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font: 600 18px/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.pm { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); transition: transform .3s, background .3s; }
.pm svg { width: 16px; height: 16px; }
.faq details[open] .pm { transform: rotate(45deg); background: var(--orange); }
.faq details p { padding: 0 24px 22px; color: var(--soft); }
@media (max-width: 880px) { .faq-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; align-items: start; }
.contact-lines { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.contact-lines li { display: flex; align-items: center; gap: 14px; color: var(--soft); }
.contact-lines svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; flex: none; color: #ffc07a; background: rgba(253, 120, 1, .12); border: 1px solid rgba(253, 120, 1, .25); }
.contact-lines a { color: #fff; text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
.form { position: relative; padding: 34px; border-radius: 30px; background: linear-gradient(160deg, rgba(36, 62, 150, .55), rgba(10, 20, 70, .85)); border: 1px solid var(--edge-2); box-shadow: 0 40px 80px -30px #000; display: grid; gap: 18px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label, .lbl { font-size: 14px; font-weight: 500; color: var(--soft); }
.opt { color: var(--dim); font-weight: 400; }
.field input, .field textarea { width: 100%; font: 400 15.5px/1.5 var(--font); color: #fff; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(3, 11, 51, .6); transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(253, 120, 1, .18); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { cursor: pointer; }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.pills span { display: inline-block; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--edge); font-size: 14px; color: var(--soft); transition: all .2s; }
.pills input:checked + span { background: rgba(253, 120, 1, .18); border-color: var(--orange); color: #fff; }
.pills input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form .btn { justify-self: start; }
.form-status { min-height: 1.4em; font-size: 15px; color: #6ef0b0; }
.form-status.err { color: #ff8a80; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } .form { padding: 24px 18px; } .form .two { grid-template-columns: 1fr; } }

/* ---------- inner pages ---------- */
.page-hero { padding: 150px 0 50px; position: relative; }
.page-hero h1 { font-size: clamp(40px, 5.6vw, 76px); margin: 14px 0 16px; text-shadow: 0 2px 0 #9fb0ea, 0 4px 0 #4f62bd, 0 10px 20px rgba(0, 0, 0, .4); }
.page-hero .lead { color: var(--soft); font-size: 19px; max-width: 680px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--dim); margin-bottom: 26px; }
.crumbs a { color: var(--soft); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.page-hero.detail .tagline { color: color-mix(in srgb, var(--c, #ffc07a) 75%, #fff); }
.shot { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--edge-2); box-shadow: 0 50px 90px -30px #000, 0 0 80px -30px var(--c, #3d8bff); }
.shot img { display: block; width: 100%; }
.emblem { aspect-ratio: 1; max-width: 360px; margin-left: auto; border-radius: 40px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c, #3d8bff) 85%, #fff), var(--c, #3d8bff) 50%, #0b1440 120%); box-shadow: 0 50px 90px -30px #000, inset 0 2px 0 rgba(255, 255, 255, .4); }
.emblem-in svg { width: 140px; height: 140px; color: #fff; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .35)); }
.emblem.logo { background: #fff; }
.emblem.logo img { max-width: 70%; }
.story-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 70px; }
.sblock { padding: 30px; border-radius: 24px; background: linear-gradient(160deg, rgba(36, 62, 150, .5), rgba(10, 20, 70, .8)); border: 1px solid var(--edge); }
.sblock p { margin-top: 14px; font-size: 17px; color: #e3e9ff; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feature { position: relative; padding: 28px 28px 28px 92px; border-radius: 22px; background: rgba(255, 255, 255, .035); border: 1px solid var(--edge); }
.fnum { position: absolute; left: 26px; top: 26px; font: 700 34px/1 var(--display); color: #ffc07a; }
.feature h3 { font-size: 21px; margin-bottom: 6px; }
.feature p { color: var(--soft); }
.timeline { display: grid; gap: 22px; max-width: 860px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 33px; top: 40px; bottom: 40px; width: 2px; background: linear-gradient(var(--orange), #3d8bff); }
.tl { position: relative; padding: 28px 30px 28px 100px; border-radius: 24px; background: linear-gradient(160deg, rgba(36, 62, 150, .5), rgba(10, 20, 70, .8)); border: 1px solid var(--edge); }
.tl .pin { position: absolute; left: 6px; top: 22px; width: 56px; height: 56px; margin: 0; font-size: 22px; }
.tl p { margin-top: 12px; font-size: 17px; color: #e3e9ff; }
.outcomes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.outcomes li { display: flex; gap: 10px; align-items: center; color: #e3e9ff; }
.outcomes svg { width: 20px; height: 20px; flex: none; color: #6ef0b0; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; gap: 40px; } .emblem { margin: 0 auto; max-width: 260px; } .story-blocks, .feature-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.footer { margin-top: 60px; padding: 80px 0 30px; background: linear-gradient(180deg, rgba(3, 11, 51, 0), rgba(2, 7, 34, .95) 30%); border-top: 1px solid var(--edge); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer .brand { color: #fff; }
.footer .tagline { display: block; margin: 16px 0 22px; letter-spacing: 0; text-transform: none; font: 400 15px/1.6 var(--font); color: var(--soft); max-width: 320px; }
.footer h4 { font: 600 15px/1 var(--display); margin-bottom: 16px; color: #fff; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul a, .foot-bottom a { color: var(--soft); text-decoration: none; font-size: 15px; }
.footer ul a:hover, .foot-bottom a:hover { color: #fff; }
.client-login { display: inline-flex; gap: 8px; }
.client-login svg { width: 16px; height: 16px; }
.foot-bottom { margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--edge); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--dim); }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- header, menu, back to top (dark theme everywhere) ---------- */
.site-header.on-dark .nav-links a.active { background: rgba(255, 255, 255, .1); }
.menu-btn { display: none; }
.mobile-menu { display: none; }
@media (max-width: 980px) {
  .nav-links, .nav-actions .btn { display: none; }
  .menu-btn { display: grid; }
  .mobile-menu { position: fixed; inset: 76px 0 auto 0; background: rgba(3, 11, 51, .97); border-bottom: 1px solid var(--edge); padding: 14px 16px 22px; }
  .mobile-menu.open { display: block; }
  .mobile-menu a { display: block; padding: 13px 14px; font-size: 18px; text-decoration: none; border-radius: 14px; color: #fff; }
  .mobile-menu a:hover { background: rgba(255, 255, 255, .06); }
  .mobile-menu .btn { width: 100%; margin-top: 12px; }
}
.to-top { position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--edge-2); background: rgba(5, 15, 69, .9); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .3s; z-index: 30; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top svg { width: 20px; height: 20px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #030b33; padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 12px; }
@media (max-width: 640px) { .section { padding: 84px 0; } .container { padding: 0 16px; } }

@media (prefers-reduced-motion: reduce) {
  .brand-ring, .orbit, .orb-in, .medal { animation: none !important; }
  .tilt, .case, .plane { transform: none !important; }
}
/* sections are see-through so the 3D space shows behind every chapter */
.section, .section.alt, .brands, .logos, .footer { background-color: transparent; }
.brands { position: relative; z-index: 1; }
/* brand ring: pushed back so the front logo sits at normal size, inside its stage */
.ring-stage { height: 300px; perspective: 1600px; }
@keyframes ringTurn2 { from { transform: translateZ(calc(var(--r) * -1)) rotateX(-6deg) rotateY(0); } to { transform: translateZ(calc(var(--r) * -1)) rotateX(-6deg) rotateY(-360deg); } }
.brand-ring { animation: ringTurn2 40s linear infinite; }
.brand-ring { --r: 460px; width: 210px; height: 108px; }
@media (max-width: 640px) { .brand-ring { --r: 260px; width: 150px; height: 80px; } .ring-stage { height: 200px; } }

/* calmer motion */
.brand-ring { animation-duration: 70s; }
.medal { animation: none; }
.orbit, .orb-in { animation-duration: 45s; }
.svc-card.gone { transform: translate3d(-40px, 0, 0); opacity: 0; }

/* chapter rail: a slim progress line with dots; the name shows for the current chapter and on hover */
.rail { right: 26px; gap: 0; padding: 6px 0; }
.rail::before { left: auto; right: 4px; top: 10px; bottom: 10px; width: 2px; background: rgba(150, 185, 255, .18); border-radius: 2px; }
.rail a { all: unset; position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 30px; cursor: pointer; }
.rail a i { width: 10px; height: 10px; border-radius: 50%; background: #0b1a5c; border: 2px solid rgba(150, 185, 255, .45); transition: all .25s; }
.rail a span { font: 500 12.5px/1 var(--font); color: #fff; padding: 6px 10px; border-radius: 8px; background: rgba(5, 15, 69, .9); border: 1px solid var(--edge);
  opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; white-space: nowrap; pointer-events: none; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: none; }
.rail a.on i { background: var(--orange); border-color: var(--orange); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(253, 120, 1, .18); }
.rail a.on span { opacity: 1; transform: none; color: #ffc07a; }

/* contact: calm and direct, no glow */
.contact2 { padding: 130px 0; }
.c2-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 80px; align-items: start; }
.c2-kicker { font: 600 13px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; }
.c2-left h2 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; color: #fff; margin-bottom: 20px; }
.c2-intro { color: var(--soft); font-size: 18px; max-width: 460px; }
.c2-mail { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; font: 600 clamp(22px, 2.2vw, 30px)/1.2 var(--display); color: #fff; text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 6px; }
.c2-mail svg { width: 22px; height: 22px; color: var(--orange); transition: transform .2s; }
.c2-mail:hover svg { transform: translateX(5px); }
.c2-facts { margin: 44px 0 0; display: grid; gap: 0; border-top: 1px solid var(--edge); }
.c2-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--edge); }
.c2-facts dt { color: var(--dim); font-size: 14px; }
.c2-facts dd { margin: 0; color: #e7edff; font-size: 15px; }
.c2-facts a { color: #e7edff; }
.c2-form { background: #f6f7fb; color: #0b1440; border-radius: 22px; padding: 40px; display: grid; gap: 26px; }
.c2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.c2-field { display: grid; gap: 8px; }
.c2-field > span { font-size: 13.5px; font-weight: 600; color: #3a4466; }
.c2-field em { font-style: normal; font-weight: 400; color: #8a92ad; }
.c2-field input, .c2-field textarea { font: 400 16px/1.5 var(--font); color: #0b1440; background: transparent; border: 0; border-bottom: 1.5px solid #c9cfe2; border-radius: 0; padding: 8px 0 10px; resize: vertical; }
.c2-field input:focus, .c2-field textarea:focus { outline: none; border-bottom-color: #1636c4; }
.c2-field textarea::placeholder { color: #9aa2bd; }
.c2-needs { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c2-needs legend { font-size: 13.5px; font-weight: 600; color: #3a4466; margin-bottom: 10px; padding: 0; }
.c2-needs label { cursor: pointer; }
.c2-needs input { position: absolute; opacity: 0; pointer-events: none; }
.c2-needs span { display: inline-block; padding: 8px 14px; border-radius: 8px; border: 1.5px solid #d6dbea; font-size: 14px; color: #3a4466; transition: all .15s; }
.c2-needs input:checked + span { background: #0b1440; border-color: #0b1440; color: #fff; }
.c2-needs input:focus-visible + span { outline: 2px solid #1636c4; outline-offset: 2px; }
.c2-send { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.c2-btn { font: 600 16px/1 var(--font); color: #fff; background: #0b1440; border: 0; border-radius: 10px; padding: 16px 28px; cursor: pointer; transition: background .2s; }
.c2-btn:hover { background: #1636c4; }
.c2-btn:disabled { opacity: .6; cursor: wait; }
.c2-send .form-status { margin: 0; color: #14805a; font-size: 14.5px; }
.c2-send .form-status.err { color: #c0392b; }
@media (max-width: 900px) { .c2-grid { grid-template-columns: 1fr; gap: 50px; } .c2-form { padding: 28px 22px; } .c2-row { grid-template-columns: 1fr; } }
.rail a, .rail a.on, .rail a:hover { width: 14px; height: 30px; justify-content: center; border: 0; background: none; box-shadow: none; padding: 0; min-width: 0; }
.rail::before { right: 6px; }
.rail a span { position: absolute; right: 26px; top: 50%; translate: 0 -50%; }

/* ---------- a different background for every chapter ---------- */
#brands   { background: #ffffff; }
#products { background: linear-gradient(180deg, #0a1d6b, #061352); }
#services { background: #fff6ea; }
#work     { background: linear-gradient(180deg, #04203a, #031629); }
#process  { background: #eef2ff; }
#team     { background: linear-gradient(180deg, #150a3a, #0c0628); }
#faq      { background: #ffffff; }
#contact  { background: #030b33; }
#brands, #services, #process, #faq { color: #0b1440; }

/* text on the light chapters */
:is(#brands, #services, #process, #faq) :is(h2, h3, .sec-head h2) { color: #0b1440; }
:is(#brands, #services, #process, #faq) :is(.sec-head > p, .brands-title, .pstep p, .faq details p) { color: #4a5478; }
:is(#brands, #services, #process, #faq) .bridge { color: #5b6690; }
:is(#brands, #services, #process, #faq) .chapter { color: #d9620a; }
#brands .ring-item { background: #f4f6fb; box-shadow: 0 14px 30px -16px rgba(11, 20, 64, .35); }
#services .svc-tab { background: #fff; border-color: #ecd9c2; color: #4a5478; }
#services .svc-tab:hover { color: #0b1440; border-color: #e0bf98; }
#services .svc-tab[aria-selected="true"] { background: #0b1440; border-color: #0b1440; color: #fff; box-shadow: none; }
#services .svc-card h3 { color: #fff; }
#process .pstep h3 { color: #0b1440; }
#process .plane::before { box-shadow: none; }
#faq .faq details { background: #f4f6fb; border-color: #e3e7f2; }
#faq .faq details[open] { background: #eef2ff; border-color: #c9d3f5; }
#faq .faq summary { color: #0b1440; }
#faq .pm { background: #fff; color: #0b1440; }
#faq .faq details[open] .pm { background: var(--orange); color: #fff; }
/* soft seam between chapters */
.section, .brands { position: relative; }

/* case study timeline: numbers sit on the line, outside the cards */
.timeline { padding-left: 0; gap: 26px; }
.timeline::before { left: 27px; top: 34px; bottom: 34px; width: 2px; background: linear-gradient(var(--orange), #3d8bff); opacity: .7; }
.tl { margin-left: 80px; padding: 26px 32px; }
.tl .pin { left: -80px; top: 22px; width: 56px; height: 56px; border-radius: 50%; font-size: 22px; box-shadow: 0 0 0 6px #030b33, 0 10px 24px -8px #000; transform: none; }
.tl:nth-child(2) .pin { background: linear-gradient(145deg, #ffa024, #d9520a); }
.tl:nth-child(3) .pin { background: linear-gradient(145deg, #18c0a8, #0b8a78); }
@media (max-width: 640px) { .tl { margin-left: 56px; padding: 22px; } .tl .pin { left: -56px; width: 42px; height: 42px; font-size: 18px; } .timeline::before { left: 20px; } }

/* ---------- contact as a letter you fill in ---------- */
#contact.letter-sec { background: radial-gradient(70% 90% at 85% 10%, rgba(253, 120, 1, .18), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(61, 139, 255, .22), transparent 60%), #030b33; padding: 140px 0 110px; }
.letter-kicker { font: 600 13px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: #ffc07a; margin-bottom: 34px; display: flex; align-items: center; gap: 12px; }
.letter-kicker::before { content: ""; width: 40px; height: 2px; background: var(--orange); }
.letter { max-width: 1080px; font: 600 clamp(26px, 3.1vw, 46px)/1.5 var(--display); color: #fff; }
.l-line { margin: 0 0 .35em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.l-in { display: inline-block; vertical-align: baseline; }
.l-in input { font: inherit; color: #ffc07a; background: transparent; border: 0; border-bottom: 3px solid rgba(255, 255, 255, .25); padding: 0 4px 2px; transition: border-color .2s; }
.l-in input::placeholder { color: rgba(195, 205, 240, .38); }
.l-in input:focus { outline: none; border-bottom-color: var(--orange); }
.w-md input { width: 9.5em; } .w-lg input { width: 12em; }
.l-chips { display: inline; }
.l-chips label { display: inline-block; cursor: pointer; margin: 0 .12em .2em 0; }
.l-chips input { position: absolute; opacity: 0; pointer-events: none; }
.l-chips span { display: inline-block; font-size: .55em; line-height: 1; padding: .55em .9em; border-radius: 999px; border: 2px dashed rgba(255, 255, 255, .3); color: rgba(225, 232, 255, .75); vertical-align: middle; transition: all .2s; }
.l-chips label:hover span { border-color: rgba(255, 192, 122, .7); color: #fff; }
.l-chips input:checked + span { border-style: solid; border-color: var(--orange); background: var(--orange); color: #fff; transform: rotate(-2deg); }
.l-chips input:focus-visible + span { outline: 3px solid #ffc07a; outline-offset: 2px; }
.l-area { display: block; margin: .1em 0 .5em; }
.l-area textarea { width: 100%; font: 500 clamp(18px, 1.6vw, 24px)/1.6 var(--font); color: #ffc07a; background: rgba(255, 255, 255, .03);
  border: 0; border-left: 3px solid var(--orange); border-radius: 0 14px 14px 0; padding: 14px 20px; resize: vertical; min-height: 120px; }
.l-area textarea::placeholder { color: rgba(195, 205, 240, .38); }
.l-area textarea:focus { outline: none; background: rgba(255, 255, 255, .06); }
.l-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 30px; }
.l-btn { display: inline-flex; align-items: center; gap: 12px; font: 600 18px/1 var(--font); color: #fff; border: 0; border-radius: 999px; padding: 20px 34px; cursor: pointer;
  background: linear-gradient(180deg, #ffb23a, #fd7801 60%, #f06a00); box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 6px 0 #b84d00, 0 8px 0 #8a3800, 0 18px 30px -8px rgba(253, 120, 1, .6);
  transform: translateY(-3px); transition: transform .12s, box-shadow .12s; }
.l-btn svg { width: 18px; height: 18px; }
.l-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 1px 0 #b84d00, 0 2px 0 #8a3800, 0 6px 12px -4px rgba(253, 120, 1, .5); }
.l-btn:disabled { opacity: .6; cursor: wait; }
.l-foot .form-status { margin: 0; font: 500 16px/1.4 var(--font); color: #6ef0b0; }
.l-foot .form-status.err { color: #ff9a8a; }
.letter-meta { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 70px; padding-top: 28px; border-top: 1px solid var(--edge); font-size: 15px; color: var(--soft); }
.letter-meta a, .letter-meta span { display: inline-flex; align-items: center; gap: 10px; color: var(--soft); text-decoration: none; }
.letter-meta a:hover { color: #fff; }
.letter-meta svg { width: 18px; height: 18px; color: #ffc07a; }
@media (max-width: 640px) { .w-md input, .w-lg input { width: 100%; } .l-in { display: block; } }
.letter { font-size: clamp(24px, 2.6vw, 40px); }
.w-md input { width: 8.5em; }

/* team: the six disciplines are the feature */
#team .sec-head { margin-bottom: 60px; }
.disc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.disc { position: relative; padding: 32px 30px 30px; border-radius: 26px; background: linear-gradient(160deg, rgba(60, 40, 140, .45), rgba(20, 10, 60, .75)); border: 1px solid rgba(170, 150, 255, .2); }
.disc:hover { border-color: rgba(255, 178, 31, .45); }
.disc-ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; margin-bottom: 22px;
  background: linear-gradient(145deg, #2a55e6, #0f2a8a); box-shadow: 0 14px 28px -12px rgba(42, 85, 230, .9); transform: translateZ(30px); }
.disc:nth-child(even) .disc-ic { background: linear-gradient(145deg, #ffa024, #d9520a); box-shadow: 0 14px 28px -12px rgba(253, 120, 1, .9); }
.disc-ic svg { width: 26px; height: 26px; }
.disc h3 { font-size: 21px; line-height: 1.25; margin-bottom: 10px; color: #fff; }
.disc p { color: #c4bde8; font-size: 15.5px; }
#team .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 60px; }
@media (max-width: 980px) { .disc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .disc-grid, #team .stats { grid-template-columns: 1fr; } }

.svc-eg { margin: -10px 0 24px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border-left: 3px solid var(--orange); color: var(--soft); font-size: 14.5px; }
.svc-eg b { color: #ffc07a; margin-right: 4px; }
.svc-stage { height: 500px; }
.page-hero h1 { text-shadow: none; }

/* ---------- richer product and case pages ---------- */
.get { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border-radius: 14px; background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .28); transition: transform .15s, border-color .15s; }
.store:hover { transform: translateY(-2px); border-color: #fff; }
.store svg { width: 26px; height: 26px; }
.store span { display: grid; font: 600 18px/1.1 var(--font); }
.store small { font: 400 11px/1.2 var(--font); opacity: .8; }
.store.soon { opacity: .62; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.platforms span { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--edge); color: var(--soft); }
.hl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.hl { padding: 26px; border-radius: 22px; background: rgba(255, 255, 255, .04); border: 1px solid var(--edge); }
.hl b { display: block; font: 700 46px/1 var(--display); background: linear-gradient(180deg, #ffe0a0, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl span { display: block; margin-top: 8px; color: var(--soft); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 900px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 26px; background: linear-gradient(160deg, rgba(36, 62, 150, .5), rgba(10, 20, 70, .85)); border: 1px solid var(--edge); }
.plan.best { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 30px 60px -30px rgba(253, 120, 1, .5); }
.plan.best::before { content: "Most popular"; position: absolute; top: -12px; left: 26px; font: 600 12px/1 var(--font); padding: 6px 10px; border-radius: 999px; background: var(--orange); color: #fff; }
.plan h3 { font-size: 22px; }
.price b { font: 700 44px/1 var(--display); color: #fff; }
.price b.tbc { font-size: 26px; color: #ffc07a; }
.price small { margin-left: 8px; color: var(--soft); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; }
.plan li { display: flex; gap: 10px; align-items: flex-start; color: #e3e9ff; }
.plan li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: #6ef0b0; }
.plan .btn { justify-content: center; }
.plan-note { color: var(--dim); font-size: 13px; }
.note { display: flex; gap: 16px; align-items: flex-start; padding: 22px 26px; border-radius: 20px; background: rgba(110, 240, 176, .06); border: 1px solid rgba(110, 240, 176, .2); max-width: 900px; }
.note svg { width: 24px; height: 24px; flex: none; color: #6ef0b0; margin-top: 2px; }
.note p { color: var(--soft); }
.quote { margin: 0; max-width: 900px; font: 600 clamp(22px, 2.4vw, 32px)/1.4 var(--display); color: #fff; }
.quote cite { display: block; margin-top: 14px; font: 500 15px/1 var(--font); color: #ffc07a; font-style: normal; }

/* calmer hero: no card-to-card links, quiet hint, rail appears once the story starts */
.strand.thin { display: none; }
.device-hint { color: rgba(210, 222, 255, .38); transition: opacity .6s; }
.device-hint.used { opacity: 0; }
.device:not(.is-on) .device-hint.used { opacity: 1; }
.rail { transition: opacity .4s; }
.at-hero .rail { opacity: 0; pointer-events: none; }

.strand-dot { transition: opacity .25s; }
.strand-node.ping { animation: nodePing .5s ease-out; }
@keyframes nodePing { 0% { r: 5; } 50% { r: 9; } 100% { r: 5; } }

/* ---------- client area (inside How we work) ---------- */
#client-area { background: #eef2ff; padding-top: 30px; color: #0b1440; }
.ca-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 70px; align-items: center; padding: 50px; border-radius: 32px; background: #fff; box-shadow: 0 30px 70px -40px rgba(11, 20, 64, .45); }
#client-area .chapter { color: #d9620a; }
.ca-copy h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; margin: 12px 0 14px; color: #0b1440; }
.ca-text { color: #4a5478; font-size: 17px; }
.ca-list { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.ca-list li { display: flex; gap: 12px; align-items: flex-start; }
.ca-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #eef2ff; color: #1636c4; }
.ca-list li:nth-child(even) .ca-ic { background: #fff1e4; color: #d9620a; }
.ca-ic svg { width: 20px; height: 20px; }
.ca-list b { display: block; font-size: 15px; color: #0b1440; }
.ca-list small { color: #5b6690; font-size: 13.5px; line-height: 1.45; display: block; }
.ca-mock { perspective: 1200px; }
.ca-win { border-radius: 18px; overflow: hidden; background: #f6f7fb; border: 1px solid #dfe3ef; box-shadow: 0 40px 80px -30px rgba(11, 20, 64, .5); transform: perspective(1200px) rotateY(-8deg) rotateX(4deg); }
.ca-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #e8ebf4; }
.ca-top i { width: 10px; height: 10px; border-radius: 50%; background: #cfd4e3; }
.ca-top span { margin-left: 12px; font-size: 12px; color: #5b6690; background: #fff; padding: 3px 12px; border-radius: 8px; }
.ca-body { display: grid; grid-template-columns: 130px 1fr; min-height: 330px; }
.ca-body aside { background: #0b1440; color: #c9d3f5; padding: 16px 10px; display: grid; gap: 4px; align-content: start; font-size: 12.5px; }
.ca-body aside b { color: #fff; font-size: 13px; margin: 0 6px 8px; }
.ca-body aside span { padding: 6px 8px; border-radius: 7px; }
.ca-body aside span.on { background: #fd7801; color: #fff; }
.ca-main { padding: 16px; display: grid; gap: 10px; align-content: start; }
.ca-h { font-weight: 600; font-size: 14px; color: #0b1440; margin: 0; }
.ca-card { background: #fff; border-radius: 12px; padding: 12px 14px; border: 1px solid #e6e9f2; font-size: 12.5px; color: #0b1440; }
.ca-row { display: flex; justify-content: space-between; align-items: center; }
.ca-row em { font-style: normal; font-size: 11px; color: #14805a; background: #e6f7ef; padding: 3px 8px; border-radius: 999px; }
.ca-steps { display: flex; justify-content: space-between; margin: 12px 0 8px; font-size: 11px; color: #8a92ad; }
.ca-steps span { display: grid; justify-items: center; gap: 4px; }
.ca-steps i { width: 10px; height: 10px; border-radius: 50%; background: #dfe3ef; }
.ca-steps .done i { background: #1636c4; } .ca-steps .done { color: #0b1440; }
.ca-steps .now i { background: #fd7801; box-shadow: 0 0 0 4px rgba(253, 120, 1, .2); } .ca-steps .now { color: #d9620a; font-weight: 600; }
.ca-bar { height: 6px; border-radius: 3px; background: #eef1f8; overflow: hidden; }
.ca-bar i { display: block; height: 100%; background: linear-gradient(90deg, #1636c4, #fd7801); }
.ca-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ca-two small { display: block; color: #8a92ad; }
.ca-two b { display: block; font-size: 18px; margin: 2px 0 6px; }
.ca-pill { display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 999px; background: #fd7801; color: #fff; }
.ca-pill.ok { background: #e6f7ef; color: #14805a; }
.ca-msg { display: flex; gap: 10px; align-items: center; }
.ca-msg .av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #0b1440; color: #fff; font-size: 11px; font-weight: 700; }
.ca-msg b { display: block; } .ca-msg small { color: #5b6690; }
@media (max-width: 980px) { .ca-grid { grid-template-columns: 1fr; gap: 40px; padding: 30px 22px; } .ca-win { transform: none; } }
@media (max-width: 560px) { .ca-list { grid-template-columns: 1fr; } .ca-body { grid-template-columns: 1fr; } .ca-body aside { display: none; } }
.l-btn { text-decoration: none; }

.l-pick[hidden], #l-other[hidden] { display: none; }
.l-sel select { font: inherit; color: #ffc07a; background: transparent; border: 0; border-bottom: 3px solid rgba(255, 255, 255, .25); padding: 0 4px 2px; cursor: pointer; max-width: 11em; }
.l-sel select:focus { outline: none; border-bottom-color: var(--orange); }
.l-sel option { color: #0b1440; font: 500 16px var(--font); }

/* contact letter: calmer, regular type and simple filled fields */
.letter { font: 400 clamp(19px, 1.7vw, 24px)/2.1 var(--font); color: #d3dbf7; max-width: 980px; }
.l-line { margin: 0 0 .2em; }
.l-in input, .l-sel select { font: 500 .92em/1.3 var(--font); color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; padding: .35em .7em; vertical-align: middle; transition: border-color .2s, background .2s; }
.l-in input:focus, .l-sel select:focus { border-color: var(--orange); background: rgba(255, 255, 255, .1); }
.l-in input::placeholder { color: rgba(195, 205, 240, .5); }
.l-sel select { max-width: 13em; }
.l-chips span { font: 500 .72em/1 var(--font); padding: .6em 1em; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; color: #c3cdf0; }
.l-chips input:checked + span { border-color: var(--orange); background: rgba(253, 120, 1, .18); color: #fff; transform: none; }
.l-area textarea { font: 400 17px/1.6 var(--font); color: #fff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-left: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; }
.l-area textarea:focus { border-color: var(--orange); }
.letter-kicker { margin-bottom: 18px; }
#contact .letter-sec h2, .letter-title { font: 700 clamp(30px, 3.2vw, 44px)/1.1 var(--display); color: #fff; margin: 0 0 26px; }
.w-md input { width: 9.5em; }

/* work: cover photos and gallery */
.shot.cover { position: relative; aspect-ratio: 16 / 10; }
.shot.cover > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cover-logo { position: absolute; left: 18px; bottom: 18px; display: grid; place-items: center; width: 150px; height: 74px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 12px 28px -10px #000; }
.cover-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.case-logo.has-cover { position: relative; padding: 0; overflow: hidden; }
.case-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s; }
.case:hover .case-cover { transform: scale(1.04); }
.plate.small { position: absolute; left: 18px; bottom: 18px; width: 150px; aspect-ratio: auto; height: 74px; padding: 10px 14px; border-radius: 14px; transform: none; }
.case:hover .plate.small { transform: none; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.g-item { position: relative; padding: 0; border: 1px solid var(--edge); border-radius: 18px; overflow: hidden; cursor: zoom-in; background: #071447; aspect-ratio: 16 / 10; }
.g-item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .5s; }
.g-item:hover img { transform: scale(1.05); }
.g-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; text-align: left; font: 500 14px/1.3 var(--font); color: #fff; background: linear-gradient(transparent, rgba(3, 11, 51, .9)); }
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; background: rgba(2, 6, 30, .92); padding: 30px 10px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { max-width: 100%; max-height: 80vh; border-radius: 14px; box-shadow: 0 30px 80px #000; }
.lightbox figcaption { margin-top: 14px; color: #c3cdf0; }
.lightbox button { background: none; border: 0; color: #fff; font-size: 44px; cursor: pointer; }
.lb-close { position: absolute; top: 14px; right: 22px; }

.has-logo { background: #fff !important; }
.has-logo img { width: 78%; height: auto; object-fit: contain; }

/* current menu link in orange */
.site-header .nav-links a.active, .site-header.on-dark .nav-links a.active, .site-header .nav-links a[aria-current="page"] { background: none; color: var(--orange); }
.site-header .nav-links a { position: relative; }
.site-header .nav-links a.active::after, .site-header .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--orange); }
.mobile-menu a[aria-current="page"] { color: var(--orange); }

/* current menu link: a soft glowing pill instead of an underline */
.site-header .nav-links a.active::after, .site-header .nav-links a[aria-current="page"]::after { display: none; }
.site-header .nav-links a { transition: color .2s, background .2s; }
.site-header .nav-links a.active, .site-header.on-dark .nav-links a.active, .site-header .nav-links a[aria-current="page"] {
  color: #fff; background: rgba(253, 120, 1, .16); box-shadow: inset 0 0 0 1px rgba(253, 120, 1, .45), 0 0 18px -6px rgba(253, 120, 1, .6); }
.site-header .nav-links a.active::before, .site-header .nav-links a[aria-current="page"]::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); vertical-align: middle; transform: translateY(-1px); }
.site-header .nav-links a.active::before, .site-header .nav-links a[aria-current="page"]::before { display: none; }
/* card logo badge sits clear of the tagline */
.pcard .tagline { padding-right: 70px; }
.pcard.featured .pcard-in { padding-top: 34px; }
.glyph { top: -26px; }
.pcard.featured .glyph { top: 20px; right: 22px; }
.pcard.featured .tagline { padding-right: 74px; }

/* ---------- menu: hidden behind a fancy hamburger, opens a full-screen panel ---------- */
.nav-links, .mobile-menu, .menu-btn { display: none !important; }
.nav-actions { gap: 14px; }
.burger { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px 0 14px; border-radius: 999px; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s, border-color .3s; z-index: 210; overflow: hidden; }
.burger:hover { border-color: rgba(253, 120, 1, .7); background: rgba(253, 120, 1, .12); }
.burger-ring { position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 70%, #fd7801 82%, #ffb21f 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: burgerSpin 3.2s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes burgerSpin { to { --a: 360deg; } }
.burger-lines { position: relative; width: 22px; height: 14px; }
.burger-lines i { position: absolute; left: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s cubic-bezier(.7, 0, .2, 1), width .35s, top .35s, opacity .25s; }
.burger-lines i:nth-child(1) { top: 0; width: 22px; }
.burger-lines i:nth-child(2) { top: 6px; width: 15px; background: #fd7801; }
.burger-lines i:nth-child(3) { top: 12px; width: 9px; }
.burger:hover .burger-lines i { width: 22px; }
.burger-label { font: 600 14px/1 var(--font); letter-spacing: .06em; position: relative; }
.menu-open .burger-lines i:nth-child(1) { top: 6px; width: 22px; transform: rotate(45deg); }
.menu-open .burger-lines i:nth-child(2) { opacity: 0; transform: translateX(10px); }
.menu-open .burger-lines i:nth-child(3) { top: 6px; width: 22px; transform: rotate(-45deg); }
.menu-panel { position: fixed; inset: 0; z-index: 200; display: grid; align-items: center; padding: 110px 0 60px; overflow: auto;
  background: radial-gradient(60% 70% at 85% 15%, rgba(253, 120, 1, .18), transparent 60%), radial-gradient(60% 70% at 10% 90%, rgba(61, 139, 255, .25), transparent 60%), #030b33;
  clip-path: circle(0 at calc(100% - 70px) 38px); transition: clip-path .75s cubic-bezier(.7, 0, .2, 1); visibility: hidden; }
.menu-open .menu-panel { clip-path: circle(150vmax at calc(100% - 70px) 38px); visibility: visible; }
.menu-open { overflow: hidden; }
.menu-open .site-header { background: transparent !important; backdrop-filter: none !important; border-color: transparent !important; z-index: 220; }
.mp-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 60px; align-items: end; }
.mp-links { display: grid; gap: 4px; }
.mp-links a { display: flex; align-items: baseline; gap: 18px; font: 700 clamp(34px, 5.2vw, 72px)/1.08 var(--display); color: #fff; text-decoration: none;
  opacity: 0; transform: translateY(30px); transition: color .2s, opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: 0s; }
.menu-open .mp-links a { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .05s); }
.mp-links a:hover, .mp-links a[aria-current="page"] { color: #fd7801; }
.mp-links a:hover .mp-n { color: #fd7801; }
.mp-n { font: 600 14px/1 ui-monospace, Consolas, monospace; color: rgba(195, 205, 240, .5); transform: translateY(-.9em); transition: color .2s; }
.mp-side { display: grid; gap: 16px; justify-items: start; padding-bottom: 10px; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s; }
.menu-open .mp-side { opacity: 1; transform: none; transition-delay: .6s; }
.mp-k { font: 600 12.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #ffc07a; margin: 0; }
.mp-mail { font: 600 22px/1.3 var(--display); color: #fff; text-decoration: none; border-bottom: 2px solid rgba(253, 120, 1, .6); }
.mp-login { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); text-decoration: none; font-size: 15px; }
.mp-login:hover { color: #fff; }
.mp-login svg { width: 16px; height: 16px; }
@media (max-width: 820px) { .mp-grid { grid-template-columns: 1fr; gap: 40px; } .burger-label { display: none; } .burger { padding: 0 13px; } .nav-actions .btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .burger-ring { animation: none; } .menu-panel { transition: none; } }

/* menu button v2: a raised round button with a 3x3 dot grid that folds into an X */
.burger { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.burger2 { position: relative; z-index: 210; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: radial-gradient(120% 120% at 30% 20%, #2f4fd6, #12226e 60%, #0a1446);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 8px rgba(0,0,0,.35) inset, 0 5px 0 #070d33, 0 7px 0 #040822, 0 14px 22px -6px rgba(42,85,230,.7);
  transform: translateY(-3px); transition: transform .12s, box-shadow .12s; }
.burger2:hover { transform: translateY(-4px); }
.burger2:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 1px 0 #070d33, 0 2px 0 #040822, 0 6px 10px -4px rgba(42,85,230,.6); }
.b2-dots { position: relative; width: 20px; height: 20px; }
.b2-dots i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; transition: transform .45s cubic-bezier(.7,0,.2,1), background .3s, opacity .3s; }
.b2-dots i:nth-child(1) { left: 0; top: 0; } .b2-dots i:nth-child(2) { left: 7.5px; top: 0; } .b2-dots i:nth-child(3) { left: 15px; top: 0; }
.b2-dots i:nth-child(4) { left: 0; top: 7.5px; } .b2-dots i:nth-child(5) { left: 7.5px; top: 7.5px; background: #fd7801; box-shadow: 0 0 8px #fd7801; } .b2-dots i:nth-child(6) { left: 15px; top: 7.5px; }
.b2-dots i:nth-child(7) { left: 0; top: 15px; } .b2-dots i:nth-child(8) { left: 7.5px; top: 15px; } .b2-dots i:nth-child(9) { left: 15px; top: 15px; }
.burger2:hover .b2-dots i { animation: dotWave .6s ease-in-out; }
.burger2:hover .b2-dots i:nth-child(2), .burger2:hover .b2-dots i:nth-child(4) { animation-delay: .06s; }
.burger2:hover .b2-dots i:nth-child(3), .burger2:hover .b2-dots i:nth-child(5), .burger2:hover .b2-dots i:nth-child(7) { animation-delay: .12s; }
.burger2:hover .b2-dots i:nth-child(6), .burger2:hover .b2-dots i:nth-child(8) { animation-delay: .18s; }
.burger2:hover .b2-dots i:nth-child(9) { animation-delay: .24s; }
@keyframes dotWave { 50% { transform: scale(1.6); background: #ffb21f; } }
/* open: the corner dots slide to the middle diagonals to form an X, edge dots fade */
.menu-open .burger2 { background: radial-gradient(120% 120% at 30% 20%, #ffb23a, #fd7801 60%, #c45200); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 5px 0 #a34400, 0 7px 0 #7a3300, 0 14px 22px -6px rgba(253,120,1,.7); }
.menu-open .b2-dots i { background: #fff; box-shadow: none; animation: none; }
.menu-open .b2-dots i:nth-child(2), .menu-open .b2-dots i:nth-child(4), .menu-open .b2-dots i:nth-child(6), .menu-open .b2-dots i:nth-child(8) { opacity: 0; transform: scale(0); }
.menu-open .b2-dots i:nth-child(1) { transform: translate(3px, 3px); } .menu-open .b2-dots i:nth-child(3) { transform: translate(-3px, 3px); }
.menu-open .b2-dots i:nth-child(7) { transform: translate(3px, -3px); } .menu-open .b2-dots i:nth-child(9) { transform: translate(-3px, -3px); }
.menu-open .b2-dots i:nth-child(5) { transform: scale(1.3); }
.menu-open .b2-dots::before, .menu-open .b2-dots::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2.5px; border-radius: 2px; background: #fff; translate: -50% -50%; }
.menu-open .b2-dots::before { rotate: 45deg; } .menu-open .b2-dots::after { rotate: -45deg; }
.menu-open .b2-dots i { opacity: 0 !important; }
/* cable plug on the monitor edge */
.strand-node.hot { r: 6; fill: #fd7801; stroke: #ffd9a8; stroke-width: 2.5; filter: drop-shadow(0 0 8px #fd7801); }

/* menu button: flat, pinned under "Start a project" on the right */
.burger2 { position: fixed; top: 88px; right: clamp(20px, 4vw, 72px); width: 46px; height: 46px; transform: none !important;
  background: rgba(10, 20, 70, .72); border: 1px solid rgba(150, 185, 255, .28); box-shadow: none !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .25s, border-color .25s; }
.burger2:hover { background: rgba(20, 40, 120, .85); border-color: rgba(253, 120, 1, .6); transform: none !important; }
.burger2:active { transform: none !important; }
.menu-open .burger2 { background: #fd7801; border-color: #fd7801; box-shadow: none !important; }
.b2-dots { width: 18px; height: 18px; }
.b2-dots i { width: 4px; height: 4px; }
.b2-dots i:nth-child(2), .b2-dots i:nth-child(5), .b2-dots i:nth-child(8) { left: 7px; }
.b2-dots i:nth-child(3), .b2-dots i:nth-child(6), .b2-dots i:nth-child(9) { left: 14px; }
.b2-dots i:nth-child(4), .b2-dots i:nth-child(5), .b2-dots i:nth-child(6) { top: 7px; }
.b2-dots i:nth-child(7), .b2-dots i:nth-child(8), .b2-dots i:nth-child(9) { top: 14px; }
.b2-dots i:nth-child(5) { box-shadow: none; }
@media (min-width: 1081px) and (max-height: 820px) { .burger2 { top: 80px; } }

/* menu icon: three lines, right-aligned and different lengths; they meet as an X when open */
.b3-lines { position: relative; width: 20px; height: 14px; }
.b3-lines i { position: absolute; right: 0; height: 2px; border-radius: 2px; background: #fff; transition: transform .4s cubic-bezier(.7,0,.2,1), width .3s, top .3s, opacity .2s, background .3s; }
.b3-lines i:nth-child(1) { top: 0; width: 20px; }
.b3-lines i:nth-child(2) { top: 6px; width: 14px; background: #fd7801; }
.b3-lines i:nth-child(3) { top: 12px; width: 9px; }
.burger2:hover .b3-lines i { width: 20px; }
.menu-open .b3-lines i:nth-child(1) { top: 6px; width: 20px; transform: rotate(45deg); }
.menu-open .b3-lines i:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.menu-open .b3-lines i:nth-child(3) { top: 6px; width: 20px; transform: rotate(-45deg); }
/* menu: no circle, bigger lines */
.burger2, .burger2:hover, .menu-open .burger2 { background: none !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; width: 52px; height: 52px; }
.b3-lines { width: 34px; height: 22px; }
.b3-lines i { height: 3px; }
.b3-lines i:nth-child(1) { width: 34px; }
.b3-lines i:nth-child(2) { top: 9.5px; width: 24px; }
.b3-lines i:nth-child(3) { top: 19px; width: 15px; }
.burger2:hover .b3-lines i { width: 34px; }
.menu-open .b3-lines i:nth-child(1), .menu-open .b3-lines i:nth-child(3) { top: 9.5px; width: 32px; background: #fd7801; }
.b3-lines i { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
/* phones and tablets: no cable between the laptop and the product box (they stack, so it just crosses the page) */
@media (max-width: 1080px) { .web { display: none !important; } }

/* wifi broadcast instead of a cable */
.strand.hot, .strand-glow.hot, .strand-dot.hot { display: none; }
.wave { fill: none; stroke: #7fb2ff; stroke-linecap: round; filter: drop-shadow(0 0 6px #3d8bff); }
.wave:nth-of-type(odd) { stroke: #9cc3ff; }
.wifi-src circle { fill: #fff; filter: drop-shadow(0 0 6px #7fb2ff); }
.wifi-src path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .85; }
.strand-node.hot { r: 5; fill: #0b1a5c; stroke: #8fb8ff; stroke-width: 2; filter: drop-shadow(0 0 8px #3d8bff); }
.strand-node.hot.ping { fill: #fd7801; stroke: #ffd9a8; }
.wifi-src { display: none; }

/* cookie bar */
.cookie-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 250; width: min(980px, calc(100% - 28px)); padding: 16px 18px; border-radius: 18px;
  background: rgba(6, 12, 48, .96); border: 1px solid rgba(150, 185, 255, .25); box-shadow: 0 30px 60px -20px #000; color: #d3dbf7; backdrop-filter: blur(12px); }
.cookie-bar[hidden] { display: none; }
.cb-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cb-main p { flex: 1 1 360px; margin: 0; font-size: 14.5px; line-height: 1.5; }
.cb-main a { color: #ffc07a; }
.cb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-btn { font: 600 14px/1 var(--font); padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer; background: #fd7801; color: #fff; }
.cb-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.cb-btn:hover { filter: brightness(1.08); }
.cb-more { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(150, 185, 255, .18); }
.cb-more[hidden] { display: none; }
.cb-opt { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.cb-opt input { margin-top: 4px; accent-color: #fd7801; width: 18px; height: 18px; }
.cb-opt b { color: #fff; margin-right: 6px; }
.cb-more .cb-btn { justify-self: start; }
.fb-links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.cb-reopen { background: none; border: 0; padding: 0; font: inherit; color: var(--soft); cursor: pointer; font-size: 15px; }
.cb-reopen:hover { color: #fff; }
/* legal pages */
.legal { max-width: 820px; }
.legal h2 { font-size: 24px; margin: 34px 0 10px; color: #fff; }
.legal p { color: #c8d1ee; font-size: 16.5px; line-height: 1.75; }
.legal-date { margin-top: 12px; color: var(--dim); font-size: 14px; }
.legal-contact { margin-top: 40px; }
.legal-contact a { color: #ffc07a; }

/* ---------- AI assistant chat ---------- */
.ba-chat { position: fixed; right: 20px; bottom: 20px; z-index: 240; font-family: var(--font); }
.to-top { bottom: 92px; }
.bc-launch { position: relative; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 20px 0 8px; border-radius: 999px; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #2a55e6, #12226e); box-shadow: 0 14px 30px -10px rgba(42, 85, 230, .8), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s; }
.bc-launch:hover { transform: translateY(-2px); }
.bc-launch img { width: 42px; height: 42px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .12); object-fit: contain; }
.bc-label { font: 600 15px/1 var(--font); }
.bc-ping { position: absolute; top: 6px; left: 38px; width: 12px; height: 12px; border-radius: 50%; background: #fd7801; box-shadow: 0 0 0 0 rgba(253, 120, 1, .7); animation: bcPing 2s infinite; }
@keyframes bcPing { 70% { box-shadow: 0 0 0 10px rgba(253, 120, 1, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 120, 1, 0); } }
.ba-chat.open .bc-launch { display: none; }
.bc-panel { width: min(380px, calc(100vw - 24px)); height: min(600px, calc(100vh - 110px)); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: #f6f7fb; color: #0b1440; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(150, 185, 255, .25); animation: bcIn .35s cubic-bezier(.2, .8, .2, 1); }
.bc-panel[hidden] { display: none; }
@keyframes bcIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.bc-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #12226e, #030b33); color: #fff; }
.bc-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
.bc-av img { width: 26px; }
.bc-who { flex: 1; display: grid; line-height: 1.25; }
.bc-who b { font: 600 16px/1.2 var(--display); }
.bc-who small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #b7c3ee; }
.bc-who small i { width: 7px; height: 7px; border-radius: 50%; background: #34e3a0; }
.bc-close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.bc-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bc-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; background: #fff; box-shadow: 0 4px 14px -10px rgba(11, 20, 64, .4); word-wrap: break-word; }
.bc-msg.user { align-self: flex-end; background: #1636c4; color: #fff; border-bottom-right-radius: 5px; }
.bc-msg.bot { align-self: flex-start; border-bottom-left-radius: 5px; }
.bc-msg a { color: #1636c4; text-decoration: underline; }
.bc-msg.user a { color: #fff; }
.bc-msg.err { background: #fdecec; color: #8a2a1e; }
.bc-msg.typing { display: flex; gap: 4px; padding: 14px; }
.bc-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa2bd; animation: bcDot 1s infinite; }
.bc-msg.typing i:nth-child(2) { animation-delay: .15s; } .bc-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bcDot { 40% { transform: translateY(-4px); background: #1636c4; } }
.bc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bc-wa { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #25d366; color: #fff !important; font-weight: 600; font-size: 13.5px; text-decoration: none !important; }
.bc-tag { font-size: 12.5px; color: #14805a; background: #e6f7ef; padding: 6px 10px; border-radius: 999px; }
.bc-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.bc-quick button { border: 1px solid #d6dbea; background: #fff; color: #1636c4; border-radius: 999px; padding: 8px 12px; font: 500 13px/1 var(--font); cursor: pointer; }
.bc-quick button:hover { border-color: #1636c4; }
.bc-form { display: flex; gap: 8px; padding: 10px 12px; background: #fff; border-top: 1px solid #e6e9f2; }
.bc-form input { flex: 1; border: 1px solid #d6dbea; border-radius: 999px; padding: 11px 16px; font: 400 14.5px var(--font); color: #0b1440; background: #f6f7fb; }
.bc-form input:focus { outline: none; border-color: #1636c4; }
.bc-form button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fd7801; color: #fff; display: grid; place-items: center; cursor: pointer; }
.bc-form button svg { width: 18px; height: 18px; }
.bc-note { margin: 0; padding: 0 14px 10px; background: #fff; font-size: 11.5px; color: #8a92ad; }
.bc-note a { color: #8a92ad; }
@media (max-width: 640px) { .bc-label { display: none; } .bc-launch { padding: 0 8px; } .bc-panel { position: fixed; inset: 10px; width: auto; height: auto; } }
/* back button on inner pages */
.back-btn { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 9px 16px 9px 12px; border-radius: 999px; text-decoration: none; color: #fff; font: 500 14px/1 var(--font);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(150, 185, 255, .25); transition: background .2s, border-color .2s; }
.back-btn:hover { background: rgba(253, 120, 1, .16); border-color: rgba(253, 120, 1, .6); }
.back-btn svg { width: 15px; height: 15px; transform: rotate(180deg); transition: transform .2s; }
.back-btn:hover svg { transform: rotate(180deg) translateX(3px); }
/* BA logo dances on top of the idea bulb while the laptop is off */
.idea { overflow: visible; }
.idea-dance { position: absolute; left: 50%; bottom: calc(100% + 26px); width: 110px; translate: -50% 0; transform-origin: 50% 100%; animation: baDance 1.6s ease-in-out infinite; }
.idea-dance img { display: block; width: 100%; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(253, 120, 1, .55)); }
.idea-dance i { position: absolute; left: 50%; bottom: -14px; width: 60%; height: 8px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 80, .55), transparent); animation: baShadow 1.6s ease-in-out infinite; }
@keyframes baDance {
  0%, 100% { transform: translateY(0) rotate(0) scale(1, 1); }
  12% { transform: translateY(0) rotate(0) scale(1.12, .86); }
  30% { transform: translateY(-26px) rotate(-10deg) scale(.95, 1.06); }
  45% { transform: translateY(-30px) rotate(8deg) scale(1, 1); }
  60% { transform: translateY(0) rotate(0) scale(1.1, .88); }
  72% { transform: translateY(-12px) rotate(6deg) scale(1, 1.03); }
  86% { transform: translateY(0) rotate(-4deg) scale(1.04, .96); }
}
@keyframes baShadow { 0%, 60%, 100% { opacity: 1; transform: scaleX(1); } 30%, 45% { opacity: .4; transform: scaleX(.6); } 72% { opacity: .7; transform: scaleX(.8); } }
@media (prefers-reduced-motion: reduce) { .idea-dance, .idea-dance i { animation: none; } }
.idea-dance { display: none !important; }

/* thought bubble above the idea bulb */
.idea .think { display: none; }
.thought { position: absolute; left: 70%; bottom: 72%; width: 0; height: 0; pointer-events: none; }
.tb-dot { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); opacity: 0; animation: tbPop .5s cubic-bezier(.2, .9, .3, 1.4) forwards; }
.tb-dot.d1 { width: 9px; height: 9px; left: 4px; bottom: 0; animation-delay: .1s; }
.tb-dot.d2 { width: 14px; height: 14px; left: 18px; bottom: 16px; animation-delay: .25s; }
.tb-dot.d3 { width: 20px; height: 20px; left: 38px; bottom: 38px; animation-delay: .4s; }
.tb-cloud { position: absolute; left: 44px; bottom: 56px; display: block; min-width: 190px; max-width: 250px; padding: 14px 20px; border-radius: 26px; background: #fff; color: #0b1440;
  font: 600 14.5px/1.35 var(--font, Poppins, sans-serif); text-align: center; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .55), 0 0 30px rgba(255, 190, 80, .25);
  opacity: 0; transform-origin: 0 100%; animation: tbPop .55s .55s cubic-bezier(.2, .9, .3, 1.3) forwards, tbFloat 4s 1.2s ease-in-out infinite; }
/* soft puffs on the cloud edge */
.tb-cloud::before, .tb-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; z-index: -1; }
.tb-cloud::before { width: 46px; height: 46px; left: 18px; top: -16px; }
.tb-cloud::after { width: 58px; height: 58px; right: 22px; top: -22px; }
.tb-text { display: block; transition: opacity .35s, transform .35s; }
.tb-text.swap { opacity: 0; transform: translateY(6px); }
@keyframes tbPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes tbFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.idea:not(.show) .tb-dot, .idea:not(.show) .tb-cloud { animation: none; opacity: 0; }
@media (max-width: 640px) { .tb-cloud { min-width: 150px; font-size: 13px; padding: 10px 14px; } }
/* a real cloud shape: puffy outline drawn as an SVG behind the text */
.tb-cloud { background: none; box-shadow: none; border-radius: 0; width: 250px; height: 140px; min-width: 0; max-width: none; padding: 34px 40px 30px; display: grid; place-items: center;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)) drop-shadow(0 0 22px rgba(255, 190, 80, .22)); }
.tb-cloud::after { display: none; }
.tb-cloud::before { content: ""; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; left: 0; top: 0; border-radius: 0;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 140'%3E%3Cpath fill='%23fff' d='M62 120c-24 2-44-12-44-32 0-17 13-29 30-31-2-21 15-38 37-37 9-17 28-24 46-18 13-12 35-12 48 1 21-4 40 10 41 30 17 4 27 18 25 34-2 18-19 31-38 30-9 16-30 22-47 14-14 12-38 13-53 1-15 8-34 5-45-8z'/%3E%3C/svg%3E"); }
.tb-text { position: relative; max-width: 170px; }
@media (max-width: 640px) { .tb-cloud { width: 200px; height: 115px; padding: 28px 32px 24px; } }

/* cloud built from overlapping puffs; text sits in the solid middle */
.tb-cloud { width: 280px; height: 160px; padding: 0; display: block; left: 30px; bottom: 50px; }
.tb-cloud::before { inset: 0; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20280%20160%27%3E%3Cg%20fill%3D%27%23fff%27%3E%3Ccircle%20cx%3D%2778%27%20cy%3D%2778%27%20r%3D%2744%27/%3E%3Ccircle%20cx%3D%27132%27%20cy%3D%2756%27%20r%3D%2752%27/%3E%3Ccircle%20cx%3D%27192%27%20cy%3D%2768%27%20r%3D%2746%27/%3E%3Ccircle%20cx%3D%27232%27%20cy%3D%27100%27%20r%3D%2734%27/%3E%3Ccircle%20cx%3D%2748%27%20cy%3D%27108%27%20r%3D%2732%27/%3E%3Crect%20x%3D%2744%27%20y%3D%2784%27%20width%3D%27200%27%20height%3D%2758%27%20rx%3D%2729%27/%3E%3C/g%3E%3C/svg%3E"); }
.tb-text { position: absolute; left: 50px; right: 40px; top: 58px; bottom: 26px; max-width: none; display: grid; place-items: center; text-align: center; font: 600 15px/1.3 var(--font, Poppins, sans-serif); color: #0b1440; }
@media (max-width: 640px) { .tb-cloud { width: 224px; height: 128px; } .tb-text { left: 40px; right: 32px; top: 46px; bottom: 20px; font-size: 13px; } }
/* header button: flat, no raised edge */
.nav-actions .btn, .site-header.on-dark .nav-actions .btn-dark { transform: none !important; text-shadow: none;
  box-shadow: 0 8px 20px -10px rgba(253, 120, 1, .7) !important; background: #fd7801; }
.nav-actions .btn:hover { transform: none !important; background: #ff8a1f; box-shadow: 0 10px 24px -10px rgba(253, 120, 1, .85) !important; }
.nav-actions .btn:active { transform: none !important; background: #e96d00; }

/* the flat bulb picture is replaced by the 3D bulb; keep the rays and the cloud */
.idea svg { visibility: hidden; }
.idea-rays { inset: -46px; }
.idea svg { visibility: visible; }
.idea-rays { inset: -34px; }

/* client login: keep the text readable on its white hover */
.btn-ghost.client-login:hover, .btn-ghost.client-login:focus-visible { background: #fff; color: #031a63 !important; }
.btn-ghost.client-login:hover svg { color: #031a63; }
/* bot reply typing out */
.bc-msg.bot.typing-out::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #1636c4; animation: bcCaret .8s steps(1) infinite; }
@keyframes bcCaret { 50% { opacity: 0; } }
.bc-msg.typing { align-items: center; }
.bc-msg.typing small { margin-left: 6px; font-size: 12px; color: #8a92ad; }
.bc-msg.bot { animation: bcIn .25s ease-out; }
@keyframes bcIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Settings: announcement bar, maintenance banner (admins only), social links ---------- */
.announce { position: relative; z-index: 60; background: var(--an-bg, #fd7801); color: var(--an-fg, #1b0d00); font: 500 14px/1.45 var(--font); }
.announce[hidden] { display: none; }
.announce p { margin: 0; padding: 9px 52px; text-align: center; }
.announce a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.announce a svg { width: 14px; height: 14px; }
.an-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; opacity: .75; }
.an-close:hover, .an-close:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.maint-banner { position: relative; z-index: 61; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 16px; background: #ffb21f; color: #2b1700; font: 400 13.5px/1.4 var(--font); text-align: center; }
.maint-banner svg { width: 16px; height: 16px; flex: none; }
.maint-banner a { color: inherit; font-weight: 600; }
.socials, .footer ul.socials { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); color: var(--soft); transition: color .2s, border-color .2s, background .2s, transform .2s; }
.socials a:hover, .socials a:focus-visible { color: #fff; border-color: var(--edge-2); background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .announce p { padding: 9px 46px 9px 16px; text-align: left; } }
/* the pinned menu button moves down by the bars above the header while they're on screen (set by app.js) */
.burger2 { top: calc(88px + var(--bar-off, 0px)); }
@media (min-width: 1081px) and (max-height: 820px) { .burger2 { top: calc(80px + var(--bar-off, 0px)); } }

/* /apps: store-ready app pages (light, fast, no 3D) */
.apps-help { margin-top: 10px; color: var(--muted, #8a92ad); font-size: 15px; }
.app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.app-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 20px; align-items: start; padding: 22px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); scroll-margin-top: 100px; }
.app-row:target { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.app-ic { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 55%, #031a63)); color: #fff; overflow: hidden; }
.app-ic svg { width: 34px; height: 34px; }
.app-ic.has-logo { background: #fff; } .app-ic img { width: 78%; height: 78%; object-fit: contain; }
.app-ic.big { width: 88px; height: 88px; border-radius: 22px; flex: none; }
.app-main h2 { margin: 0; font-size: 22px; } .app-main h2 a { color: inherit; text-decoration: none; } .app-main h2 a:hover { text-decoration: underline; }
.app-tag { margin: 4px 0 0; color: var(--c); font-weight: 600; font-size: 14px; }
.app-desc { margin: 8px 0 14px; opacity: .85; max-width: 70ch; }
.app-links { display: flex; flex-direction: column; gap: 6px; min-width: 130px; }
.app-links a { font-size: 14px; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.06); text-decoration: none; color: inherit; text-align: center; }
.app-links a:hover { background: rgba(255,255,255,.14); }
.store-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.store-row .store { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 12px; background: #000; color: #fff; border: 1px solid rgba(255,255,255,.25); text-decoration: none; line-height: 1.1; font-weight: 600; }
.store-row .store svg { width: 22px; height: 22px; } .store-row .store small { display: block; font-size: 10px; font-weight: 400; opacity: .8; }
.store-row .store.soon { opacity: .55; cursor: default; }
.app-hero .app-head { display: flex; gap: 20px; align-items: center; margin: 18px 0; }
.app-hero h1 { margin: 0; }
.app-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; border-bottom: 1px solid rgba(255,255,255,.12); }
.app-tabs a { padding: 10px 16px; text-decoration: none; color: inherit; opacity: .75; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.app-tabs a:hover { opacity: 1; } .app-tabs a[aria-current="page"] { opacity: 1; border-color: var(--c, #fd7801); font-weight: 600; }
.app-body h3 { margin-top: 24px; } .app-contact { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.app-feats { padding-left: 18px; } .app-feats li { margin: 8px 0; } .app-body .muted { opacity: .7; font-size: 14px; }
@media (max-width: 720px) { .app-row { grid-template-columns: 56px 1fr; padding: 16px; gap: 14px; } .app-ic { width: 56px; height: 56px; border-radius: 14px; } .app-links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; } .app-links a { flex: 1; } .app-ic.big { width: 64px; height: 64px; } }
.apps-page .page-hero + .section.tight { padding-top: 28px; }

/* contact form captcha */
.l-cap { align-items: center; }
.cap-box { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin: 0 6px; }
.cap-box .cap-img { width: 160px; height: 51px; border-radius: 10px; background: #e8ecf8; border: 1px solid rgba(255,255,255,.2); }
.cap-new { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: inherit; font-size: 18px; cursor: pointer; }
.cap-new:hover { background: rgba(255,255,255,.16); }
.w-sm input { width: 6.5em; } .l-in.w-sm input { text-transform: uppercase; letter-spacing: .2em; }
@media (max-width: 640px) { .w-sm input { width: 100%; } .cap-box { margin: 8px 0; } }