:root{
  --yellow:#F5D742; --teal:#3FBFB0; --cream:#FBF3E3; --black:#111111;
  --blue:#3B82F6; --purple:#8B5CF6; --pink:#EC4899; --orange:#F97316;
  --border:3px solid var(--black);
  --shadow:5px 5px 0 var(--black);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Space Grotesk',system-ui,sans-serif; background:var(--cream); color:var(--black); overflow-x:hidden; padding-top:env(safe-area-inset-top,0px);}
img{max-width:100%;}
a{color:inherit;}
.container{max-width:1200px; margin:0 auto; padding:0 20px;}
button{font-family:inherit; cursor:pointer;}

/* NAVBAR */
header{position:sticky; top:0; z-index:100; background:var(--yellow); border-bottom:var(--border); padding-top:env(safe-area-inset-top,0px);}
.navwrap{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:1200px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px;}
.logo-box{width:42px; height:42px; background:var(--black); color:var(--yellow); display:flex; align-items:center; justify-content:center; font-weight:700; border-radius:8px; font-size:16px;}
.brand-name{font-weight:700; font-size:20px;}
.nav-actions{display:flex; align-items:center; gap:10px;}
.btn-outline{background:var(--cream); border:var(--border); border-radius:8px; padding:8px 14px; font-weight:600; box-shadow:3px 3px 0 var(--black);}
.btn-outline:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--black);}
#hamburger{display:none; background:var(--cream); border:var(--border); border-radius:8px; width:42px; height:42px; align-items:center; justify-content:center; box-shadow:3px 3px 0 var(--black);}
#hamburger span, #hamburger span::before, #hamburger span::after{content:""; display:block; width:20px; height:2px; background:var(--black); position:relative;}
#hamburger span::before{position:absolute; top:-6px;} #hamburger span::after{position:absolute; top:6px;}
.mobile-menu{display:none; flex-direction:column; gap:10px; padding:16px 20px; background:var(--yellow); border-top:var(--border);}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-weight:600; padding:8px 0;}

/* HERO */
.hero{background:var(--teal); border-bottom:var(--border); padding:60px 0 50px;}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center;}
.badge{display:inline-block; background:#FF6B6B; color:#fff; font-weight:700; font-size:12px; padding:5px 12px; border-radius:6px; border:2px solid var(--black); margin-bottom:12px;}
.hero h1{font-size:42px; font-weight:700; line-height:1.15; margin-bottom:16px;}
.hero p{font-size:16px; max-width:480px; margin-bottom:24px; opacity:.9;}
.search-bar{display:flex; background:var(--cream); border:var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; max-width:520px;}
.search-bar input{flex:1; border:none; background:transparent; padding:16px; font-size:15px; font-family:inherit; outline:none;}
.search-bar button{background:var(--black); color:var(--yellow); border:none; padding:0 20px; font-weight:700; font-size:18px;}
.search-results{max-width:520px; margin-top:10px; background:var(--cream); border:var(--border); border-radius:12px; box-shadow:var(--shadow); display:none; max-height:260px; overflow-y:auto;}
.search-results.show{display:block;}
.search-item{padding:12px 16px; border-bottom:2px solid #eee; display:flex; gap:10px; align-items:center; font-size:14px;}
.search-item:last-child{border-bottom:none;}
.search-empty{padding:14px 16px; font-size:14px; opacity:.7;}
.hero-visual{position:relative; height:260px;}
.hv-item{position:absolute; border:var(--border); border-radius:14px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; font-size:28px;}
.hv1{width:90px; height:90px; background:var(--yellow); top:0; left:40%;}
.hv2{width:90px; height:90px; background:var(--cream); top:10px; left:65%;}
.hv3{width:170px; height:130px; background:var(--yellow); bottom:0; left:10%; font-size:36px; color:var(--teal);}
.hv4{width:70px; height:90px; background:var(--cream); top:40px; right:0;}

/* SECTIONS */
section{padding:60px 0; border-bottom:var(--border);}
.sec-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:10px;}
.sec-title{display:flex; align-items:center; gap:14px; font-size:28px; font-weight:700;}
.icon-badge{width:44px; height:44px; background:var(--yellow); border:var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px;}
.link-arrow{font-weight:600; text-decoration:none; white-space:nowrap;}

.cards-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px;}
.tool-card{background:var(--cream); border:var(--border); border-radius:14px; padding:20px; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; cursor:pointer;}
.tool-card:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--black);}
.tool-icon{width:50px; height:50px; border-radius:10px; border:2px solid var(--black); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; color:#fff;}
.tool-card h3{font-size:17px; margin-bottom:6px;}
.tool-card p{font-size:13.5px; opacity:.8; margin-bottom:14px; min-height:36px;}
.tool-card .arrow{font-weight:700;}

.cat-section{background:#DCEEFB;}
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;}
.cat-card{background:var(--cream); border:var(--border); border-radius:14px; padding:20px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:space-between; cursor:pointer; transition:transform .15s;}
.cat-card:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--black);}
.cat-left{display:flex; align-items:center; gap:14px;}
.cat-card h3{font-size:16px;}
.cat-card span.count{font-size:13px; opacity:.7;}

