.app-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 55% 38% at 78% 2%,rgba(244,109,72,.065),transparent 80%),#0a0b0e;
}
.app-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(180deg,black,transparent 45%);
}
.app-section > .container { position: relative; }
.app-overview-head { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.5fr);gap:7%;align-items:end;margin-bottom:58px; }
.app-overview-head h2 { max-width:900px;font-size:clamp(46px,5.6vw,82px);line-height:1.08;letter-spacing:-.075em;word-spacing:.12em;font-weight:600;margin:24px 0 0; }
.app-overview-head h2 em { color:var(--orange2);font-style:normal; }
.app-overview-intro { padding-bottom:8px; }
.app-overview-intro p { font:400 17px/1.75 'DM Sans',sans-serif;color:#adaeb3;margin:0 0 26px; }
.app-overview-intro a { display:inline-flex;align-items:center;gap:20px;border-bottom:1px solid rgba(244,109,72,.72);padding-bottom:7px;color:#f2eee8;font-size:12px;font-weight:800;transition:color .2s,gap .2s; }
.app-overview-intro a:hover { color:var(--orange2);gap:26px; }
.app-overview-intro a span { color:var(--orange);font-size:17px;line-height:1; }
.app-capability-grid { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px; }
.app-capability-card { position:relative;isolation:isolate;overflow:hidden;grid-column:span 3;min-height:295px;display:flex;flex-direction:column;padding:27px;border:1px solid rgba(255,255,255,.105);border-radius:12px;background:#17181d;transition:transform .25s,border-color .25s,background .25s; }
.app-capability-card::before { content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 88% 86%,rgba(244,109,72,.08),transparent 50%);opacity:.6;transition:opacity .25s; }
.app-capability-card::after { content:attr(data-index);position:absolute;z-index:-1;right:17px;bottom:-37px;color:rgba(255,255,255,.035);font-size:clamp(100px,12vw,170px);font-weight:800;line-height:1;letter-spacing:-.1em;pointer-events:none; }
.app-capability-card:hover { transform:translateY(-5px);border-color:rgba(244,109,72,.4);background:#1a1b21; }
.app-capability-card:focus-visible { outline:2px solid var(--orange);outline-offset:4px; }
.app-capability-card:hover::before { opacity:1; }
.app-capability-card.is-featured { grid-column:span 6;min-height:382px;padding:35px 37px;background:radial-gradient(circle at 90% 4%,rgba(244,109,72,.13),transparent 48%),linear-gradient(135deg,#1c1d23,#15161b 72%); }
.app-capability-card.is-featured[data-app-screen="detail"] { background:radial-gradient(circle at 90% 4%,rgba(255,174,121,.085),transparent 50%),linear-gradient(135deg,#1a1b20,#14151a 72%); }
.app-capability-card.is-featured::after { right:25px;bottom:-62px;font-size:230px; }
.app-capability-top { display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--orange);font-size:10px;font-weight:800;letter-spacing:.18em;line-height:1.45; }
.app-capability-top i { display:grid;place-items:center;flex:none;width:31px;height:31px;border:1px solid rgba(244,109,72,.3);border-radius:50%;font-size:15px;font-style:normal;letter-spacing:0; }
.app-capability-copy { position:relative;margin-top:auto;padding-top:35px; }
.app-capability-copy h3 { max-width:470px;font-size:clamp(23px,2.1vw,31px);font-weight:650;line-height:1.2;letter-spacing:-.055em;word-spacing:.08em;margin:0 0 13px;color:#f3f0eb; }
.app-capability-copy p { max-width:425px;font:400 13px/1.7 'DM Sans',sans-serif;color:#aaaab0;margin:0; }
.app-capability-card.is-featured .app-capability-copy h3 { font-size:clamp(31px,3vw,44px);max-width:480px;margin-bottom:16px; }
.app-capability-card.is-featured .app-capability-copy p { font-size:15px;max-width:465px; }
.app-capability-bottom { position:relative;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:28px;padding-top:17px;border-top:1px solid rgba(255,255,255,.1); }
.app-capability-meta { font-size:10px;font-weight:700;color:#85868d;letter-spacing:.02em; }
.app-shot-cta { display:inline-flex;align-items:center;gap:10px;color:#e9e3df;font-size:11px;font-weight:800;white-space:nowrap;transition:color .2s,gap .2s; }
.app-capability-card:hover .app-shot-cta,.app-capability-card:focus-visible .app-shot-cta { color:var(--orange2);gap:15px; }
.app-shot-cta span { color:var(--orange);font-size:16px;line-height:1; }
.app-status-note { display:flex;align-items:center;justify-content:space-between;gap:35px;border-top:1px solid var(--line);margin-top:46px;padding-top:28px; }
.app-status-note > div { display:flex;align-items:baseline;gap:28px; }
.app-status-note > div > span { flex:none;color:var(--orange);font-size:10px;font-weight:800;letter-spacing:.17em; }
.app-status-note p { max-width:730px;color:#98999e;font:400 13px/1.7 'DM Sans',sans-serif;margin:0; }
.app-status-note a { flex:none;color:#e8e4de;font-size:11px;font-weight:800;white-space:nowrap;transition:color .2s; }
.app-status-note a:hover { color:var(--orange2); }
.app-status-note a span { color:var(--orange);font-size:15px;margin-left:7px; }
.app-gallery { position:fixed;inset:0;width:min(1080px,calc(100vw - 36px));max-width:none;max-height:calc(100dvh - 36px);margin:auto;padding:0;border:1px solid #38343a;border-radius:16px;overflow:auto;background:#131419;color:#f4f0eb;box-shadow:0 40px 130px rgba(0,0,0,.7); }
.app-gallery::backdrop { background:rgba(4,4,7,.88);backdrop-filter:blur(7px); }
.app-gallery-shell { padding:28px 30px 22px; }
.app-gallery-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px; }
.app-gallery-kicker { display:flex;gap:18px;color:var(--orange);font-size:10px;font-weight:800;letter-spacing:.17em; }
.app-gallery-kicker span { color:#777780; }
.app-gallery-heading h2 { font-size:clamp(24px,3vw,36px);line-height:1.15;letter-spacing:-.055em;margin:13px 0 6px; }
.app-gallery-heading p { color:#97979f;font:400 13px/1.5 'DM Sans',sans-serif;margin:0; }
.app-gallery-close { display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid #3b3940;border-radius:7px;background:#202127;color:#f2eeeb;font-size:26px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s; }
.app-gallery-close:hover { border-color:var(--orange);color:var(--orange); }
.app-gallery-image-wrap { overflow:hidden;border:1px solid #38343a;border-radius:10px;background:#18181e; }
.app-gallery-image-wrap img { display:block;width:100%;height:auto;max-height:calc(100dvh - 240px);object-fit:contain;object-position:center; }
.app-gallery-footer { display:flex;align-items:center;gap:10px;margin-top:19px; }
.app-gallery-arrow { flex:none;width:34px;height:38px;border:1px solid #393940;border-radius:6px;background:#1b1c22;color:#f1ebe6;font-size:18px;cursor:pointer;transition:border-color .2s,color .2s; }
.app-gallery-arrow:hover { border-color:var(--orange);color:var(--orange); }
.app-gallery-tabs { display:flex;gap:5px;flex:1;min-width:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#4b4748 transparent; }
.app-gallery-tab { display:flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:38px;padding:0 11px;border:1px solid transparent;border-radius:6px;background:none;color:#89898f;font:700 11px Manrope,sans-serif;white-space:nowrap;cursor:pointer;transition:color .2s,background .2s,border-color .2s; }
.app-gallery-tab span { color:#56565e;font-size:10px; }
.app-gallery-tab:hover { color:#eae4de;background:#202027; }
.app-gallery-tab.is-active { border-color:rgba(244,109,72,.35);background:rgba(244,109,72,.11);color:#f2ebe6; }
.app-gallery-tab.is-active span { color:var(--orange); }
.app-gallery button:focus-visible { outline:2px solid var(--orange);outline-offset:2px; }
@media(max-width:1180px) {
  .app-overview-head { grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);gap:6%; }
  .app-capability-card { grid-column:span 6;min-height:260px; }
}
@media(max-width:800px) {
  .app-overview-head { grid-template-columns:1fr;gap:22px;margin-bottom:42px; }
  .app-overview-head h2 { max-width:700px; }
  .app-overview-intro p { max-width:640px; }
  .app-capability-card.is-featured { min-height:365px; }
  .app-status-note { align-items:flex-start; }
  .app-status-note > div { display:block; }
  .app-status-note p { margin-top:10px; }
}
@media(max-width:650px) {
  .app-overview-head h2 { font-size:clamp(39px,9vw,62px); }
  .app-overview-intro p { font-size:15px; }
  .app-capability-card,.app-capability-card.is-featured { grid-column:span 12;min-height:250px;padding:27px; }
  .app-capability-card.is-featured { min-height:320px; }
  .app-capability-card.is-featured::after { font-size:175px;bottom:-43px; }
  .app-capability-card.is-featured .app-capability-copy h3 { font-size:34px; }
  .app-status-note { display:block;margin-top:35px; }
  .app-status-note a { display:inline-block;margin-top:17px; }
  .app-gallery { width:calc(100vw - 20px);max-height:calc(100dvh - 20px); }
  .app-gallery-shell { padding:18px 15px 16px; }
  .app-gallery-heading { margin-bottom:16px; }
  .app-gallery-heading h2 { margin-top:10px; }
  .app-gallery-image-wrap img { max-height:calc(100dvh - 220px); }
  .app-gallery-footer { gap:6px;margin-top:12px; }
  .app-gallery-tab { padding:0 9px; }
}
@media(prefers-reduced-motion:reduce) {
  .app-capability-card,.app-capability-card::before,.app-shot-cta,.app-status-note a,.app-overview-intro a,.app-gallery button { transition:none; }
}
