/* ══════════════════════════════
   DEMO PREVIEW SECTION
══════════════════════════════ */
.demo-section{
  padding:120px 0 140px;
  background:linear-gradient(180deg, var(--cream) 0%, rgba(255,243,211,0.6) 100%);
  overflow:hidden;
}
.demo-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 40px;
  display:grid;
  grid-template-columns:1fr 2.6fr;
  gap:72px;
  align-items:center;
}

/* ── Left text ── */
.demo-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-brand);
  font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--rust);
  background:rgba(171,75,5,0.07);
  border:1.5px solid rgba(171,75,5,0.18);
  border-radius:30px;padding:7px 18px;
  margin-bottom:28px;
}
.demo-eyebrow-dot{
  width:7px;height:7px;border-radius:50%;background:var(--rust);
  animation:blink 2s ease-in-out infinite;
}
.demo-h2{
  font-family:var(--font-h);
  font-size:clamp(34px,3.6vw,52px);
  line-height:1.08;color:var(--ink);
  letter-spacing:.2px;margin-bottom:20px;
}
.demo-accent{color:var(--rust);}
.demo-desc{
  font-size:15.5px;color:var(--ink-2);
  line-height:1.75;margin-bottom:32px;
  max-width:340px;
}
.demo-features-list{
  list-style:none;margin-bottom:40px;
  display:flex;flex-direction:column;gap:12px;
}
.demo-features-list li{
  display:flex;align-items:center;gap:11px;
  font-size:14.5px;font-weight:500;color:var(--ink);
}
.demo-check{
  width:22px;height:22px;border-radius:50%;
  background:rgba(171,75,5,0.1);border:1.5px solid rgba(171,75,5,0.25);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--rust);flex-shrink:0;
  font-weight:700;line-height:1;
}
.demo-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 28px;
  font-family:var(--font-brand);font-size:14px;font-weight:700;letter-spacing:.5px;
  color:var(--cream);background:var(--rust);
  border-radius:10px;text-decoration:none;
  transition:background .2s, transform .2s, box-shadow .2s;
  box-shadow:0 4px 18px rgba(171,75,5,0.28);
}
.demo-cta:hover{background:var(--rust-deep);transform:translateY(-2px);box-shadow:0 8px 28px rgba(171,75,5,0.35);}
.demo-cta-arrow{font-size:16px;transition:transform .2s;}
.demo-cta:hover .demo-cta-arrow{transform:translateX(4px);}

/* ── Right visual ── */
.demo-visual{position:relative;}

.demo-live-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-brand);font-size:11.5px;font-weight:600;
  color:var(--ink-2);letter-spacing:.3px;
  background:rgba(255,243,211,0.9);
  border:1px solid rgba(171,75,5,0.18);
  border-radius:30px;padding:7px 16px;
  margin-bottom:16px;
  backdrop-filter:blur(8px);
}
.demo-live-dot{
  width:7px;height:7px;border-radius:50%;background:#16a34a;
  flex-shrink:0;animation:blink 2s ease-in-out infinite;
}
.demo-online{color:#16a34a;font-weight:700;}

/* Mockup frame */
.demo-mockup{
  border-radius:18px;
  border:1px solid rgba(171,75,5,0.18);
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.6) inset,
    0 2px 4px rgba(171,75,5,0.06),
    0 8px 24px rgba(171,75,5,0.1),
    0 32px 80px rgba(171,75,5,0.14),
    0 0 80px 8px rgba(255,190,60,0.08);
  transition:transform .4s cubic-bezier(.2,0,.1,1), box-shadow .4s;
  background:var(--cream);
}
.demo-mockup:hover{
  transform:translateY(-6px) scale(1.008);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.7) inset,
    0 4px 8px rgba(171,75,5,0.08),
    0 16px 48px rgba(171,75,5,0.16),
    0 48px 120px rgba(171,75,5,0.18),
    0 0 120px 20px rgba(255,190,60,0.12);
}

