:root{
  --fu-bg:#030712;
  --fu-bg2:#071018;
  --fu-panel:rgba(15,23,42,.82);
  --fu-panel2:rgba(15,23,42,.62);
  --fu-line:rgba(255,255,255,.08);
  --fu-text:#f8fafc;
  --fu-muted:#94a3b8;
  --fu-primary:#7c3aed;
  --fu-cyan:#06b6d4;
  --fu-green:#10b981;
  --fu-radius:30px;
  --fu-shadow:0 28px 80px rgba(2,6,23,.45);
}

body.fouru-premium{
  background:
    radial-gradient(circle at 12% 0%,rgba(124,58,237,.24),transparent 28%),
    radial-gradient(circle at 88% 4%,rgba(6,182,212,.18),transparent 26%),
    linear-gradient(180deg,var(--fu-bg),var(--fu-bg2)) !important;
  color:var(--fu-text) !important;
}

body.fouru-premium .main{
  background:transparent !important;
  padding:34px !important;
}

body.fouru-premium .topbar,
body.fouru-premium .panel,
body.fouru-premium .stat,
body.fouru-premium .live-card,
body.fouru-premium .page-row{
  background:linear-gradient(180deg,var(--fu-panel),var(--fu-panel2)) !important;
  border:1px solid var(--fu-line) !important;
  box-shadow:var(--fu-shadow) !important;
  backdrop-filter:blur(22px) !important;
  color:var(--fu-text) !important;
}

body.fouru-premium .topbar{
  border-radius:34px !important;
  padding:34px !important;
  margin-bottom:26px !important;
}

body.fouru-premium .page-title h1{
  font-size:clamp(42px,4vw,66px) !important;
  line-height:.92 !important;
  letter-spacing:-4px !important;
  margin:0 !important;
  font-weight:950 !important;
  background:linear-gradient(90deg,#fff,#c4b5fd,#67e8f9) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

body.fouru-premium .page-title p,
body.fouru-premium p,
body.fouru-premium span{
  color:var(--fu-muted) !important;
}

body.fouru-premium .quick a,
body.fouru-premium .mini-btn,
body.fouru-premium button,
body.fouru-premium .page-actions a{
  border:0 !important;
  border-radius:18px !important;
  padding:12px 18px !important;
  background:linear-gradient(135deg,var(--fu-primary),var(--fu-cyan)) !important;
  color:#fff !important;
  font-weight:900 !important;
  box-shadow:0 16px 34px rgba(124,58,237,.22) !important;
  transition:.22s ease !important;
}

body.fouru-premium .quick a:hover,
body.fouru-premium .mini-btn:hover,
body.fouru-premium button:hover,
body.fouru-premium .page-actions a:hover{
  transform:translateY(-3px) !important;
  filter:saturate(1.15) !important;
}

body.fouru-premium .alert{
  border-radius:24px !important;
  padding:18px 22px !important;
  background:rgba(16,185,129,.14) !important;
  border:1px solid rgba(16,185,129,.32) !important;
  color:#d1fae5 !important;
  font-weight:900 !important;
  backdrop-filter:blur(18px) !important;
}

body.fouru-premium .stats{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
  gap:24px !important;
  margin:28px 0 !important;
}

body.fouru-premium .stat{
  position:relative !important;
  overflow:hidden !important;
  border-radius:32px !important;
  padding:34px !important;
  transition:.25s ease !important;
}

body.fouru-premium .stat:hover,
body.fouru-premium .page-row:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(124,58,237,.45) !important;
}

body.fouru-premium .stat::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  top:-60px;
  right:-60px;
  background:radial-gradient(circle,rgba(124,58,237,.36),transparent 70%);
}

body.fouru-premium .stat b{
  display:block !important;
  font-size:64px !important;
  line-height:1 !important;
  color:#fff !important;
}

body.fouru-premium .live-card{
  border-radius:34px !important;
  padding:34px !important;
  margin:26px 0 !important;
  background:
    radial-gradient(circle at 0% 0%,rgba(6,182,212,.18),transparent 35%),
    linear-gradient(135deg,rgba(15,23,42,.90),rgba(30,41,59,.72)) !important;
}

body.fouru-premium input{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
  border-radius:18px !important;
  padding:14px 16px !important;
}

body.fouru-premium .panel{
  border-radius:34px !important;
  padding:30px !important;
}

body.fouru-premium .pages{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
}

body.fouru-premium .page-row{
  border-radius:28px !important;
  padding:26px !important;
}

body.fouru-premium h1,
body.fouru-premium h2,
body.fouru-premium h3,
body.fouru-premium b{
  color:#fff !important;
}

body.fouru-premium .sidebar{
  background:
    radial-gradient(circle at 10% 0%,rgba(124,58,237,.22),transparent 28%),
    linear-gradient(180deg,#07111f,#020617) !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
}

body.fouru-premium .sidebar a{
  transition:.22s ease !important;
}

body.fouru-premium .sidebar a:hover{
  transform:translateX(4px) !important;
  background:rgba(255,255,255,.08) !important;
}

body.fouru-premium ::-webkit-scrollbar{
  width:10px;
}

body.fouru-premium ::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--fu-primary),var(--fu-cyan));
  border-radius:999px;
}
/* ================= PAGE CARDS 2.0 ================= */

.page-row{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:26px;
  padding:30px;
  margin-top:22px;
  border-radius:30px;
  overflow:hidden;
  transition:.35s ease;
}

.page-row::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right,
    rgba(139,92,246,.18),
    transparent 35%);
  pointer-events:none;
}

.page-row:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.35),
    0 0 60px rgba(59,130,246,.12);
}

.page-left{
  flex:1;
  min-width:0;
}

.page-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:28px;
  font-weight:950;
  line-height:1.1;
  color:white;
  margin-bottom:12px;
}

.page-meta{
  color:rgba(255,255,255,.55);
  font-size:14px;
  font-weight:700;
}

.page-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
}

.action-btn{
  border:none;
  outline:none;
  text-decoration:none;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 18px;
  border-radius:18px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);

  color:white;
  font-weight:900;
  font-size:14px;

  transition:.28s ease;
  backdrop-filter:blur(14px);
}

.action-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
}