.why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px;}
.why-card{border:var(--border); border-radius:14px; padding:20px; background:var(--cream); box-shadow:var(--shadow);}
.why-card h3{font-size:18px; margin-bottom:8px;}
.why-card p{font-size:14px; opacity:.8;}

.soon-wrap{background:var(--black); color:var(--cream); border-radius:20px; padding:36px 30px; text-align:center;}
.soon-wrap h2{font-size:26px; margin-bottom:10px;}
.soon-wrap p{opacity:.75; max-width:520px; margin:0 auto 24px;}
.soon-cards{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.soon-card{background:#1c1c1c; border:2px solid var(--yellow); border-radius:12px; padding:16px 20px; font-size:13px; width:150px;}
.soon-tag{display:inline-block; background:var(--yellow); color:var(--black); font-weight:700; font-size:10px; padding:3px 8px; border-radius:6px; margin-bottom:8px;}

footer{background:var(--yellow); border-bottom:none;}
.foot-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-bottom:24px;}
.foot-brand p{margin-top:8px; font-size:14px; max-width:260px;}
.foot-links{display:flex; gap:40px; flex-wrap:wrap;}
.foot-col a{display:block; font-size:14px; margin-bottom:8px; font-weight:500;}
.foot-col h4{font-size:14px; margin-bottom:10px;}
.social{display:flex; gap:10px; margin-top:10px;}
.social a{width:36px; height:36px; border:2px solid var(--black); border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--cream); font-size:15px;}
.foot-bottom{border-top:var(--border); padding:16px 0; display:flex; justify-content:space-between; font-size:13px; flex-wrap:wrap; gap:8px;}
.made-by{border:2px solid var(--black); border-radius:8px; padding:6px 12px; font-size:13px; font-weight:600; background:var(--cream);}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:2; height:200px;}
  #hamburger{display:flex;}
  .nav-actions .btn-outline.lang, .nav-actions .btn-outline.login{display:none;}
  .hero h1{font-size:32px;}
}
@media (max-width:480px){
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
}

a.tool-card,a.search-item{display:block;text-decoration:none;color:inherit}
a.search-item{display:flex}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--black);color:var(--yellow);border:var(--border);border-radius:10px;padding:10px 18px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%)}
.hero-grid{grid-template-columns:1fr}
.cat-card{width:100%;font:inherit;color:inherit;text-align:left}
.cat-card .tool-icon{margin-bottom:0;flex-shrink:0}
.cat-card small{display:block;font-size:13px;opacity:.7;font-weight:400}
.cat-card[aria-expanded="true"]{background:var(--yellow)}
.cat-panel{margin-top:28px;background:var(--cream);border:var(--border);border-radius:16px;box-shadow:var(--shadow);padding:24px}
.cat-panel[hidden]{display:none}
.cat-panel h3{font-size:20px;margin-bottom:16px}
.worlds{display:flex;gap:10px;overflow-x:auto;padding:12px 20px;background:var(--yellow);border-top:2px solid var(--black)}
.worlds a{flex-shrink:0;font-weight:600;font-size:14px;padding:7px 14px;border-radius:20px;background:var(--cream);border:2px solid var(--black);white-space:nowrap}
.worlds a.w-active{background:var(--black);color:var(--yellow)}
.coming{position:relative}
.coming::after{content:"COMING SOON";position:absolute;top:10px;right:10px;background:var(--black);color:var(--yellow);font-size:9px;font-weight:700;padding:3px 8px;border-radius:6px}