/* Kenmeet UI Features page styles */
:root {
  --azure: #3B82F6;
  --azure-dim: #2563EB;
  --cyan: #7DD3FC;
  --radius: 16px;
  --ff-display: 'Space Grotesk', sans-serif;
  --ff-body: 'Inter', sans-serif;
  --ff-mono: 'JetBrains Mono', monospace;
}

body.dark-theme, html[data-theme="dark"] {
  --bg-0: #0A1526;
  --bg-1: #0F2444;
  --bg-2: #132C52;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.07);
  --border: rgba(148, 180, 255, 0.14);
  --text-0: #F3F7FF;
  --text-1: #B9C7E6;
  --text-2: #7C8CB0;
  --glow: rgba(59, 130, 246, 0.35);
}

body:not(.dark-theme), html[data-theme="light"] {
  --bg-0: #EEF4FF;
  --bg-1: #DCE9FF;
  --bg-2: #CFE0FF;
  --surface: rgba(255, 255, 255, 0.65);
  --surface-strong: rgba(255, 255, 255, 0.85);
  --border: rgba(37, 99, 235, 0.14);
  --text-0: #0B1830;
  --text-1: #3B4B6B;
  --text-2: #647089;
  --glow: rgba(59, 130, 246, 0.18);
}

/* ---------- EYEBROW ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);
  border:1px solid var(--border);padding:6px 14px;border-radius:100px;margin-bottom:24px;
  background:var(--surface);
}
.eyebrow .pulse{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(125,211,252,.6);}50%{box-shadow:0 0 0 6px rgba(125,211,252,0);}}

/* ---------- SECTION SHARED ---------- */
section{position:relative;padding:100px 0;}
.section-head{max-width:640px;margin-bottom:60px;}
.section-eyebrow{font-family:var(--ff-mono);font-size:.78rem;color:var(--azure);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;display:block;}
h2{font-family:var(--ff-display);font-size:clamp(2rem,3.2vw,2.8rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:16px;color:var(--text-0);}
.section-desc{color:var(--text-1);font-size:1.05rem;line-height:1.6;}

/* ---------- CTA ---------- */
.cta-section{text-align:center;padding:100px 0 160px;}
.cta-section h2{font-size:clamp(2.2rem,4.5vw,3.4rem);max-width:760px;margin:0 auto 18px;color:var(--text-0);}
.cta-section p{color:var(--text-1);font-size:1.1rem;margin-bottom:40px;}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.cta-actions .btn{padding:16px 34px;font-size:1rem;}

/* ---------- FEATURE WATERFALL ROWS ---------- */
.feature-row{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;
  padding:70px 0;border-bottom:1px solid var(--border);
}
.feature-row:first-of-type{padding-top:0;}
.feature-row:last-of-type{border-bottom:none;}
.feature-row:nth-of-type(even) .feature-visual{order:2;}
.feature-row:nth-of-type(even) .feature-copy{order:1;}
 
/* floating + 3D tilt */
.feature-row{perspective:1400px;}
.feature-visual{
  aspect-ratio:4/3;border-radius:22px;background:var(--surface);border:1px solid var(--border);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  box-shadow:0 30px 60px -24px rgba(10,20,40,.45);
  transform-style:preserve-3d;
  animation:floatCard 7s cubic-bezier(.45,.05,.55,.95) infinite;
  transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.feature-visual:hover{
  animation-play-state:paused;
  transform:perspective(1400px) rotateY(-16deg) rotateX(6deg) translateY(-10px) translateZ(20px) !important;
  box-shadow:0 44px 80px -26px var(--glow);
}
@keyframes floatCard{
  0%,100%{transform:perspective(1400px) rotateY(-9deg) rotateX(4deg) translateY(0px) translateZ(0px);}
  50%{transform:perspective(1400px) rotateY(-9deg) rotateX(2deg) translateY(-14px) translateZ(10px);}
}
.feature-row:nth-of-type(even) .feature-visual{animation-name:floatCardAlt;animation-delay:-3.4s;}
@keyframes floatCardAlt{
  0%,100%{transform:perspective(1400px) rotateY(9deg) rotateX(4deg) translateY(0px) translateZ(0px);}
  50%{transform:perspective(1400px) rotateY(9deg) rotateX(2deg) translateY(-14px) translateZ(10px);}
}
.feature-row:nth-of-type(even) .feature-visual:hover{
  transform:perspective(1400px) rotateY(16deg) rotateX(6deg) translateY(-10px) translateZ(20px) !important;
}
.feature-visual::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 60% 50% at 30% 20%, var(--glow), transparent 70%);
  pointer-events:none;
}
.feature-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05);
}
.feature-visual .glyph{
  position:absolute;bottom:16px;right:16px;z-index:2;width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,var(--azure),var(--cyan));
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-size:1.4rem;font-family:var(--ff-display);
  box-shadow:0 14px 26px -10px var(--glow);border:2px solid var(--bg-0);
  transform:translateZ(38px);transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.feature-visual:hover .glyph{transform:translateZ(64px);}
