/* =========================================================
   SERVICES — PREMIUM ASYMMETRIC BENTO SHOWCASE
   Scoped entirely to .services-elite — does not touch the Hero.
   ========================================================= */

.services-elite{
  position:relative;
  overflow:hidden;
  padding:190px 6vw 200px;
  background:
    radial-gradient(circle at 50% 0%, rgba(98,246,173,.05), transparent 55%),
    #050506;
}

.se-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.se-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(120px);
  opacity:.5;
}

.se-glow-a{
  top:-10%;
  left:-8%;
  width:46vw;
  height:46vw;
  background:radial-gradient(circle, rgba(98,246,173,.22), transparent 70%);
  animation:seGlowDrift 22s ease-in-out infinite;
}

.se-glow-b{
  bottom:-16%;
  right:-10%;
  width:38vw;
  height:38vw;
  background:radial-gradient(circle, rgba(125,159,255,.14), transparent 70%);
  animation:seGlowDrift 26s ease-in-out infinite reverse;
}

@keyframes seGlowDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(3%,4%) scale(1.08); }
}

.se-noise{
  position:absolute;
  inset:0;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */

.se-head{
  position:relative;
  z-index:2;
  margin-bottom:110px;
}

.se-head-row{
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:64px;
  align-items:end;
  margin-top:22px;
}

.se-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(32px,4.3vw,64px);
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--fg);
}

.se-title em{
  font-style:normal;
  color:var(--accent);
}

.se-subtitle{
  font-family:var(--font-body);
  color:var(--fg-dim);
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.75;
  padding-bottom:4px;
  border-left:1px solid var(--line);
  padding-left:28px;
}

.se-subtitle p{ margin:0 0 6px; }
.se-subtitle p:last-child{ margin-bottom:0; }
.se-subtitle strong{ color:var(--fg); font-weight:600; }

/* ---------- Bento grid ---------- */

.se-bento{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,minmax(240px,auto));
  gap:22px;
}

.se-bento .se-card:nth-child(1){ grid-column:1 / 3; grid-row:1 / 3; }
.se-bento .se-card:nth-child(2){ grid-column:3 / 4; grid-row:1 / 2; }
.se-bento .se-card:nth-child(3){ grid-column:4 / 5; grid-row:1 / 2; }
.se-bento .se-card:nth-child(4){ grid-column:3 / 5; grid-row:2 / 4; }
.se-bento .se-card:nth-child(5){ grid-column:1 / 2; grid-row:3 / 4; }
.se-bento .se-card:nth-child(6){ grid-column:2 / 3; grid-row:3 / 4; }

.se-card{
  --h:152;
  position:relative;
  display:flex;
  flex-direction:column;
  isolation:isolate;
  overflow:hidden;
  padding:38px 34px 34px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 45%, rgba(255,255,255,.02));
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  transition:
    transform .6s cubic-bezier(.16,1,.3,1),
    border-color .5s ease,
    box-shadow .6s ease;
}

.se-card[data-accent="152"]{ --h:152; }
.se-card[data-accent="190"]{ --h:190; }
.se-card[data-accent="262"]{ --h:262; }
.se-card[data-accent="35"]{ --h:35; }
.se-card[data-accent="210"]{ --h:210; }

.se-card::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 88% 12%, hsl(var(--h) 85% 60% / .14), transparent 55%);
  opacity:.7;
  transition:opacity .6s ease;
}

.se-card-glow{
  position:absolute;
  inset:-1px;
  z-index:-2;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(125,255,179,0), rgba(125,255,179,.55), rgba(125,255,179,0));
  opacity:0;
  transition:opacity .6s ease;
}

.se-card:hover{
  transform:translateY(-8px);
  border-color:rgba(125,255,179,.32);
  box-shadow:
    0 30px 70px rgba(0,0,0,.4),
    0 0 60px rgba(98,246,173,.12);
}

.se-card:hover::before{ opacity:1; }
.se-card:hover .se-card-glow{ opacity:1; }

.se-card-num{
  position:absolute;
  top:-6px;
  right:18px;
  z-index:-1;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(90px,9vw,150px);
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.09);
  transition:transform .7s cubic-bezier(.16,1,.3,1), -webkit-text-stroke-color .5s ease;
}

.se-card:hover .se-card-num{
  transform:translateY(-6px);
  -webkit-text-stroke-color:rgba(125,255,179,.22);
}

.se-card-icon{
  width:48px;
  height:48px;
  margin-bottom:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background:radial-gradient(circle at 30% 20%, hsl(var(--h) 85% 60% / .16), rgba(255,255,255,.02));
  color:#62f6ad;
  transition:transform .6s cubic-bezier(.16,1,.3,1), border-color .5s ease;
}

.se-card-icon svg{ width:22px; height:22px; }

.se-card:hover .se-card-icon{
  transform:scale(1.08) rotate(-4deg);
  border-color:rgba(125,255,179,.4);
}

.se-card h3{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(19px,1.7vw,25px);
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--fg);
  margin-bottom:18px;
}

.se-card-list{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.se-card-list li{
  position:relative;
  padding-left:16px;
  font-family:var(--font-body);
  font-size:13.5px;
  line-height:1.5;
  color:var(--fg-dim);
}

.se-card-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:5px;
  height:1px;
  background:rgba(125,255,179,.55);
  transition:width .4s ease;
}

.se-card:hover .se-card-list li::before{ width:9px; }

.se-card-lg .se-card-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:24px;
  row-gap:9px;
}

.se-card-lg h3{
  font-size:clamp(23px,2.3vw,32px);
  margin-bottom:22px;
}

.se-card-lg .se-card-icon{
  width:56px;
  height:56px;
  margin-bottom:32px;
}

.se-card-lg .se-card-icon svg{ width:26px; height:26px; }

/* ---------- Responsive ---------- */

@media (max-width:1240px){
  .se-head-row{ grid-template-columns:1fr; gap:26px; }
  .se-subtitle{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:20px; }
}

@media (max-width:1080px){
  .se-bento{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:none;
  }
  .se-bento .se-card:nth-child(1),
  .se-bento .se-card:nth-child(2),
  .se-bento .se-card:nth-child(3),
  .se-bento .se-card:nth-child(4),
  .se-bento .se-card:nth-child(5),
  .se-bento .se-card:nth-child(6){
    grid-column:auto;
    grid-row:auto;
  }
  .se-card{ min-height:340px; }
  .se-card-lg .se-card-list{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .services-elite{ padding:130px 6vw 140px; }
  .se-head{ margin-bottom:60px; }
  .se-bento{
    grid-template-columns:1fr;
    gap:18px;
  }
  .se-card{ min-height:0; padding:32px 26px 28px; }
  .se-card-num{ font-size:80px; right:12px; }
}

@media (prefers-reduced-motion: reduce){
  .se-glow{ animation:none !important; }
  .se-card, .se-card-icon, .se-card-num, .se-card-list li::before{ transition:none !important; }
}