/* Palette from Caca app CSS (ios/App/App/public/app): --cream #f8f3e7, --paper #f7f4e9, --orange #ed6038, --ink #372b24/#493b36, --muted #8b8175, --lilac #ded6ef; card tints from in-app screens */
:root{--cream:#f8f3e7;--paper:#fffdf6;--sand:#eee6d3;--butter:#f6edc7;--lilac:#ded6ef;--mint:#d7ece1;--orange:#ed6038;--orange-d:#c94a25;--ink:#372b24;--ink2:#493b36;--muted:#8b8175;--line:#e6dcc6;--r:20px;--r-lg:30px;--shadow:0 1px 0 #fff inset,0 18px 40px -22px rgba(73,59,54,.45)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.65 ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--orange-d)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
/* top bar */
.top{position:sticky;top:0;z-index:5;background:rgba(248,243,231,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand img{width:38px;height:38px}
.brand b{color:var(--orange)}
.nav{display:flex;gap:6px}
.nav a{padding:8px 14px;border-radius:999px;color:var(--ink2);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{background:#fff;box-shadow:0 0 0 1px var(--line)}
/* hero */
.hero{position:relative;padding:72px 0 40px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-20% -10% auto auto;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,#f6edc7 0,rgba(246,237,199,0) 70%);z-index:-1}
.hero:after{content:"";position:absolute;left:-180px;bottom:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,#ded6ef 0,rgba(222,214,239,0) 70%);z-index:-1}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:13px;font-weight:700;color:var(--ink2)}
.eyebrow i{font-style:normal;background:var(--orange);color:#fff;border-radius:999px;padding:1px 9px;font-size:12px}
h1{font-size:clamp(40px,6.2vw,72px);line-height:1.02;letter-spacing:-.035em;margin:20px 0 14px;font-weight:800}
h1 .dot{color:var(--orange)}
h1 small{display:block;font-size:.5em;letter-spacing:-.02em;color:var(--ink2);margin-top:8px}
.sub{font-size:clamp(20px,2.2vw,24px);font-weight:700;color:var(--orange-d);margin:0 0 12px}
.lead{font-size:18px;color:var(--ink2);max-width:30em;margin:0 0 28px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.store{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:16px;padding:10px 20px 10px 16px;text-decoration:none;box-shadow:0 5px 0 #1d1511;cursor:default}
.store svg{width:26px;height:26px;fill:#fff}
.store span{display:flex;flex-direction:column;line-height:1.15}
.store small{font-size:11px;opacity:.75;font-weight:600;letter-spacing:.02em}
.store strong{font-size:18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:16px;background:var(--orange);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 5px 0 var(--orange-d)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 0 0 1.5px var(--ink) inset,0 5px 0 var(--sand)}
.note{font-size:13px;color:var(--muted);margin-top:16px}
/* phones */
.stage{position:relative;height:600px}
.phone{position:absolute;width:270px;border-radius:40px;padding:9px;background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 60px -25px rgba(55,43,36,.55)}
.phone img{border-radius:32px;aspect-ratio:603/1083;object-fit:cover;object-position:top;width:100%}
.stage .p1{left:50%;top:10px;transform:translateX(-50%);z-index:3}
.stage .p2{left:0;top:80px;transform:rotate(-7deg) scale(.86);z-index:2}
.stage .p3{right:0;top:80px;transform:rotate(7deg) scale(.86);z-index:1}
.buddy{position:absolute;width:96px;z-index:4;filter:drop-shadow(0 10px 10px rgba(55,43,36,.2))}
.buddy.b1{left:2%;bottom:6px}.buddy.b2{right:0;top:-6px;width:80px}
/* strip */
.ticker{border-block:1px solid var(--line);background:var(--paper);overflow:hidden}
.ticker .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:18px;font-weight:800;color:var(--ink2);font-size:15px}
.ticker span:before{content:"✳ ";color:var(--orange)}
/* sections */
.sec{padding:88px 0}
.kicker{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d);margin:0 0 10px}
h2{font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.03em;margin:0 0 14px}
.sec>.wrap>p.intro{font-size:18px;color:var(--ink2);max-width:36em;margin:0 0 40px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{border-radius:var(--r-lg);padding:28px 26px 26px;box-shadow:var(--shadow);position:relative;overflow:hidden;min-height:240px}
.feat.y{background:var(--butter)}.feat.l{background:var(--lilac)}.feat.m{background:var(--mint)}
.feat .num{font-size:13px;font-weight:800;color:var(--ink2);opacity:.6}
.feat h3{font-size:24px;letter-spacing:-.02em;margin:6px 0 8px}
.feat p{margin:0;color:var(--ink2);max-width:19em}
.feat img{position:absolute;right:-10px;bottom:-14px;width:110px;opacity:.95}
.feat .txt{position:relative;z-index:1;padding-right:70px}
.screens{background:var(--paper);border-block:1px solid var(--line)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.shot{margin:0}
.shot .phone{position:static;width:auto}
.shot figcaption{text-align:center;font-weight:700;margin-top:14px;color:var(--ink2);font-size:15px}
.promise{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pcard{background:#fff;border-radius:var(--r-lg);padding:28px;box-shadow:0 0 0 1px var(--line)}
.pcard h3{margin:0 0 6px;font-size:22px}
.pcard p{margin:0 0 14px;color:var(--ink2)}
.pcard .ico{font-size:30px}
/* footer */
.foot{background:var(--ink);color:#e9dfcf;padding:48px 0 40px;margin-top:40px}
.foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot a{color:#fff;margin-left:18px;font-weight:600;text-decoration:none}
.foot a:first-child{margin-left:0}
.foot small{color:#b7a99a}
.ph{background:#fde3d6;color:var(--orange-d);border-radius:6px;padding:0 5px;font-weight:700;white-space:nowrap}
.foot .ph{background:#5a463c;color:#ffd9c7}
/* document pages */
.dochead{padding:56px 0 28px;position:relative}
.dochead .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.dochead h1{font-size:clamp(38px,5vw,56px);margin:10px 0 8px}
.dochead img{width:120px;flex:none}
.meta{color:var(--muted);font-size:15px;margin:0}
.lang{display:inline-flex;background:#fff;box-shadow:0 0 0 1px var(--line);border-radius:999px;padding:4px;gap:4px;margin-top:18px}
.lang a{padding:6px 16px;border-radius:999px;text-decoration:none;color:var(--ink2);font-weight:700;font-size:14px}
.lang a:first-child{background:var(--orange);color:#fff}
.doc{max-width:820px}
.doc section{padding:8px 0 24px}
.doc section+section{margin-top:40px;padding-top:48px;border-top:2px dashed var(--line)}
.doc section>h1{font-size:34px;margin:0 0 6px}
.doc section>.meta{margin-bottom:24px}
.card{background:#fff;border-radius:var(--r);padding:20px 24px;margin:14px 0;box-shadow:0 0 0 1px var(--line),0 10px 24px -20px rgba(55,43,36,.5)}
.card h2{font-size:19px;letter-spacing:-.01em;margin:0 0 6px;display:flex;align-items:center;gap:10px}
.card h2:before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.card:nth-of-type(3n+2) h2:before{background:#b7a0df}.card:nth-of-type(3n) h2:before{background:#7fc4a6}
.card p{margin:0 0 8px;color:var(--ink2)}.card p:last-child{margin:0}
.contact{background:var(--butter);border-radius:var(--r-lg);padding:22px 26px;margin:0 0 20px;box-shadow:var(--shadow)}
.contact p{margin:0;color:var(--ink2)}
.backlink{font-weight:700}
@media (max-width:900px){
 .hero{padding-top:40px}
 .hero .wrap{grid-template-columns:1fr;gap:20px}
 .stage{height:520px;max-width:520px;width:100%;margin:0 auto}
 .phone{width:230px}
 .features{grid-template-columns:1fr}
 .feat{min-height:0}
 .gallery{grid-template-columns:repeat(2,1fr)}
 .promise{grid-template-columns:1fr}
}
@media (max-width:520px){
 .wrap{padding:0 18px}
 .top .wrap{height:58px}
 .brand{font-size:17px}.brand img{width:32px;height:auto}
 .nav a{padding:7px 10px;font-size:13px}
 .stage{height:440px}
 .phone{width:200px;border-radius:32px;padding:7px}.phone img{border-radius:26px}
 .stage .p2{left:-34px;transform:rotate(-7deg) scale(.8)}.stage .p3{right:-34px;transform:rotate(7deg) scale(.8)}
 .buddy{width:70px}.buddy.b2{width:60px}
 .sec{padding:60px 0}
 .gallery{gap:14px}
 .dochead img{width:72px}
 .dochead h1{font-size:34px}
 .dochead .wrap{align-items:center}
 .card{padding:18px}
 .foot a{margin-left:0;margin-right:16px}
}
/* highlights */
.hl{background:linear-gradient(180deg,#e3efe2 0,var(--cream) 100%)}
.hl-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.hl-media{position:relative;display:flex;justify-content:center}
.phone.tall{position:relative;width:320px}
.phone.tall img,.games .phone img{aspect-ratio:585/1266}
.buddy.b3{left:4%;bottom:20px;width:110px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{background:#fff;border-radius:16px;padding:12px 16px 12px 44px;position:relative;box-shadow:0 0 0 1px var(--line);font-weight:600;color:var(--ink2)}
.ticks li:before{content:"✓";position:absolute;left:14px;top:11px;width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff;font-size:12px;display:grid;place-items:center}
.games{background:var(--butter)}
.gamegrid{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:40px;justify-content:center}
.games .shot:nth-child(1) .phone{transform:rotate(-2deg)}.games .shot:nth-child(2) .phone{transform:rotate(2deg)}
.games figcaption b{display:block;font-size:20px;color:var(--ink);margin-bottom:2px}
.games figcaption{font-weight:500}
@media (max-width:900px){.hl-grid{grid-template-columns:1fr;gap:32px}.hl-text{order:-1}}
@media (max-width:520px){.phone.tall{width:250px}.buddy.b3{width:76px;left:0}.gamegrid{grid-template-columns:repeat(2,1fr);gap:14px}.games figcaption b{font-size:17px}.games figcaption{font-size:13px}}
.phone img{height:auto;background:var(--paper)}
/* aspect-ratio guard: HTML width/height attrs must never distort */
img{height:auto;object-fit:contain;flex-shrink:0}
.phone img{object-fit:cover}
.brand img{width:38px;height:auto}
.games .phone img,.phone.tall img{aspect-ratio:auto}