.feature-visual.no-image .glyph{
  position:relative;inset:auto;bottom:auto;right:auto;width:104px;height:104px;border-radius:26px;font-size:2.6rem;
}
.feature-visual .grid-lines{position:absolute;inset:18px;border:1px solid var(--border);border-radius:14px;opacity:.6;z-index:1;pointer-events:none;}
.feature-visual .grid-lines::before,.feature-visual .grid-lines::after{
  content:'';position:absolute;background:var(--border);
}
.feature-visual .grid-lines::before{left:50%;top:0;bottom:0;width:1px;}
.feature-visual .grid-lines::after{top:50%;left:0;right:0;height:1px;}
.feature-tag{
  font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--azure);
  margin-bottom:14px;display:block;
}
.feature-copy h2{margin-bottom:16px;}
.feature-copy > p{color:var(--text-1);font-size:1rem;line-height:1.75;margin-bottom:16px;}
.feature-copy .lede{color:var(--text-0);font-weight:500;font-size:1.05rem;margin-bottom:16px;}
.feature-benefits{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:22px;}
.feature-benefits li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--text-1);}
.feature-benefits li .ico{
  width:18px;height:18px;min-width:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:.65rem;color:#fff;background:linear-gradient(135deg,var(--azure),var(--cyan));margin-top:2px;
}
 