.primary-btn{
  background:linear-gradient(135deg,#7c3aed,#06b6d4);
}

.primary-btn:hover{
  box-shadow:
    0 0 30px rgba(124,58,237,.45),
    0 0 50px rgba(6,182,212,.25);
}

.danger-btn{
  background:linear-gradient(135deg,#dc2626,#ef4444);
}

.status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.3px;
}

.status.live{
  background:rgba(34,197,94,.18);
  color:#4ade80;
  border:1px solid rgba(74,222,128,.25);
}

.status.soon{
  background:rgba(14,165,233,.18);
  color:#38bdf8;
  border:1px solid rgba(56,189,248,.25);
}

.status.maintenance{
  background:rgba(245,158,11,.18);
  color:#fbbf24;
  border:1px solid rgba(251,191,36,.25);
}

.live-page{
  border:1px solid rgba(74,222,128,.18) !important;
  box-shadow:
    0 0 40px rgba(34,197,94,.12);
}

/* ================= MOBILE ================= */

@media(max-width:980px){

  .page-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .page-actions{
    width:100%;
    justify-content:flex-start;
  }

  .page-title{
    font-size:22px;
  }

}
/* ================= PAGES AREA FIX ================= */

.pages{
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-top:26px;
}

.panel{
  overflow:visible !important;
}

.panel-head{
  margin-bottom:24px;
}

.page-row{
  min-height:140px;
}

.page-actions{
  row-gap:14px;
}

.page-actions form{
  margin:0 !important;
}

.page-actions button{
  border:none;
}

.page-row .page-meta{
  margin-top:10px;
  font-size:15px;
}

.page-row:hover{
  z-index:3;
}

/* ================= DASHBOARD DENSITY FIX ================= */

body.fouru-premium .topbar{
  padding:28px 34px !important;
  margin-bottom:22px !important;
}

body.fouru-premium .stats{
  margin:22px 0 !important;
}

body.fouru-premium .live-card{
  margin:22px 0 !important;
  padding:28px !important;
}

body.fouru-premium .panel{
  margin-top:22px !important;
  padding:26px !important;
}

body.fouru-premium .panel-head{
  margin-bottom:14px !important;
}

body.fouru-premium .pages{
  margin-top:16px !important;
  gap:18px !important;
}

body.fouru-premium .page-row{
  min-height:110px !important;
  padding:22px !important;
}


/* ================= PAGE THUMBNAILS ================= */

body.fouru-premium .page-row{
  display:grid !important;
  grid-template-columns:220px 1fr auto !important;
  align-items:center !important;
}

body.fouru-premium .page-thumb{
  position:relative;
  height:130px;
  border-radius:24px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 45px rgba(2,6,23,.35);
}

body.fouru-premium .page-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:1s ease;
}

body.fouru-premium .page-row:hover .page-thumb img{
  transform:scale(1.08);
}

body.fouru-premium .page-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,rgba(2,6,23,.58));
}

body.fouru-premium .page-thumb-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:3;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(255,255,255,.12);
  color:white !important;
  font-size:12px;
  font-weight:900;
  backdrop-filter:blur(14px);
}

@media(max-width:1100px){
  body.fouru-premium .page-row{
    grid-template-columns:1fr !important;
  }

  body.fouru-premium .page-thumb{
    width:100%;
    height:190px;
  }
}

/* ================= AI SCORE CHIPS ================= */

body.fouru-premium .ai-scores{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

body.fouru-premium .score-chip{
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 24px rgba(0,0,0,.18);
}

body.fouru-premium .score-chip.seo{
  background:rgba(16,185,129,.14);
  color:#6ee7b7 !important;
}

body.fouru-premium .score-chip.conversion{
  background:rgba(124,58,237,.18);
  color:#c4b5fd !important;
}

body.fouru-premium .score-chip.visual{
  background:rgba(6,182,212,.14);
  color:#67e8f9 !important;
}

body.fouru-premium .score-chip.ai{
  background:rgba(245,158,11,.14);
  color:#fcd34d !important;
}

/* ================= AI QUICK ACTIONS ================= */

body.fouru-premium .ai-quick{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:12px;
}

body.fouru-premium .ai-chip{
  text-decoration:none;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#e0f2fe !important;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  transition:.22s ease;
}

body.fouru-premium .ai-chip:hover{
  transform:translateY(-2px);
  background:rgba(124,58,237,.18);
  border-color:rgba(124,58,237,.35);
  box-shadow:0 10px 28px rgba(124,58,237,.18);
}

/* subtle living glow */
body.fouru-premium .page-row{
  isolation:isolate;
}

body.fouru-premium .page-row::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(124,58,237,.22),rgba(6,182,212,.16),transparent 55%);
  opacity:0;
  transition:.25s ease;
  z-index:-1;
}

body.fouru-premium .page-row:hover::after{
  opacity:1;
}

body.fouru-premium .live-page{
  box-shadow:
    0 0 0 1px rgba(16,185,129,.18),
    0 22px 60px rgba(2,6,23,.42),
    0 0 40px rgba(16,185,129,.10) !important;
}

/* ================= LIVING PLATFORM EFFECTS ================= */

body.fouru-premium::before,
body.fouru-premium::after{
  content:"";
  position:fixed;
  width:520px;
  height:520px;
  border-radius:999px;
  filter:blur(120px);
  z-index:-2;
  opacity:.18;
  pointer-events:none;
  animation:floatGlow 18s ease-in-out infinite;
}

body.fouru-premium::before{
  background:#7c3aed;
  top:-180px;
  left:-120px;
}

body.fouru-premium::after{
  background:#06b6d4;
  right:-160px;
  bottom:-180px;
  animation-delay:6s;
}

@keyframes floatGlow{
  0%{
    transform:translateY(0) translateX(0) scale(1);
  }
  50%{
    transform:translateY(40px) translateX(20px) scale(1.12);
  }
  100%{
    transform:translateY(0) translateX(0) scale(1);
  }
}

/* ================= FLOATING STATS ================= */

body.fouru-premium .stat{
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

body.fouru-premium .stat:hover{
  transform:translateY(-6px) scale(1.01);
  border-color:rgba(124,58,237,.35) !important;
  box-shadow:
    0 30px 70px rgba(2,6,23,.55),
    0 0 40px rgba(124,58,237,.16) !important;
}

/* ================= AI LIVE STATUS ================= */

body.fouru-premium .ai-live{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding:12px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  width:max-content;
  max-width:100%;
}

body.fouru-premium .ai-live-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#10b981;
  box-shadow:0 0 18px #10b981;
  animation:pulseLive 1.6s infinite;
}

@keyframes pulseLive{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.5);opacity:.5}
  100%{transform:scale(1);opacity:1}
}

body.fouru-premium .ai-live span{
  color:#dbeafe;
  font-weight:800;
  font-size:13px;
  letter-spacing:.02em;
}

/* ================= SMART METRICS ================= */

body.fouru-premium .smart-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
  max-width:720px;
}

body.fouru-premium .smart-metrics div{
  padding:10px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
}

body.fouru-premium .smart-metrics b{
  display:block;
  font-size:15px;
  color:#fff !important;
  font-weight:950;
}

body.fouru-premium .smart-metrics span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#94a3b8 !important;
  font-weight:800;
}

@media(max-width:1100px){
  body.fouru-premium .smart-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ================= AI RECOMMENDATION ================= */

body.fouru-premium .ai-recommendation{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.12),
      rgba(6,182,212,.08)
    );
  border:1px solid rgba(124,58,237,.18);
  color:#dbeafe !important;
  font-size:13px;
  line-height:1.6;
  font-weight:800;
  max-width:760px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 30px rgba(2,6,23,.18);
}

/* ================= PAGE CARD MOTION ================= */

