/* ================================
   Lumeve Preview • Full CSS
   Scope: #lumeve-preview
================================ */

/* Design tokens */
:root{
  --rail-max:1120px;

  /* colors */
  --ink-900:#141313;
  --ink-800:#1f1f1f;
  --ink-700:#383737;
  --teal:#165C7D;
  --section-bg:#E7F0F4;   /* light blue panel */
  --gold-1:#FAD27C;       /* badge gradient start */
  --gold-2:#F2B134;       /* badge gradient end */

  /* effects */
  --shadow-lg:0 10px 24px rgba(0,0,0,.08);
  --easing:cubic-bezier(.2,.7,.2,1);
}

/* Section shell */
#lumeve-preview.lumeve-preview{
  background:var(--section-bg);
  padding:clamp(28px,6vw,72px) 0;
  color:var(--ink-900);
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#lumeve-preview .lp-rail{
  max-width:var(--rail-max);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,28px);
}

/* Intro block at the top */
#lumeve-preview .lp-intro{
  max-width:980px;              /* keep your headline width as is */
  margin-inline:auto;
}
#lumeve-preview .lp-headline{
  font-weight:800;
  font-size:clamp(22px,3.2vw,34px);
  line-height:1.3;
  letter-spacing:.2px;
  margin:0 0 clamp(10px,2vw,14px);
}
/* Paragraph must span same width as headline */
#lumeve-preview .lp-introtext{
  font:400 clamp(14px,1.6vw,16px)/1.7 "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink-700);
  margin:0 0 clamp(18px,3vw,28px);
  max-width:none;               /* removed 70ch limit */
  width:100%;
  text-wrap:pretty;
  hyphens:auto;
}

/* Section title with side lines */
#lumeve-preview .lp-title{
  font-weight:800;
  font-size:clamp(22px,3.2vw,32px);
  line-height:1.2;
  text-align:center;
  margin:0 0 clamp(18px,3vw,26px);
}
#lumeve-preview .lp-title>span{
  position:relative;
  display:inline-block;
  padding:0 18px;
}
#lumeve-preview .lp-title>span::before,
#lumeve-preview .lp-title>span::after{
  content:"";
  position:absolute;
  top:50%;
  width:min(18vw,200px);
  height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--teal) 40%,var(--teal) 60%,transparent 100%);
  opacity:.35;
  transform:translateY(-50%);
}
#lumeve-preview .lp-title>span::before{ right:calc(100% + 8px); }
#lumeve-preview .lp-title>span::after{  left: calc(100% + 8px);  }

/* Grid layout, two rows of three on desktop */
#lumeve-preview .lp-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,36px);
  place-items:center;
}
/* Tablet */
@media (max-width:980px){
  #lumeve-preview .lp-grid{ grid-template-columns:repeat(2,1fr); }
}
/* Mobile */
@media (max-width:560px){
  #lumeve-preview .lp-grid{ grid-template-columns:1fr; }
}

/* Items */
#lumeve-preview .lp-item{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  opacity:0;
  transform:translateY(12px);
  animation:lp-fadeup .5s var(--easing) forwards;
}
#lumeve-preview .lp-item:nth-child(1){ animation-delay:.06s; }
#lumeve-preview .lp-item:nth-child(2){ animation-delay:.12s; }
#lumeve-preview .lp-item:nth-child(3){ animation-delay:.18s; }
#lumeve-preview .lp-item:nth-child(4){ animation-delay:.24s; }
#lumeve-preview .lp-item:nth-child(5){ animation-delay:.30s; }
#lumeve-preview .lp-item:nth-child(6){ animation-delay:.36s; }

/* Golden circle badge that wraps your image icons */
#lumeve-preview .lp-badge{
  --size:112px;
  width:var(--size);
  height:var(--size);
  border-radius:10px;
  background:radial-gradient(120% 120% at 30% 20%, var(--gold-1) 0%, var(--gold-2) 70%);
  box-shadow:var(--shadow-lg);
  display:grid;
  place-items:center;
  animation:lp-float 3.6s ease-in-out infinite;
}
#lumeve-preview .lp-badge img{
  width:58%;
  height:58%;
  object-fit:contain;
  display:block;
  transition:transform .25s var(--easing);
}
#lumeve-preview .lp-item:hover .lp-badge img{
  transform:translateY(-2px) scale(1.03);
}

/* Text below each icon */
#lumeve-preview .lp-text{
  font:400 clamp(14px,1.7vw,16px)/1.6 "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink-700);
  max-width:26ch;
}
#lumeve-preview .lp-text strong{
  color:var(--ink-800);
  font-weight:700;
}

/* Respect user motion settings */
@media (prefers-reduced-motion:reduce){
  #lumeve-preview .lp-item,
  #lumeve-preview .lp-badge{ animation:none; }
  #lumeve-preview .lp-item{ opacity:1; transform:none; }
}

/* Animations */
@keyframes lp-fadeup{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes lp-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-4px); }
}