/* Products we built: homepage showcase, /work pages, service "Built by us" banners.
   Uses the tokens declared at the top of pages.css. */
.prods { display: grid; gap: clamp(72px, 10vw, 140px); }
.prod { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.prod--flip .prod__visual { order: 2; }
@media (max-width: 960px) { .prod { grid-template-columns: 1fr; } .prod--flip .prod__visual { order: 0; } }
.prod__visual, .whero__visual { position: relative; perspective: 1400px; }
.tilt .bframe { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.prod__glow { position: absolute; inset: 8% 6%; border-radius: 40px; background: radial-gradient(circle at 30% 40%, var(--accent), transparent 60%), radial-gradient(circle at 75% 70%, var(--accent2), transparent 60%);
  filter: blur(60px); opacity: .45; animation: glow 8s ease-in-out infinite alternate; }
@keyframes glow { to { transform: scale(1.08) translate(10px, -10px); opacity: .6; } }

.bframe { position: relative; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(10,14,42,.1);
  box-shadow: 0 50px 100px -30px rgba(10,14,42,.45); }
.bframe__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: linear-gradient(#f8f9fc, #eef0f6); border-bottom: 1px solid #e3e6f0; }
.bframe__bar > span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; flex-shrink: 0; }
.bframe__bar > span:nth-child(2) { background: #febc2e; }
.bframe__bar > span:nth-child(3) { background: #28c840; }
.bframe__url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 360px; margin-inline: auto; background: #fff; border: 1px solid #e3e6f0; border-radius: 999px; padding: 5px 14px; font-size: .78rem; color: #5b6180; white-space: nowrap; overflow: hidden; }
.bframe__url .lucide { width: 12px; height: 12px; color: #16a34a; }
.bframe__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f1f3f8; }
.bframe__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 6s linear, opacity .35s, scale .35s; }
.prod:hover .bframe__shot img, .pbanner:hover .bframe__shot img { transform: scale(1.04) translateY(-2%); }
.bframe__scan { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none; }
.in .bframe__scan { animation: scan 1.6s var(--ease) .5s; }
@keyframes scan { to { transform: translateX(100%); } }

.prod__bubble { position: absolute; z-index: 3; display: grid; background: rgba(255,255,255,.96); color: var(--ink); border-radius: 16px; padding: 12px 16px; min-width: 120px;
  box-shadow: 0 20px 40px -14px rgba(10,14,42,.35); border: 1px solid rgba(10,14,42,.06); animation: bob 5s ease-in-out infinite; }
.prod__bubble b { font: 700 1.35rem/1.1 var(--display); letter-spacing: -.03em; background: linear-gradient(135deg, var(--accent2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prod__bubble small { font-size: .74rem; color: var(--ink-soft); font-weight: 600; }
.prod__bubble--1 { left: -18px; bottom: 14%; }
.prod__bubble--2 { right: -14px; top: 18%; animation-delay: -1.7s; }
.prod__bubble--3 { right: 12%; bottom: -22px; animation-delay: -3.3s; }
@keyframes bob { 50% { transform: translateY(-10px); } }
@media (max-width: 640px) { .prod__bubble { padding: 8px 12px; min-width: 0; } .prod__bubble b { font-size: 1.05rem; } .prod__bubble--1 { left: -6px; } .prod__bubble--2 { right: -6px; } }

.prod__logo { height: 44px; width: auto; margin-bottom: 18px; }
.prod__kind { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); margin-bottom: 14px; }
.prod__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: -.035em; color: var(--ink); }
.prod__sum { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.7; margin-top: 18px; }
.prod__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 24px 0 0; }
.prod__chips li { font-size: .84rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, white); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, white); transition: transform .35s var(--spring), background .25s; }
.prod__chips li:hover { transform: translateY(-3px) rotate(-2deg); background: var(--accent); }
.prod__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pbtn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: .96rem; text-decoration: none; color: var(--ink);
  border: 1.5px solid var(--ink); background: transparent; transition: background .25s, color .25s, transform .35s var(--spring), box-shadow .3s; }
