/* =========================
   LogoHub - Full Professional CSS
   (white / dark-blue / black mix + full-screen PC)
   Enhanced & Dynamic
   ========================= */

/* === VARIABLES === */
:root {
  --bg: #071433;       /* deep navy */
  --bg-alt: #000000;   /* black */
  --card: #0e2647;
  --accent: #d3e225;   /* accent yellow */
  --accent2: #ff8a33;  /* gradient orange */
  --muted: #98a6c7;
  --white: #ffffff;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255,255,255,0.06);
  --radius: 14px;
  --shadow: 0 8px 28px rgba(3, 10, 24, 0.5);
  --trans: 0.22s;
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* === RESET / BASE === */
* { box-sizing: border-box; margin:0; padding:0; }
html, body { height:100%; width:100%; scroll-behavior:smooth; font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; background: linear-gradient(180deg, var(--bg), var(--bg-alt)); color: var(--white); }
a { text-decoration:none; color: inherit; }
img, video { display:block; max-width:100%; }

/* === CONTAINER === */
.container { max-width: 1350px; margin:0 auto; padding:28px; width: calc(100% - 56px); }

/* === NAVBAR === */
.nav { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 18px; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-radius: var(--radius); backdrop-filter: blur(8px); box-shadow:0 6px 30px rgba(0,0,0,0.45); position: sticky; top:18px; z-index:1000; }
/* === BRAND SECTION === */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
}

.brand .logo {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--white); /* fallback background if image not loaded */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.brand .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand .logo:hover {
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 14px 36px rgba(3, 10, 24, 0.6);
}

.brand h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.5px;
  margin: 0;
  transition: color 0.3s ease;
}

.brand h1:hover {
  color: var(--accent);
}


.menu { display:flex; gap:18px; align-items:center; }
.menu a { color: var(--muted); padding:8px 10px; border-radius:8px; transition: color var(--trans), background var(--trans); }
.menu a:hover { color: var(--white); background: var(--glass); }
.cta { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: var(--white); padding:10px 16px; border-radius:10px; font-weight:700; border:none; cursor:pointer; box-shadow:0 12px 36px rgba(255,138,51,0.18); transition: transform var(--trans), box-shadow var(--trans); }
.cta:hover { transform: translateY(-3px); box-shadow:0 18px 46px rgba(255,138,51,0.24); }

/* === NAV TOGGLE (MOBILE) === */
.nav-toggle { display:none; flex-direction: column; justify-content:center; gap:5px; width:40px; height:32px; background: transparent; border:none; cursor:pointer; z-index:1100; }
.nav-toggle span { display:block; width:100%; height:3px; background: var(--white); border-radius:3px; transition: all 0.3s ease; }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px,6px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px,-6px); }

/* MOBILE MENU */
@media(max-width:768px){
  .nav-toggle{ display:flex; }
  .menu{ position:fixed; top:0; right:-100%; height:100vh; width:240px; background:var(--card); flex-direction:column; gap:20px; padding:80px 20px; box-shadow:-10px 0 25px rgba(0,0,0,0.4); transition:right 0.3s ease; }
  .menu.show{ right:0; }
  .menu a, .menu .cta{ font-size:18px; }
}

/* === HERO === */
.hero { display:grid; grid-template-columns:1fr 420px; gap:36px; align-items:center; margin-top:28px; padding:56px; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-radius: var(--radius); box-shadow:0 14px 60px rgba(2,6,20,0.6); position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; right:-140px; top:-120px; width:560px; height:560px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,138,51,0.12), transparent 35%); filter: blur(12px); pointer-events:none; z-index:0; }
.hero-text{ z-index:1; }
.hero h2{ font-size:48px; line-height:1.02; margin:0 0 14px 0; font-weight:800; letter-spacing:-0.5px; }
.hero p{ color: var(--muted); margin:0 0 22px 0; font-size:18px; max-width:780px; }

/* HERO BUTTONS */
.hero .actions{ display:flex; gap:12px; align-items:center; z-index:1; }
.btn-primary{ background: linear-gradient(90deg, var(--accent), var(--accent2)); border:none; color:var(--white); padding:12px 18px; border-radius:12px; font-weight:700; cursor:pointer; box-shadow:0 12px 36px rgba(255,138,51,0.14); transition: transform var(--trans), box-shadow var(--trans); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow:0 18px 48px rgba(255,138,51,0.18); }
.btn-secondary{ background:transparent; border:1px solid rgba(255,255,255,0.06); color: var(--white); padding:10px 14px; border-radius:12px; cursor:pointer; transition: background var(--trans); }
.btn-secondary:hover{ background: rgba(255,255,255,0.04); }

