/* Home page, high-impact layout. Only loaded on the home page. Everything uses the theme tokens (site.css + themes.css),
   so it works in every theme. Sections: .xh hero, .xm marquee, .bento work, .xw how, .xp pricing, .xc closing CTA. */

/* ---------- Hero ---------- */
.xh, .xc { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: #fff; }
.xh { padding-block: clamp(48px, 7vw, 104px) clamp(36px, 5vw, 64px); }
.xh-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.xh-glow { position: absolute; border-radius: 50%; filter: blur(10px); }
.xh-glow-a { width: 70vw; max-width: 1000px; aspect-ratio: 1; right: -18%; top: -45%; background: radial-gradient(circle, rgba(var(--brand-rgb), .55), transparent 62%); animation: xh-drift 18s ease-in-out infinite alternate; }
.xh-glow-b { width: 55vw; max-width: 780px; aspect-ratio: 1; left: -20%; bottom: -55%; background: radial-gradient(circle, rgba(var(--accent-rgb), .32), transparent 62%); animation: xh-drift 22s ease-in-out infinite alternate-reverse; }
.xh-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 20%, transparent 75%); }
@keyframes xh-drift { to { transform: translate(-6%, 8%) scale(1.08); } }

.xh-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.xh-pill { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.4rem; padding: .45rem .95rem .45rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: .85rem; font-weight: 700; color: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); }
.xh-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: xh-ping 2s infinite; }
@keyframes xh-ping { 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.xh h1 { color: #fff; font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.7rem); line-height: 1.02; letter-spacing: -.04em; margin-bottom: 1.3rem; }
.xh-grad { background: linear-gradient(100deg, var(--accent-on-dark) 10%, #fff 55%, var(--accent-pale) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xh-lede { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); line-height: 1.55; color: rgba(255, 255, 255, .78); max-width: 56ch; margin-bottom: 0; }
.xh-lede strong { color: #fff; }
.xh-cta { margin-top: 2rem; }
.xh-ghost { color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); }
.xh-ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .1); }
.xh-trust { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: rgba(255, 255, 255, .8); font-weight: 600; font-size: .95rem; }
.xh-trust li { display: inline-flex; align-items: center; gap: .4rem; }
.xh-trust .ic { width: 18px; height: 18px; color: var(--accent-on-dark); }

/* Device stage: two browser windows and a phone in 3D, with floating status chips. */
.xh-stage { position: relative; aspect-ratio: 1 / .86; perspective: 1800px; }
.xh-dev { position: absolute; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1); transform-style: preserve-3d; }
.xh-dev picture, .xh-phone picture { display: block; overflow: hidden; }
.xh-dev img, .xh-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.xh-dev picture { aspect-ratio: 16 / 10; }
.xh-dev-back { width: 72%; right: -4%; top: 0; transform: rotateY(-18deg) rotateX(6deg) translateZ(-80px); opacity: .55; filter: saturate(.8); }
.xh-dev-front { width: 86%; left: 0; top: 16%; transform: rotateY(-14deg) rotateX(5deg); animation: xh-float 9s ease-in-out infinite; }
.xh-phone { position: absolute; width: 24%; right: 2%; bottom: 0; border-radius: 22px; overflow: hidden; border: 6px solid #0b0d12; background: #0b0d12; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .12); transform: rotate(4deg); animation: xh-float 7s ease-in-out -2s infinite; }
.xh-phone picture { aspect-ratio: 390 / 800; border-radius: 16px; }
@keyframes xh-float { 50% { translate: 0 -10px; } }
.xh .shot-bar { background: #eef0f3; border-bottom-color: #e2e5e9; }
.xh-chip { position: absolute; display: flex; align-items: center; gap: .65rem; padding: .7rem .95rem; border-radius: 14px; background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); font-size: .82rem; line-height: 1.25; white-space: nowrap; animation: xh-float 8s ease-in-out infinite; }
.xh-chip b { display: block; font-weight: 800; }
.xh-chip small { display: block; color: var(--ink-3); font-size: .74rem; }
.xh-chip-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.xh-chip-ic .ic { width: 18px; height: 18px; }
.xh-chip-ok { background: #d1fae5; color: #047857; }
.xh-chip-a { left: -6%; top: 6%; animation-delay: -3s; }
.xh-chip-b { left: 4%; bottom: 4%; animation-delay: -5s; }
.xh-chip-c { right: 20%; top: 12%; padding: .55rem .85rem; gap: .5rem; animation-delay: -1s; }
.xh-chip-c small { margin-left: .2rem; }
.xh-live { width: 9px; height: 9px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .2); }

.xh-stats { margin: clamp(40px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, .12); }
.xh-stats div { padding: 1.4rem 1rem 0 0; }
.xh-stats div + div { padding-left: 1.4rem; border-left: 1px solid rgba(255, 255, 255, .12); }
.xh-stats dt { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #fff; }
.xh-stats dd { margin: .45rem 0 0; color: rgba(255, 255, 255, .62); font-size: .95rem; }

/* Entrance */
.xh-text > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.xh-text > :nth-child(2) { animation-delay: .07s; } .xh-text > :nth-child(3) { animation-delay: .14s; } .xh-text > :nth-child(4) { animation-delay: .21s; } .xh-text > :nth-child(5) { animation-delay: .28s; }
.xh-stage { animation: xh-in 1.1s cubic-bezier(.2, .7, .2, 1) .2s both; }
@keyframes xh-in { from { opacity: 0; transform: translateY(40px) scale(.97); } }

/* ---------- Marquee ---------- */
.xm { overflow: hidden; background: var(--dark-2); border-block: 1px solid rgba(255, 255, 255, .08); padding-block: 1.05rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.xm-track { display: flex; width: max-content; animation: xm 40s linear infinite; }
.xm span { display: inline-flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 800; letter-spacing: -.01em; color: rgba(255, 255, 255, .5); white-space: nowrap; }
.xm span::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-on-dark); opacity: .8; }
@keyframes xm { to { transform: translateX(-50%); } }

/* ---------- Section heads ---------- */
.xs-head h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.3rem); letter-spacing: -.035em; }
.xs-center { margin-inline: auto; text-align: center; }
.xs-center .lede { margin-inline: auto; }

