:root{--display:'Frank Ruhl Libre',serif;--ink:#060B16;--navy:#0B1630;--gold:#D6B46A;--paper:#F7F4EE;--text:#E8ECF4;--muted:#9AA6BC}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:Heebo,sans-serif;font-weight:300;line-height:1.65}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{max-width:100%;height:auto}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.gold{background:linear-gradient(100deg,#B8913F 0%,#F6E3A8 45%,#C9A04E 70%,#F1DA9C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;right:16px;top:-60px;background:var(--gold);color:var(--navy);padding:10px 16px;z-index:10}
.skip:focus{top:12px}

/* hero */
.hero{position:relative;min-height:940px;overflow:hidden;background:radial-gradient(120% 90% at 20% 30%,#13275A 0%,#0A1430 40%,#060B16 75%)}
.wall{position:absolute;inset:-200px -400px -200px -300px;perspective:2200px;pointer-events:none}
.wall-in{position:absolute;left:-6%;top:0;width:1700px;display:grid;grid-template-columns:repeat(5,300px);gap:28px;transform:rotateX(52deg) rotateZ(32deg) translate(-120px,40px)}
.wall-in img{width:300px;height:190px;object-fit:cover;object-position:top;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.fade{position:absolute;inset:0;background:linear-gradient(270deg,#060B16 0%,rgba(6,11,22,.96) 38%,rgba(6,11,22,.55) 62%,rgba(6,11,22,.15) 100%),linear-gradient(0deg,#060B16 0%,rgba(6,11,22,0) 30%),linear-gradient(180deg,rgba(6,11,22,.95) 0%,rgba(6,11,22,0) 160px)}
.nav{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:30px 0}
.brand{font-family:var(--display);font-weight:500;font-size:24px;color:#fff;text-decoration:none}
.brand small{display:block;font-family:Heebo,sans-serif;font-weight:300;font-size:13px;color:var(--muted)}
.nav nav{display:flex;gap:30px;font-size:15px}
.nav nav a{text-decoration:none;color:#C9D1E0}
.nav nav a:hover{color:#fff}
.hero-copy{position:relative;z-index:2;max-width:620px;padding-top:110px}
.kicker{display:flex;align-items:center;gap:14px;color:var(--gold);font-size:15px;font-weight:400}
.kicker:before{content:"";width:48px;height:1px;background:var(--gold)}
h1{margin:22px 0 26px;font-family:var(--display);font-weight:900;font-size:104px;line-height:.98;letter-spacing:-1px;color:#fff}
h1 span{display:block}
.lead{font-size:21px;color:#C9D1E0;max-width:30em;margin:0}
.ctas{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 30px;border-radius:2px;text-decoration:none;font-weight:500;font-size:16px}
.btn-gold{background:linear-gradient(100deg,#C9A04E,#F1DA9C 55%,#C9A04E);color:#0B1630}
.btn-line{border:1px solid rgba(214,180,106,.6);color:#fff}
.btn-line:hover{border-color:var(--gold)}

.band{border-top:1px solid rgba(214,180,106,.25);border-bottom:1px solid rgba(214,180,106,.25);background:#08101F}
.band .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.stat{display:flex;align-items:baseline;gap:12px}
.stat b{font-family:var(--display);font-weight:900;font-size:40px;line-height:1}
.stat span{color:var(--muted);font-size:15px}

/* chapters */
.ch{position:relative;overflow:hidden}
.ch .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:72px;align-items:center;padding-top:130px;padding-bottom:130px}
.ch.rev .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.ch.rev .copy{order:2}
.label{font-family:var(--display);font-size:16px;opacity:.85}
.ch h2{margin:14px 0 18px;font-family:var(--display);font-weight:900;font-size:76px;line-height:1}
.ch p{margin:0 0 18px;font-size:19px;max-width:30em}
.proof{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.35;padding-right:18px;border-right:3px solid currentColor;margin:28px 0}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 0;padding:0;list-style:none}
.tags li{font-size:13px;padding:6px 14px;border-radius:999px;border:1px solid currentColor;opacity:.85}
.visit{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;min-height:32px}
.visit i{font-size:13px}
.device{position:relative}
.laptop{position:relative;border-radius:18px 18px 4px 4px;background:#0A0A0C;padding:14px 14px 18px;box-shadow:0 50px 90px rgba(0,0,0,.45)}
.laptop img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:4px}
.laptop:after{content:"";position:absolute;left:-7%;right:-7%;bottom:-16px;height:16px;background:linear-gradient(#C7CBD3,#8D929C);border-radius:0 0 14px 14px}
.phone{position:absolute;width:190px;border-radius:34px;background:#0A0A0C;padding:9px;box-shadow:0 40px 80px rgba(0,0,0,.5);left:-40px;bottom:-60px}
.phone img{display:block;width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top;border-radius:26px}
.ch.rev .phone{left:auto;right:-40px}
.c-nakdan{background:var(--paper);color:#14161C}
.c-nakdan .label,.c-nakdan .proof{color:#7C1D2E}
.c-print{background:#0B6E7A;color:#F1FBFB}
.c-print .proof{color:#FFD08A}
.c-kasher{background:#13213F;color:#EEF2FA}
.c-kasher .proof{color:#7FE3EF}
.c-xdrive{background:#0E2C9B;color:#F2F5FF}
.c-xdrive .proof{color:#FFC14D}
.c-mishna{background:#7A1E2C;color:#FBEFEF}
.c-mishna .proof{color:#F2C46B}
.c-nativ{background:#2B1D16;color:#F4EADF}
.c-nativ .proof{color:#D9A55B}
.ab{background:#F3EDE4;color:#1E1A16;padding:130px 0}
.ab .label{color:#8A5A1E}
.ab h2{font-family:var(--display);font-weight:900;font-size:76px;line-height:1;margin:14px 0 0}
.ab .sub{color:#5A5047;font-size:19px;max-width:34em;margin:18px 0 60px}
.ab .tile{box-shadow:0 18px 40px rgba(60,40,20,.18)}
.ab .more{color:#5A5047}
.ab .more b{color:#1E1A16}
.niqqud{position:absolute;bottom:-40px;right:40px;font-family:var(--display);font-weight:900;font-size:220px;line-height:1;color:rgba(124,29,46,.07);pointer-events:none}

/* collection */
.coll{background:var(--ink);padding:130px 0}
.coll h2,.apps h2{font-family:var(--display);font-weight:900;font-size:76px;line-height:1;margin:0;color:#fff}
.coll .sub{color:var(--muted);font-size:19px;max-width:34em;margin:18px 0 60px}
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.tile{position:relative;border-radius:6px;overflow:hidden;background:#0F1A30;text-decoration:none;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.tile:hover img,.tile:focus-visible img{transform:scale(1.04)}
.tile .cap{position:absolute;inset:auto 0 0 0;padding:60px 22px 20px;background:linear-gradient(0deg,rgba(6,11,22,.95),rgba(6,11,22,0))}
.tile .cap b{display:block;font-family:var(--display);font-weight:500;font-size:22px}
.tile .cap span{font-size:14px;color:#C9D1E0}
.w6{grid-column:span 6;height:380px}.w4{grid-column:span 4;height:300px}.w3{grid-column:span 3;height:260px}
.more{margin-top:56px;color:var(--muted);font-size:17px;max-width:60em}
.more b{color:#fff;font-weight:500}

/* apps */
.apps{background:linear-gradient(180deg,#0B1630,#060B16);padding:120px 0;overflow:hidden}
.phones{display:flex;gap:30px;justify-content:center;margin:64px 0 0;padding:0;list-style:none;align-items:flex-end}
.phones li{flex:0 0 200px}
.phones .p{border-radius:36px;background:#000;padding:9px;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.phones .p img{display:block;width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top;border-radius:28px}
.phones li:nth-child(2),.phones li:nth-child(4){transform:translateY(-40px)}
.phones li:nth-child(3){transform:translateY(-80px) scale(1.06)}
.phones span{display:block;text-align:center;margin-top:16px;font-family:var(--display);font-size:19px;color:#fff}
.applist{text-align:center;color:var(--muted);margin-top:40px}

/* contact */
.contact{background:var(--paper);color:#14161C;padding:130px 0 60px}
.contact .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.contact h2{font-family:var(--display);font-weight:900;font-size:88px;line-height:.98;margin:0;max-width:9em}
.contact a.mail{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-size:30px;color:#0B1630;text-decoration:none;border-bottom:2px solid #C9A04E}
.contact a.mail i{font-size:22px;color:#9C7A30}
.contact small{display:block;color:#5B6070;margin-top:12px}
.credit{background:var(--paper);color:#5B6070;padding:40px 0 30px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile img{transition:none}}
@media (max-width:900px){
 .wrap{padding:0 20px}
 .hero{min-height:auto;padding-bottom:80px}
 .wall{inset:auto -300px -100px -300px;top:520px;height:700px}
 .fade{background:linear-gradient(180deg,#060B16 0%,rgba(6,11,22,.9) 45%,rgba(6,11,22,.3) 100%)}
 .nav nav{display:none}
 .hero-copy{padding-top:40px;padding-bottom:300px}
 h1{font-size:58px}
 .lead{font-size:18px}
 .ch .wrap,.ch.rev .wrap{grid-template-columns:minmax(0,1fr);gap:48px;padding-top:80px;padding-bottom:110px}
 .ch.rev .copy{order:0}
 .ch h2,.coll h2,.apps h2,.ab h2{font-size:48px}
 .ab,.coll{padding:90px 0}
 .phone,.ch.rev .phone{width:120px;left:-6px;right:auto;bottom:-40px}
 .mosaic{grid-template-columns:minmax(0,1fr)}
 .w6,.w4,.w3{grid-column:auto;height:240px}
 .phones{justify-content:flex-start;overflow-x:auto;padding:90px 20px 10px;margin:10px -20px 0}
 .phones li{flex:0 0 170px}
 .contact h2{font-size:52px}
 .contact a.mail{font-size:22px}
 .niqqud{font-size:120px}
}