/* Mockup top bar */
.mockup-topbar{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;
  background:rgba(26,14,4,0.04);
  border-bottom:1px solid rgba(171,75,5,0.1);
}
.mockup-dots{display:flex;gap:6px;}
.mockup-dots span{
  display:block;width:11px;height:11px;border-radius:50%;
  background:rgba(171,75,5,0.18);
}
.mockup-dots span:nth-child(1){background:#ff5f57;}
.mockup-dots span:nth-child(2){background:#ffbd2e;}
.mockup-dots span:nth-child(3){background:#28c840;}
.mockup-title{
  font-family:var(--font-brand);font-size:12.5px;font-weight:700;
  letter-spacing:.5px;color:var(--ink);margin-left:8px;
}
.mockup-status{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--ink-2);
}
.mockup-status-dot{
  width:6px;height:6px;border-radius:50%;background:#16a34a;
  animation:blink 2s ease-in-out infinite;
}

/* Mockup body */
.mockup-body{padding:20px;display:flex;flex-direction:column;gap:16px;}

/* Stats row */
.mockup-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.mockup-stat-card{
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(171,75,5,0.1);
  border-radius:12px;padding:14px 16px;
}
.msc-label{font-size:10.5px;color:var(--ink-2);font-weight:500;margin-bottom:6px;letter-spacing:.2px;}
.msc-value{font-family:var(--font-h);font-size:22px;color:var(--ink);line-height:1;margin-bottom:6px;}
.warn-val{color:var(--warn);}
.msc-trend{font-size:10px;font-weight:600;border-radius:20px;display:inline-block;padding:2px 8px;}
.msc-trend.up{background:rgba(22,163,74,0.1);color:#15803d;}
.msc-trend.ok{background:rgba(22,163,74,0.1);color:#15803d;}
.msc-trend.warn{background:rgba(192,57,43,0.1);color:var(--warn);}

/* Main: chart + sidebar */
.mockup-main{display:grid;grid-template-columns:1fr 200px;gap:14px;}
.mockup-chart-panel{
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(171,75,5,0.1);
  border-radius:12px;padding:16px 18px;
}
.mcp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.mcp-title{font-size:12px;font-weight:600;color:var(--ink);}
.mcp-tabs{display:flex;gap:4px;}
.mcp-tab{
  font-size:10px;font-family:var(--font-brand);font-weight:700;
  padding:3px 9px;border-radius:20px;cursor:pointer;
  color:var(--ink-2);background:transparent;
  border:1px solid transparent;
}
.mcp-tab.active{
  background:rgba(171,75,5,0.1);color:var(--rust);
  border-color:rgba(171,75,5,0.2);
}
.mockup-chart-svg{width:100%;height:100px;display:block;}
.mcp-labels{
  display:flex;justify-content:space-between;
  font-size:9.5px;color:var(--ink-3);padding-top:6px;
}

/* Sidebar */
.mockup-sidebar{
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(171,75,5,0.1);
  border-radius:12px;padding:14px 14px;
}
.msb-title{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:12px;letter-spacing:.2px;}
.msb-list{display:flex;flex-direction:column;gap:8px;}
.msb-item{display:flex;align-items:center;gap:8px;font-size:11.5px;}
.msb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.msb-dot.ok{background:#16a34a;}
.msb-dot.warn{background:#d97706;}
.msb-dot.crit{background:var(--warn);}
.msb-name{flex:1;color:var(--ink);font-weight:500;}
.msb-score{font-family:var(--font-brand);font-size:10.5px;font-weight:700;color:var(--ink-2);}
.msb-item.warn .msb-score{color:#d97706;}
.msb-item.crit .msb-score{color:var(--warn);}

/* AI bar */
.mockup-ai-bar{
  display:flex;align-items:center;gap:10px;
  background:rgba(171,75,5,0.06);
  border:1px solid rgba(171,75,5,0.15);
  border-radius:10px;padding:11px 16px;
  font-size:12px;color:var(--ink-2);
}
.mai-icon{color:var(--rust);font-size:14px;flex-shrink:0;}
.mai-text{flex:1;line-height:1.5;}
.mai-text strong{color:var(--ink);}
.mai-time{font-size:10.5px;color:var(--ink-3);flex-shrink:0;white-space:nowrap;}

/* Responsive */
@media(max-width:960px){
  .demo-inner{
    grid-template-columns:1fr;
    gap:48px;
  }
  .demo-desc{max-width:100%;}
  .mockup-stats{grid-template-columns:repeat(2,1fr);}
  .mockup-main{grid-template-columns:1fr;}
  .mockup-sidebar{display:none;}
}
/* ══════════════════════════════
   CTA SECTION
══════════════════════════════ */
.cta-section{
  position:relative;
  padding:120px 40px 130px;
  text-align:center;
  overflow:hidden;
  background-image: url('hero-bee.jpg');
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;
}

/* Dark overlay so text is readable over dark photo */
.cta-section::after{
  content:'';
  position:absolute;inset:0;
  background:rgba(10,5,2,0.58);
  z-index:0;
}

/* Transition from section above: honeycomb grid fading into photo */
.cta-transition{
  position:absolute;
  top:0;left:0;right:0;
  height:60px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom, var(--cream) 0%, transparent 100%);
}

/* Content */
.cta-inner{
  position:relative;z-index:2;
  max-width:680px;margin:0 auto;
}
.cta-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-brand);
  font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,220,160,0.9);
  background:rgba(255,255,255,0.08);
  border:1.5px solid rgba(255,200,100,0.25);
  border-radius:30px;padding:7px 18px;
  margin-bottom:28px;
  backdrop-filter:blur(8px);
}
.cta-eyebrow-dot{
  width:7px;height:7px;border-radius:50%;background:#ffbd60;
  animation:blink 2s ease-in-out infinite;
}
.cta-h2{
  font-family:var(--font-h);
  font-size:clamp(40px,5.5vw,68px);
  line-height:1.06;
  color:#fff;
  letter-spacing:.3px;
  margin-bottom:20px;
  position:relative;
  text-shadow:
    0 0 40px rgba(255,189,96,0.65),
    0 0 80px rgba(255,189,96,0.35),
    0 0 120px rgba(255,150,50,0.2),
    0 2px 20px rgba(0,0,0,0.4);
}
.cta-h2::before{
  content:'';
  position:absolute;
  inset:-30px -60px;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,189,96,0.22) 0%, rgba(255,150,50,0.1) 40%, transparent 75%);
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  filter:blur(8px);
}
.cta-accent{color:#ffbd60;}
.cta-desc{
  font-size:16px;
  color:rgba(255,235,200,0.82);
  line-height:1.75;
  max-width:500px;margin:0 auto 44px;
  text-shadow:0 1px 8px rgba(0,0,0,0.35);
}
.cta-actions{
  display:flex;align-items:center;justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.cta-btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;
  font-family:var(--font-brand);font-size:14.5px;font-weight:700;letter-spacing:.4px;
  color:#1a0e04;background:#ffbd60;
  border-radius:11px;text-decoration:none;
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.cta-btn-primary:hover{
  background:#ffd080;
  transform:translateY(-2px);
  box-shadow:0 8px 36px rgba(0,0,0,0.38);
}
.cta-btn-arrow{font-size:17px;transition:transform .2s;}
.cta-btn-primary:hover .cta-btn-arrow{transform:translateX(5px);}
.cta-btn-ghost{
  display:inline-flex;align-items:center;
  padding:14px 28px;
  font-family:var(--font-brand);font-size:14px;font-weight:600;letter-spacing:.3px;
  color:#fff;
  background:rgba(255,255,255,0.1);
  border:1.5px solid rgba(255,255,255,0.3);
  border-radius:11px;text-decoration:none;
  backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s,transform .2s;
}
.cta-btn-ghost:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.5);
  transform:translateY(-1px);
}

@media(max-width:600px){
  .cta-section{padding:100px 24px 110px;}
  .cta-actions{flex-direction:column;align-items:stretch;}
  .cta-btn-primary,.cta-btn-ghost{justify-content:center;}
}
/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.site-footer{
  background:#1a0e05;
  color:rgba(255,235,200,0.7);
  font-family:var(--font-ar);
  padding:72px 40px 0;
}
.footer-inner{
  max-width:1160px;
  margin:0 auto;
}
.footer-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,235,200,0.08);
}