body.fouru-premium .page-row{
  position:relative;
  overflow:hidden;
  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

body.fouru-premium .page-row::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,.04) 35%,
      transparent 70%
    );
  transform:translateX(-120%);
  transition:transform .8s ease;
  pointer-events:none;
}

body.fouru-premium .page-row:hover::before{
  transform:translateX(120%);
}

body.fouru-premium .page-row:hover{
  transform:
    translateY(-6px)
    scale(1.005);

  border-color:
    rgba(124,58,237,.24) !important;

  box-shadow:
    0 30px 80px rgba(2,6,23,.55),
    0 0 40px rgba(124,58,237,.12) !important;

  background:
    linear-gradient(
      135deg,
      rgba(15,23,42,.98),
      rgba(10,18,40,.98)
    ) !important;
}

/* subtle floating image */

body.fouru-premium .page-thumb{
  transition:
    transform .45s ease,
    box-shadow .45s ease;
}

body.fouru-premium .page-row:hover .page-thumb{
  transform:
    translateY(-4px)
    rotate(-1deg)
    scale(1.02);

  box-shadow:
    0 18px 40px rgba(0,0,0,.45);
}


/* ================= LIVE PAGE CARD ================= */

body.fouru-premium .page-card.live-card{
  position:relative;
  border:1px solid rgba(16,185,129,.35) !important;
  box-shadow:
    0 0 0 1px rgba(16,185,129,.08),
    0 30px 90px rgba(16,185,129,.16),
    0 0 50px rgba(16,185,129,.12);
  overflow:hidden;
}

body.fouru-premium .page-card.live-card::before{
  content:"LIVE";
  position:absolute;
  top:18px;
  right:-34px;
  background:#10b981;
  color:white;
  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;
  padding:8px 40px;
  transform:rotate(45deg);
  box-shadow:0 10px 25px rgba(16,185,129,.45);
  z-index:3;
}

body.fouru-premium .page-card.live-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 0 60px rgba(16,185,129,.05);
}

body.fouru-premium .page-card.live-card:hover{
  transform:translateY(-10px) scale(1.015);
}


/* ================= LIVE PAGE ROW OVERRIDE ================= */

body.fouru-premium .page-row.live-page{
  position:relative;
  border:1px solid rgba(16,185,129,.42) !important;
  box-shadow:
    0 0 0 1px rgba(16,185,129,.12),
    0 30px 90px rgba(16,185,129,.16),
    0 0 55px rgba(16,185,129,.16) !important;
}

body.fouru-premium .page-row.live-page::after{
  content:"LIVE";
  position:absolute;
  top:18px;
  right:-34px;
  background:#10b981;
  color:white;
  font-size:11px;
  font-weight:950;
  letter-spacing:.16em;
  padding:8px 42px;
  transform:rotate(45deg);
  box-shadow:0 10px 28px rgba(16,185,129,.45);
  z-index:5;
}

body.fouru-premium .page-row.live-page .page-thumb{
  border-color:rgba(16,185,129,.35) !important;
}

body.fouru-premium .page-row.live-page .page-thumb-badge{
  background:rgba(16,185,129,.82) !important;
}


/* ================= BULK DELETE UI ================= */

body.fouru-premium .bulk-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 18px;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
}

body.fouru-premium .bulk-toolbar button{
  border:0;
  border-radius:16px;
  padding:11px 16px;
  color:white;
  font-weight:900;
  background:rgba(255,255,255,.07);
  cursor:pointer;
}

body.fouru-premium .bulk-check{
  position:absolute;
  top:18px;
  left:18px;
  z-index:8;
}

body.fouru-premium .bulk-check input{
  width:20px;
  height:20px;
  accent-color:#7c3aed;
}

body.fouru-premium .page-row{
  padding-left:54px !important;
}

/* ================= OWNER FILTER TABS ================= */

body.fouru-premium .filter-tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0 24px;
}

body.fouru-premium .filter-tabs a{
  padding:12px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#e2e8f0;
  text-decoration:none;
  font-weight:900;
  transition:.2s ease;
}

body.fouru-premium .filter-tabs a:hover{
  transform:translateY(-2px);
  border-color:rgba(124,58,237,.35);
  box-shadow:0 12px 30px rgba(124,58,237,.18);
}

/* ================= FOURU BRAND LOGO ================= */

.fouru-brand-img{
  display:block;
  width:190px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

.fouru-logo-frame{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:18px;
  background:linear-gradient(135deg,#f8fafc,#e2e8f0);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:
    0 18px 40px rgba(2,6,23,.25),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* ================= FOURU DARK LOGO FRAME OVERRIDE ================= */

.fouru-logo-frame{
  background:rgba(15,23,42,.45) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 18px 50px rgba(6,182,212,.12),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  padding:6px 10px !important;
}

.fouru-brand-img{
  width:170px !important;
  border-radius:12px;
}
/* ================= FIX MAIN LOGO SIZE ================= */

.fouru-logo-frame{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

.fouru-brand-img{
  width:320px !important;
  max-width:none !important;
  height:auto !important;
  object-fit:contain !important;
  display:block;
  filter:
    drop-shadow(0 0 18px rgba(59,130,246,.35))
    drop-shadow(0 0 35px rgba(168,85,247,.18));
}

/* navbar logo area */

.topbar .fouru-logo-frame,
.hero-nav .fouru-logo-frame,
.navbar .fouru-logo-frame{
  min-width:340px;
}

/* ================= FOURU SMART CONTRAST SYSTEM ================= */

body.fouru-premium{
  background:
    radial-gradient(circle at 12% 10%, rgba(124,58,237,.28), transparent 32%),
    radial-gradient(circle at 88% 30%, rgba(6,182,212,.18), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(14,165,233,.12), transparent 35%),
    linear-gradient(135deg,#020617 0%,#07111f 48%,#031926 100%) !important;
}

/* brighter readable cards */
body.fouru-premium .glass,
body.fouru-premium .page-row,
body.fouru-premium .stat,
body.fouru-premium .panel{
  background:
    linear-gradient(135deg, rgba(15,23,42,.88), rgba(15,23,42,.66)) !important;
  border-color:rgba(148,163,184,.14) !important;
}

/* premium button glow */
body.fouru-premium .action-btn,
body.fouru-premium .btn,
body.fouru-premium .primary-btn{
  box-shadow:
    0 12px 30px rgba(6,182,212,.20),
    0 0 0 1px rgba(255,255,255,.06) inset !important;
}

body.fouru-premium .action-btn:hover,
body.fouru-premium .btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 20px 50px rgba(124,58,237,.25),
    0 0 34px rgba(6,182,212,.18) !important;
}

/* glowing section separators */
body.fouru-premium .section-line,
body.fouru-premium hr{
  border:0 !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.55),rgba(168,85,247,.45),transparent) !important;
}

/* better text contrast */
body.fouru-premium p,
body.fouru-premium small,
body.fouru-premium .muted{
  color:#aebdda !important;
}

body.fouru-premium h1,
body.fouru-premium h2,
body.fouru-premium h3,
body.fouru-premium strong{
  color:#f8fbff !important;
}

/* live card cleaner glow */
body.fouru-premium .page-row.live-page{
  background:
    linear-gradient(135deg, rgba(6,78,59,.36), rgba(15,23,42,.82) 48%, rgba(15,23,42,.92)) !important;
  border-color:rgba(16,185,129,.55) !important;
}

/* AI chips brighter */
body.fouru-premium .ai-chip,
body.fouru-premium .score-chip{
  backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* logo hover energy */
.fouru-brand-img{
  transition:transform .25s ease, filter .25s ease;
}

.fouru-brand-img:hover{
  transform:scale(1.035);
  filter:
    drop-shadow(0 0 22px rgba(56,189,248,.5))
    drop-shadow(0 0 45px rgba(168,85,247,.28));
}

/* ================= FOURU PREMIUM MOTION ================= */

body.fouru-premium{
  overflow-x:hidden;
}

/* animated background glow */
body.fouru-premium::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, rgba(124,58,237,.14), transparent 24%),
    radial-gradient(circle at 80% 30%, rgba(6,182,212,.12), transparent 26%),
    radial-gradient(circle at 50% 80%, rgba(59,130,246,.10), transparent 28%);
  animation:fouruFloatGlow 18s linear infinite alternate;
  z-index:0;
}

@keyframes fouruFloatGlow{
  0%{
    transform:translate3d(0,0,0) scale(1);
  }
  100%{
    transform:translate3d(-3%,2%,0) scale(1.08);
  }
}

/* smooth app feel */
*{
  transition:
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease,
    opacity .25s ease;
}

/* floating cards */
.page-row,
.glass,
.stat,
.panel{
  position:relative;
  overflow:hidden;
}

.page-row::after,
.glass::after,
.stat::after,
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255,255,255,.03) 40%,
      transparent 60%
    );
  transform:translateX(-120%);
  transition:transform 1.2s ease;
}