/* HERO PREVIEW CARD */
.preview-card{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); border-radius:16px; padding:26px; display:flex; flex-direction:column; align-items:center; gap:14px; box-shadow:0 10px 34px rgba(2,6,20,0.55); z-index:1; }
.preview-card .box{ width:180px; height:180px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:900; color:#08122a; background: linear-gradient(180deg, #fff, #eaf0fb); transition: transform 0.32s ease; animation: floatY 4s ease-in-out infinite; }
.preview-card .box:hover{ transform: rotate(-6deg) scale(1.03); }
.preview-card small{ color: var(--muted); }

/* === CATEGORIES === */
.cats{ margin-top:36px; display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.cats::-webkit-scrollbar{ height:8px; }
.cats::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.06); border-radius:8px; }

.cat{ flex:0 0 auto; padding:12px 22px; border-radius:14px; background: rgba(255,255,255,0.02); color: var(--muted); cursor:pointer; transition: background 0.3s, color 0.3s, transform 0.3s; display:flex; gap:10px; align-items:center; font-weight:600; font-size:14px; }
.cat:hover{ background: rgba(255,255,255,0.04); color: var(--white); transform: translateY(-3px); }
.cat.active{ background: rgba(255,138,51,0.12); color: var(--accent); box-shadow:0 10px 28px rgba(255,138,51,0.08); }

/* === SECTION TITLE === */
.section-title{ margin-top:44px; font-size:26px; font-weight:800; letter-spacing:-0.2px; color: var(--white); }

/* === GALLERY GRID / CARD === */
.grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:22px; margin-top:24px; }

.card{ background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,247,252,0.98)); color:#0a1b37; border-radius:16px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:14px; box-shadow:0 6px 18px rgba(2,6,20,0.08); transition: transform 0.28s ease, box-shadow 0.28s ease; min-height:240px; }
.card:hover{ transform: translateY(-10px) scale(1.03); box-shadow:0 28px 70px rgba(3,10,24,0.6); }

