/* WordPress/WooCommerce demo platform landing — matched to wpdemo.webkul.com:
   dark CLOUD-HOSTING top banner, centered logo, welcome hero, categories+search+Contact toolbar,
   animated pastel gradient background, and a grid of flat translucent cards (80px icon, title,
   blue "View Demo" link). Cards are rendered dynamically by the control plane from the catalog. */

:root{
  --blue:#2149f3; --blue-d:#1736c9; --logo:#3b3fd8;
  --ink:#2c3145; --muted:#5b6472; --card:rgba(255,255,255,.55);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); line-height:1.5;
  min-height:100vh; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;            /* sticky-footer: footer pinned to bottom on short pages */
  background:linear-gradient(-45deg,#fcebe5,#fce7e8,#fbe4eb,#f5e6ef,#ebebf3,#e1f1f8,#def4f8,#def9f3,#fce9e7,#fbe2ec);
  background-size:300% 300%; animation:bgshift 26s ease infinite;
}
@keyframes bgshift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
a{color:inherit}
/* sticky-footer wrapper: only .page flexes; everything inside lays out in normal block flow,
   so the toolbar/search/listing are unaffected by the footer pinning. */
.page{flex:1 0 auto}

/* ---- cloud-hosting top banner ---- */
.cloud-banner{
  color:#fff; padding:9px 24px;
  background:
    radial-gradient(140% 240% at 8% 120%, rgba(56,189,248,.25), transparent 50%),
    radial-gradient(120% 200% at 100% -40%, rgba(167,107,255,.30), transparent 55%),
    linear-gradient(100deg,#070b22,#0e1336);
}
.cloud-banner .inner{
  max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap; font-size:14px;
}
.cloud-badge{
  display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:11px; letter-spacing:.6px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:5px 12px; border-radius:999px;
}
.cloud-banner span.msg b{font-weight:700}
.cloud-plans{
  display:inline-flex; align-items:center; gap:7px; background:#fff; color:#0e1336; text-decoration:none;
  font-weight:700; font-size:13px; padding:8px 16px; border-radius:8px; transition:transform .15s;
}
.cloud-plans:hover{transform:translateY(-1px)}

/* ---- logo + hero ---- */
.logo{display:flex; justify-content:center; padding:30px 24px 4px}
.logo-img{max-height:30px; width:auto; display:block}
.hero{text-align:center; padding:10px 24px 22px; max-width:720px; margin:0 auto}
.hero h1{font-size:26px; font-weight:700; color:var(--ink); margin:0 0 10px}
.hero p{color:var(--muted); font-size:15px; margin:0 auto; max-width:560px}

/* ---- toolbar: categories + search + contact ---- */
.toolbar{
  max-width:1120px; margin:0 auto; padding:10px 24px 0;
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.search-box{
  flex:1; min-width:260px; display:flex; align-items:center; background:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.9); border-radius:10px; padding:0 14px;
  box-shadow:0 1px 3px rgba(16,24,40,.05);
}
.search-box select{border:0; background:transparent; font:inherit; font-weight:600; color:var(--ink); padding:14px 10px 14px 0; cursor:pointer; outline:none}
.search-box .divider{width:1px; height:22px; background:rgba(0,0,0,.12); margin:0 8px}
.search-box .mag{color:var(--muted); display:flex}
.search-box input{flex:1; border:0; background:transparent; font:inherit; font-size:15px; padding:14px 8px; outline:none; color:var(--ink)}
.contact-btn{
  display:inline-flex; align-items:center; border:1px solid var(--blue); color:var(--blue); background:transparent;
  text-decoration:none; font-weight:600; font-size:14px; padding:12px 22px; border-radius:8px; transition:.15s;
}
.contact-btn:hover{background:var(--blue); color:#fff}

/* ---- demo grid ---- */
.grid-wrap{max-width:1120px; margin:0 auto; padding:26px 24px 64px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.65); border-radius:8px; padding:26px 24px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  backdrop-filter:blur(6px); transition:box-shadow .15s, transform .15s;
}
.card:hover{box-shadow:0 12px 28px rgba(16,24,40,.12); transform:translateY(-2px)}
.thumb{
  width:80px; height:80px; border-radius:14px; display:grid; place-items:center;
  font-size:32px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, hsl(var(--h,150),58%,52%), hsl(calc(var(--h,150) + 28),60%,42%));
}
.card-title{margin:0; font-size:16px; font-weight:600; color:var(--ink)}
.demo-btn{color:var(--blue); font-weight:600; font-size:14px; text-decoration:none}
.demo-btn:hover{color:var(--blue-d); text-decoration:underline}
.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:48px; border:1px dashed rgba(0,0,0,.15); border-radius:10px; background:rgba(255,255,255,.4)}

/* ---- footer ---- */
.site-footer{flex-shrink:0; color:var(--muted); font-size:14px; background:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.6); backdrop-filter:blur(6px)}
.site-footer .inner{max-width:1120px; margin:0 auto; padding:26px 24px; text-align:center}
.site-footer a{color:var(--blue-d); font-weight:600; text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .note{margin-top:8px; font-size:12px; color:#8b94a3}

@media (max-width:560px){
  .hero h1{font-size:22px}
  .grid-wrap,.toolbar{padding-left:16px; padding-right:16px}
}