/* RAYA · hub page */
body.hub{background:var(--paper)}
.hb-top{position:sticky;inset-block-start:0;z-index:150;height:70px;display:flex;align-items:center;gap:22px;padding-inline:clamp(14px,3vw,44px);background:rgba(14,10,7,.86);backdrop-filter:blur(14px);color:#F5EEE2}
.hb-nav{display:flex;gap:4px}.hb-nav a{padding:.45rem 1rem;border-radius:var(--r-pill);font:600 14px var(--f-display);color:#D8C9B0;transition:all var(--t-fast)}.hb-nav a:hover{background:var(--amber);color:var(--ink)}
.hb-top .btn-ghost{--fg-c:#F5EEE2;border-color:rgba(245,238,226,.4)}
@media (max-width:860px){.hb-nav{display:none}}
.hb-hero{position:relative;padding-block:clamp(3.5rem,6vw,7rem) clamp(4rem,6vw,7rem);overflow:hidden;isolation:isolate;min-height:min(92vh,880px);display:grid;align-items:center}
.hb-bg{position:absolute;inset:-4%;z-index:-3}.hb-bg img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);animation:kb 36s ease-in-out infinite alternate}
.hb-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(270deg,rgba(14,10,7,.95) 0%,rgba(14,10,7,.8) 42%,rgba(14,10,7,.4) 100%),linear-gradient(0deg,rgba(14,10,7,.9),transparent 40%)}
.hb-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 26px);pointer-events:none}
.hb-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hb-hero .display{max-width:11ch;font-size:clamp(2.8rem,1rem + 6.2vw,6.4rem)}
.hb-hero .btn-ghost{--fg-c:#F5EEE2;border-color:rgba(245,238,226,.55)}.hb-hero .btn-ghost:hover{background:#F5EEE2;color:var(--ink)}
.hb-stats{display:flex;gap:clamp(1rem,3vw,2.6rem);flex-wrap:wrap;margin-block-start:2.4rem;padding-block-start:1.6rem;border-block-start:1.5px solid rgba(245,238,226,.2)}
.hb-stats div{display:grid;gap:2px}.hb-stats b{font:900 clamp(2rem,1.4rem + 2vw,3.2rem)/1 var(--f-num);color:var(--amber);direction:ltr;text-align:start}.hb-stats span{font-size:13px;color:#D8C9B0}
.hb-devices{position:relative;min-height:420px}
.dv{position:absolute;border:var(--bw) solid #F5EEE2;overflow:hidden;background:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.dv img{width:100%;height:100%;object-fit:cover;object-position:top}
.dv-web{inset-inline-start:0;inset-block-start:6%;width:86%;aspect-ratio:16/10;border-radius:16px;transform:rotate(-2deg)}
.dv-web .bar{height:22px;background:var(--ink-3);display:flex;gap:5px;align-items:center;padding-inline:10px}.dv-web .bar i{width:8px;height:8px;border-radius:50%;background:#F5EEE2;opacity:.4}
.dv-web img{height:calc(100% - 22px)}
.dv-ph{width:34%;aspect-ratio:390/844;border-radius:26px;border-width:5px}
.ph1{inset-inline-end:2%;inset-block-end:-2%;transform:rotate(5deg);z-index:3}.ph2{inset-inline-end:26%;inset-block-end:-10%;transform:rotate(-3deg);z-index:2}
@media (max-width:980px){.hb-grid{grid-template-columns:1fr}.hb-devices{min-height:340px;margin-block-start:1rem}.hb-hero{min-height:0}}
/* ideas */
.idea{padding:1.6rem;border:var(--bw) solid var(--ink);border-radius:var(--r-lg);display:grid;gap:.8rem;align-content:start;box-shadow:var(--sh-2);min-height:300px;position:relative;overflow:hidden}
.idea .n{font:900 1.1rem var(--f-num);opacity:.6;direction:ltr;text-align:start}
.idea h3{font-size:var(--fs-h3)}.idea p{font-size:var(--fs-15)}
.i1{background:var(--ink);color:#F5EEE2}.i1 p{color:#BBAA8F}.i2{background:var(--dusk);color:#fff}.i2 p{color:#C3D4E6}.i3{background:var(--amber)}.i3 p{color:#3a2a12}
.pass-mini{display:flex;align-items:center;gap:12px;font:800 1.4rem var(--f-display);background:var(--card);border:var(--bw) solid var(--ink);padding:.8rem 1.1rem;border-radius:var(--r-md);transform:rotate(-2deg);width:fit-content;box-shadow:var(--sh-1)}
/* surfaces */
.surf-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.surf{grid-column:span 2;display:flex;flex-direction:column;border:var(--bw) solid var(--ink);border-radius:var(--r-xl);overflow:hidden;background:var(--card);box-shadow:var(--sh-2);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base)}
.surf:hover{transform:translate(-4px,-4px);box-shadow:var(--sh-3)}
.s-web,.s-app{grid-column:span 3}
.surf .s-img{aspect-ratio:16/9;background:var(--ink);overflow:hidden;position:relative;border-block-end:var(--bw) solid var(--ink)}
.surf .s-img>img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}
.surf:hover .s-img>img{transform:scale(1.05)}
.s-img.phones{display:flex;justify-content:center;gap:16px;padding:18px 0 0;background:var(--amber)}.s-img.phones img{width:26%;height:auto;aspect-ratio:390/844;border:4px solid var(--ink);border-radius:20px;object-fit:cover;object-position:top;margin-block-end:-30%;transition:transform var(--t-base) var(--ease-spring)}
.s-img.phones img:nth-child(2){transform:translateY(-12px)}.surf:hover .s-img.phones img:nth-child(1){transform:translateY(-8px) rotate(-3deg)}.surf:hover .s-img.phones img:nth-child(3){transform:translateY(-8px) rotate(3deg)}
.ds-collage{background:var(--paper);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:8px;padding:14px}
.ds-collage span{border-radius:12px;border:var(--bw-h) solid var(--ink)}.cc1{background:var(--amber);grid-row:span 2}.cc2{background:var(--sage)}.cc3{background:var(--dusk)}.cc4{background:var(--rust);grid-column:span 2}
.ds-collage .slats{position:absolute;inset-inline-end:18px;inset-block-end:14px;background:var(--ink);padding:10px 12px;border-radius:12px}
.brand-collage{background:var(--ink);display:grid;place-items:center}.brand-collage img{width:52%;height:auto!important;object-fit:contain!important}
.surf .s-b{padding:1.4rem 1.5rem 1.6rem;display:grid;gap:.6rem;align-content:start;flex:1}
.surf .s-b h3{font-size:var(--fs-h3)}.surf .s-b p{font-size:var(--fs-14);color:var(--text-2)}
.surf .link-arrow{margin-block-start:.4rem;align-self:flex-start}
@media (max-width:1000px){.surf,.s-web,.s-app{grid-column:span 6}.surf-grid{grid-template-columns:repeat(6,1fr)}}
@media (min-width:1001px){.s-web{grid-column:span 3}.s-app{grid-column:span 3}}
/* pages grid */
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.pg-grid.app{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pg{display:flex;flex-direction:column;border:var(--bw) solid var(--ink);border-radius:var(--r-md);overflow:hidden;background:var(--card);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base);animation:fade-up .6s var(--ease) both;animation-delay:calc(var(--i)*40ms)}
.pg:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-2)}
.pg-img{aspect-ratio:16/10;background:linear-gradient(135deg,var(--tint),var(--hair));overflow:hidden;border-block-end:var(--bw) solid var(--ink)}
.pg-img.ph{aspect-ratio:390/844}
.pg-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.pg-b{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:.7rem .9rem;align-items:center}
.pg-b .n{grid-row:span 2;font:900 1.4rem var(--f-num);color:var(--amber);-webkit-text-stroke:1px var(--ink);direction:ltr}
.pg-b b{font:700 14px var(--f-display);line-height:1.4}.pg-b small{font-size:11.5px;color:var(--text-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* try */
.try-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.try{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;padding:1.1rem 1.2rem;border-radius:var(--r-md);border:var(--bw) solid rgba(245,238,226,.22);background:var(--ink-2);text-align:start;transition:all var(--t-base) var(--ease);color:#F5EEE2}
.try .ic-tile{grid-row:span 2}.try b{font:700 15.5px var(--f-display)}.try small{font-size:13px;color:#BBAA8F}
.try:hover{border-color:var(--amber);transform:translateY(-4px);box-shadow:0 10px 40px -10px rgba(242,163,58,.5)}
@media (max-width:900px){.try-grid{grid-template-columns:1fr 1fr}}@media (max-width:560px){.try-grid{grid-template-columns:1fr}}
/* decisions */
.dec{list-style:none;padding:0;margin:0;display:grid;gap:0}
.dec li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:.8rem 0;border-block-end:var(--bw-h) solid var(--hair);font-size:var(--fs-14);line-height:1.6}
.dec li:last-child{border:0}.dec .num{font-size:12px;color:var(--amber-dp)}.dec .more{color:var(--text-2);font-style:italic}
.hb-share{padding-block:clamp(2.5rem,4vw,4rem)}
.hb-foot{padding-block:1.6rem;font-size:13px;color:#BBAA8F}.hb-foot a:hover{color:var(--amber)}
.hb-top .kbd{background:rgba(245,238,226,.14);color:#F5EEE2;border-color:rgba(245,238,226,.3);box-shadow:none}