.page-row:hover::after,
.glass:hover::after,
.stat:hover::after,
.panel:hover::after{
  transform:translateX(120%);
}

/* premium hover lift */
.page-row:hover,
.glass:hover,
.stat:hover{
  transform:translateY(-5px);
  box-shadow:
    0 25px 60px rgba(2,6,23,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 30px rgba(6,182,212,.08);
}

/* glowing buttons */
.btn,
.action-btn{
  position:relative;
  overflow:hidden;
}

.btn::before,
.action-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.25),
      transparent
    );
  transition:left .8s ease;
}

.btn:hover::before,
.action-btn:hover::before{
  left:140%;
}

/* live badge pulse */
.status.live{
  animation:fouruPulse 2.2s infinite;
}

@keyframes fouruPulse{
  0%{
    box-shadow:0 0 0 0 rgba(16,185,129,.45);
  }
  70%{
    box-shadow:0 0 0 14px rgba(16,185,129,0);
  }
  100%{
    box-shadow:0 0 0 0 rgba(16,185,129,0);
  }
}

/* glowing titles */
.hero h1,
.big-title{
  text-shadow:
    0 0 24px rgba(168,85,247,.16),
    0 0 45px rgba(56,189,248,.12);
}


/* ================= FOURU WORKSPACE LAYER ================= */

/* smoother scrolling */
html{
  scroll-behavior:smooth;
}

/* premium scrollbar */
::-webkit-scrollbar{
  width:12px;
  height:12px;
}

::-webkit-scrollbar-track{
  background:#020617;
}

::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      180deg,
      rgba(124,58,237,.85),
      rgba(6,182,212,.85)
    );
  border-radius:999px;
  border:2px solid #020617;
}

/* workspace shell */
.workspace-shell,
.dashboard-shell,
.owner-shell{
  position:relative;
  z-index:2;
}

/* sticky sidebar */
.sidebar{
  position:sticky !important;
  top:18px;
  height:calc(100vh - 36px);
  overflow:auto;
}