/* Brand col */
.footer-brand{}
.footer-logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;margin-bottom:14px;
}
.footer-logo-text{
  font-family:var(--font-brand);
  font-weight:700;font-size:16px;
  letter-spacing:1px;
  color:#fff;
}
.footer-logo-text span{color:#ffbd60;}
.footer-tagline{
  font-size:13.5px;
  line-height:1.65;
  color:rgba(255,235,200,0.55);
  max-width:220px;
  margin-bottom:28px;
}
.footer-socials{
  display:flex;gap:10px;
}
.footer-social{
  width:36px;height:36px;
  border-radius:8px;
  border:1px solid rgba(255,235,200,0.12);
  background:rgba(255,235,200,0.05);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:border-color .15s,background .15s;
}
.footer-social:hover{
  border-color:rgba(255,189,96,0.4);
  background:rgba(255,189,96,0.08);
}
.footer-social svg{
  width:16px;height:16px;
  stroke:rgba(255,235,200,0.6);
  fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .15s;
}
.footer-social:hover svg{stroke:#ffbd60;}

/* Link cols */
.footer-col-title{
  font-family:var(--font-brand);
  font-size:11px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;
  color:rgba(255,235,200,0.4);
  margin-bottom:18px;
}
.footer-links{
  list-style:none;
  display:flex;flex-direction:column;gap:11px;
}
.footer-links a{
  font-size:14px;
  color:rgba(255,235,200,0.62);
  text-decoration:none;
  transition:color .15s;
}
.footer-links a:hover{color:#fff;}

/* Bottom bar */
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 0 24px;
  gap:16px;
  flex-wrap:wrap;
}
.footer-copy{
  font-size:12.5px;
  color:rgba(255,235,200,0.35);
}
.footer-copy span{color:rgba(255,189,96,0.6);}
.footer-credit{
  font-size:12px;
  color:rgba(255,235,200,0.25);
  font-style:italic;
}

@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;gap:36px;}
  .footer-brand{grid-column:1/-1;}
}
@media(max-width:560px){
  .site-footer{padding:56px 24px 0;}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px;}
  .footer-brand{grid-column:1/-1;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;}
}