/* Featured app (start page): dark card with a 3D phone showing a live-demo App Show app. A different app on every visit (shared/featured-app.js).
   Two styles, chosen with data-style on .fa-card: "tilt" (phone turned to the left, tagline as title) and "showcase" (phone lying back like a product shot, keyword as title). */
.fa-sec{padding:40px 20px 70px}
.fa-card{position:relative;display:block;max-width:1780px;margin:0 auto;height:clamp(460px,52vw,1000px);border-radius:36px;overflow:hidden;background:radial-gradient(120% 90% at 70% 30%,#14201a 0%,#0b0c0d 55%,#060606 100%);color:#f2efe6;text-decoration:none;isolation:isolate;opacity:0;transition:opacity .6s}
.fa-card.on{opacity:1}
.fa-pill{position:absolute;z-index:4;top:28px;left:28px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;border:1px solid #ffffff26;background:#0b0b0b99;backdrop-filter:blur(8px);font:600 14px/1 'DM Sans',Inter,Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase}
.fa-pill i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff6b6b,#c3141c);box-shadow:0 0 12px #ff3b3b88}
.fa-stage{position:absolute;inset:0;perspective:1800px;perspective-origin:60% 20%}
.fa-phone{position:absolute;left:52%;top:8%;width:min(30%,520px);aspect-ratio:9/19.5;border-radius:12% / 5.6%;padding:1.6%;background:linear-gradient(135deg,#e7a46f 0%,#b5652f 30%,#7a3c16 55%,#d58d55 80%,#f0b885 100%);
  transform:rotateX(46deg) rotateY(-4deg) rotateZ(-24deg);transform-origin:50% 30%;box-shadow:-30px 60px 90px #000c,inset 0 0 0 2px #ffffff22;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.fa-card:hover .fa-phone{transform:rotateX(42deg) rotateY(-3deg) rotateZ(-22deg) translateY(-8px)}
.fa-screen{position:relative;width:100%;height:100%;border-radius:10.5% / 4.9%;overflow:hidden;background:#000;box-shadow:inset 0 0 0 3px #0a0a0a}
.fa-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;filter:saturate(1.05) brightness(.78)}
.fa-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#ffffff1f 0%,transparent 30%,transparent 70%,#00000059)}
.fa-island{position:absolute;z-index:2;top:2.2%;left:50%;width:30%;height:3.3%;transform:translateX(-50%);border-radius:999px;background:#000}
.fa-glow{position:absolute;z-index:-1;left:45%;top:5%;width:55%;height:70%;background:radial-gradient(closest-side,#2f7d5544,transparent);filter:blur(30px)}
.fa-shade{position:absolute;z-index:2;inset:0;background:linear-gradient(0deg,#060606f2 0%,#060606b3 24%,transparent 52%),linear-gradient(90deg,#060606cc 0%,transparent 45%);pointer-events:none}
.fa-card[data-style=tilt] .fa-x{display:none}
.fa-txt{position:absolute;z-index:3;left:clamp(28px,4vw,64px);right:28px;bottom:clamp(28px,4vw,60px);max-width:1100px}
.fa-title.long{font-size:clamp(26px,3vw,52px)}
.fa-title{margin:0;max-width:16em;font:500 clamp(30px,3.8vw,68px)/1.02 Georgia,'Times New Roman',serif;letter-spacing:-.01em;text-transform:uppercase;color:#f2efe6}
.fa-sub{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:18px;font:500 15px/1 'Courier New',ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;color:#d7d3c7}
.fa-try{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#f2efe6;color:#0b0b0b;font:700 13px/1 'DM Sans',Inter,Arial,sans-serif;letter-spacing:.02em}
@media(max-width:760px){.fa-sec{padding:24px 12px 40px}.fa-card{height:600px;border-radius:24px}.fa-phone{left:30%;top:8%;width:62%}.fa-title,.fa-title.long{font-size:26px}.fa-pill{top:18px;left:18px;font-size:12px}.fa-sub{font-size:12px;gap:12px}}
@media(prefers-reduced-motion:reduce){.fa-card,.fa-phone{transition:none}}

/* ---------- style "showcase": a real 3D phone (front + 40 stacked edge layers, made in featured-app.js) lying back, seen from the lower right ---------- */
.fa-card[data-style=showcase]{background:#0b0b0b;border-radius:40px}
.fa-card[data-style=showcase] .fa-glow{left:20%;top:10%;width:60%;height:55%;background:radial-gradient(closest-side,#1f4a3355,transparent)}
.fa-card[data-style=showcase] .fa-stage{perspective:1600px;perspective-origin:100% 0%}
.fa-card[data-style=showcase] .fa-phone{left:-16%;top:-14%;width:86%;aspect-ratio:9/19.5;padding:0;border-radius:0;background:none;box-shadow:none;transform-style:preserve-3d;
  transform:rotateZ(11deg) rotateX(52deg) rotateY(-18deg);transform-origin:50% 50%;transition:transform 1.4s cubic-bezier(.2,.7,.2,1);--rr:13% / 6%}
.fa-card[data-style=showcase]:hover .fa-phone{transform:rotateZ(11deg) rotateX(50deg) rotateY(-20deg)}
.fa-ly{position:absolute;inset:0;border-radius:var(--rr)}
.fa-front{position:absolute;inset:0;border-radius:var(--rr);background:#0a0a0a;padding:2.2%;box-shadow:inset 0 0 0 3px #d98c50}
.fa-card[data-style=showcase] .fa-screen{border-radius:11.6% / 5.3%;background:#000;box-shadow:none}
.fa-card[data-style=showcase] .fa-screen img{filter:brightness(.32) contrast(1.15) saturate(.8)}
.fa-card[data-style=showcase] .fa-screen::after{background:radial-gradient(80% 40% at 45% 0%,#2f7a4c88,transparent 70%),linear-gradient(180deg,transparent 35%,#050505 85%)}
.fa-card[data-style=showcase] .fa-island{top:2.1%;width:30%;height:3.4%}
.fa-x{position:absolute;z-index:2;top:2.4%;left:10%;right:7%;display:flex;justify-content:space-between;align-items:center;font:600 clamp(10px,1.3vw,22px)/1 -apple-system,'SF Pro Display','DM Sans',Arial,sans-serif;color:#f4f4f4;font-style:italic}
.fa-x svg{height:1em;fill:#f4f4f4}
.fa-card[data-style=showcase] .fa-shade{background:linear-gradient(0deg,#0b0b0bf2 0%,#0b0b0b99 22%,transparent 50%),linear-gradient(90deg,#0b0b0b99 0%,transparent 40%)}
.fa-card[data-style=showcase] .fa-pill{top:30px;left:30px;padding:9px 16px 9px 12px;border:1px solid #ffffff1f;background:#111;font:600 15px/1 'DM Sans',Arial,sans-serif;letter-spacing:.01em}
.fa-card[data-style=showcase] .fa-pill i{width:16px;height:16px;background:radial-gradient(circle at 40% 40%,#ff4d4d 0 30%,#a0101a 31% 60%,transparent 61%),radial-gradient(circle at 70% 70%,#d11d27 0 25%,transparent 26%);box-shadow:none}
.fa-card[data-style=showcase] .fa-title{font:400 clamp(34px,4.4vw,74px)/.95 'Instrument Serif',Georgia,serif;letter-spacing:-.005em;max-width:14em;color:#ece8dc}
.fa-card[data-style=showcase] .fa-sub{margin-top:16px;font:500 clamp(13px,1vw,17px)/1 'IBM Plex Mono','Courier New',monospace;letter-spacing:.02em;color:#c9c5b6}
.fa-card[data-style=showcase] .fa-try{display:none}
@media(max-width:760px){.fa-card[data-style=showcase] .fa-phone{left:-62%;top:-2%;width:150%}.fa-card[data-style=showcase] .fa-title{font-size:34px}}

/* 3D iPhone (ChatGPT model) replaces the CSS phone when WebGL works */
.fa-3d{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s}.fa-3d .iphone-component{min-height:0}.fa-3d .iphone-fallback{display:none}
.fa-card.fa-3d-on .fa-3d{opacity:1}.fa-card.fa-3d-on .fa-phone{visibility:hidden}
/* 2.0.269: 10 app buttons under the name pill - each loads that app onto the phone */
.fa-apps{position:absolute;z-index:4;top:84px;left:30px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.fa-app{padding:7px 13px;border-radius:999px;border:1px solid #ffffff1a;background:#0e0e0ecc;color:#bdb8ad;font:600 12px/1 'DM Sans',Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;user-select:none;transition:color .2s,border-color .2s,background .2s}
.fa-app:hover,.fa-app:focus-visible{color:#fff;border-color:#ffffff40;outline:none}
.fa-app.on{color:#fff;background:#1a1a1a;border-color:#ffffff33}
.fa-app.on::before{content:'';display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#e2262f;vertical-align:1px}
@media(max-width:760px){.fa-apps{top:78px;left:18px;right:18px;flex-direction:row;flex-wrap:wrap;gap:6px}.fa-app{padding:6px 10px;font-size:10px}}