/* floating glass topbar */
.topbar{
  position:sticky;
  top:12px;
  z-index:30;
  backdrop-filter:blur(20px);
  background:rgba(15,23,42,.52) !important;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 18px 50px rgba(2,6,23,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* cleaner content spacing */
.content,
.main-content,
.dashboard-content{
  padding-bottom:120px;
}

/* premium page spacing */
.pages{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* stronger section headers */
.section-title h1,
.section-title h2{
  letter-spacing:-2px;
  line-height:1;
}

/* floating action buttons */
.primary-btn,
.btn-primary{
  position:relative;
  isolation:isolate;
}

/* glass search fields */
input,
textarea,
select{
  background:rgba(15,23,42,.72) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#f8fafc !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(6,182,212,.55) !important;
  box-shadow:
    0 0 0 4px rgba(6,182,212,.08),
    0 0 30px rgba(124,58,237,.12) !important;
}

/* mobile polish */
@media(max-width:980px){

  .sidebar{
    position:relative !important;
    top:auto !important;
    height:auto !important;
  }

  .topbar{
    top:0;
    border-radius:18px;
  }

  .fouru-brand-img{
    width:210px !important;
  }

  .page-row{
    padding-left:18px !important;
  }
}


/* ================= FOURU LIVE NUMBERS + AI PULSE ================= */

body.fouru-premium .stat b,
body.fouru-premium .stat h2,
body.fouru-premium .stat .num{
  animation:fouruNumberPop .75s ease both;
}

@keyframes fouruNumberPop{
  0%{transform:translateY(10px) scale(.92);opacity:0}
  70%{transform:translateY(-2px) scale(1.04);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}

body.fouru-premium .hero-card,
body.fouru-premium .topbar,
body.fouru-premium .glass{
  animation:fouruSoftEnter .7s ease both;
}

@keyframes fouruSoftEnter{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

body.fouru-premium .ai-live,
body.fouru-premium .ai-monitor,
body.fouru-premium .status.live{
  position:relative;
  isolation:isolate;
}

body.fouru-premium .ai-live::after,
body.fouru-premium .ai-monitor::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(16,185,129,.35),rgba(6,182,212,.25),rgba(124,58,237,.25));
  filter:blur(14px);
  opacity:.45;
  z-index:-1;
  animation:fouruLiveGlow 2.4s ease-in-out infinite alternate;
}

@keyframes fouruLiveGlow{
  from{opacity:.22;transform:scale(.98)}
  to{opacity:.72;transform:scale(1.02)}
}

body.fouru-premium .score-chip,
body.fouru-premium .ai-chip{
  animation:fouruChipIn .55s ease both;
}

@keyframes fouruChipIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}


/* ================= FOURU AI ORB BUTTON - CLEAN FINAL ================= */

.fouru-floating-ai{
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:99999;
}

.fouru-floating-ai button{
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  padding:14px 24px 14px 12px;
  border-radius:999px;
  color:#eef2ff;
  font-weight:1000;
  font-size:17px;
  letter-spacing:-.3px;

  background:
    linear-gradient(
      135deg,
      rgba(15,23,42,.72),
      rgba(30,41,59,.62)
    );

  backdrop-filter:blur(22px);

  box-shadow:
    0 25px 70px rgba(124,58,237,.30),
    0 0 45px rgba(6,182,212,.18),
    inset 0 1px 0 rgba(255,255,255,.12);

  animation:fouruOrbFloat 3.5s ease-in-out infinite;
  transition:.28s ease;
}

.fouru-floating-ai button:hover{
  transform:translateY(-5px) scale(1.035);
  box-shadow:
    0 28px 80px rgba(124,58,237,.42),
    0 0 55px rgba(6,182,212,.34),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.ai-orb{
  width:54px;
  height:54px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#020617;
  box-shadow:
    0 0 24px rgba(59,130,246,.50),
    0 0 55px rgba(168,85,247,.35);
}

.ai-orb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@keyframes fouruOrbFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
  100%{transform:translateY(0)}
}

@media(max-width:700px){
  .fouru-floating-ai{
    right:16px;
    bottom:16px;
  }

  .fouru-floating-ai button{
    padding:10px 14px 10px 10px;
    font-size:13px;
  }

  .ai-orb{
    width:44px;
    height:44px;
    flex-basis:44px;
  }
}



.ai-orb{
  animation:fouruOrbPulse 2.6s ease-in-out infinite;
}

@keyframes fouruOrbPulse{
  0%{
    transform:scale(1);
    box-shadow:
      0 0 24px rgba(59,130,246,.50),
      0 0 55px rgba(168,85,247,.35);
  }

  50%{
    transform:scale(1.08);
    box-shadow:
      0 0 34px rgba(59,130,246,.72),
      0 0 75px rgba(168,85,247,.52);
  }

  100%{
    transform:scale(1);
    box-shadow:
      0 0 24px rgba(59,130,246,.50),
      0 0 55px rgba(168,85,247,.35);
  }
}

/* ================= FOURU AI MODAL ================= */

.fouru-ai-modal{
  position:fixed;
  inset:0;
  z-index:99998;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(2,6,23,.62);
  backdrop-filter:blur(18px);
}

.fouru-ai-modal.active{
  display:flex;
}

.fouru-ai-panel{
  width:min(620px,100%);
  border-radius:34px;
  padding:28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(124,58,237,.26), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(6,182,212,.18), transparent 38%),
    rgba(15,23,42,.88);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 40px 120px rgba(2,6,23,.65),
    0 0 70px rgba(124,58,237,.20);
  position:relative;
  animation:fouruAiModalIn .32s ease both;
}

@keyframes fouruAiModalIn{
  from{opacity:0;transform:translateY(18px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.fouru-ai-close{
  position:absolute;
  top:18px;
  right:18px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  color:white;
  font-size:26px;
  cursor:pointer;
}

.fouru-ai-head{
  display:flex;
  gap:18px;
  align-items:center;
  margin-bottom:22px;
}

.ai-orb.big{
  width:72px;
  height:72px;
  flex-basis:72px;
}

.fouru-ai-head h2{
  margin:0;
  font-size:34px;
  letter-spacing:-1.5px;
}

.fouru-ai-head p{
  margin:6px 0 0;
  color:#aebdda;
  font-weight:800;
}

.fouru-ai-suggestions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:20px 0;
}

.fouru-ai-suggestions button{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.055);
  color:white;
  font-weight:900;
  cursor:pointer;
}

.fouru-ai-panel textarea{
  width:100%;
  min-height:130px;
  resize:vertical;
  border-radius:22px;
  padding:16px;
  color:white;
  background:rgba(2,6,23,.55);
  border:1px solid rgba(255,255,255,.1);
  outline:none;
}

.fouru-ai-send{
  width:100%;
  margin-top:14px;
  border:0;
  border-radius:20px;
  padding:16px;
  color:white;
  font-weight:950;
  cursor:pointer;
  background:linear-gradient(135deg,#7c3aed,#06b6d4);
  box-shadow:0 18px 50px rgba(6,182,212,.22);
}

@media(max-width:640px){
  .fouru-ai-suggestions{
    grid-template-columns:1fr;
  }
}
/* ===== MARKETING PAGE FIX ===== */

body.fouru-premium{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at 20% 0%,rgba(124,58,237,.28),transparent 30%),
    radial-gradient(circle at 90% 15%,rgba(6,182,212,.22),transparent 28%),
    linear-gradient(180deg,#030712,#071018);
  color:#fff;
  min-height:100vh;
}

.marketing-nav{
  width:min(1400px,calc(100% - 40px));
  margin:22px auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.fouru-logo-frame img{
  width:260px;
  max-width:100%;
}

.nav-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:18px;
  font-weight:800;
  text-decoration:none;
  color:white;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.06);
  transition:.25s ease;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn.primary{
  background:linear-gradient(135deg,#7c3aed,#06b6d4);
  border:none;
  box-shadow:0 18px 40px rgba(124,58,237,.35);
}

.hero{
  width:min(1400px,calc(100% - 40px));
  margin:60px auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
}

.hero h1{
  font-size:clamp(58px,7vw,110px);
  line-height:.95;
  margin:16px 0;
  font-weight:950;
  letter-spacing:-4px;
}

.hero p{
  font-size:20px;
  line-height:1.7;
  color:#cbd5e1;
  max-width:850px;
}

.kicker{
  display:inline-flex;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(124,58,237,.18);
  border:1px solid rgba(124,58,237,.3);
  color:#c4b5fd;
  font-weight:900;
}

.hero-card{
  background:rgba(15,23,42,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius:34px;
  padding:28px;
  backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(2,6,23,.45);
}

.fake-window{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.fake-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.04);
}

.thumb{
  width:64px;
  height:64px;
  border-radius:18px;
  background:linear-gradient(135deg,#8b5cf6,#06b6d4);
}

.chip{
  color:#94a3b8;
  font-size:14px;
}

.fouru-floating-ai{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9999;
}

.fouru-floating-ai button{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 22px;
  border:none;
  border-radius:24px;
  cursor:pointer;
  color:white;
  font-weight:900;
  background:linear-gradient(135deg,#7c3aed,#06b6d4);
  box-shadow:0 25px 60px rgba(6,182,212,.35);
}

.ai-orb{
  width:48px;
  height:48px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:black;
}

.ai-orb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media(max-width:980px){

  .hero{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:62px;
  }

}

/* ================= MARKETING PAGE FINAL POLISH ================= */

body.fouru-premium{
  overflow-x:hidden;
}

.marketing-nav{
  position:relative;
  z-index:5;
  padding-top:22px;
}

.fouru-logo-frame{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

.fouru-brand-img{
  width:280px !important;
  filter:drop-shadow(0 0 28px rgba(6,182,212,.35));
}

.hero{
  margin-top:55px !important;
  margin-bottom:40px !important;
}

.hero h1{
  max-width:650px;
  text-shadow:0 0 34px rgba(124,58,237,.22);
}

.hero h1 .grad-word,
.grad-word{
  background:linear-gradient(135deg,#8b5cf6,#06b6d4);
  -webkit-background-clip:text;
  color:transparent;
}

.grid{
  width:min(1500px,calc(100% - 70px)) !important;
  margin:20px auto 26px !important;
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:0 !important;
  padding:24px !important;
  border-radius:28px !important;
  background:rgba(15,23,42,.50) !important;
  border:1px solid rgba(148,163,184,.16) !important;
  box-shadow:0 28px 80px rgba(2,6,23,.38) !important;
}

.grid .card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:18px 22px !important;
  min-height:170px;
  border-right:1px solid rgba(148,163,184,.18) !important;
}

.grid .card:last-child{
  border-right:0 !important;
}

.grid .card h3{
  font-size:18px !important;
  margin:0 0 12px !important;
  color:#fff !important;
}

.grid .card p{
  font-size:15px !important;
  color:#b7c4dd !important;
  line-height:1.55 !important;
  margin:0 !important;
}

.grid .card h3::before{
  display:inline-flex;
  margin-right:10px;
  font-size:24px;
  vertical-align:middle;
}

.grid .card:nth-child(1) h3::before{content:"📄";}
.grid .card:nth-child(2) h3::before{content:"✨";}
.grid .card:nth-child(3) h3::before{content:"🛒";}
.grid .card:nth-child(4) h3::before{content:"✈️";}
.grid .card:nth-child(5) h3::before{content:"📊";}
.grid .card:nth-child(6) h3::before{content:"🤖";}

.demo-box{
  width:min(1500px,calc(100% - 70px)) !important;
  margin:0 auto 34px !important;
  padding:26px 34px !important;
  border-radius:26px !important;
  background:
    radial-gradient(circle at 4% 50%,rgba(124,58,237,.36),transparent 16%),
    linear-gradient(135deg,rgba(30,41,59,.75),rgba(8,47,73,.54)) !important;
  border:1px solid rgba(6,182,212,.65) !important;
  box-shadow:
    0 28px 80px rgba(2,6,23,.35),
    0 0 36px rgba(6,182,212,.13) !important;
}

.demo-box::before{
  content:"🚀";
  width:74px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:36px;
  background:linear-gradient(135deg,#7c3aed,#06b6d4);
  box-shadow:0 18px 45px rgba(124,58,237,.38);
  flex:0 0 74px;
}

.demo-box h2{
  font-size:30px !important;
  margin:0 0 6px !important;
  color:#fff !important;
}

.demo-box p{
  margin:0 !important;
  color:#cbd5e1 !important;
}

.demo-box .btn{
  min-width:170px;
  font-size:17px;
}

.demo-box .btn::after{
  content:" →";
  margin-left:8px;
}

body.fouru-premium::after{
  content:"© 2025 FourU.online — All rights reserved.   |   Privacy   |   Terms   |   Contact";
  display:block;
  width:100%;
  text-align:center;
  color:#94a3b8;
  font-weight:700;
  padding:0 20px 35px;
  box-sizing:border-box;
}

@media(max-width:1200px){
  .grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .grid .card:nth-child(3){
    border-right:0 !important;
  }
}

@media(max-width:760px){
  .grid{
    grid-template-columns:1fr !important;
    width:calc(100% - 30px) !important;
  }

  .grid .card{
    border-right:0 !important;
    border-bottom:1px solid rgba(148,163,184,.16) !important;
  }

  .grid .card:last-child{
    border-bottom:0 !important;
  }

  .demo-box{
    width:calc(100% - 30px) !important;
    text-align:left;
  }

  .fouru-brand-img{
    width:220px !important;
  }
}


/* ================= MARKETING SCALE + LAYOUT FIX ================= */

body.fouru-premium{
  zoom:1 !important;
}

.marketing-nav{
  width:min(1460px,calc(100% - 72px)) !important;
  margin:28px auto 0 !important;
  padding:18px 26px !important;
  border-radius:28px !important;
  background:rgba(15,23,42,.58) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter:blur(22px) !important;
}

.fouru-brand-img{
  width:300px !important;
}

.hero{
  width:min(1460px,calc(100% - 72px)) !important;
  margin:78px auto 48px !important;
  grid-template-columns:1fr .95fr !important;
  gap:70px !important;
}

.hero h1{
  font-size:clamp(68px,6.6vw,118px) !important;
  line-height:.88 !important;
  letter-spacing:-5px !important;
  max-width:760px !important;
}

.hero p{
  font-size:21px !important;
  line-height:1.65 !important;
  max-width:760px !important;
}

.hero-card{
  min-height:430px !important;
  padding:34px !important;
  display:flex !important;
  align-items:center !important;
}

.fake-window{
  width:100% !important;
}

.fake-row{
  padding:18px 22px !important;
  min-height:82px !important;
}

.grid{
  width:min(1460px,calc(100% - 72px)) !important;
  margin:36px auto 26px !important;
  padding:28px !important;
}

.grid .card{
  min-height:185px !important;
}

.demo-box{
  width:min(1460px,calc(100% - 72px)) !important;
  min-height:132px !important;
  margin:0 auto 44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}

.demo-box > div{
  flex:1 !important;
}

.demo-box .btn{
  margin-left:auto !important;
}

.fouru-floating-ai{
  right:26px !important;
  bottom:26px !important;
}

.fouru-floating-ai button{
  border-radius:24px !important;
  padding:14px 22px 14px 12px !important;
  font-size:17px !important;
}

.ai-orb{
  width:54px !important;
  height:54px !important;
  flex:0 0 54px !important;
}

@media(max-width:1050px){
  .hero{
    grid-template-columns:1fr !important;
  }

  .hero h1{
    font-size:64px !important;
  }

  .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:700px){
  .marketing-nav,
  .hero,
  .grid,
  .demo-box{
    width:calc(100% - 28px) !important;
  }

  .fouru-brand-img{
    width:230px !important;
  }

  .hero h1{
    font-size:48px !important;
    letter-spacing:-2px !important;
  }

  .grid{
    grid-template-columns:1fr !important;
  }
}

/* ================= STICKY BRAND NAV FIX ================= */

.marketing-nav{
  position:sticky !important;
  top:18px !important;
  z-index:9990 !important;
}

body.fouru-premium .logo,
body.fouru-premium .fouru-logo-frame{
  flex-shrink:0 !important;
}

/* ================= REGISTER / LOGIN PREMIUM FIX ================= */

body.auth-premium{
  margin:0;
  min-height:100vh;
  font-family:Inter,Arial,sans-serif;
  color:#fff;
  background:
    radial-gradient(circle at 20% 10%,rgba(124,58,237,.25),transparent 28%),
    radial-gradient(circle at 85% 20%,rgba(6,182,212,.20),transparent 28%),
    linear-gradient(180deg,#030712,#071018);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 18px;
}

.auth-card{
  width:min(980px,100%);
  min-height:620px;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:34px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 35px 110px rgba(2,6,23,.55);
  backdrop-filter:blur(22px);
}

.auth-brand{
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 25% 20%,rgba(6,182,212,.22),transparent 30%),
    radial-gradient(circle at 70% 80%,rgba(124,58,237,.24),transparent 32%);
}

.auth-brand img{
  width:100%;
  max-width:420px;
  filter:drop-shadow(0 0 34px rgba(6,182,212,.28));
}

.auth-brand h2{
  font-size:42px;
  line-height:1;
  margin:34px 0 12px;
  letter-spacing:-2px;
}

.auth-brand p{
  color:#cbd5e1;
  font-weight:750;
  line-height:1.7;
}

.auth-form{
  padding:52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.auth-form h1{
  font-size:42px;
  margin:0 0 10px;
  letter-spacing:-2px;
}

.auth-form p{
  color:#94a3b8;
  font-weight:750;
  margin-bottom:24px;
}

.auth-form input{
  width:100%;
  margin-bottom:14px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(2,6,23,.45);
  color:white;
  outline:none;
  font-weight:800;
}

.auth-form button,
.auth-form .btn{
  width:100%;
  border:0;
  border-radius:18px;
  padding:16px;
  color:white;
  font-weight:950;
  cursor:pointer;
  background:linear-gradient(135deg,#7c3aed,#06b6d4);
  box-shadow:0 18px 50px rgba(6,182,212,.22);
}

.auth-link{
  display:block;
  text-align:center;
  margin-top:18px;
  color:#67e8f9;
  font-weight:900;
  text-decoration:none;
}

@media(max-width:850px){
  .auth-card{
    grid-template-columns:1fr;
  }

  .auth-brand{
    padding:30px;
    text-align:center;
    align-items:center;
  }

  .auth-brand img{
    max-width:300px;
  }

  .auth-form{
    padding:34px;
  }
}

/* ================= ALIVE LOGO ANIMATION ================= */

.auth-brand img{
  animation: fouruLogoAlive 4.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 18px rgba(6,182,212,.45))
    drop-shadow(0 0 32px rgba(124,58,237,.28));
}

@keyframes fouruLogoAlive{
  0%,100%{
    transform:translateY(0) scale(1);
    filter:
      drop-shadow(0 0 18px rgba(6,182,212,.45))
      drop-shadow(0 0 32px rgba(124,58,237,.28));
  }
  50%{
    transform:translateY(-10px) scale(1.035);
    filter:
      drop-shadow(0 0 28px rgba(6,182,212,.75))
      drop-shadow(0 0 50px rgba(124,58,237,.45));
  }
}

.auth-brand::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(6,182,212,.18),transparent 65%);
  left:70px;
  top:120px;
  animation: fouruPulseGlow 3.8s ease-in-out infinite;
  pointer-events:none;
}

.auth-brand{
  position:relative;
  overflow:hidden;
}

@keyframes fouruPulseGlow{
  0%,100%{opacity:.35;transform:scale(.92)}
  50%{opacity:.8;transform:scale(1.15)}
}

/* ================= AUTH RESET MODAL ================= */

.auth-reset-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(18px);
  padding:20px;
}

.auth-reset-modal.active{
  display:flex;
}

.auth-reset-card{
  width:min(460px,100%);
  position:relative;
  padding:34px;
  border-radius:30px;
  background:
    radial-gradient(circle at 0% 0%,rgba(124,58,237,.24),transparent 36%),
    rgba(15,23,42,.94);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 35px 120px rgba(2,6,23,.65);
  color:white;
}

.auth-reset-card h2{
  margin:0 0 8px;
  font-size:32px;
  letter-spacing:-1px;
}

.auth-reset-card p{
  color:#cbd5e1;
  line-height:1.6;
}

.auth-reset-close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:white;
  font-size:24px;
  cursor:pointer;
}

.auth-reset-card input{
  width:100%;
  margin:14px 0;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(2,6,23,.5);
  color:white;
  outline:none;
  font-weight:800;
}

.auth-reset-card button[type="submit"]{
  width:100%;
  border:0;
  border-radius:18px;
  padding:16px;
  color:white;
  font-weight:950;
  cursor:pointer;
  background:linear-gradient(135deg,#7c3aed,#06b6d4);
}


/* ================= ALIVE FREE TRIAL CTA ================= */

.demo-box{
  position:relative !important;
  overflow:hidden !important;
  animation: fouruDemoBreath 4.8s ease-in-out infinite !important;
}

.demo-box::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,255,255,.10) 48%,
    rgba(6,182,212,.16) 52%,
    transparent 65%
  );
  transform:translateX(-65%) rotate(8deg);
  animation: fouruDemoShine 5.5s ease-in-out infinite;
  pointer-events:none;
}

.demo-box::before{
  animation: fouruRocketAlive 3.8s ease-in-out infinite !important;
  z-index:2;
}

.demo-box h2,
.demo-box p,
.demo-box .btn{
  position:relative;
  z-index:3;
}

.demo-box .btn{
  animation: fouruButtonPulse 2.8s ease-in-out infinite !important;
}

@keyframes fouruDemoBreath{
  0%,100%{
    box-shadow:
      0 28px 80px rgba(2,6,23,.35),
      0 0 32px rgba(6,182,212,.14);
  }
  50%{
    box-shadow:
      0 36px 110px rgba(2,6,23,.45),
      0 0 58px rgba(6,182,212,.34),
      0 0 42px rgba(124,58,237,.22);
  }
}

@keyframes fouruDemoShine{
  0%{transform:translateX(-70%) rotate(8deg);opacity:0}
  20%{opacity:1}
  45%{transform:translateX(70%) rotate(8deg);opacity:.8}
  60%,100%{opacity:0}
}

@keyframes fouruRocketAlive{
  0%,100%{
    transform:translateY(0) rotate(-5deg) scale(1);
    filter:drop-shadow(0 0 14px rgba(6,182,212,.45));
  }
  50%{
    transform:translateY(-9px) rotate(7deg) scale(1.08);
    filter:drop-shadow(0 0 28px rgba(6,182,212,.85));
  }
}

@keyframes fouruButtonPulse{
  0%,100%{
    transform:translateY(0) scale(1);
    box-shadow:0 18px 42px rgba(6,182,212,.25);
  }
  50%{
    transform:translateY(-3px) scale(1.035);
    box-shadow:0 24px 60px rgba(124,58,237,.38);
  }
}

/* ================= TRIAL TOP LOGO ================= */

.trial-topbar{
  margin-bottom:50px;
}

.trial-main-logo{
  width:280px;
  max-width:90%;
  filter:
    drop-shadow(0 0 20px rgba(6,182,212,.35))
    drop-shadow(0 0 40px rgba(124,58,237,.25));
  animation:fouruLogoFloat 5s ease-in-out infinite;
}

@keyframes fouruLogoFloat{
  0%,100%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-8px) scale(1.02);
  }
}

/* ================= LIVE BADGE ================= */

.alive-badge{
  position:relative;
  overflow:hidden;
  display:inline-flex !important;
  align-items:center;
  gap:14px;
  padding:14px 20px !important;
  border-radius:999px !important;
  background:
    linear-gradient(
      135deg,
      rgba(124,58,237,.22),
      rgba(6,182,212,.14)
    ) !important;

  border:1px solid rgba(255,255,255,.12) !important;

  box-shadow:
    0 0 24px rgba(124,58,237,.18),
    0 0 44px rgba(6,182,212,.12);

  animation:badgeBreath 3s ease-in-out infinite;
}

.alive-badge::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(
      120deg,
      transparent 35%,
      rgba(255,255,255,.18) 50%,
      transparent 65%
    );

  transform:translateX(-60%) rotate(8deg);

  animation:badgeShine 5s linear infinite;
}