.pbtn .lucide { width: 18px; height: 18px; transition: transform .35s var(--spring); }
.pbtn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(10,14,42,.4); }
.pbtn:hover .lucide { transform: translate(3px, -1px); }
.pbtn--solid { background: var(--ink); color: #fff; }
.pbtn--solid:hover { background: var(--accent2); border-color: var(--accent2); }
.pbtn--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.pbtn--light { color: #fff; border-color: rgba(255,255,255,.55); }
.pbtn--light:hover { background: #fff; color: var(--ink); }

/* Case-study hero */
.whero__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 72px); align-items: center; position: relative; z-index: 2; }
@media (max-width: 960px) { .whero__grid { grid-template-columns: 1fr; } }
.whero__title { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .95; letter-spacing: -.05em; }
.whero__tag { margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--yellow); max-width: 26ch; line-height: 1.3; }
.whero .prod__glow { opacity: .7; }
.wstats { background: var(--ink); color: #fff; padding-block: clamp(36px, 5vw, 56px); }
.wstats__list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 0; margin: 0; }
@media (max-width: 760px) { .wstats__list { grid-template-columns: repeat(2, 1fr); } }
.wstats li { display: grid; gap: 6px; padding-left: 18px; border-left: 3px solid var(--accent); }
.wstats b { font: 800 clamp(2rem, 4vw, 3.2rem)/1 var(--display); letter-spacing: -.04em; }
.wstats span { color: rgba(238,240,246,.65); font-size: .95rem; }

/* Gallery */
.gal { margin-top: 24px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.gal__tabs { display: grid; gap: 6px; }
.gal__tab { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink-soft); background: transparent; border: 1.5px solid transparent;
  border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease); }
.gal__n { font: 700 .72rem var(--display); color: var(--accent2); }
.gal__tab:hover { background: #fff; color: var(--ink); transform: translateX(4px); }
.gal__tab[aria-selected=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
.gal__tab[aria-selected=true] .gal__n { color: var(--accent); }
.gal__stage { position: sticky; top: 100px; }
.gal__img.swap { opacity: 0; scale: 1.02; }
.gal__cap { display: grid; gap: 4px; margin-top: 18px; padding-left: 16px; border-left: 3px solid var(--accent); }
.gal__title { font-family: var(--display); font-size: 1.15rem; }
.gal__desc { color: var(--ink-soft); }
@media (max-width: 960px) {
  .gal { grid-template-columns: 1fr; }
  .gal__tabs { display: flex; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .gal__tab { flex-shrink: 0; }
  .gal__stage { position: static; }
}

/* Modules */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); position: relative; z-index: 2; }
@media (max-width: 960px) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mods { grid-template-columns: 1fr; } }
.mod { position: relative; overflow: hidden; isolation: isolate; padding: 28px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12); transition: transform .5s var(--ease), border-color .3s; }
.mod:hover { transform: translateY(-6px); border-color: var(--accent); }
.mod > * { position: relative; z-index: 1; }
.mod__icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; margin-bottom: 18px; transition: transform .5s var(--spring); }
.mod:hover .mod__icon { transform: rotate(-10deg) scale(1.1); }
.mod__title { font-family: var(--display); font-weight: 600; font-size: 1.1rem; line-height: 1.3; margin-bottom: 10px; }
.mod__text { color: rgba(238,240,246,.7); font-size: .98rem; line-height: 1.6; }

/* Flow: the line fills and steps light up on scroll */
.flow { position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 0; margin: clamp(40px, 6vw, 72px) 0 0; }
.flow__line { position: absolute; left: 10%; right: 10%; top: 32px; height: 3px; background: var(--line); border-radius: 3px; }
.flow__line span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent2), var(--accent)); transform-origin: left; transform: scaleX(0); border-radius: 3px; }
.flow__step { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; }
.flow__dot { position: relative; z-index: 1; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--line); color: var(--ink); transition: background .4s, border-color .4s, transform .5s var(--spring), box-shadow .4s; }
.flow__step.lit .flow__dot { background: var(--accent); border-color: var(--accent); transform: scale(1.08); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent); }
.flow__step small { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }
.flow__step b { font-size: 1rem; }
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; gap: 22px; }
  .flow__line { left: 32px; right: auto; width: 3px; top: 10px; bottom: 10px; height: auto; }
  .flow__line span { transform-origin: top; transform: scaleY(0); }
  .flow__step { grid-template-columns: 66px 1fr; justify-items: start; text-align: left; column-gap: 18px; }
  .flow__dot { grid-row: span 2; }
}

