/* ============================================================
   ADAYA — Landing "Our Services": Bento Grid + Featured Service
   Enterprise SaaS showcase · navy + electric-blue · soft accents.
   Theme-aware (light = soft pastels on white, dark = colored glass).
   ============================================================ */

#services .bento{
  display:grid;grid-template-columns:1.04fr 2fr;gap:clamp(14px,1.5vw,20px);align-items:stretch;margin-top:10px;
  /* soft accent tints (light) */
  --tint-blue:#EAF1FE;   --edge-blue:#D6E4FC;
  --tint-purple:#F1EEFC; --edge-purple:#E4DDF8;
  --tint-green:#EAF6EE;  --edge-green:#D9EEE0;
  /* 3D icon gradients (used by featured-card floating chips) */
  --ico-blue:linear-gradient(150deg,#7cc4ff,#1A84F2 54%,#1345A1);
  --ico-purple:linear-gradient(150deg,#b6a4ff,#7c5cf0 54%,#46329f);
  --ico-green:linear-gradient(150deg,#8fe6b4,#23b06f 54%,#127a49);
  /* clean service-card tokens (no shadow, soft) */
  --card-bg:#F6F8FC; --card-bg-hover:#EEF3FF; --card-line:rgba(10,30,70,.05);
}
[data-theme="dark"] #services .bento{
  --tint-blue:color-mix(in srgb,#1A84F2 15%,var(--bg-subtle));   --edge-blue:color-mix(in srgb,#1A84F2 30%,transparent);
  --tint-purple:color-mix(in srgb,#7c5cf0 16%,var(--bg-subtle)); --edge-purple:color-mix(in srgb,#7c5cf0 32%,transparent);
  --tint-green:color-mix(in srgb,#23b06f 15%,var(--bg-subtle));  --edge-green:color-mix(in srgb,#23b06f 30%,transparent);
  --card-bg:color-mix(in srgb,#fff 4%,var(--bg-subtle));
  --card-bg-hover:color-mix(in srgb,#1A84F2 15%,var(--bg-subtle));
  --card-line:rgba(255,255,255,.08);
}

/* ---------- FEATURED SERVICE (large dark card) ---------- */
.bento-featured{position:relative;overflow:hidden;border-radius:var(--r-2xl);
  padding:clamp(28px,3vw,42px);display:flex;flex-direction:column;
  color:#fff;isolation:isolate;
  background:
    radial-gradient(130% 120% at 82% 8%,rgba(34,205,241,.30),transparent 52%),
    linear-gradient(158deg,#16489f 0%,#0e2f74 48%,#081d49 100%);
  box-shadow:var(--elev-4),inset 0 1px 0 rgba(255,255,255,.12)}
.bento-featured::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:42px 42px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 20%,#000,transparent 75%);
  mask-image:radial-gradient(120% 90% at 70% 20%,#000,transparent 75%)}
.bf-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:var(--r-pill);font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#cfe6ff;
  background:rgba(34,205,241,.14);border:1px solid rgba(34,205,241,.32);margin-bottom:22px}
.bento-featured h3{font-size:clamp(1.9rem,2.7vw,2.6rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.05;margin-bottom:16px;max-width:14ch}
.bento-featured > p{font-size:1rem;line-height:1.6;color:rgba(233,240,251,.82);max-width:42ch;margin-bottom:28px}
.bf-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  padding:13px 24px;border-radius:var(--r-pill);font-weight:700;font-size:.96rem;
  background:#fff;color:#0c2c66;box-shadow:0 14px 30px rgba(4,14,38,.4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),gap .25s var(--ease)}
.bf-cta svg{width:18px;height:18px}
.bf-cta:hover{transform:translateY(-2px);gap:14px;box-shadow:0 20px 40px rgba(4,14,38,.5)}

/* featured illustration: tilted code window + floating blocks */
.bf-art{position:relative;margin-top:auto;height:clamp(190px,20vw,260px);perspective:1100px}
.bf-window{position:absolute;left:4%;bottom:0;width:74%;border-radius:16px;overflow:hidden;
  transform:rotateX(8deg) rotateY(-15deg);transform-origin:bottom left;
  background:linear-gradient(160deg,#0c1f47,#0a1838);
  border:1px solid rgba(120,180,255,.22);
  box-shadow:0 30px 60px -16px rgba(2,8,26,.7),inset 0 1px 0 rgba(255,255,255,.1);
  animation:bf-bob 7s ease-in-out infinite}
.bf-titlebar{display:flex;gap:7px;padding:12px 14px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.bf-titlebar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.bf-titlebar span:nth-child(1){background:#ff6b6b99}
.bf-titlebar span:nth-child(2){background:#ffd16b99}
.bf-titlebar span:nth-child(3){background:#6bff9b99}
.bf-code{padding:16px 16px 20px;display:flex;flex-direction:column;gap:9px}
.bf-code i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.16)}
.bf-code i.b{background:linear-gradient(90deg,rgba(34,205,241,.8),rgba(34,205,241,.2))}
.bf-code i.p{background:linear-gradient(90deg,rgba(150,130,255,.8),rgba(150,130,255,.2))}
.bf-code i.s{background:linear-gradient(90deg,rgba(26,132,242,.8),rgba(26,132,242,.2))}
.bf-chip{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:16px;
  font-family:"IBM Plex Mono",monospace;font-weight:700}
.bf-chip.c1{width:58px;height:58px;right:6%;top:8%;font-size:1.1rem;color:#1D6FE5;
  background:linear-gradient(150deg,#E6F0FF,#CFE3FF);transform:rotate(-6deg);animation:bf-float 6s ease-in-out infinite}
.bf-chip.c2{width:46px;height:46px;right:24%;bottom:6%;
  background:linear-gradient(150deg,#F0ECFF,#E0D6FF);transform:rotate(8deg);animation:bf-float 6.8s ease-in-out infinite .6s}
.bf-chip.c2::after{content:"";width:18px;height:18px;border-radius:5px;background:#6B4FE0}
.bf-chip.c3{width:40px;height:40px;right:1%;bottom:30%;
  background:linear-gradient(150deg,#FFECD9,#FFD7B5);transform:rotate(-3deg);animation:bf-float 5.6s ease-in-out infinite 1.1s}
.bf-chip.c3::after{content:"";width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid #F6852F}
@keyframes bf-bob{0%,100%{transform:rotateX(8deg) rotateY(-15deg) translateY(0)}50%{transform:rotateX(8deg) rotateY(-15deg) translateY(-8px)}}
@keyframes bf-float{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* ---------- RIGHT GRID (5 service cards) ---------- */
.bento-right{display:grid;grid-template-rows:1fr 1fr;gap:clamp(14px,1.5vw,20px)}
.bento-row{display:grid;gap:clamp(14px,1.5vw,20px)}
.bento-row.top{grid-template-columns:1fr 1fr}
.bento-row.bot{grid-template-columns:repeat(3,1fr)}

.bento-card{position:relative;overflow:visible;border-radius:18px;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;gap:8px 14px;
  padding:clamp(20px,1.8vw,26px);background:var(--card-bg);
  border:1px solid var(--card-line);
  transition:background .35s var(--ease),border-color .35s var(--ease)}
.bento-card.t-blue{--accent:#1D6FE5;--ico-a:#E6F0FF;--ico-b:#CFE3FF;--arrow-a:#2563EB;--arrow-b:#1D4EDB}
.bento-card.t-purple{--accent:#6B4FE0;--ico-a:#F0ECFF;--ico-b:#E0D6FF;--arrow-a:#7C5CF0;--arrow-b:#5A3FD0}
.bento-card.t-green{--accent:#1B9C63;--ico-a:#E6F7EE;--ico-b:#CFEFDD;--arrow-a:#23B06F;--arrow-b:#138A50}
.bento-card:hover{background:var(--card-bg-hover);
  border-color:color-mix(in srgb,var(--accent) 22%,transparent)}

.bc-body{grid-column:1;grid-row:1}
.bc-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:9px}
.bc-head h4{margin-bottom:0!important}
.bc-head .bc-ico{order:2;margin-left:auto}
.bc-body h4{font-size:1.18rem;font-weight:700;letter-spacing:-.01em;color:var(--text);margin-bottom:9px;text-wrap:balance}
.bento-card.lg .bc-body h4{font-size:1.32rem}
.bc-body p{font-size:.9rem;line-height:1.5;color:var(--text-2);max-width:24ch}

/* soft gradient icon tile — no shadow */
.bc-ico{grid-column:2;grid-row:1;align-self:start;
  width:60px;height:60px;border-radius:17px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--ico-a),var(--ico-b));
  transition:transform .35s var(--ease),filter .35s var(--ease)}
.bento-card.lg .bc-ico{width:64px;height:64px;border-radius:18px}
.bento-card.sm .bc-ico{width:42px;height:42px;border-radius:12px;flex-shrink:0}
.bento-card.sm .bc-ico svg{width:52%;height:52%}
.bc-ico svg{position:relative;z-index:1;width:46%;height:46%;color:var(--accent);transition:color .35s var(--ease)}
.bento-card:hover .bc-ico{transform:scale(1.05)}
.bento-card:hover .bc-ico svg{color:color-mix(in srgb,var(--accent) 84%,#000)}

/* arrow button bottom-left — soft gradient, no shadow */
.bc-arrow{grid-column:1;grid-row:2;align-self:end;justify-self:start;margin-top:6px;
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--arrow-a),var(--arrow-b));color:#fff;
  transition:transform .25s var(--ease),filter .25s var(--ease)}
.bc-arrow svg{width:18px;height:18px}
.bento-card:hover .bc-arrow{transform:translateX(3px);filter:brightness(1.08)}

/* explore link */
.bento-foot{margin-top:clamp(22px,2.5vw,30px);display:flex;justify-content:center}
.bento-foot a{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;
  color:var(--text-brand);transition:gap .25s var(--ease)}
.bento-foot a svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.bento-foot a:hover{gap:13px}
.bento-foot a:hover svg{transform:translateX(3px)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  #services .bento{grid-template-columns:1fr}
  .bf-art{height:230px}
}
@media (max-width:680px){
  .bento-row.top{grid-template-columns:1fr}
  .bento-row.bot{grid-template-columns:1fr}
  .bento-card{grid-template-columns:1fr auto}
  .bf-window{width:84%}
}

@media (prefers-reduced-motion:reduce){
  .bf-window,.bf-chip{animation:none!important}
}