.badge-rocket{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      #7c3aed,
      #06b6d4
    );

  box-shadow:
    0 0 22px rgba(6,182,212,.45);

  font-size:22px;

  animation:rocketMove 2.6s ease-in-out infinite;
}

.badge-live{
  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 14px;
  border-radius:999px;

  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.28);

  color:#6ee7b7;
  font-weight:900;
}

.badge-live-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#10b981;

  box-shadow:
    0 0 16px #10b981;

  animation:livePulse 1.4s infinite;
}

@keyframes badgeBreath{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.02);
  }
}

@keyframes badgeShine{
  0%{
    transform:translateX(-70%) rotate(8deg);
  }
  100%{
    transform:translateX(80%) rotate(8deg);
  }
}

@keyframes rocketMove{
  0%,100%{
    transform:translateY(0) rotate(-6deg);
  }
  50%{
    transform:translateY(-7px) rotate(7deg);
  }
}

@keyframes livePulse{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.5);
  }
}


/* ================= TRIAL PAGE FINAL LAYOUT FIX ================= */

body.trial-page{
  overflow-x:hidden;
  min-height:100vh;
}

.trial-wrap{
  width:min(1500px,calc(100% - 80px)) !important;
  padding:42px 0 70px !important;
  margin:0 auto !important;
}