.logo-preview{ width:120px; height:120px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:36px; color:#0a1b37; background: linear-gradient(180deg,#ffffff,#e6eefc); box-shadow:0 8px 24px rgba(2,6,20,0.08); overflow:hidden; transition: transform 0.3s ease; }
.logo-preview img{ width:100%; height:100%; object-fit:contain; border-radius:14px; }
.card:hover .logo-preview{ transform: scale(1.05); }

.card h4{ margin:0; font-size:16px; font-weight:700; color:#0e2d4a; text-transform:capitalize; text-align:center; }
.card p{ margin:0; color:#465a78; font-size:14px; text-align:center; }

.card .meta{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto; }
.price{ background: linear-gradient(90deg, var(--accent), var(--accent2)); color: var(--white); padding:8px 14px; border-radius:12px; font-weight:800; font-size:14px; box-shadow:0 8px 24px rgba(255,138,51,0.12); }
.download-btn{ background:transparent; border:1px solid rgba(10,27,55,0.08); padding:8px 14px; border-radius:12px; cursor:pointer; font-weight:800; transition: all 0.3s ease; }
.download-btn:hover{ background: rgba(10,27,55,0.04); transform:translateY(-3px); box-shadow:0 6px 20px rgba(10,27,55,0.1); }

/* === HOW IT WORKS === */
.how{ display:flex; gap:18px; margin-top:34px; flex-wrap:wrap; }
.how .step{ background: rgba(255,255,255,0.03); padding:18px; border-radius:12px; min-width:180px; transition: transform var(--trans), box-shadow var(--trans); display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.how .step:hover{ transform: translateY(-6px); box-shadow:0 12px 36px rgba(2,6,20,0.45); }
.how .step h5{ margin:0; color: var(--accent); font-weight:800; }
.how .step p{ margin:0; color: var(--muted); }

/* === UPLOADER ROW === */
.uploader{ margin-top:18px; background: rgba(255,255,255,0.02); padding:12px; border-radius:12px; display:flex; gap:12px; align-items:center; }
.uploader .fake-file{ padding:10px 14px; border-radius:10px; background: rgba(255,255,255,0.04); cursor:pointer; transition: background var(--trans); }
.uploader .fake-file:hover{ background: rgba(255,255,255,0.06); }

/* === MODAL === */
.modal-back{ position: fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,0.6); z-index:9999; }
.modal{ width:480px; max-width:94%; padding:22px; border-radius:12px; background: linear-gradient(180deg,#0c254d,#081b37); box-shadow:0 26px 80px rgba(2,6,20,0.8); animation:pop 0.28s cubic-bezier(.2,.9,.3,1); position:relative; }
@keyframes pop{ from{opacity:0; transform:translateY(-12px) scale(.98);} to{opacity:1; transform:none;} }
.modal h3{ margin:0 0 10px 0; color: var(--white); font-size:18px; }
.modal .form-row{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.modal input, .modal select, .modal textarea{ padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: var(--white); }
.close-x{ position:absolute; right:12px; top:10px; color: var(--muted); cursor:pointer; transition: color var(--trans); }
.close-x:hover{ color: var(--white); }

/* === LOGIN MODAL === */
.login-modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); justify-content:center; align-items:center; z-index:2000; }
.login-box{ background:#fff; padding:20px; border-radius:12px; width:300px; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,0.2); position:relative; }
.login-box h3{ margin-bottom:15px; color:#0b1b34; }
.login-box input{ width:90%; padding:8px; margin:6px 0; border:1px solid #ccc; border-radius:6px; }
.login-box button{ width:95%; padding:10px; margin:8px 0; border:none; border-radius:8px; background:#0077ff; color:#fff; cursor:pointer; }
.google-login{ background:#db4437 !important; }

/* === CTA FULL WIDTH SECTION === */
.cta-section{ margin:56px 0; text-align:center; }
.cta-section a{ display:inline-block; background: linear-gradient(90deg,var(--accent2),var(--accent)); padding:18px 48px; border-radius:14px; color:var(--white); font-weight:800; font-size:18px; box-shadow:0 18px 48px rgba(255,138,51,0.18); transition: transform var(--trans), box-shadow var(--trans); }
.cta-section a:hover{ transform: translateY(-5px); box-shadow:0 28px 68px rgba(255,138,51,0.20); }

/* === FOOTER === */
.footer{ margin-top:56px; padding:28px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:12px; color: var(--muted); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.footer small{ color: var(--muted); }

/* === HELPERS === */
.muted{ color: var(--muted); }
.center{ display:flex; align-items:center; justify-content:center; }
.hidden{ display:none; }

/* === ANIMATIONS / FLOATING === */
@keyframes floatY{0%{transform:translateY(0);}50%{transform:translateY(-10px);}100%{transform:translateY(0);}}
.preview-card .box{ animation: floatY 4s ease-in-out infinite; }

/* ================= Perfect Responsive ================= */
@media(min-width:1600px){ .container{ max-width:1500px; } .hero{ grid-template-columns:1fr 520px; padding:72px; } .hero h2{ font-size:56px; } .grid{ gap:28px; } }
@media(max-width:1199px){ .container{ padding:24px; } .hero{ grid-template-columns:1fr 360px; padding:48px; } .hero h2{ font-size:42px; } .grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:991px){ .container{ padding:20px; } .hero{ grid-template-columns:1fr; text-align:center; padding:40px; } .hero h2{ font-size:36px; } .hero p{ font-size:16px; } .preview-card{ margin:20px auto 0; max-width:360px; } .grid{ grid-template-columns:repeat(2,1fr); gap:18px; } .menu{ gap:14px; } }
@media(max-width:768px){ .nav{ padding:12px; } .menu{ flex-direction:column; text-align:left; } .menu a,.menu .cta{ font-size:18px; padding:10px 0; } .hero h2{ font-size:32px; } .grid{ grid-template-columns:repeat(2,1fr); } .cats{ justify-content:flex-start; overflow-x:auto; } }
@media(max-width:520px){ .container{ padding:16px; } .brand h1{ display:none; } .brand .logo{ width:44px; height:44px; font-size:16px; } .hero{ padding:28px 20px; } .hero h2{ font-size:26px; line-height:1.2; } .hero p{ font-size:14px; } .cta{ padding:8px 12px; font-size:14px; } .btn-primary,.btn-secondary{ font-size:14px; padding:10px 14px; } .grid{ grid-template-columns:1fr; gap:16px; } .card{ min-height:auto; padding:14px; } .logo-preview{ width:80px; height:80px; font-size:24px; } .how{ flex-direction:column; gap:14px; } .footer{ flex-direction:column; text-align:center; gap:10px; } }