/* Three sections shared by the app development and bespoke software pages (Nov 2026), rebuilt from 21st.dev pieces:
   What we build: expanding image tiles (Fluid Expanding Grid).
   Reviews: staggered testimonial grid (Staggered Testimonials Grid).
   Compare: us-vs-them two-column comparison (Us vs Them Comparison).
   Each section reads its colours from the page theme: .theme-apps (deep purple + white), .theme-software (white + lilac, black type). */

/* shared heading bits */
.ss-shell{width:min(1160px,calc(100% - 48px));margin:0 auto}
.ss-eyebrow{display:block;margin:0 0 12px;font:600 11.5px/1.3 Inter,sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:var(--ss-accent)}
.ap-inner-page main .ss-h2{margin:0;font:600 clamp(32px,3.8vw,48px)/1.06 Fustat,Inter,sans-serif;letter-spacing:-.04em;color:var(--ss-ink)}
.ap-inner-page main .ss-h2 em{font:italic 400 1.06em/1 "Instrument Serif",Georgia,serif;letter-spacing:-.02em;color:var(--ss-accent)}
.ss-lead{margin:0;max-width:30em;font:400 16px/1.6 Inter,sans-serif;color:var(--ss-mute)}
.ss-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:40px}

/* ---- what we build: expanding tiles ---- */
.wb-section{padding:110px 0;background:var(--ss-bg);color:var(--ss-ink)}
.wb-grid{display:flex;gap:10px;height:520px}
.wb-tile{position:relative;flex:1;min-width:0;border-radius:22px;overflow:hidden;background:#2a1454;transition:flex .55s cubic-bezier(.4,0,.2,1);cursor:default}
.wb-tile:hover,.wb-tile:focus-within,.wb-tile.is-open{flex:3.2}
.wb-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.wb-tile:hover img{transform:scale(1.04)}
.wb-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,8,30,.85) 100%)}
.wb-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 22px 22px}
.wb-cap b{display:block;font:600 20px/1.2 Inter,sans-serif;letter-spacing:-.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-cap span{display:block;max-width:26em;margin-top:8px;font:400 14px/1.5 Inter,sans-serif;color:#d9ccf3;opacity:0;transform:translateY(8px);transition:opacity .4s ease .15s,transform .4s ease .15s}
.wb-tile:hover .wb-cap span,.wb-tile:focus-within .wb-cap span,.wb-tile.is-open .wb-cap span{opacity:1;transform:none}
.wb-num{position:absolute;left:18px;top:16px;z-index:1;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);font:600 11px/1 Inter,sans-serif;letter-spacing:.8px;color:#fff}
.wb-foot{margin:26px 0 0;font:400 14.5px/1.5 Inter,sans-serif;color:var(--ss-mute)}
.wb-foot a{color:var(--ss-accent);font-weight:600;text-decoration:none}
@media (max-width:900px){.wb-grid{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:12px}.wb-tile{aspect-ratio:3/4;flex:none}.wb-tile .wb-cap span{opacity:1;transform:none}.wb-cap b{white-space:normal;font-size:17px}.wb-cap span{font-size:13px}}
@media (max-width:520px){.wb-grid{grid-template-columns:1fr 1fr}.wb-cap{padding:14px}.wb-cap span{display:none}}

/* ---- reviews: staggered grid ---- */
.rw-section{padding:110px 0;background:var(--ss-bg2);color:var(--ss-ink2)}
.rw-section .ss-eyebrow{color:var(--ss-accent2)}
.ap-inner-page main .rw-section .ss-h2{color:var(--ss-ink2)}
.ap-inner-page main .rw-section .ss-h2 em{color:var(--ss-accent2)}
.rw-google{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid var(--ss-line2);background:var(--ss-card2);font:500 14px/1 Inter,sans-serif;color:var(--ss-ink2);text-decoration:none;white-space:nowrap}
.rw-google svg{width:18px;height:18px}
.rw-google b{color:#f5b301;letter-spacing:1px}
.rw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.rw-col{display:grid;gap:20px}
.rw-col:nth-child(2){margin-top:44px}
.rw-card{position:relative;padding:28px 28px 26px;border-radius:22px;background:var(--ss-card2);border:1px solid var(--ss-line2);transition:transform .3s ease,box-shadow .3s ease}
.rw-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(42,20,84,.45)}
.rw-card--accent{background:linear-gradient(135deg,#2a1454,#5b2fa0);border-color:transparent;color:#fff}
.rw-stars{color:#f5b301;letter-spacing:2px;font-size:15px}
.rw-card blockquote{margin:14px 0 0;font:400 16px/1.6 Inter,sans-serif;color:inherit}
.rw-card--accent blockquote{color:#f1ecfa}
.rw-card figcaption{display:flex;align-items:center;gap:12px;margin-top:22px;font:600 14px/1.3 Inter,sans-serif;color:inherit}
.rw-card figcaption i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ss-accent2);color:#fff;font:600 14px/1 Inter,sans-serif;font-style:normal;flex:none}
.rw-card--accent figcaption i{background:#fff;color:#2a1454}
.rw-card figcaption span{display:block;font:400 12.5px/1.3 Inter,sans-serif;color:var(--ss-mute2)}
.rw-card--accent figcaption span{color:#d9ccf3}
@media (max-width:980px){.rw-grid{grid-template-columns:1fr 1fr}.rw-col:nth-child(2){margin-top:0}.rw-col:nth-child(3){grid-column:1/-1;grid-template-columns:1fr 1fr}}
@media (max-width:640px){.rw-grid,.rw-col:nth-child(3){grid-template-columns:1fr}.rw-section{padding:70px 0}.ss-head{flex-direction:column;align-items:flex-start;gap:16px}}

/* ---- compare: us vs them ---- */
.cp-section{padding:110px 0;background:var(--ss-bg);color:var(--ss-ink)}
.cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.cp-col{position:relative;padding:34px 34px 32px;border-radius:24px;border:1px solid var(--ss-line);background:var(--ss-card)}
.cp-col--us{background:linear-gradient(160deg,#2a1454,#4c1d95 60%,#6d28d9);border-color:transparent;color:#fff;box-shadow:0 40px 80px -40px rgba(76,29,149,.7)}
.cp-tag{display:inline-block;margin-bottom:16px;padding:6px 11px;border-radius:999px;font:600 11px/1 Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;background:var(--ss-chip);color:var(--ss-mute)}
.cp-col--us .cp-tag{background:rgba(255,255,255,.14);color:#fff}
.ap-inner-page main .cp-col h3{margin:0 0 6px;font:600 24px/1.2 Fustat,Inter,sans-serif;letter-spacing:-.03em;color:inherit}
.cp-col>p{margin:0 0 22px;font:400 14.5px/1.55 Inter,sans-serif;color:var(--ss-mute)}
.cp-col--us>p{color:#d9ccf3}
.cp-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cp-list li{position:relative;padding-left:30px;font:500 15px/1.5 Inter,sans-serif;color:inherit}
.cp-list li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%}
.cp-list li::after{content:"";position:absolute;left:7px;top:5px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cp-col--us .cp-list li::before{background:#22c55e}
.cp-col--them .cp-list li{color:var(--ss-mute)}
.cp-col--them .cp-list li::before{background:var(--ss-chip);border:1px solid var(--ss-line)}
.cp-col--them .cp-list li::after{left:5px;top:4px;width:9px;height:9px;border:0;transform:none;background:linear-gradient(45deg,transparent 42%,var(--ss-mute) 42%,var(--ss-mute) 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--ss-mute) 42%,var(--ss-mute) 58%,transparent 58%)}
.cp-cta{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:14px 22px;border-radius:999px;font:600 14.5px/1 Inter,sans-serif;color:#1b1235;background:#fff;text-decoration:none;transition:transform .2s ease}
.cp-cta:hover{transform:translateY(-2px)}
.cp-note{margin:22px 0 0;font:400 14px/1.5 Inter,sans-serif;color:var(--ss-mute);max-width:46em}
@media (max-width:860px){.cp-grid{grid-template-columns:1fr}.cp-col{padding:26px 22px}}
@media (max-width:640px){.wb-section,.cp-section{padding:70px 0}}

/* ---- theme colours ---- */
.theme-apps .wb-section,.theme-apps .cp-section{--ss-bg:radial-gradient(70% 70% at 50% 100%,#24104a 0%,#160c2c 55%,#0d0719 100%);--ss-ink:#f3eefb;--ss-mute:#b4a8cb;--ss-accent:#c4b5fd;--ss-line:rgba(255,255,255,.12);--ss-card:rgba(255,255,255,.04);--ss-chip:rgba(255,255,255,.08)}
.theme-apps .rw-section{--ss-bg2:#fff;--ss-ink2:#1b1235;--ss-mute2:#6b6280;--ss-accent2:#6d28d9;--ss-line2:#e8e1f3;--ss-card2:#f8f5fd}
.theme-software .cp-section{--ss-bg:#fff;--ss-ink:#0e0a17;--ss-mute:#4f4860;--ss-accent:#6d28d9;--ss-line:#e4dcf2;--ss-card:#fbf9ff;--ss-chip:#f1ecfa}
.theme-software .wb-section{--ss-bg:linear-gradient(180deg,#f6f1fd,#fbf9ff);--ss-ink:#0e0a17;--ss-mute:#4f4860;--ss-accent:#6d28d9;--ss-line:#e4dcf2;--ss-card:#fbf9ff;--ss-chip:#f1ecfa}
.theme-software .rw-section{--ss-bg2:#fff;--ss-ink2:#0e0a17;--ss-mute2:#4f4860;--ss-accent2:#6d28d9;--ss-line2:#e4dcf2;--ss-card2:#fff}
.theme-software .wb-tile{background:#ede7f9}
.theme-software .wb-tile::after{background:linear-gradient(180deg,transparent 45%,rgba(42,20,84,.82) 100%)}
@media (prefers-reduced-motion:reduce){.wb-tile,.wb-tile img,.wb-cap span,.rw-card,.cp-cta{transition:none}}