/* Aplicativos page: light site theme; the apps themselves run inside device frames. */
.ap-hero{padding:clamp(96px,12vh,128px) clamp(18px,4vw,54px) 24px;text-align:center}
.ap-hero h1{font-size:clamp(38px,5.4vw,76px);line-height:.98;letter-spacing:-.04em;max-width:16ch;margin:12px auto 0;text-wrap:balance}
.ap-hero .sub{margin:18px auto 0;max-width:56ch;color:var(--ink-soft);font-size:clamp(16px,1.5vw,19px)}
.ap-live{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0c6b3c;background:#d6f5e3;padding:8px 14px;border-radius:999px}
.ap-live i{width:8px;height:8px;border-radius:50%;background:#1a9c56;animation:apPulse 1.6s infinite}
@keyframes apPulse{50%{opacity:.3}}

.ap-head{max-width:820px;margin:0 auto 40px;text-align:center}
.ap-head .kicker{justify-content:center}
.ap-head h2{font-size:clamp(28px,4vw,52px);line-height:1.04;letter-spacing:-.03em}
.ap-head p{color:var(--ink-soft);margin-top:12px;font-size:17px}

/* ---- device frames: the iframe keeps the app's natural size and is scaled to the frame ---- */
.dev{position:relative;margin:0 auto;background:#0f1013;box-shadow:0 40px 70px -34px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.dev-screen{position:relative;overflow:hidden;background:#111}
.dev-screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#111}
.dev-phone{width:min(300px,86vw);border-radius:40px;padding:10px}
.dev-phone .dev-screen{aspect-ratio:375/812;border-radius:31px}
.dev-phone .dev-screen iframe{width:375px;height:812px}
.dev-phone::before{content:"";position:absolute;z-index:3;top:18px;left:50%;transform:translateX(-50%);width:26%;height:14px;border-radius:10px;background:#0f1013}
.dev-laptop{width:min(760px,100%);border-radius:14px 14px 0 0;padding:12px 12px 0}
.dev-laptop .dev-screen{aspect-ratio:1280/800;border-radius:6px 6px 0 0}
.dev-laptop .dev-screen iframe{width:1280px;height:800px}
.dev-laptop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:#1a1b20}
.dev-base{height:16px;margin:0 auto;width:min(860px,112%);max-width:none;background:linear-gradient(#2a2b31,#141519);border-radius:0 0 14px 14px;position:relative;left:50%;transform:translateX(-50%)}
.dev-tv{width:min(760px,100%);border-radius:10px;padding:8px}
.dev-tv .dev-screen{aspect-ratio:16/9;border-radius:4px}
.dev-tv .dev-screen iframe{width:1280px;height:720px}
.dev-stand{width:140px;height:14px;margin:0 auto;background:#1a1b20;border-radius:0 0 8px 8px}
/* tap-to-load cover: keeps the page light until the person asks for the app */
.dev-cover{position:absolute;inset:0;z-index:2;display:grid;place-items:center;gap:10px;background:radial-gradient(80% 80% at 50% 30%,#232531,#0f1013);color:#fff;text-align:center;padding:24px;cursor:pointer;border:0;font:inherit}
.dev-cover img{width:64px;height:64px;border-radius:16px}
.dev-cover b{font-size:16px}
.dev-cover span{font-size:13px;color:#aab;max-width:28ch}
.dev-cover .btn{margin-top:4px}
.dev-cover.off{display:none}
.dev-loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:#889;font-size:13px}
.dev-hint{text-align:center;font-size:13px;color:var(--ink-faint);margin-top:10px}

/* ---- SoulInvest, the flagship ---- */
.si{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;background:#0f1412;color:#eef3ef;border-radius:32px;padding:clamp(28px,4vw,56px);overflow:hidden;position:relative}
.si::before{content:"";position:absolute;inset:auto -20% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(74,222,128,.22),transparent);pointer-events:none}
.si .kicker{color:#4ade80}.si .kicker::before{background:#4ade80}
.si h2{color:#fff;font-size:clamp(30px,4vw,54px);line-height:1.02;letter-spacing:-.03em;margin:10px 0 14px}
.si h2 .g{color:#4ade80!important}
.si p{color:#b9c6bd;font-size:17px;line-height:1.6;margin:0 0 18px}
.si-mods{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.si-mods li{font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#dfe8e2}
.si-facts{display:grid;gap:10px;margin:0 0 24px;padding:0;list-style:none}
.si-facts li{display:flex;gap:10px;font-size:15px;color:#dfe8e2;line-height:1.45}
.si-facts svg{flex:none;width:20px;height:20px;stroke:#4ade80;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.si .btn{background:#4ade80;border-color:#4ade80;color:#0f1412}
.si .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.si-vis{position:relative;display:grid;place-items:center;min-height:340px}
.si-vis .dev-phone{z-index:2}
.si-vis .si-logo{position:absolute;width:min(420px,90%);opacity:.14;filter:blur(1px)}
.si-shot{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.si-shot img{width:100%;border-radius:18px;border:1px solid rgba(255,255,255,.1)}
@media(max-width:900px){.si{grid-template-columns:1fr}.si-vis{min-height:0;order:-1}}

/* ---- live app grid ---- */
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px);max-width:1160px;margin:0 auto}
.ap-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3vw,32px);box-shadow:var(--card-shadow)}
.ap-card.wide{grid-column:1/-1}
.ap-card .dev{margin-top:4px}
.ap-meta{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.ap-meta img{width:48px;height:48px;border-radius:12px;flex:none}
.ap-meta h3{font-size:22px;margin:0;letter-spacing:-.02em}
.ap-meta small{display:block;font-size:13px;font-weight:700;color:var(--ink-faint);margin-top:2px}
.ap-card p{color:var(--ink-soft);line-height:1.55;margin:0 0 16px;font-size:15.5px}
.ap-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;padding:7px 13px;border-radius:999px;text-decoration:none}
.ap-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.ap-status.live{color:#0c6b3c;background:#d6f5e3}
.ap-status.soon{color:#7a5a00;background:#fff2c7}
.ap-status.int{color:#1d3f9e;background:#e3e9fb}
.ap-dl{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ap-dl a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:10px 14px;border-radius:12px;border:1px solid var(--line-2);text-decoration:none;color:var(--ink)}
.ap-dl a:hover{border-color:var(--brand);color:var(--brand)}
.ap-dl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-swap{display:grid}
.ap-swap img{grid-area:1/1;opacity:0;transition:opacity .8s;width:100%;display:block}
.ap-swap img.on{opacity:1}
.ap-screenlist{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;padding:36px 18px;background:linear-gradient(170deg,#1b1f2b,#0f1013);color:#fff}
.ap-screenlist img{width:64px;height:64px;border-radius:16px}
.ap-screenlist b{font-size:15px}
.ap-screenlist i{font-style:normal;font-size:12.5px;width:100%;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.ap-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1160px;margin:0 auto}
.ap-tool{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--card-shadow)}
.ap-tool .ap-meta{margin-bottom:8px}.ap-tool .ap-meta h3{font-size:19px}
.ap-tool p{font-size:14.5px;margin-bottom:12px}
@media(max-width:900px){.ap-grid{grid-template-columns:1fr}.ap-tools{grid-template-columns:1fr}}

/* ---- steps / vs / faq / final (light) ---- */
.ap-steps{list-style:none;padding:0;margin:0 auto;max-width:1160px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.ap-steps li b{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--surface);border:2px solid var(--brand);color:var(--brand);font-size:17px;margin-bottom:16px}
.ap-steps h3{font-size:20px;margin:0 0 8px}.ap-steps p{color:var(--ink-soft);line-height:1.55;margin:0}
.ap-vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:960px;margin:0 auto}
.ap-vs-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--card-shadow)}
.ap-vs-card h3{font-size:24px;margin:0 0 6px}.ap-vs-card .pain{color:var(--ink-soft);margin:0 0 16px}.ap-vs-card ul{margin:0;padding-left:20px;line-height:1.8}
.ap-faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.ap-faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 22px}
.ap-faq summary{font-weight:800;font-size:18px;cursor:pointer}.ap-faq p{color:var(--ink-soft);line-height:1.6;margin:12px 0 0}
@media(max-width:900px){.ap-steps{grid-template-columns:1fr 1fr}.ap-vs{grid-template-columns:1fr}}
@media(max-width:520px){.ap-steps{grid-template-columns:1fr}}

/* ---- scroll experience: native scroll-driven animations, transform/opacity only ----
   Browsers without animation-timeline keep the IntersectionObserver reveals; reduced motion turns it all off. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* thin progress line under the nav */
    body::before{content:"";position:fixed;z-index:60;left:0;top:0;height:3px;width:100%;background:var(--brand);transform-origin:0 50%;transform:scaleX(0);animation:apProgress linear both;animation-timeline:scroll(root)}
    @keyframes apProgress{to{transform:scaleX(1)}}
    /* hero copy drifts up and fades as it leaves */
    .ap-hero > *{animation:apHeroOut linear both;animation-timeline:view();animation-range:exit 0% exit 70%}
    @keyframes apHeroOut{to{transform:translateY(-40px);opacity:0}}
    /* devices rise into place a touch slower than the text around them (depth) */
    .ap-card .dev{animation:apRise linear both;animation-timeline:view();animation-range:entry 0% entry 55%;will-change:transform}
    @keyframes apRise{from{transform:translateY(48px) scale(.97);opacity:.4}}
    .ap-card .ap-meta,.ap-card > p{animation:apRiseSoft linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    @keyframes apRiseSoft{from{transform:translateY(18px);opacity:0}}
    /* flagship: logo sits deeper than the copy */
    .si-vis img{animation:apDeep linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes apDeep{from{transform:translateY(60px)}to{transform:translateY(-60px)}}
    .si > div:first-child{animation:apRiseSoft linear both;animation-timeline:view();animation-range:entry 10% entry 45%}
    /* section headers come in a beat before their cards */
    .ap-head{animation:apHead linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes apHead{from{transform:translateY(24px);opacity:0}}
    /* steps count in one after the other as the row enters */
    .ap-steps li{animation:apRiseSoft linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
    .ap-steps li:nth-child(2){animation-range:entry 10% entry 60%}.ap-steps li:nth-child(3){animation-range:entry 20% entry 70%}.ap-steps li:nth-child(4){animation-range:entry 30% entry 80%}
    /* the JS reveal would double up with these */
    .js .reveal{transition:none;opacity:1;transform:none}
    .js .reveal.in>*{animation:none}
  }
}

/* ---- fixes 28/10: screenshots never stretch; TV card shows screens with the app on request ---- */
.dev-screen .ap-swap img,.dev-screen img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.dev-cover.ghostly{background:linear-gradient(to top,rgba(0,0,0,.65),transparent 55%);align-content:end;padding-bottom:28px}
.ap-ico-f{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#0f2d1f;color:#a3e635;font-weight:800;font-size:22px;flex:none}
/* ---- SoulInvest miniature ---- */
.si-vis{display:block;min-height:0}
.sd .dev-screen{aspect-ratio:16/11;background:#0b0f0d;color:#e6efe9;font-size:13px;overflow:auto;font-family:var(--display)}
.sd-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 14px;background:#0b0f0d;border-bottom:1px solid rgba(255,255,255,.08)}
.sd-head img{border-radius:6px}.sd-head b{font-size:13px}
.sd-tabs{margin-left:auto;display:flex;gap:4px}
.sd-tabs button{font:inherit;font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#b9c6bd;cursor:pointer}
.sd-tabs button.on{background:#4ade80;border-color:#4ade80;color:#0b0f0d}
.sd-body{padding:12px 14px 16px}
.sd-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sd-top small{display:block;color:#8fa397;font-size:11px}.sd-top b{font-size:22px;letter-spacing:-.02em}.sd-top em{display:block;font-style:normal;font-size:12px}
.up{color:#4ade80}.down{color:#f87171}
.sd-donut{position:relative;width:84px;height:84px;border-radius:50%;flex:none}.sd-donut i{position:absolute;inset:18px;border-radius:50%;background:#0b0f0d}
.sd-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin:10px 0 12px;font-size:11px;color:#b9c6bd}.sd-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.sd-list{display:grid;gap:6px}
.sd-list button{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t v" "n s";gap:0 10px;text-align:left;font:inherit;color:inherit;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:8px 10px 10px;cursor:pointer;overflow:hidden}
.sd-list button:hover{border-color:#4ade80}
.sd-list b{grid-area:t;font-size:13px}.sd-list small{grid-area:n;color:#8fa397;font-size:11px}.sd-list span{grid-area:v;font-size:12px;text-align:right}.sd-list strong{grid-area:s;font-size:12px;text-align:right;font-weight:600}
.sd-list i{position:absolute;left:0;bottom:0;height:3px}
.sd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.sd-chips button{font:inherit;font-size:11px;font-weight:700;padding:5px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#b9c6bd;cursor:pointer}
.sd-chips button.on{background:rgba(74,222,128,.15);border-color:#4ade80;color:#4ade80}
.sd-score{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.sd-score small{display:block;color:#8fa397;font-size:11px}.sd-score b{font-size:18px}
.sd-verdict{display:flex;gap:6px}.sd-verdict span{display:grid;text-align:center;font-size:10px;color:#b9c6bd;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.05)}.sd-verdict b{font-size:14px;color:#fff}.sd-verdict .v0 b{color:#4ade80}.sd-verdict .v4 b{color:#f87171}
.sd-bar{display:grid;grid-template-columns:1fr 110px 28px;align-items:center;gap:8px;font-size:11px;color:#b9c6bd;margin:6px 0}
.sd-bar i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}.sd-bar i b{display:block;height:100%;background:#4ade80}.sd-bar em{font-style:normal;text-align:right;color:#fff}
.sd-note{margin:12px 0 0;font-size:11px;color:#8fa397}
.sd-sim{display:grid;gap:8px}.sd-sim label{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:11px;color:#b9c6bd}.sd-sim label b{color:#fff;font-size:12px;text-align:right}.sd-sim input{grid-column:1/-1;accent-color:#4ade80;width:100%}
.sd-chart{display:block;width:100%;height:auto;margin:10px 0 6px}.sd-chart .area{fill:rgba(74,222,128,.15)}.sd-chart .line{fill:none;stroke:#4ade80;stroke-width:2}
.sd-res{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sd-res small{display:block;color:#8fa397;font-size:10px}.sd-res b{font-size:13px}
.sd-cap{margin:12px 0 0;text-align:center;font-size:12px;color:#8fa397}
@media(max-width:900px){.sd .dev-screen{aspect-ratio:4/5}}
/* mobile: the miniature must never be wider than its card */
.si-vis{min-width:0}
.sd-head{flex-wrap:wrap}.sd-tabs{flex-wrap:wrap}
@media(max-width:900px){.sd-head{gap:6px 8px}.sd-tabs{margin-left:0;width:100%}.dev-base{width:100%;left:0;transform:none}}