.hero-landing{
  background:#b17708; position:relative; overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.25);
}
.hero-landing:before{
  content:""; position:absolute; inset:auto -10% 0 -10%;
  height:120px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 100%);
  border-radius:40px 40px 0 0;
}
.hero-inner{
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center;
  padding:48px 18px;
}
.hero-copy h1{
  color:#fff; font-size:40px; line-height:1.1; margin-bottom:14px;
  text-shadow:0 2px 10px rgba(0,0,0,.18);
}
.hero-copy .sub{color:#fff; opacity:.85; margin-bottom:16px; font-weight:600}
.btn.large{padding:14px 20px; font-size:16px; border-radius:12px}
.hero-badges{display:flex; gap:10px; align-items:center; margin:14px 0 8px}
.hero-badges .shield{
  width:28px;height:28px;border-radius:6px;background:#1b1e27;
  border:1px solid #242735; display:grid; place-items:center; color:#28c76f; font-size:16px;
}
.hero-desc{color:#fff; opacity:.9; max-width:560px}
.hero-art{display:grid; place-items:center}
.hero-art .phone-img{width:320px; max-width:100%; filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}

@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .hero-desc{margin:0 auto}
}
/* ==== NAV: white like Pikashow ==== */
.topbar-white{background:#ffffff;border-bottom:1px solid #e9e9ef}
.topbar-white .brand-text{color:#111;font-weight:800;letter-spacing:.2px}
.topbar-white .logo-bubble{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:#ffb300;color:#1b1100;font-weight:800;margin-right:8px;border:2px solid #d9a306
}
.topbar-white .menu{display:flex;gap:8px}
.topbar-white .menu a{color:#111;padding:10px 14px;border-radius:8px}
.topbar-white .menu a:hover{background:#f2f3f6}

/* ==== HERO: closer to Pikashow ==== */
.hero-landing.hero-ps{background:#a96f08}
.hero-landing.hero-ps::after{
  content:"";position:absolute;left:0;right:0;bottom:-56px;height:140px;background:#ffb300;
  transform:skewY(-4.5deg);transform-origin:100% 0;box-shadow:0 -2px 0 rgba(0,0,0,.08) inset;
}
.hero-copy h1{font-size:44px;line-height:1.12;font-weight:800}
.hero-copy .sub{font-size:14px;letter-spacing:.3px}

/* Phone mock (right side) */
.ps-phone{width:320px;aspect-ratio:9/19;border-radius:34px;background:#0b0c10;border:4px solid #0e0f13;
  box-shadow:0 30px 60px rgba(0,0,0,.45);position:relative}
.ps-notch{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:110px;height:18px;background:#0b0c10;border-radius:12px}
.ps-screen{position:absolute;inset:18px;border-radius:24px;background:#111;border:1px solid #242735;display:grid;place-items:center}
.ps-logo{width:120px;height:120px;border-radius:26px;display:grid;place-items:center;font-weight:800;
  color:#14161d;background:#ffb300;border:3px solid #d9a306;font-size:40px}
  /* --- Pikashow nav polish --- */
a{ color: inherit; text-decoration: none; }

.topbar{ border-bottom: 1px solid #e9e9ef; }              /* thin border */
.topbar-white{ background:#fff !important; }              /* pure white bar */
.topbar-white .wrap{
  max-width:1200px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand-tight{ display:flex; align-items:center; gap:8px; }
.logo-bubble{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background:#ffb300; color:#1b1100; font-weight:800; border:2px solid #d9a306;
}
.brand-text{ color:#111; font-weight:800; letter-spacing:.2px; }

.menu{ display:flex; gap:8px; }
.menu a{
  color:#111 !important; text-decoration:none !important;
  padding:10px 14px; border-radius:8px; font-weight:600;
}
.menu a:hover{ background:#f2f3f6; }

/* Hero heading sizing like Pikashow */
.hero-copy h1{ font-size:46px; line-height:1.15; font-weight:800; max-width:720px; }

/* Phone mock width */
.ps-phone{ width:340px; }