.hl { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(64px, 8vw, 110px); }
@media (max-width: 900px) { .hl { grid-template-columns: 1fr; } }
.hl__item { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 30px 28px; overflow: hidden; transition: transform .5s var(--ease), border-color .3s; }
.hl__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--accent2), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.hl__item:hover { transform: translateY(-6px); border-color: var(--accent); }
.hl__item:hover::after { transform: scaleX(1); }
.hl__n { font: 800 2.6rem/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--accent2); }
.hl__item h3 { font-family: var(--display); font-size: 1.15rem; margin: 14px 0 10px; line-height: 1.3; }
.hl__item p { color: var(--ink-soft); line-height: 1.65; }
.inds { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 26px 0 0; }
.inds li { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; padding: 12px 18px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); transition: transform .35s var(--spring), border-color .25s, background .25s; }
.inds li .lucide { width: 20px; height: 20px; color: var(--accent2); }
.inds li:hover { transform: translateY(-4px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, white); }

/* Service page "Built by us" banner */
.pbanners { display: grid; gap: 24px; }
.pbanner { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: center; text-decoration: none; color: #fff;
  padding: clamp(28px, 4vw, 52px); border-radius: 28px; background: linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--accent2) 55%, var(--ink)) 100%);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.pbanner::after { content: ""; position: absolute; width: 480px; height: 480px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%); z-index: -1; animation: glow 7s ease-in-out infinite alternate; }
.pbanner:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--accent2) 80%, black); }
@media (max-width: 900px) { .pbanner { grid-template-columns: 1fr; } }
.pbanner > * { position: relative; z-index: 1; }
.pbanner__tag { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--accent); padding: 7px 13px; border-radius: 999px; }
.pbanner__tag .lucide { width: 16px; height: 16px; }
.pbanner__logo { display: block; height: 40px; width: auto; margin: 22px 0 14px; background: #fff; padding: 6px 12px; border-radius: 10px; box-sizing: content-box; }
.pbanner__title { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -.03em; }
.pbanner__text { color: rgba(255,255,255,.75); line-height: 1.65; margin-top: 12px; }
.pbanner__stats { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; padding: 0; margin: 22px 0 0; font-size: .85rem; color: rgba(255,255,255,.7); }
.pbanner__stats b { display: block; font: 700 1.4rem/1.1 var(--display); color: #fff; }
.pbanner__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 700; color: var(--accent); border-bottom: 2px solid currentColor; padding-bottom: 4px; }
.pbanner__go .lucide { transition: transform .35s var(--spring); }
.pbanner:hover .pbanner__go .lucide { transform: translateX(6px); }
.pbanner .bframe { transform: rotate(2deg); transition: transform .6s var(--ease); }
.pbanner:hover .bframe { transform: rotate(0) scale(1.02); }

/* Live-product badge on use-case cards */
.ucard--live { border-color: rgba(255,216,61,.45); }
.ucard__live { position: relative; z-index: 2 !important; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--ink); background: var(--pa); padding: 7px 12px; border-radius: 999px; text-decoration: none; transition: transform .35s var(--spring); }
.ucard__live .lucide { width: 15px; height: 15px; }
.ucard__live:hover { transform: translateY(-2px) scale(1.04); }
.ucard__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); color: var(--ink); animation: pulse 1.8s infinite; }

@media (prefers-reduced-motion: reduce) { .prod__glow, .prod__bubble, .pbanner::after { animation: none; } .tilt .bframe { transform: none; } }