/* ---------- NEW FEATURES HERO ---------- */
.feat-hero{position:relative;padding:170px 0 70px;overflow:hidden;}
.feat-hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 65% 55% at 80% 10%, var(--glow), transparent 65%);
}
.feat-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;perspective:1600px;}
.feat-hero-copy h1{
  font-family:var(--ff-display);font-size:clamp(2.4rem,4.4vw,3.5rem);font-weight:700;
  line-height:1.1;letter-spacing:-0.02em;margin-bottom:22px;
  color: var(--text-0);
}
.feat-hero-copy h1 .grad{
  background:linear-gradient(100deg,var(--azure),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.feat-hero-copy p{color:var(--text-1);font-size:1.05rem;max-width:520px;line-height:1.65;margin-bottom:28px;}
.feat-hero-stats{display:flex;gap:36px;flex-wrap:wrap;}
.feat-hero-stats .stat-block{border-left:2px solid var(--azure);padding-left:16px;}
.feat-hero-stats .stat-block .num{font-family:var(--ff-display);font-size:1.7rem;font-weight:700;background:linear-gradient(100deg,var(--azure),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;}
.feat-hero-stats .stat-block .lbl{font-size:.82rem;color:var(--text-1);margin-top:2px;}
 
/* mock meeting UI */
.meet-mock{
  position:relative;border-radius:24px;background:var(--surface);border:1px solid var(--border);
  padding:20px;box-shadow:0 30px 60px -20px rgba(10,20,40,.5);
  transform-style:preserve-3d;
  animation:meetFloat 8s cubic-bezier(.45,.05,.55,.95) infinite;
  transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.meet-mock:hover{
  animation-play-state:paused;
  transform:perspective(1600px) rotateY(10deg) rotateX(-4deg) translateY(-8px) translateZ(16px) !important;
  box-shadow:0 44px 84px -24px var(--glow);
}
@keyframes meetFloat{
  0%,100%{transform:perspective(1600px) rotateY(6deg) rotateX(-3deg) translateY(0px);}
  50%{transform:perspective(1600px) rotateY(6deg) rotateX(-1deg) translateY(-12px);}
}
.meet-mock-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.meet-mock-bar .mdot{width:9px;height:9px;border-radius:50%;background:var(--border);}
.meet-mock-bar .mtitle{
  margin-left:auto;font-family:var(--ff-mono);font-size:.68rem;color:var(--text-2);
  display:flex;align-items:center;gap:6px;
}
.meet-mock-bar .mtitle .live{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite;}
.meet-mock-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.meet-mock-tiles .tile{
  aspect-ratio:1/1;border-radius:12px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-weight:700;font-size:1rem;color:#fff;
  background:linear-gradient(135deg,var(--bg-2),var(--bg-1));
  position:relative;overflow:hidden;
}
.meet-mock-tiles .tile.on{background:linear-gradient(135deg,var(--azure),var(--cyan));}
.meet-mock-tiles .tile .bars{position:absolute;bottom:6px;left:6px;display:flex;gap:2px;}
.meet-mock-tiles .tile .bars span{width:3px;background:rgba(255,255,255,.85);border-radius:2px;}
.meet-mock-dock{
  display:flex;justify-content:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
}
.meet-mock-dock .dock-btn{
  width:36px;height:36px;border-radius:10px;background:var(--surface-strong);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--text-1);
}
.meet-mock-dock .dock-btn.end{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;}
.meet-float-badge{
  position:absolute;display:flex;align-items:center;gap:10px;
  background:var(--bg-0);border:1px solid var(--border);border-radius:14px;padding:10px 14px;
  box-shadow:0 16px 30px -12px rgba(10,20,40,.4);font-size:.8rem;font-weight:600;
  animation:floatBadge 5s ease-in-out infinite;
  color: var(--text-0);
}
.meet-float-badge .ico2{
  width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--azure),var(--cyan));color:#fff;font-size:.8rem;
}
.meet-float-badge.b1{top:-18px;right:-14px;animation-delay:0s;}
.meet-float-badge.b2{bottom:-16px;left:-18px;animation-delay:-2.4s;}
@keyframes floatBadge{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
 
/* ---------- FEATURE MARQUEE ---------- */
.feat-marquee{
  margin-top:64px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:18px 0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.feat-marquee-track{display:flex;width:max-content;gap:0;animation:marquee 32s linear infinite;}
.feat-marquee-track span{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.03em;color:var(--text-1);
  padding:0 28px;white-space:nowrap;
}
.feat-marquee-track span b{color:var(--text-0);font-weight:600;}
.feat-marquee-track span::after{content:'✦';color:var(--azure);margin-left:28px;font-size:.7rem;}
.feat-marquee:hover .feat-marquee-track{animation-play-state:paused;}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media(prefers-reduced-motion:reduce){
  .feat-marquee-track{animation:none;}
  .meet-mock{animation:none;}
  .meet-float-badge{animation:none;}
  .feature-visual{animation:none;transform:none !important;}
}

@media(max-width:960px){
  .feature-row{grid-template-columns:1fr;gap:32px;}
  .feature-row:nth-of-type(even) .feature-visual{order:1;}
  .feature-row:nth-of-type(even) .feature-copy{order:2;}
  .feature-visual,.feature-row:nth-of-type(even) .feature-visual{
    max-width:460px;margin:0 auto;animation:none;transform:none !important;
  }
  .feat-hero-grid{grid-template-columns:1fr;}
  .meet-mock{max-width:440px;margin:0 auto;animation:none;transform:none !important;}
  .meet-float-badge{display:none;}
}