.trial-topbar{
  margin:0 0 52px !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.trial-main-logo{
  width:300px !important;
  max-width:100%;
}

.trial-hero{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1.05fr .95fr !important;
  gap:88px !important;
  align-items:center !important;
  margin:0 auto !important;
}

.trial-badge{
  margin-bottom:34px !important;
}

.trial-title{
  font-size:clamp(64px,5.4vw,104px) !important;
  line-height:.96 !important;
  letter-spacing:-4px !important;
  max-width:780px !important;
  margin-bottom:30px !important;
}

.trial-title::first-line{
  color:#fff;
}

.trial-text{
  max-width:720px !important;
  font-size:21px !important;
  line-height:1.7 !important;
  margin-bottom:28px !important;
}

.live-chip{
  margin-top:18px !important;
  margin-bottom:36px !important;
}

.trial-card{
  width:100% !important;
  max-width:620px !important;
  margin-left:auto !important;
  padding:42px !important;
  border-radius:34px !important;
  border:1px solid rgba(6,182,212,.34) !important;
  box-shadow:
    0 34px 100px rgba(2,6,23,.52),
    0 0 42px rgba(124,58,237,.18) !important;
}

.trial-card h2{
  font-size:44px !important;
  letter-spacing:-2px !important;
  margin-bottom:16px !important;
}

.trial-card p{
  font-size:18px !important;
}

.trial-form{
  gap:18px !important;
}

.trial-form input,
.trial-form textarea{
  font-size:16px !important;
  padding:20px 22px !important;
  border-radius:18px !important;
}

.trial-form textarea{
  min-height:165px !important;
}

.upload-box{
  padding:30px !important;
  border-radius:24px !important;
}

.trial-form button{
  padding:21px !important;
  font-size:21px !important;
  border-radius:20px !important;
}

.trial-note{
  font-size:15px !important;
  margin-top:20px !important;
}

/* feature strip under left side */
.trial-hero > div:first-child::after{
  content:"⚡ AI Powered      🚀 5-Minute Live      🛡 No Signup      ✨ Premium Quality";
  display:flex;
  white-space:pre;
  margin-top:38px;
  padding:24px 30px;
  border-radius:26px;
  background:rgba(15,23,42,.58);
  border:1px solid rgba(148,163,184,.14);
  color:#e2e8f0;
  font-weight:900;
  box-shadow:0 22px 70px rgba(2,6,23,.34);
}

/* trusted chip top right */
.trial-topbar::after{
  content:"🛡 Trusted by businesses worldwide";
  padding:13px 18px;
  border-radius:999px;
  background:rgba(15,23,42,.54);
  border:1px solid rgba(148,163,184,.14);
  color:#cbd5e1;
  font-weight:850;
}

/* make 5 minutes gradient */
.trial-title{
  background:linear-gradient(180deg,#fff 0%,#fff 54%,#38bdf8 74%,#a855f7 100%);
  -webkit-background-clip:text;
  color:transparent;
}

/* background digital floor feeling */
body.trial-page::after{
  content:"";
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:260px;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(124,58,237,.35),transparent 35%),
    linear-gradient(245deg,rgba(6,182,212,.28),transparent 36%),
    radial-gradient(circle at 20% 100%,rgba(236,72,153,.34),transparent 28%);
  opacity:.65;
  filter:blur(0px);
  z-index:-1;
}

@media(max-width:1100px){
  .trial-hero{
    grid-template-columns:1fr !important;
    gap:48px !important;
  }

  .trial-card{
    max-width:100% !important;
  }

  .trial-title{
    font-size:62px !important;
  }
}

@media(max-width:700px){
  .trial-wrap{
    width:calc(100% - 28px) !important;
    padding-top:26px !important;
  }

  .trial-topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }

  .trial-main-logo{
    width:230px !important;
  }

  .trial-topbar::after{
    font-size:13px;
  }

  .trial-title{
    font-size:46px !important;
    letter-spacing:-2px !important;
  }

  .trial-card{
    padding:26px !important;
  }

  .trial-hero > div:first-child::after{
    white-space:normal;
    line-height:1.8;
  }
}


/* =========================
   GLOBAL WHATSAPP FLOAT
========================= */
.wa-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:999;
  width:72px;
  height:72px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  box-shadow:
    0 18px 60px rgba(37,211,102,.42),
    0 0 0 8px rgba(37,211,102,.14);
  border:1px solid rgba(37,211,102,.45);
  transition:transform .25s ease, box-shadow .25s ease;
  animation:waPulse 2.4s ease-in-out infinite;
}
.wa-float:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:
    0 22px 70px rgba(37,211,102,.48),
    0 0 0 10px rgba(37,211,102,.16);
}
.wa-float svg{
  width:50px;
  height:50px;
  display:block;
}
@keyframes waPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@media(max-width:768px){
  .wa-float{
    width:66px;
    height:66px;
    right:16px;
    bottom:16px;
  }
  .wa-float svg{
    width:46px;
    height:46px;
  }
}