/* ---------- Work: bento grid ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.bento-card { grid-column: span 2; position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.bento-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(var(--dark-rgb), .06), 0 30px 60px -28px rgba(var(--dark-rgb), .45); }
.bento-card.is-big { grid-column: span 4; grid-row: span 2; }
.bento-card.is-tall { grid-row: span 2; }
.bento-shot { padding: 18px 18px 0; background: linear-gradient(160deg, var(--tint), var(--brand-soft)); }
.bento-shot .shot-desktop { border-radius: 10px 10px 0 0; border-bottom: 0; box-shadow: 0 20px 40px -24px rgba(var(--dark-rgb), .5); }
.bento-shot .shot-desktop picture { aspect-ratio: 16 / 10; }
.is-big .bento-shot { padding: 28px 28px 0; flex: 1; }
.is-big .bento-shot .shot-desktop picture { aspect-ratio: 16 / 9.4; }
.is-big .shot-phone { right: 22px; bottom: -18px; width: 21%; }
.is-tall .bento-shot { flex: 1; padding: 22px 22% 0; }
.is-tall .bento-shot .shot-bar { display: none; }
.is-tall .bento-shot .shot-desktop { border-radius: 24px 24px 0 0; border: 6px solid #0b0d12; border-bottom: 0; background: #0b0d12; }
.is-tall .bento-shot .shot-desktop picture { aspect-ratio: 390 / 640; border-radius: 18px 18px 0 0; }
.bento-text { padding: 1.1rem 1.3rem 1.3rem; position: relative; background: var(--surface); }
.is-big .bento-text { padding: 1.4rem 1.8rem 1.7rem; }
.bento-text .work-kind { margin-bottom: .3rem; font-size: .72rem; }
.bento-text h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.is-big .bento-text h3 { font-size: 1.6rem; }
.bento-text p { color: var(--ink-2); font-size: .98rem; margin-bottom: .8rem; max-width: 60ch; }
.bento-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.bento-tags li { font-size: .78rem; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; padding: .28rem .7rem; }
.bento-cta { grid-column: span 2; justify-content: center; gap: .55rem; padding: clamp(22px, 3vw, 34px); text-decoration: none; color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgba(var(--brand-rgb), .7), transparent 60%), var(--dark); border-color: transparent; }
.bento-cta:hover { color: #fff; }
.bento-cta-k { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-dark); }
.bento-cta-h { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.bento-cta-p { color: rgba(255, 255, 255, .72); }
.bento-cta .btn { align-self: flex-start; margin-top: .6rem; }

/* ---------- How it works ---------- */
.xw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.xw-art { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(16px, 2.4vw, 28px); box-shadow: var(--shadow); }
.xw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; counter-reset: s; }
.xw-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.xw-steps li:first-child { border-top: 0; padding-top: 0; }
.xw-n { font-size: 2.1rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; background: linear-gradient(160deg, var(--brand), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xw-steps h3 { margin-bottom: .3rem; font-size: 1.2rem; }
.xw-steps p { margin: 0; color: var(--ink-2); }

/* ---------- Pricing ---------- */
.xp { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 2vw, 24px); align-items: stretch; max-width: 1020px; margin-inline: auto; }
.xp-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); }
.xp-card .btn { align-self: flex-start; margin-top: auto; }
.xp-card.is-featured { color: #fff; border-color: transparent; background: radial-gradient(120% 80% at 100% 0%, rgba(var(--brand-rgb), .65), transparent 60%), radial-gradient(90% 70% at 0% 100%, rgba(var(--accent-rgb), .22), transparent 60%), var(--dark); box-shadow: 0 40px 80px -40px rgba(var(--dark-rgb), .8); }
.xp-step { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: .8rem; }
.is-featured .xp-step { color: var(--accent-on-dark); }
.xp-price { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .8rem; }
.xp-price span { font-size: clamp(3.2rem, 2.4rem + 3vw, 4.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.xp-price small { font-size: 1rem; font-weight: 600; color: var(--ink-3); }
.is-featured .xp-price small { color: rgba(255, 255, 255, .65); }
.xp-line { color: var(--ink-2); margin-bottom: 1.3rem; }
.is-featured .xp-line { color: rgba(255, 255, 255, .78); }
.xp-list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .7rem; }
.xp-list li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; }
.xp-list .ic { width: 20px; height: 20px; margin-top: .15rem; color: var(--brand); }
.is-featured .xp-list .ic { color: var(--accent-on-dark); }
.xp-fine { margin: auto 0 0; font-size: .92rem; color: rgba(255, 255, 255, .65); }
.xp-fine a { color: #fff; font-weight: 800; }
.xp-arrow { display: grid; place-items: center; }
.xp-arrow .ic { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--brand); box-shadow: var(--shadow); }

/* ---------- Closing CTA ---------- */
.xc { padding-block: clamp(64px, 9vw, 120px); }
.xc .xh-glow-a { top: auto; bottom: -60%; }
.xc-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.xc h2 { color: #fff; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); letter-spacing: -.04em; line-height: 1.04; margin-bottom: 1.1rem; }
.xc-alt { margin: 1.4rem 0 0; color: rgba(255, 255, 255, .7); }
.xc-alt a { color: #fff; font-weight: 800; }
.xc .form { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.xc .spots { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .16); }

/* Sections that follow the dark hero/marquee directly don't need the old ridge spacing. */
.page-home .site-footer .ridge { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento-card.is-big { grid-column: span 4; grid-row: auto; }
  .bento-card.is-tall { grid-row: span 2; }
}
@media (max-width: 960px) {
  .xh-in, .xw-grid, .xc-grid { grid-template-columns: 1fr; }
  .xh-stage { max-width: 620px; width: 100%; margin-inline: auto; }
  .xp { grid-template-columns: 1fr; max-width: 560px; }
  .xp-arrow .ic { transform: rotate(90deg); }
}
@media (max-width: 680px) {
  .xh-stats { grid-template-columns: 1fr 1fr; }
  .xh-stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .xh-stats div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 1.2rem; }
  .bento { grid-template-columns: 1fr; }
  .bento-card, .bento-card.is-big, .bento-card.is-tall, .bento-cta { grid-column: auto; grid-row: auto; }
  .is-tall .bento-shot { padding-inline: 26%; }
  .xh-chip-a { left: -2%; top: 0; }
  .xh-chip-c { display: none; }
  .xh-chip { font-size: .74rem; padding: .55rem .7rem; }
  .xh-chip-ic { width: 26px; height: 26px; }
  .xw-steps li { grid-template-columns: 50px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .xh-glow, .xh-dev-front, .xh-phone, .xh-chip, .xm-track, .xh-dot { animation: none !important; }
  .xh-text > *, .xh-stage { animation: none !important; }
}

/* Bento fixes: the CTA closes the grid as a full-width banner; the tall card's phone fills its column. */
.bento-cta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.bento-cta > span:not(.btn) { flex: 0 0 auto; }
.bento-cta-text { display: grid; gap: .35rem; }
.bento-cta .btn { align-self: center; margin-top: 0; }
.is-tall .bento-shot { display: flex; flex-direction: column; }
.is-tall .bento-shot .shot-desktop { flex: 1; display: flex; flex-direction: column; }
.is-tall .bento-shot .shot-desktop picture { flex: 1; aspect-ratio: auto; min-height: 340px; }
@media (max-width: 680px) { .bento-cta { flex-direction: column; align-items: flex-start; } .is-tall .bento-shot .shot-desktop picture { aspect-ratio: 390 / 640; flex: none; min-height: 0; } }
/* Tall card: the big card sets the row height; the phone screenshot fills whatever height that gives. */
.is-tall .bento-shot .shot-desktop picture { min-height: 0; position: relative; }
.is-tall .bento-shot .shot-desktop picture img { position: absolute; inset: 0; }
@media (max-width: 1080px) { .is-tall .bento-shot .shot-desktop picture { min-height: 420px; } }

/* ================= Hero animation: a website builds itself, gets revised, goes live, then the real portfolio plays ================= */
/* Driven by site.js ([data-xa]): it adds classes s1…s12, .green and .work to .xa on a ~20 s loop. Sizes use cqw so it scales. */
.xa { position: relative; container-type: inline-size; aspect-ratio: 1 / .84; animation: xh-in 1.1s cubic-bezier(.2, .7, .2, 1) .2s both; --ease: cubic-bezier(.2, .8, .2, 1); }
.xa::before { content: ''; position: absolute; inset: 8% 4% 0 8%; border-radius: 40px; background: radial-gradient(60% 60% at 50% 45%, rgba(var(--brand-rgb), .45), transparent 70%); filter: blur(30px); z-index: -1; }

/* Browser window */
.xa-win { position: absolute; left: 0; top: 7%; width: 82%; border-radius: 2cqw; overflow: hidden; background: #fff; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .12); transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); transform-origin: left center; transition: transform 1.2s var(--ease); }
.xa.work .xa-win { transform: perspective(1600px) rotateY(-4deg) rotateX(1deg); }
.xa-bar { display: flex; align-items: center; gap: .9cqw; height: 6cqw; padding: 0 2cqw; background: #f1f3f6; border-bottom: 1px solid #e3e6ea; }
.xa-bar > i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #d4d8dd; }
.xa-bar > i:nth-child(1) { background: #ff6159; } .xa-bar > i:nth-child(2) { background: #ffbd2e; } .xa-bar > i:nth-child(3) { background: #28c941; }
.xa-url { display: flex; align-items: center; gap: .8cqw; margin-left: 2cqw; flex: 1; max-width: 46cqw; height: 3.6cqw; padding: 0 1.4cqw; border-radius: 1cqw; background: #fff; font: 600 1.8cqw/1 system-ui, sans-serif; color: #4b5563; }
.xa-lock { width: 1.6cqw; height: 1.6cqw; color: #9ca3af; transition: color .4s; }
.s12 .xa-lock { color: #16a34a; }
.xa-view { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; background: #fff; }

/* The mini site. --c is its accent: terracotta, then green after the revision. */
.xa-site { --c: #c2410c; --c-soft: #fde7d9; position: absolute; inset: 0; padding: 2.4cqw 3cqw; display: grid; grid-template-rows: auto 1fr auto; gap: 2.2cqw; font-family: system-ui, -apple-system, sans-serif; color: #1f2937; transition: transform .9s var(--ease), opacity .6s; }
.green .xa-site { --c: #15803d; --c-soft: #dcfce7; }
.work .xa-site { transform: translateY(-104%); opacity: 0; }
.xa-site * { transition: background-color .8s, color .8s, border-color .8s, opacity .45s var(--ease), transform .55s var(--ease), clip-path .6s var(--ease); }
/* Skeleton state: everything is a soft grey block until its step arrives. */
.xa-nav { display: flex; align-items: center; gap: 2cqw; height: 4.6cqw; }
.xa-logo { display: flex; align-items: center; gap: .9cqw; font-size: 1.9cqw; font-weight: 800; color: transparent; background: #eef0f3; border-radius: .8cqw; padding: .3cqw .8cqw .3cqw .3cqw; }
.xa-logo span { width: 3cqw; height: 3cqw; border-radius: .8cqw; background: #e2e5e9; }
.xa-nav > i { width: 6cqw; height: 1.3cqw; border-radius: 1cqw; background: #eef0f3; }
.xa-nav > i:first-of-type { margin-left: auto; }
.xa-navbtn { font-size: 1.5cqw; font-weight: 700; color: transparent; background: #eef0f3; border-radius: 99px; padding: 1cqw 2cqw; }
.s3 .xa-logo { color: #1f2937; background: transparent; padding-left: 0; } .s3 .xa-logo span { background: var(--c); }
.s3 .xa-nav > i { background: #d1d5db; } .s3 .xa-navbtn { background: var(--c); color: #fff; }
.xa-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3cqw; align-items: center; border-radius: 1.6cqw; padding: 2.4cqw; background: #f6f7f9; }
.s4 .xa-hero { background: var(--c-soft); }
.xa-copy { display: grid; gap: 1.2cqw; justify-items: start; }
.xa-kicker { margin: 0; font-size: 1.3cqw; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: transparent; background: #e9ebee; border-radius: .6cqw; }
.s5 .xa-kicker { color: var(--c); background: transparent; }
.xa-h { margin: 0; min-height: 8.4cqw; width: 100%; font-size: 3.7cqw; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; color: #111827; background: linear-gradient(#e9ebee, #e9ebee) 0 .5cqw / 90% 2.8cqw no-repeat, linear-gradient(#e9ebee, #e9ebee) 0 4.7cqw / 62% 2.8cqw no-repeat; }
.s5 .xa-h { background-size: 0 0, 0 0; }
.xa-caret { display: inline-block; width: .35cqw; height: 3.4cqw; margin-left: .3cqw; vertical-align: -.4cqw; background: var(--c); opacity: 0; }
.s5:not(.s6) .xa-caret { opacity: 1; animation: xa-blink .8s steps(1) infinite; }
@keyframes xa-blink { 50% { opacity: 0; } }
.xa-line { display: block; width: 92%; height: 1.2cqw; border-radius: 1cqw; background: #e9ebee; }
.xa-line-2 { width: 70%; }
.s6 .xa-line { background: #cfd4da; }
.xa-btn { font-size: 1.5cqw; font-weight: 700; color: transparent; background: #e9ebee; border-radius: 99px; padding: 1.1cqw 2.2cqw; transform: scale(.9); }
.s6 .xa-btn { color: #fff; background: var(--c); transform: none; box-shadow: 0 1cqw 2cqw -1cqw var(--c); }
.xa-img { position: relative; aspect-ratio: 4 / 3; border-radius: 1.2cqw; overflow: hidden; background: #e9ebee; }
.xa-img > span { position: absolute; opacity: 0; }
.s4 .xa-img { background: linear-gradient(180deg, #fff7ed, #fed7aa); }
.green.s4 .xa-img { background: linear-gradient(180deg, #f0fdf4, #bbf7d0); }
.xa-sun { width: 22%; aspect-ratio: 1; border-radius: 50%; right: 16%; top: 16%; background: var(--c); transform: translateY(30%); }
.xa-hill { left: -10%; right: -10%; bottom: -30%; height: 70%; border-radius: 50% 50% 0 0; background: #4d7c5a; transform: translateY(40%); }
.xa-hill-2 { left: 30%; right: -30%; bottom: -36%; background: #2f5d40; transition-delay: .1s; }
.s4 .xa-img > span { opacity: 1; transform: none; }
.xa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.xa-cards > div { display: grid; gap: .8cqw; padding: 1.4cqw; border-radius: 1.2cqw; background: #f6f7f9; opacity: .9; }
.xa-thumb { aspect-ratio: 16 / 7; border-radius: .8cqw; background: #e9ebee; }
.xa-cards b { font-size: 1.5cqw; color: transparent; background: #e9ebee; border-radius: .5cqw; justify-self: start; }
.xa-cards i { height: 1cqw; width: 80%; border-radius: 1cqw; background: #e9ebee; }
.s7 .xa-cards > div { background: #fff; box-shadow: 0 .4cqw 2cqw -1cqw rgba(0, 0, 0, .25); opacity: 1; }
.s7 .xa-thumb { background: var(--c-soft); } .s7 .xa-cards b { color: #111827; background: transparent; } .s7 .xa-cards i { background: #d9dde2; }
.s7 .xa-cards > div:nth-child(2) * { transition-delay: .12s; } .s7 .xa-cards > div:nth-child(3) * { transition-delay: .24s; }
/* The light sweep while designing */
.xa-scan { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(var(--brand-rgb), .16) 48%, rgba(255, 255, 255, .6) 50%, rgba(var(--brand-rgb), .16) 52%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; opacity: 0; }
.s2:not(.s8) .xa-scan { opacity: 1; animation: xa-scan 1.6s linear infinite; }
@keyframes xa-scan { to { background-position: -120% 0; } }

/* Portfolio reel inside the browser */
.xa-work { position: absolute; inset: 0; transform: translateY(100%); transition: transform .9s var(--ease); }
.work .xa-work { transform: none; }
.xa-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; }
.xa-shot.is-on { opacity: 1; }
.xa-shot picture, .xa-pshot picture { display: block; width: 100%; height: 100%; }
.xa-shot img, .xa-pshot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.xa-shot.is-on img { animation: xa-pan 6s ease-in-out both; }
.xa-pshot.is-on img { animation: xa-pan 6s ease-in-out .3s both; }
@keyframes xa-pan { to { object-position: 50% 45%; } }

/* Phone: the client's chat, then the reel's phone screenshots */
.xa-phone { position: absolute; right: 0; bottom: 2%; width: 27%; aspect-ratio: 9 / 18.5; border-radius: 4.4cqw; border: 1.3cqw solid #0b0d12; background: #0b0d12; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .14); transform: rotate(3deg); animation: xh-float 7s ease-in-out -2s infinite; }
.xa-chat { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1.3cqw; padding: 2.4cqw 1.8cqw; background: #f3f4f6; border-radius: 3.2cqw; font: 600 1.75cqw/1.3 system-ui, -apple-system, sans-serif; transition: opacity .6s; }
.work .xa-chat { opacity: 0; }
.xa-chat-h { display: flex; align-items: center; gap: .8cqw; margin: 0 0 .8cqw; padding-bottom: 1.4cqw; border-bottom: 1px solid #e5e7eb; font-weight: 800; font-size: 1.7cqw; color: #111827; }
.xa-chat-h span { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #22c55e; }
.xa-msg { margin: 0; max-width: 88%; padding: 1.2cqw 1.5cqw; border-radius: 1.8cqw 1.8cqw 1.8cqw .5cqw; background: var(--brand); color: #fff; align-self: flex-start; opacity: 0; transform: translateY(1.5cqw) scale(.92); transform-origin: left bottom; transition: opacity .35s, transform .45s var(--ease); }
.xa-msg.is-them { align-self: flex-end; background: #fff; color: #111827; border-radius: 1.8cqw 1.8cqw .5cqw 1.8cqw; transform-origin: right bottom; box-shadow: 0 .3cqw 1cqw -.4cqw rgba(0, 0, 0, .2); }
.s1 .xa-msg-1, .s2 .xa-msg-2, .s9 .xa-msg-3, .s10 .xa-msg-4, .s11 .xa-msg-5 { opacity: 1; transform: none; }
.xa-phone-work { position: absolute; inset: 0; border-radius: 3.2cqw; overflow: hidden; opacity: 0; transition: opacity .6s .2s; }
.work .xa-phone-work { opacity: 1; }
.xa-pshot { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; }
.xa-pshot.is-on { opacity: 1; }

/* Status chips */
.xa-chip { position: absolute; display: flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 1.9cqw; border-radius: 2cqw; background: rgba(255, 255, 255, .97); color: #0f172a; box-shadow: 0 2.4cqw 5cqw -2cqw rgba(0, 0, 0, .65); font: 600 1.8cqw/1.25 var(--sans); white-space: nowrap; opacity: 0; transform: translateY(2cqw) scale(.9); transition: opacity .4s, transform .55s var(--ease); pointer-events: none; }
.xa-chip b { display: block; font-weight: 800; }
.xa-chip small { display: block; color: #64748b; font-size: 1.5cqw; }
.xa-chip-ic { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 1.3cqw; background: var(--brand-soft); color: var(--brand); flex: none; }
.xa-chip-ic .ic { width: 2.6cqw; height: 2.6cqw; }
.xa-ok { background: #dcfce7; color: #15803d; }
.xa-prog { display: block; width: 18cqw; height: .9cqw; margin-top: .7cqw; border-radius: 1cqw; background: #e2e8f0; overflow: hidden; }
.xa-prog span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--amber)); transition: width 3.4s cubic-bezier(.4, 0, .2, 1); }
.s2 .xa-prog span { width: 100%; }
.s8 .xa-prog span { background: #16a34a; }
.xa-chip-build { left: -5%; top: 0; }
.s2:not(.s9) .xa-chip-build { opacity: 1; transform: none; }
.xa-chip-rev { left: 4%; bottom: 6%; }
.s10:not(.s12) .xa-chip-rev { opacity: 1; transform: none; }
.xa-chip-go { left: 30%; bottom: 3%; gap: 2cqw; padding-right: 1.4cqw; }
.s11:not(.s12) .xa-chip-go, .s12:not(.work) .xa-chip-go { opacity: 1; transform: none; }
.xa-go { padding: 1.1cqw 2.2cqw; border-radius: 1.2cqw; background: var(--amber); color: var(--amber-ink); font-weight: 800; transition: transform .15s, box-shadow .3s; }
.s12 .xa-go { transform: scale(.92); box-shadow: 0 0 0 1cqw rgba(var(--accent-rgb), .25); }
.xa-chip-live { left: 34%; top: 1%; gap: .9cqw; padding: 1.1cqw 1.7cqw; }
.xa-chip-live small { margin-left: .4cqw; }
.s12 .xa-chip-live { opacity: 1; transform: none; }
.xa-live { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); animation: xa-ping 1.6s infinite; }
@keyframes xa-ping { 70% { box-shadow: 0 0 0 1.6cqw rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
.xa-chip-work { left: -3%; bottom: 8%; flex-direction: column; align-items: flex-start; gap: .2cqw; padding: 1.4cqw 2cqw; }
.xa-chip-work b { font-size: 2.1cqw; transition: opacity .3s; }
.work .xa-chip-work { opacity: 1; transform: none; }
.xa-chip-work.is-swap b { opacity: 0; }
.work .xa-chip-live { opacity: 1; transform: none; left: 50%; top: 1%; }

/* Cursor: glides in to the Go live button, clicks */
.xa-cursor { position: absolute; width: 4cqw; left: 70%; top: 60%; opacity: 0; filter: drop-shadow(0 .6cqw 1cqw rgba(0, 0, 0, .4)); transition: left 1s var(--ease), top 1s var(--ease), opacity .3s, transform .15s; }
.s11:not(.work) .xa-cursor { opacity: 1; left: 49%; top: 88%; }
.s12:not(.work) .xa-cursor { transform: scale(.85); }
.work .xa-cursor { opacity: 0; }

/* Confetti on go-live */
.xa-confetti { position: absolute; left: 52%; top: 90%; width: 0; height: 0; pointer-events: none; }
.xa-confetti i { position: absolute; width: 1.3cqw; height: .8cqw; border-radius: .2cqw; opacity: 0; background: hsl(calc(var(--i) * 47deg) 90% 60%); }
.s12:not(.work) .xa-confetti i { animation: xa-burst 1.3s cubic-bezier(.15, .7, .3, 1) both; }
@keyframes xa-burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(calc(cos(var(--i) * 20deg) * 26cqw), calc(sin(var(--i) * 20deg) * 22cqw - 14cqw)) rotate(calc(var(--i) * 70deg)); }
}

/* Loop reset: a quick fade so the restart isn't a jump */
.xa.is-resetting .xa-win, .xa.is-resetting .xa-phone, .xa.is-resetting .xa-chip { opacity: 0 !important; transition: opacity .5s !important; }

@media (max-width: 680px) { .xa-chip-build { left: -2%; } .xa-chip-work { left: 0; } }
@media (prefers-reduced-motion: reduce) {
  .xa, .xa-phone, .xa-live, .xa-caret { animation: none !important; }
  .xa * { transition: none !important; }
}
.xa-freeze *, .xa-freeze *::before, .xa-freeze *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }
/* Fit the whole mini site (nav, hero, cards) inside the browser view. */
.xa-site { padding: 2cqw 2.6cqw; gap: 1.6cqw; }
.xa-hero { padding: 2cqw 2.2cqw; gap: 2.4cqw; }
.xa-img { aspect-ratio: 16 / 11; }
.xa-h { min-height: 8cqw; font-size: 3.4cqw; }
.xa-cards > div { padding: 1.1cqw; gap: .6cqw; }
.xa-thumb { aspect-ratio: 16 / 5; }
/* During the reel the café's Live chip bows out; the address bar shows each real site instead. */
.work .xa-chip-live { opacity: 0 !important; transform: translateY(2cqw) scale(.9) !important; }