:root{--bg:#09090c;--orange:#ff6b21;--cream:#f8f3ed;--muted:#a9a4a3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--cream);font-family:Vazirmatn,Tahoma,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid #ffb16a;outline-offset:4px}::selection{background:var(--orange);color:#111}.cursor-light{position:fixed;top:var(--my,-500px);left:var(--mx,-500px);width:500px;height:500px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ff6b211c,transparent 65%);z-index:2;pointer-events:none}.scroll-progress{position:fixed;top:0;right:0;height:2px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:right;z-index:50}.nav{position:absolute;z-index:10;top:0;left:0;right:0;padding:27px 6vw;display:flex;align-items:center;justify-content:space-between;direction:ltr}.logo{direction:ltr;display:inline-flex;align-items:center;gap:7px;font-size:22px;font-weight:900;letter-spacing:-1.8px}.logo b,.logo-bars{color:var(--orange)}.logo-bars{letter-spacing:-8px;margin-right:9px;font-size:29px}.nav nav{display:flex;gap:33px;direction:rtl;font-size:13px}.nav nav a:hover,.nav-button:hover,footer a:hover{color:var(--orange)}.nav-button{border:1px solid #777;border-radius:50px;padding:8px 21px;font-size:12px;font-weight:800;direction:rtl}.nav-button span{margin-right:15px}.hero{position:relative;min-height:800px;height:100svh;max-height:1050px;display:flex;align-items:center;padding:105px 10vw 90px;overflow:hidden;background:radial-gradient(circle at 27% 50%,#3d1b10 0,#180f0e 29%,#09090c 65%)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:78px 78px;mask-image:linear-gradient(90deg,#000,transparent)}.orbit{position:absolute;left:-10%;top:-8%;width:900px;height:900px;border:1px solid #ff8d3030;border-radius:50%;transform:rotate(-20deg) scaleX(1.2)}.orbit-b{width:1100px;height:1100px;left:-19%;top:-20%;opacity:.5}.hero-copy{position:relative;z-index:4;width:58%}.eyebrow{display:flex;align-items:center;gap:10px;color:#ffa05c;font-size:11px;letter-spacing:.08em;font-weight:800}.eyebrow i{width:6px;height:6px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 5px #ff6b2138}.eyebrow span{direction:ltr;margin-right:15px;color:#887e7c}.hero h1{font-size:clamp(64px,7.6vw,128px);letter-spacing:-.07em;line-height:1.14;margin:30px 0 15px;font-weight:900}.hero h1 em,.story h2 em,.slide h2 em{font-style:normal;color:var(--orange)}.orange{color:var(--orange)}.hero-description{color:#c4bab5;font-size:16px;line-height:2;max-width:405px}.hero-actions{display:flex;align-items:center;gap:27px;margin-top:31px}.primary{background:var(--orange);color:#160b08;padding:16px 25px;border-radius:50px;font-size:13px;font-weight:900;display:inline-flex;gap:25px;box-shadow:0 15px 40px #ff6b2136}.primary:hover,.store-button:hover{background:#ff9648}.subtle{font-size:12px;border-bottom:1px solid #777;padding-bottom:5px}.subtle:hover{color:var(--orange)}.hero-visual{position:absolute;left:7vw;top:51%;transform:translateY(-50%);width:45%;height:72%;display:grid;place-items:center;perspective:1100px}.halo{position:absolute;width:600px;height:600px;background:radial-gradient(circle,#ff6b2180,#ff6b211b 39%,transparent 70%);filter:blur(26px);animation:breathe 5s ease-in-out infinite}.hero-visual:before,.hero-visual:after{content:"";position:absolute;width:75%;aspect-ratio:1;border:1px solid #ffaf6866;border-radius:50%;transform:rotateX(67deg) rotate(-25deg)}.hero-visual:after{width:105%;opacity:.4;transform:rotateX(67deg) rotate(25deg)}.visual-label{position:absolute;z-index:4;direction:ltr;color:#ffca9b;font-size:10px;letter-spacing:.24em;font-weight:800}.label-left{left:0;top:16%}.label-right{right:0;bottom:15%}.phone{width:275px;height:550px;background:#09090b;border:7px solid #252427;border-radius:40px;box-shadow:0 30px 80px #000c,0 0 0 2px #746661;overflow:hidden;position:relative;z-index:3;transform:rotate(-10deg) rotateY(-17deg) rotateX(5deg) translateY(var(--phone-y,0px));transition:transform .2s}.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);height:18px;width:75px;border-radius:20px;background:#08080a;z-index:2}.phone-ui{padding:21px 12px 9px;background:#121216;height:100%;overflow:hidden}.phone-status,.phone-row{display:flex;justify-content:space-between;align-items:center}.phone-status{font-size:9px}.phone-hello{display:flex;flex-direction:column;margin-top:20px}.phone-hello small{color:#999;font-size:9px}.phone-hello strong{font-size:15px}.phone-cover{height:218px;border-radius:15px;position:relative;overflow:hidden;margin-top:16px;background:radial-gradient(circle at 70% 25%,#ffca79,#f96b21 32%,#672117 76%,#240e15)}.cover-sun{position:absolute;width:130px;height:130px;border-radius:50%;left:0;top:25px;background:#ffd094}.cover-hill{position:absolute;bottom:-38px;right:-20px;width:280px;height:125px;background:#3d1620;border-radius:50%;transform:rotate(-14deg);box-shadow:0 -25px 0 #ae492d}.cover-text{position:absolute;inset:18px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between}.cover-text small{font-size:9px}.cover-text b{font-size:30px;line-height:1.2;text-shadow:0 3px 7px #0009}.cover-text span{font-size:8px;font-weight:900;letter-spacing:.15em}.phone-row{margin-top:16px;font-size:10px}.phone-row span{font-size:8px;color:var(--orange)}.moods{display:flex;gap:8px;margin-top:10px}.moods div{height:57px;width:50%;border-radius:8px;padding:9px;font-size:8px;background:linear-gradient(120deg,#e78737,#5c1a17);display:flex;flex-direction:column;justify-content:space-between}.moods div+div{background:linear-gradient(120deg,#5f4b72,#1b1b29)}.moods strong{font-size:10px}.mini-player{display:flex;align-items:center;gap:8px;background:#252529;border-radius:7px;margin-top:10px;padding:5px;height:40px}.mini-player>span{width:30px;height:30px;display:grid;place-items:center;border-radius:5px;background:var(--orange)}.mini-player div{flex:1;display:flex;flex-direction:column}.mini-player b{font-size:8px}.mini-player small{font-size:7px;color:#aaa}.phone-tabs{display:flex;justify-content:space-between;text-align:center;color:#999;margin-top:10px}.phone-tabs span{display:flex;flex-direction:column;font-size:14px;line-height:1}.phone-tabs span:first-child{color:var(--orange)}.phone-tabs small{font-size:7px;margin-top:3px}.scroll-cue{position:absolute;bottom:26px;right:10vw;direction:ltr;display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:.2em;color:#aaa}.scroll-cue span{width:40px;height:1px;background:#aaa}.ticker{position:relative;z-index:4;background:var(--orange);color:#1b100a;overflow:hidden;height:90px;display:flex;align-items:center;transform:rotate(-1.3deg) scale(1.02);direction:ltr}.ticker div{font-size:37px;font-weight:900;white-space:nowrap;display:flex;gap:35px;align-items:center;animation:marquee 20s linear infinite}.ticker b{font-size:40px}.section{padding:120px 10vw}.section-top{display:flex;align-items:center;gap:20px;color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.12em}.section-top i{height:1px;flex:1;background:#5c3325}.section-top span:last-child{direction:ltr;color:#777}.story{min-height:670px;background:#0c0c0f}.story-layout{display:flex;justify-content:space-between;gap:40px;margin-top:65px}.story h2{font-size:clamp(50px,6.3vw,100px);line-height:1.35;letter-spacing:-.065em;margin:0}.story-side{max-width:280px;align-self:flex-end}.star{color:var(--orange);font-size:85px;display:inline-block;line-height:1;animation:spin 26s linear infinite}.story-side p{font-size:14px;color:#aaa;line-height:2.2}.story-side a{width:55px;height:55px;border:1px solid #777;border-radius:50%;display:grid;place-items:center;font-size:25px;margin-top:25px}.story-side a:hover{background:var(--orange);color:#111}.discover{position:relative;background:#151417}.discover-sticky{position:sticky;top:0;height:100svh;min-height:680px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}.discover-copy{position:relative;padding:100px 7vw 60px 8vw}.discover-copy .section-top{font-size:9px}.slide{position:absolute;top:50%;right:8vw;left:4vw;transform:translateY(-25%) translateY(45px);opacity:0;transition:opacity .6s,transform .6s;pointer-events:none}.slide.active{opacity:1;transform:translateY(-25%);pointer-events:auto}.slide small{direction:ltr;display:block;text-align:right;letter-spacing:.2em;color:#ffa05c}.slide h2{font-size:clamp(50px,5.7vw,90px);line-height:1.28;letter-spacing:-.05em;margin:20px 0}.slide p{color:#aaa;max-width:365px;line-height:2}.slide-dots{position:absolute;bottom:65px;right:8vw;display:flex;gap:7px}.slide-dots i{width:25px;height:3px;background:#625b59;transition:width .4s,background .4s}.slide-dots i.active{width:52px;background:var(--orange)}.discover-visual{position:relative;display:grid;place-items:center;background:radial-gradient(circle,#5a281b,#291916 35%,#151316 72%);overflow:hidden}.visual-circle{position:absolute;width:680px;height:680px;border:1px solid #ffffff18;border-radius:50%;box-shadow:0 0 0 120px #ffffff05,0 0 0 240px #ffffff04}.album-card{position:relative;width:min(63%,350px);aspect-ratio:.73;background:#1d1719;border:1px solid #ffffff35;border-radius:16px;overflow:hidden;box-shadow:0 25px 80px #000a,0 0 100px #ff6b2138;transform:rotate(-5deg);transition:transform .6s}.album-card:hover{transform:rotate(0) scale(1.03)}.album-header{display:flex;justify-content:space-between;padding:18px;direction:ltr;font-size:10px;letter-spacing:.2em}.album-art{height:68%;margin:0 18px;position:relative;overflow:hidden;background:linear-gradient(140deg,#ffb665,#f26924 38%,#651d24 78%,#261321);transition:background .5s}.album-art.theme-1{background:linear-gradient(140deg,#f39b37,#8e2831 50%,#21142b)}.album-art.theme-2{background:linear-gradient(140deg,#ffd18a,#bd4a31 42%,#281620)}.vinyl{position:absolute;width:95%;aspect-ratio:1;border-radius:50%;left:-26%;top:-10%;background:repeating-radial-gradient(circle,#1b1016 0 2px,#5e2b30 3px 5px);box-shadow:0 15px 45px #0008;animation:spin 18s linear infinite}.vinyl i{position:absolute;inset:40%;border-radius:50%;background:#ffa455;border:5px solid #291318}.light-rays{position:absolute;right:16%;top:0;width:60px;height:130%;background:#ffc07879;transform:rotate(22deg);filter:blur(7px);box-shadow:75px 0 0 #ffc07833}.album-caption{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}.album-caption div{display:flex;flex-direction:column}.album-caption small{font-size:8px;color:#aaa;letter-spacing:.13em;direction:ltr;text-align:right}.album-caption strong{font-size:16px}.album-caption button{border:0;border-radius:50%;width:35px;height:35px;background:var(--orange);cursor:pointer}.waveform{height:15px;margin:0 18px;background:repeating-linear-gradient(90deg,var(--orange) 0 2px,transparent 2px 5px);mask-image:linear-gradient(to bottom,transparent 0%,#000 50%,transparent 100%);animation:pulsebar .7s ease-in-out infinite alternate}.waveform.paused{animation-play-state:paused}.demo-caption{position:absolute;bottom:25px;color:#aaa;font-size:10px}.scroll-steps{height:300vh;pointer-events:none}.scroll-steps div{height:100vh}.manifesto{position:relative;overflow:hidden;min-height:800px;background:var(--orange);color:#1b0f09}.giant-star{position:absolute;left:-12vw;top:-12vw;font-size:80vw;line-height:1;color:#ffffff17;animation:spin 90s linear infinite}.manifesto .section-top{color:#3d1f0e}.manifesto .section-top i{background:#753820}.manifesto .section-top span:last-child{color:#5c351f}.manifesto>p{position:relative;margin:90px 0 0;font-size:20px;font-weight:700}.manifesto h2{position:relative;font-size:clamp(90px,12vw,190px);line-height:1.2;letter-spacing:-.08em;margin:15px 0 70px}.manifesto h2 span{color:#fff}.manifesto-footer{position:relative;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #6b361f;padding-top:15px;font-size:13px;font-weight:700}.manifesto-footer span+span{font-size:32px}.download{min-height:760px;position:relative;overflow:hidden}.download-glow{position:absolute;left:-15%;top:-20%;width:900px;height:900px;background:radial-gradient(circle,#5b271b,#241412 28%,transparent 68%)}.download .section-top,.download-layout{position:relative}.download-layout{display:flex;justify-content:space-between;align-items:center;gap:50px}.download-copy{padding-top:45px}.download-star{font-size:52px;color:var(--orange)}.download h2{font-size:clamp(80px,9vw,145px);letter-spacing:-.07em;line-height:1.17;margin:12px 0}.download-copy>p{color:#aaa}.download-buttons{display:flex;gap:12px;margin-top:35px}.store-button{display:flex;align-items:center;gap:12px;min-width:193px;background:var(--orange);color:#170d08;padding:13px 18px;border:1px solid var(--orange);border-radius:12px;cursor:pointer;text-align:right}.store-button>span:nth-child(2){display:flex;flex-direction:column;flex:1}.store-button small{font-size:10px}.store-button strong{font-size:16px}.store-icon{font-size:29px}.store-button>b{align-self:flex-start}.store-button.outline{background:transparent;color:white;border-color:#71605b}.store-button.outline:hover{background:#292123}.download-note{font-size:11px!important;min-height:25px}.download-disc{width:min(38vw,450px);height:min(38vw,450px);min-width:350px;min-height:350px;border:1px solid #ff8d4459;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 0 45px #ff6b210a,0 0 0 100px #ff6b2105,inset 0 0 70px #ff6b2130;animation:breathe 5s ease-in-out infinite}.download-disc:before,.download-disc:after{content:"";position:absolute;inset:17%;border:1px dashed #ff9a547e;border-radius:50%;animation:spin 30s linear infinite}.download-disc:after{inset:31%;animation-direction:reverse}.download-disc>div{width:40%;aspect-ratio:1;border-radius:50%;background:var(--orange);display:grid;place-items:center;color:#241109;font-size:55px;box-shadow:0 0 80px #ff6b21a3}.download-disc>span{position:absolute;top:-8px;font-size:10px;letter-spacing:.25em;color:#ffa05c}.download-disc>span:last-child{top:auto;bottom:-8px}footer{min-height:125px;padding:20px 10vw;border-top:1px solid #333;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#999;font-size:12px}footer .logo{color:white}footer small{direction:ltr;letter-spacing:.1em}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{50%{transform:scale(1.05)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes pulsebar{to{opacity:.4;transform:scaleY(.45)}}
@media(max-width:950px){.hero{padding-right:7vw}.hero-copy{width:62%}.hero-visual{left:0;width:45%}.phone{transform:rotate(-10deg) scale(.88)}.section{padding:100px 7vw}.discover-copy{padding-right:7vw}.slide{right:7vw}.download-disc{min-width:290px;min-height:290px;width:290px;height:290px}}
@media(max-width:700px){.nav{padding:20px 6vw}.nav nav{display:none}.logo{font-size:20px}.hero{height:auto;min-height:900px;padding:125px 7vw 75px;align-items:flex-start}.hero-copy{width:100%}.hero h1{font-size:clamp(58px,12vw,78px);margin:23px 0 10px}.hero-description{font-size:13px;max-width:330px}.hero-actions{gap:15px;flex-wrap:wrap}.primary{font-size:11px;padding:12px 16px;gap:10px}.subtle{font-size:11px}.hero-visual{width:100%;height:440px;top:650px;left:0}.phone{width:215px;height:430px;border-width:5px;border-radius:31px;transform:rotate(-10deg) scale(.84)}.phone-ui{padding:17px 9px}.phone-hello{margin-top:13px}.phone-cover{height:160px;margin-top:10px}.cover-text{inset:13px}.cover-text b{font-size:22px}.phone-row{margin-top:8px}.moods div{height:45px}.mini-player{margin-top:6px}.phone-tabs{margin-top:7px}.halo{width:460px;height:460px}.visual-label{font-size:8px}.label-left{left:5%;top:10%}.label-right{right:5%;bottom:12%}.scroll-cue{right:7vw;bottom:18px}.ticker{height:60px}.ticker div{font-size:25px}.section{padding:85px 7vw}.section-top{font-size:9px}.story{min-height:0}.story-layout{display:block;margin-top:43px}.story h2{font-size:clamp(43px,10vw,70px)}.story-side{margin:35px 0 0 auto}.star{font-size:60px}.discover-sticky{display:block;min-height:750px}.discover-copy{height:50%;padding:50px 7vw 0}.slide{top:130px;left:7vw;right:7vw;transform:translateY(40px)}.slide.active{transform:none}.slide h2{font-size:clamp(42px,10vw,68px);margin:12px 0}.slide p{font-size:12px;line-height:1.8}.slide-dots{bottom:17px;right:7vw}.discover-visual{height:50%}.album-card{width:205px;max-height:305px}.album-header{padding:10px;font-size:7px}.album-art{margin:0 10px}.album-caption{padding:8px 10px}.album-caption strong{font-size:11px}.album-caption button{width:27px;height:27px}.waveform{display:none}.demo-caption{bottom:8px;font-size:8px}.manifesto{min-height:610px}.manifesto>p{margin-top:85px;font-size:15px}.manifesto h2{font-size:clamp(69px,14vw,115px);margin-bottom:95px}.download{min-height:830px}.download-layout{display:block}.download-copy{padding-top:33px}.download h2{font-size:clamp(70px,15vw,108px)}.download-copy>p{font-size:13px}.download-buttons{flex-wrap:wrap}.store-button{min-width:170px}.download-disc{width:220px;height:220px;min-width:220px;min-height:220px;margin:52px auto 15px}.download-disc>div{font-size:37px}footer{padding:32px 7vw;display:grid;grid-template-columns:1fr 1fr;gap:16px}footer .logo{grid-column:span 2}}
@media(max-width:390px){.hero{min-height:860px}.hero h1{font-size:55px}.hero-visual{top:625px}.eyebrow{font-size:9px}.download-buttons{display:block}.store-button{width:100%;margin-top:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.cursor-light{display:none}}

/* Responsive refinements: keep the artwork in document flow on small screens. */
@media (min-width:701px) and (max-width:1100px){
  .hero{padding-right:6vw;padding-left:6vw}
  .hero-copy{width:56%}
  .hero h1{font-size:clamp(58px,7vw,90px)}
  .hero-visual{left:2vw;width:43%}
  .phone{transform:rotate(-10deg) rotateY(-12deg) scale(.82)}
  .story h2{font-size:clamp(48px,6vw,72px)}
  .download-layout{gap:24px}
  .download h2{font-size:clamp(72px,8vw,100px)}
  .download-buttons{flex-wrap:wrap}
}
@media(max-width:700px){
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;height:auto;padding-bottom:52px}
  .hero-copy{flex:none}
  .hero-visual{position:relative;top:auto;left:auto;right:auto;width:100%;height:390px;min-height:390px;margin-top:16px;transform:none;flex:none}
  .phone{transform:rotate(-8deg) scale(.83)!important}
  .hero-visual:before{width:310px}
  .hero-visual:after{width:390px}
  .halo{width:380px;height:380px;max-width:110vw}
  .scroll-cue{position:relative;right:auto;bottom:auto;margin-top:3px}
  .eyebrow{flex-wrap:wrap}
  .hero h1{font-size:clamp(48px,11vw,78px);overflow-wrap:normal}
  .hero-actions{align-items:flex-start}
  .section-top{gap:10px}
  .section-top span:last-child{font-size:8px}
  .story h2{font-size:clamp(39px,9.5vw,68px)}
  .download h2{font-size:clamp(64px,14vw,105px)}
}
@media(max-width:480px){
  .hero{padding-top:105px}
  .nav-button{padding:7px 12px;font-size:11px}
  .eyebrow span{display:none}
  .hero-visual{height:355px;min-height:355px;margin-top:18px}
  .phone{transform:rotate(-8deg) scale(.76)!important}
  .label-left{top:12%;left:0}
  .label-right{bottom:11%;right:0}
  .discover-sticky{height:100svh;min-height:660px}
  .discover-copy{height:49%;padding-top:42px}
  .discover-visual{height:51%}
  .slide{top:110px}
  .slide h2{font-size:clamp(39px,10vw,56px)}
  .download-buttons{display:grid;grid-template-columns:1fr}
  .store-button{width:100%;min-width:0;margin-top:0}
  .download-disc{margin-top:42px}
}
@media(max-width:360px){
  .hero h1{font-size:46px}
  .hero-visual{height:335px;min-height:335px}
  .phone{transform:rotate(-8deg) scale(.7)!important}
  .primary{width:100%;justify-content:space-between}
  .section-top span:last-child{display:none}
  .slide h2{font-size:37px}
  .demo-caption{max-width:90%;text-align:center}
}
@media(max-width:700px) and (max-height:700px){
  .discover-sticky{min-height:610px}
  .discover-copy{padding-top:27px}
  .slide{top:90px}
  .slide h2{font-size:42px}
}

/* Real app screenshots and the clearly labeled concept screens. */
.phone{width:260px;height:564px;border:5px solid #302b2b;border-radius:35px;box-shadow:0 38px 90px #000d,0 0 0 2px #766157}
.phone>img,.album-card>img{display:block;width:100%;height:100%;object-fit:cover}
.phone>img{border-radius:29px}
.album-card{width:min(59%,290px);aspect-ratio:540/1170;border:5px solid #373033;border-radius:31px;background:#111}
.album-card>img{border-radius:25px}
.world{background:#0c0d13}
.world-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin:60px 0}
.world-heading h2,.social h2,.create h2{font-size:clamp(52px,6vw,95px);line-height:1.25;letter-spacing:-.06em;margin:0}
.world-heading h2 em,.social h2 em,.create h2 em{font-style:normal;color:var(--orange)}
.world-heading p,.social-copy p,.create-copy p{color:#b8b1ae;line-height:2.15;font-size:15px;max-width:390px}
.world-screens{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.real-screen{position:relative;overflow:hidden;height:560px;border-radius:24px;margin:0;background:#1a1a20;border:1px solid #ffffff24}
.real-screen img{width:100%;height:100%;object-fit:cover;object-position:top;filter:brightness(.76);transition:transform .8s,filter .8s}
.real-screen:hover img{transform:scale(1.035);filter:brightness(.92)}
.real-screen:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#000b);pointer-events:none}
.real-screen figcaption{position:absolute;z-index:1;bottom:27px;right:29px;left:29px;display:flex;align-items:end;justify-content:space-between;gap:15px}
.real-screen figcaption span{color:#ffad6d;font-size:12px}
.real-screen figcaption strong{font-size:23px}
.globe-screen img{object-position:center}
.social{background:radial-gradient(circle at 73% 47%,#2b1714,#0c0b0f 58%)}
.create{background:radial-gradient(circle at 25% 47%,#302018,#0c0b0f 60%)}
.social-layout,.create-layout{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;margin-top:65px}
.social-copy,.create-copy{position:relative}
.feature-symbol{color:var(--orange);font-size:64px;display:block;margin-bottom:25px}
.social-copy small,.create-copy small{color:#827d7c;font-size:11px}
.concept-phone,.concept-upload{width:min(100%,340px);height:650px;border:5px solid #433a3b;border-radius:34px;background:#17171b;box-shadow:0 35px 80px #000a,0 0 90px #ff6b211d;overflow:hidden;justify-self:center}
.concept-phone{display:flex;flex-direction:column}
.concept-status{display:flex;justify-content:space-between;padding:16px 20px 8px;font-size:12px;direction:ltr}
.concept-title{display:flex;align-items:center;gap:10px;padding:15px 19px;border-bottom:1px solid #ffffff1c}
.concept-title .avatar{width:41px;height:41px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ff9d4d,#8c3229);font-weight:900}
.concept-title div{display:flex;flex-direction:column;flex:1}.concept-title strong{font-size:15px}.concept-title small{font-size:10px;color:#aaa}.concept-title>span:last-child{font-size:23px;color:#aaa}
.chat-space{flex:1;display:flex;flex-direction:column;gap:17px;justify-content:flex-end;padding:18px;background:radial-gradient(circle at 50% 15%,#2b2222,#17171b 55%)}
.bubble{max-width:78%;font-size:12px;line-height:1.9;padding:11px 14px;border-radius:15px;background:#303036}
.bubble.sent{align-self:flex-start;background:#ad4a24}
.shared-track{display:flex;align-items:center;gap:10px;align-self:flex-start;width:88%;padding:10px;border:1px solid #ff824557;background:#2d211e;border-radius:13px}
.shared-art{width:62px;height:62px;border-radius:8px;background:linear-gradient(135deg,#ff9e49,#65233c);display:grid;place-items:center;font-size:28px}
.shared-track>div:last-child{display:flex;flex-direction:column;gap:2px}.shared-track small{font-size:9px;color:#c4b9b3}.shared-track strong{font-size:13px}.shared-track span{font-size:10px;color:#ffae72}
.concept-input{display:flex;justify-content:space-between;align-items:center;margin:13px;border-radius:25px;padding:10px 15px;background:#29292e;color:#aaa;font-size:11px}.concept-input b{color:var(--orange);font-size:18px}
.concept-upload{padding:25px 21px;display:flex;flex-direction:column;gap:15px}
.upload-top{display:flex;justify-content:space-between;align-items:center;font-size:18px}.upload-top span:last-child{color:var(--orange)}
.upload-drop{height:185px;border:1px dashed #ff8d5b8c;border-radius:16px;background:linear-gradient(145deg,#40241e,#201a1b);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;margin-top:12px}
.upload-drop span{font-size:38px;color:var(--orange)}.upload-drop strong{font-size:16px}.upload-drop small{font-size:10px;color:#b8aaa5}
.concept-upload label{font-size:11px;color:#aaa}.concept-upload label div{margin-top:6px;border:1px solid #514648;border-radius:9px;padding:10px;color:#f8f3ed;font-size:13px}
.upload-cover{display:flex;align-items:center;gap:10px;border:1px solid #514648;border-radius:10px;padding:8px}
.upload-cover>span{width:45px;height:45px;background:linear-gradient(145deg,#ff9f55,#763329);border-radius:7px;display:grid;place-items:center;font-size:24px}
.upload-cover div{display:flex;flex-direction:column;flex:1}.upload-cover strong{font-size:12px}.upload-cover small{font-size:9px;color:#aaa}.upload-cover b{font-size:22px;color:var(--orange)}
.upload-submit{margin-top:auto;border-radius:10px;text-align:center;background:var(--orange);color:#1b100b;padding:12px;font-size:13px;font-weight:900}
@media(max-width:950px){.world-heading h2,.social h2,.create h2{font-size:clamp(44px,6vw,70px)}.real-screen{height:470px}.social-layout,.create-layout{gap:4vw}}
@media(max-width:700px){
  .phone{width:215px;height:466px;transform:rotate(-8deg) scale(.8)!important}
  .hero-visual{height:395px;min-height:395px}
  .album-card{width:168px;max-height:none}
  .world-heading{display:block;margin:40px 0 28px}
  .world-heading h2,.social h2,.create h2{font-size:clamp(43px,10vw,68px)}
  .world-heading p,.social-copy p,.create-copy p{font-size:13px}
  .world-screens{gap:12px}
  .real-screen{height:370px;border-radius:15px}
  .real-screen figcaption{right:12px;left:12px;bottom:13px;display:block}
  .real-screen figcaption span{font-size:9px;display:block}
  .real-screen figcaption strong{font-size:13px;line-height:1.4;display:block}
  .social-layout,.create-layout{grid-template-columns:1fr;gap:36px;margin-top:45px}
  .create-copy{grid-row:1}
  .concept-phone,.concept-upload{height:610px}
  .feature-symbol{font-size:45px;margin-bottom:13px}
}
@media(max-width:390px){.real-screen{height:310px}.concept-phone,.concept-upload{width:min(100%,305px)}}

/* Device hardware: visible depth, glass, buttons and a subtle pointer tilt. */
.device-stage{position:relative;display:grid;place-items:center;transform-style:preserve-3d;perspective:1300px;isolation:isolate}
.device-stage:before{content:"";position:absolute;inset:auto 7% -4% 7%;height:13%;background:#000b;filter:blur(24px);border-radius:50%;transform:translateZ(-65px);z-index:-1}
.device-stage:after{content:"";position:absolute;right:calc(50% - 159px);top:21%;height:53px;width:4px;border-radius:0 3px 3px 0;background:linear-gradient(#b7a5a1,#4b4142,#9b8783);box-shadow:0 75px 0 #635454,0 115px 0 #635454;z-index:4}
.stage-hero{width:310px;height:620px;z-index:3}
.stage-hero:after{right:26px}
.stage-feature,.stage-chat,.stage-upload{transform:rotateY(var(--tilt-y,-12deg)) rotateX(var(--tilt-x,3deg)) rotateZ(-4deg);transition:transform .35s ease,filter .35s ease;filter:drop-shadow(15px 30px 26px #0008)}
.stage-feature:hover,.stage-chat:hover,.stage-upload:hover{filter:drop-shadow(20px 35px 30px #0009)}
.stage-feature{width:320px;height:680px}
.stage-feature .album-card{width:280px;height:607px;aspect-ratio:auto;transform:none;max-height:none;border:7px solid #403a3d;border-radius:38px;box-shadow:inset 0 0 0 1px #ffffff50,8px 0 0 #191619,18px 7px 22px #0009,0 30px 85px #000a}
.stage-feature .album-card:hover{transform:none}
.stage-feature .album-card:before,.stage-chat .concept-phone:before,.stage-upload .concept-upload:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:28%;height:16px;border-radius:0 0 12px 12px;background:#0a0a0c;z-index:5;box-shadow:0 2px 4px #0007}
.stage-feature .album-card:after,.stage-chat .concept-phone:after,.stage-upload .concept-upload:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,#ffffff20 0%,transparent 20%,transparent 69%,#ffffff09 100%);pointer-events:none;z-index:6}
.stage-feature .album-card>img{border-radius:30px}
.stage-chat,.stage-upload{width:390px;height:710px;justify-self:center}
.stage-chat:after,.stage-upload:after{right:19px}
.stage-chat .concept-phone,.stage-upload .concept-upload{position:relative;width:340px;height:650px;min-width:0;border:7px solid #453f43;border-radius:39px;box-shadow:inset 0 0 0 1px #ffffff45,9px 0 0 #19171a,18px 9px 22px #0009,0 40px 95px #000a}
.concept-phone{background:#101013}
.concept-status{padding:19px 17px 8px;font-size:10px;color:#eee}
.concept-title{padding:13px 14px 12px;background:#1b1b1f;gap:9px}
.concept-title .avatar{width:38px;height:38px;background:linear-gradient(145deg,#ffb264,#9a3421)}
.concept-title strong{font-size:13px}
.concept-title small{color:#ff9f60;font-size:9px}
.chat-back{font-size:29px;color:#ddd;line-height:1;transform:rotate(180deg)}
.chat-menu{font-size:23px}
.online-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#ff8c43}
.chat-space{gap:12px;padding:14px 12px;background-color:#101013;background-image:radial-gradient(circle at 80% 10%,#33211b66,transparent 35%),linear-gradient(135deg,#ffffff05 1px,transparent 1px);background-size:auto,25px 25px}
.chat-date{align-self:center;padding:5px 10px;background:#343033;border-radius:20px;color:#aaa;font-size:9px}
.bubble{max-width:83%;padding:9px 11px;border-radius:12px 12px 3px 12px;background:#2a2a2e;font-size:11px;line-height:1.8;box-shadow:0 2px 6px #0003}
.bubble.received{align-self:flex-start;border-radius:12px 12px 12px 3px}
.bubble.sent{align-self:flex-end;background:#6e3825}
.bubble small{display:block;color:#b7aaa5;font-size:8px;text-align:left;line-height:1.2;margin-top:4px}
.shared-track{align-self:flex-end;width:94%;padding:7px;background:#241e1d;border-color:#bd64425e;gap:8px}
.shared-art{width:54px;height:54px;flex:none;background:radial-gradient(circle at 72% 20%,#ffb36b,#d5522e 50%,#4c1b30);position:relative;overflow:hidden}
.shared-art:before{content:"";position:absolute;width:50px;height:50px;border:8px solid #2b1420;border-radius:50%;left:-19px;top:16px}
.shared-art span{position:relative;z-index:1}
.shared-details{flex:1;min-width:0}
.shared-details small{font-size:8px}
.shared-details strong{font-size:11px}
.shared-details span{font-size:8px;color:#b7aaa5}
.shared-play{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#111;font-size:9px}
.concept-input{margin:9px 10px;border-radius:24px;padding:8px 10px;background:#28282c;gap:10px}
.concept-input>span:nth-child(2){flex:1}
.attach-icon{font-size:20px;color:#aaa;line-height:1}
.concept-input b{display:grid;place-items:center;background:var(--orange);width:25px;height:25px;border-radius:50%;color:#111;font-size:13px}
.concept-bottom{height:17px;display:grid;place-items:center}
.concept-bottom i{width:90px;height:3px;background:#f4f4f4;border-radius:5px}
.stage-upload .concept-upload{padding:25px 18px 17px}
.stage-upload .upload-submit{margin-bottom:4px}
@media(max-width:700px){
  .stage-hero{width:260px;height:440px}
  .stage-hero:after{right:18px;height:35px;box-shadow:0 55px 0 #635454,0 87px 0 #635454}
  .hero-visual{height:395px;min-height:395px}
  .stage-feature{width:205px;height:370px;transform:rotateY(-8deg) rotateZ(-3deg)}
  .stage-feature .album-card{width:160px;height:347px;border-width:5px;border-radius:24px}
  .stage-feature .album-card>img{border-radius:19px}
  .stage-feature:after{right:17px;top:25%;height:27px;box-shadow:0 40px 0 #635454,0 65px 0 #635454}
  .stage-chat,.stage-upload{width:min(100%,350px);height:670px;transform:rotateY(-5deg) rotateZ(-2deg)}
  .stage-chat .concept-phone,.stage-upload .concept-upload{width:min(100%,320px);height:620px}
  .stage-chat:after,.stage-upload:after{right:4px}
}
@media(max-width:390px){
  .stage-chat,.stage-upload{height:640px}
  .stage-chat .concept-phone,.stage-upload .concept-upload{width:295px;height:600px}
  .chat-space{gap:8px}
  .bubble{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.stage-feature,.stage-chat,.stage-upload{transform:none}}
@media(max-width:480px){
  .stage-feature{height:330px}
  .stage-feature .album-card{width:149px;height:323px}
}
@media(max-width:700px) and (max-height:700px){
  .stage-feature{height:290px}
  .stage-feature .album-card{width:129px;height:280px}
}

/* The phone is an extruded object: front glass floats above a metallic back. */
.hero-visual,.discover-visual,.social-layout,.create-layout{perspective:1400px}
.device-stage{transform-style:preserve-3d;overflow:visible}
.device-stage .hardware-back{position:absolute;display:block;width:260px;height:564px;border-radius:37px;background:linear-gradient(135deg,#686163 0%,#161416 27%,#101014 65%,#847b7b 100%);border:2px solid #9f9390;box-shadow:inset -14px 0 17px #000b,inset 3px 0 5px #ffffff5c,22px 18px 35px #000a;transform:translate3d(18px,12px,-25px);z-index:0;pointer-events:none}
.device-stage .hardware-back:before{content:"";position:absolute;top:10%;bottom:10%;right:-12px;width:13px;border-radius:0 9px 9px 0;background:linear-gradient(90deg,#151316,#6a6261 35%,#d3bfaf 50%,#3b3437 85%);box-shadow:3px 1px 5px #0008}
.device-stage .hardware-back:after{content:"";position:absolute;left:8%;right:8%;bottom:-10px;height:11px;border-radius:0 0 12px 12px;background:linear-gradient(#252126,#827573 45%,#241f21);box-shadow:2px 4px 6px #0008}
.stage-hero{transform:translateY(var(--phone-y,0px)) rotateZ(-9deg) rotateY(-27deg) rotateX(8deg);transition:transform .22s ease-out}
.stage-hero .phone{position:relative;z-index:2;transform:translateZ(18px)!important;box-shadow:inset 0 0 0 1px #ffffff44,0 2px 4px #fff3,0 32px 70px #000b}
.stage-hero .phone:after,.stage-feature .album-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(112deg,#ffffff23 0%,transparent 21%,transparent 75%,#ffffff0e 100%);pointer-events:none}
.stage-feature{transform:rotateY(var(--tilt-y,-22deg)) rotateX(var(--tilt-x,5deg)) rotateZ(-5deg)}
.stage-feature .hardware-back{width:280px;height:607px}
.stage-feature .album-card,.stage-feature .album-card:hover{transform:translateZ(18px)}
.stage-chat{transform:rotateY(var(--tilt-y,-18deg)) rotateX(var(--tilt-x,5deg)) rotateZ(4deg)}
.stage-upload{transform:rotateY(var(--tilt-y,18deg)) rotateX(var(--tilt-x,5deg)) rotateZ(-4deg)}
.stage-chat.reveal.visible{transform:rotateY(var(--tilt-y,-18deg)) rotateX(var(--tilt-x,5deg)) rotateZ(4deg)}
.stage-upload.reveal.visible{transform:rotateY(var(--tilt-y,18deg)) rotateX(var(--tilt-x,5deg)) rotateZ(-4deg)}
.stage-chat .hardware-back,.stage-upload .hardware-back{width:340px;height:650px}
.stage-chat .concept-phone,.stage-upload .concept-upload{transform:translateZ(18px);z-index:2}
.stage-chat:after,.stage-upload:after,.stage-feature:after{z-index:5}
.motion-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.motion-note{position:absolute;z-index:2;color:#ff8b418c;font-size:clamp(18px,2.5vw,38px);text-shadow:0 0 23px #ff6b217c;animation:float-note 7s ease-in-out infinite alternate}
.motion-note.n1{left:5%;top:26%;animation-delay:-1s}.motion-note.n2{left:33%;top:12%;font-size:20px;animation-delay:-3s}.motion-note.n3{left:6%;top:74%;font-size:16px;animation-delay:-4s}.motion-note.n4{left:44%;top:68%;font-size:27px;animation-delay:-2s}.motion-note.n5{left:18%;top:8%;font-size:14px;animation-delay:-5s}.motion-note.n6{left:49%;top:35%;font-size:18px;animation-delay:-6s}.motion-note.n7{left:23%;top:87%;font-size:16px;animation-delay:-2s}.motion-note.n8{left:58%;top:81%;font-size:23px;animation-delay:-3s}
.motion-ring{position:absolute;left:17%;top:44%;border:1px solid #ff802d31;border-radius:50%;width:300px;height:300px;animation:expand-ring 7s ease-out infinite}
.motion-ring.mr2{animation-delay:3.5s}
.floating-equalizer{position:absolute;z-index:4;left:8%;bottom:12%;display:flex;align-items:center;gap:4px;height:40px;direction:ltr;transform:rotate(-8deg)}
.floating-equalizer i{width:3px;height:10px;border-radius:5px;background:#ff8a3f;box-shadow:0 0 8px #ff6b21;animation:eq-beat .8s ease-in-out infinite alternate}
.floating-equalizer i:nth-child(3n){height:24px;animation-delay:.25s}.floating-equalizer i:nth-child(4n){height:16px;animation-delay:.5s}.floating-equalizer i:nth-child(5n){height:31px;animation-delay:.1s}
.story{position:relative;overflow:hidden}.story-sparks{position:absolute;inset:0;pointer-events:none}.story-sparks span{position:absolute;color:#ff773b50;animation:float-note 9s ease-in-out infinite alternate}.story-sparks span:nth-child(1){top:20%;left:12%;font-size:35px}.story-sparks span:nth-child(2){top:65%;left:25%;font-size:28px;animation-delay:-3s}.story-sparks span:nth-child(3){top:12%;right:40%;font-size:15px;animation-delay:-1s}.story-sparks span:nth-child(4){bottom:14%;right:16%;font-size:19px;animation-delay:-5s}.story-sparks span:nth-child(5){top:48%;left:3%;font-size:13px;animation-delay:-2s}
.visual-pulse{position:absolute;width:250px;height:250px;border:1px solid #ff783952;border-radius:50%;animation:expand-ring 5s ease-out infinite}.visual-pulse.pulse-two{animation-delay:2.5s}
.social:before,.create:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background:repeating-radial-gradient(circle at 75% 50%,transparent 0 65px,#ff78393b 66px 67px,transparent 68px 130px);animation:ambient-shift 18s ease-in-out infinite alternate}.create:before{background:repeating-radial-gradient(circle at 25% 50%,transparent 0 65px,#ff78393b 66px 67px,transparent 68px 130px)}
.social,.create{position:relative;overflow:hidden}
@keyframes float-note{from{transform:translate3d(-9px,13px,0) rotate(-12deg);opacity:.3}to{transform:translate3d(14px,-22px,0) rotate(15deg);opacity:.9}}
@keyframes expand-ring{from{transform:scale(.35);opacity:.8}to{transform:scale(2.8);opacity:0}}
@keyframes eq-beat{to{height:4px;opacity:.5}}
@keyframes ambient-shift{to{transform:scale(1.13) rotate(8deg)}}
@media(max-width:700px){
  .stage-hero{transform:rotateZ(-7deg) rotateY(-16deg) rotateX(5deg)!important}
  .stage-hero .phone{transform:translateZ(18px) scale(.8)!important}
  .stage-hero .hardware-back{width:215px;height:466px;transform:translate3d(13px,10px,-21px) scale(.8)}
  .stage-feature{transform:rotateY(-16deg) rotateZ(-4deg)}
  .stage-feature .hardware-back{width:160px;height:347px;transform:translate3d(12px,9px,-20px)}
  .stage-chat{transform:rotateY(-9deg) rotateZ(2deg)}
  .stage-upload{transform:rotateY(9deg) rotateZ(-2deg)}
  .stage-chat.reveal.visible{transform:rotateY(-9deg) rotateZ(2deg)}
  .stage-upload.reveal.visible{transform:rotateY(9deg) rotateZ(-2deg)}
  .stage-chat .hardware-back,.stage-upload .hardware-back{width:320px;height:620px;transform:translate3d(11px,9px,-20px)}
  .floating-equalizer{left:3%;bottom:15%;transform:scale(.75)}
  .motion-note.n2,.motion-note.n4,.motion-note.n6,.motion-note.n8{display:none}
}
@media(max-width:480px){
  .stage-feature .hardware-back{width:149px;height:323px}
  .stage-chat .hardware-back,.stage-upload .hardware-back{width:320px;height:620px}
}
@media(max-width:390px){
  .stage-chat .hardware-back,.stage-upload .hardware-back{width:295px;height:600px}
}
@media(max-width:700px) and (max-height:700px){.stage-feature .hardware-back{width:129px;height:280px}}
@media(prefers-reduced-motion:reduce){.motion-note,.motion-ring,.floating-equalizer i,.story-sparks span,.visual-pulse,.social:before,.create:before{animation:none!important}.motion-ring,.visual-pulse{display:none}.stage-hero,.stage-feature,.stage-chat,.stage-upload,.stage-chat.reveal.visible,.stage-upload.reveal.visible{transform:none!important}}

/* The front and back now share one center, with a narrow connected sidewall. */
.device-stage .hardware-back{transform:translateZ(-6px);box-shadow:inset -7px 0 10px #0008,inset 2px 0 3px #ffffff55,5px 7px 22px #0009}
.device-stage .hardware-back:before{right:-5px;width:6px;background:linear-gradient(90deg,#242124,#a09691,#342e31)}
.device-stage .hardware-back:after{bottom:-5px;height:6px;background:linear-gradient(#242124,#8f827d,#282326)}
.stage-hero{transform:translateY(var(--phone-y,0px)) rotateZ(-8deg) rotateY(-13deg) rotateX(3deg)}
.stage-hero .phone{transform:translateZ(5px)!important}
.stage-feature{transform:rotateY(var(--tilt-y,-12deg)) rotateX(var(--tilt-x,3deg)) rotateZ(-4deg)}
.stage-feature .album-card,.stage-feature .album-card:hover{transform:translateZ(5px)}
.stage-chat.reveal.visible{transform:rotateY(var(--tilt-y,-10deg)) rotateX(var(--tilt-x,3deg)) rotateZ(3deg)}
.stage-upload.reveal.visible{transform:rotateY(var(--tilt-y,10deg)) rotateX(var(--tilt-x,3deg)) rotateZ(-3deg)}
.stage-chat .concept-phone,.stage-upload .concept-upload{transform:translateZ(5px)}
.device-stage:after{background:linear-gradient(#a99d97,#3d383a,#a99d97);width:3px;box-shadow:0 75px 0 #756c69,0 115px 0 #756c69}
.hero-downloads{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;position:relative;z-index:5}
.hero-downloads .store-button{min-width:190px;box-shadow:0 10px 28px #0006}
.hero-downloads .store-button:first-child{box-shadow:0 14px 35px #ff6b2136}
.hero-download-note{font-size:10px!important;line-height:1.5!important;color:#968d87!important;margin:10px 0 0;min-height:17px}
.hero-explore{display:inline-block;margin-top:13px;position:relative;z-index:5}
@media(max-width:950px){.hero-downloads .store-button{min-width:170px;padding:10px 12px}.hero-downloads .store-button strong{font-size:13px}}
@media(max-width:700px){
  .stage-hero{transform:rotateZ(-7deg) rotateY(-9deg) rotateX(2deg)!important}
  .stage-hero .phone{transform:translateZ(5px) scale(.8)!important}
  .stage-hero .hardware-back{transform:translateZ(-6px) scale(.8)}
  .stage-feature .hardware-back{transform:translateZ(-6px)}
  .stage-chat .hardware-back,.stage-upload .hardware-back{transform:translateZ(-6px)}
  .hero-downloads{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero-downloads .store-button{min-width:0;width:100%;padding:9px;gap:6px}
  .hero-downloads .store-icon{font-size:21px}
  .hero-downloads .store-button strong{font-size:11px}
  .hero-downloads .store-button small{font-size:8px}
  .hero-download-note{font-size:9px!important}
  .hero-visual{margin-top:0}
}
@media(max-width:390px){.hero-downloads{grid-template-columns:1fr}.hero-downloads .store-button{padding:9px 12px}.hero-visual{margin-top:-4px}}
@media(prefers-reduced-motion:reduce){.stage-hero,.stage-feature,.stage-chat.reveal.visible,.stage-upload.reveal.visible{transform:none!important}}

/* Persian wordmark supplied by the product owner. */
.nav{direction:rtl;justify-content:flex-start}
.logo{direction:rtl;letter-spacing:0;gap:10px;font-size:24px;font-weight:900;white-space:nowrap}
.logo img{display:block;width:47px;height:47px;object-fit:contain;filter:drop-shadow(0 0 10px #ff6b2140)}
footer .logo{font-size:20px}
footer .logo img{width:39px;height:39px}
@media(max-width:700px){.logo{font-size:20px;gap:7px}.logo img{width:38px;height:38px}}

@font-face{font-family:Dana;src:url('assets/fonts/dana-regular.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Dana;src:url('assets/fonts/dana-bold.woff') format('woff');font-style:normal;font-weight:700;font-display:swap}
body{font-family:Dana,Tahoma,sans-serif}
.hero h1,.story h2,.slide h2,.social h2,.create h2,.manifesto h2{letter-spacing:-.045em}
.download-toast{position:fixed;z-index:100;bottom:25px;right:50%;transform:translate(50%,20px);padding:12px 20px;border:1px solid #ff884c80;background:#201613;color:#fff;border-radius:12px;box-shadow:0 15px 40px #0009;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.download-toast.show{opacity:1;transform:translate(50%,0)}
@media(max-width:480px){.download-toast{max-width:calc(100vw - 32px);white-space:normal;text-align:center}}

/* Chat and user uploads share the same chapter (02). */
.create-block{position:relative;margin-top:105px;padding-top:105px;border-top:1px solid #ff8a462e}
.create-block .create-layout{margin-top:0}
@media(max-width:700px){.create-block{margin-top:65px;padding-top:65px}}

/* The last two frames of chapter 01 show the chat and upload concepts. */
.stage-feature.is-hidden{display:none}
.concept-preview{display:none;position:absolute;inset:0;z-index:3;pointer-events:none}
.concept-preview.is-active{display:block;pointer-events:auto}
.concept-preview .device-stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.82) rotateY(var(--tilt-y,-9deg)) rotateX(var(--tilt-x,3deg));transform-origin:center center}
.concept-preview[data-concept="upload"] .device-stage{transform:translate(-50%,-50%) scale(.82) rotateY(var(--tilt-y,9deg)) rotateX(var(--tilt-x,3deg))}
@media(max-width:700px){
  .concept-preview .device-stage{transform:translate(-50%,-50%) scale(.53) rotateY(-6deg)}
  .concept-preview[data-concept="upload"] .device-stage{transform:translate(-50%,-50%) scale(.53) rotateY(6deg)}
}
@media(max-width:700px) and (max-height:700px){
  .concept-preview .device-stage,.concept-preview[data-concept="upload"] .device-stage{transform:translate(-50%,-50%) scale(.44)}
}
@media(prefers-reduced-motion:reduce){
  .concept-preview .device-stage,.concept-preview[data-concept="upload"] .device-stage{transform:translate(-50%,-50%) scale(.82)!important}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .concept-preview .device-stage,.concept-preview[data-concept="upload"] .device-stage{transform:translate(-50%,-50%) scale(.53)!important}
}

/* Keep every scroll step inside its section so no overflow remains after the footer. */
.scroll-steps{height:auto}
.scroll-steps>div{height:100svh}

/* Keep screenshots and CSS-drawn UI crisp in the secondary phone frames. */
.stage-feature,.stage-feature:hover,.stage-chat,.stage-chat:hover,.stage-upload,.stage-upload:hover{filter:none}
.stage-feature .album-card>img{image-rendering:auto;backface-visibility:hidden}
@media(min-width:701px){
  .discover-sticky{min-height:760px}
  .stage-feature{width:360px;height:740px;transform:rotateY(var(--tilt-y,-4deg)) rotateX(var(--tilt-x,1deg)) rotateZ(-2deg)}
  .stage-feature .album-card,.stage-feature .album-card:hover{width:320px;height:693px;transform:translateZ(3px)}
  .stage-feature .hardware-back{width:320px;height:693px}
  .concept-preview .device-stage{transform:translate(-50%,-50%) rotateY(var(--tilt-y,-4deg)) rotateX(var(--tilt-x,1deg))}
  .concept-preview[data-concept="upload"] .device-stage{transform:translate(-50%,-50%) rotateY(var(--tilt-y,4deg)) rotateX(var(--tilt-x,1deg))}
}
@media(max-width:700px){
  .stage-feature{transform:rotateY(-3deg) rotateZ(-1deg)}
}

/* Mobile hero reading order: device, message, then the two download actions. */
@media(max-width:700px){
  .hero{padding-top:92px}
  .hero-visual{order:1;height:420px;min-height:420px;margin:0 auto 4px}
  .hero-copy{order:2;margin-top:0}
  .hero h1{margin-top:0}
  .hero-downloads{margin-top:24px}
}

/* Distinctive Persian display lettering with a quieter, readable body face. */
@font-face{font-family:Estedad;src:url('assets/fonts/estedad-arabic.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Lalezar;src:url('assets/fonts/lalezar-arabic.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
body{font-family:Estedad,Dana,Tahoma,sans-serif}
.logo span,.hero h1,.slide h2{font-family:Lalezar,Estedad,Dana,sans-serif;font-weight:400;letter-spacing:0}
.logo span{font-size:1.25em}
.hero h1{font-size:clamp(69px,7.5vw,128px);line-height:1.07;letter-spacing:0;margin-bottom:23px}
.slide h2{line-height:1.14;letter-spacing:0}
.hero-description,.slide p{font-weight:400}
@media(max-width:700px){.hero h1{font-size:clamp(57px,11vw,82px);line-height:1.1}.slide h2{font-size:clamp(45px,10vw,70px)}}
@media(max-width:390px){.hero h1{font-size:52px}}
@media(max-width:480px){
  .hero{padding-top:86px}
  .hero-visual{height:395px;min-height:395px}
}
@media(max-width:390px){
  .hero-visual{height:370px;min-height:370px}
}