/* ════════════════════════════════════════════════════════════════
   ARETA — Service cards (Liquid-Glass bento).  DROP-IN, ADDITIVE.
   ----------------------------------------------------------------
   • Scoped to .areta-bento / .cap only — NO global resets, NO body,
     NO `*`, and it does NOT touch your existing `.reveal` system.
   • Every colour token has a built-in fallback, so it works even if a
     custom property is missing. If your site already defines these,
     they win automatically:
        --em-gradient  --muted  --ink  --glass-bg-light  --ease-apple
        --font-display --font-body --font-mono
   • Per-card colour comes from an inline  style="--c:#xxxxxx"  on each
     <article class="cap">.  Nothing else needed.
   • Entrance animation is handled by YOUR existing `.reveal` JS — just
     keep class="reveal" on each card. Icons are static (no JS needed).
   ════════════════════════════════════════════════════════════════ */

.areta-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}

/* ─── Liquid-Glass tile ─── */
.areta-bento .cap{
  --c:#2563EB;grid-column:span 2;position:relative;border-radius:22px;padding:22px;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  /* Frosted SOLID glass — no backdrop-filter. The original had blur(18px) on
     20 cards + blur(6px) on 60 tag pills = 80 live backdrop layers, each
     re-sampling + repainting every scroll frame (the lag/stutter). Over a
     light section a near-opaque white tint reads identically and paints once. */
  background:
    radial-gradient(130% 90% at 100% 0%,color-mix(in oklab,var(--c) 13%,transparent),transparent 58%),
    var(--glass-bg-light-solid,rgba(255,255,255,.88));
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 20px 46px -32px rgba(16,20,36,.55);
  transform:translateZ(0);                 /* own GPU layer → hover/scroll composite, not repaint */
  transition:transform .42s var(--ease-apple,cubic-bezier(.22,1,.36,1)),box-shadow .42s,border-color .42s;
}
.areta-bento .cap.w3{grid-column:span 3;padding:26px;}
/* glass rim — bright top-left fading into the accent */
.areta-bento .cap::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,0) 36%,color-mix(in oklab,var(--c) 40%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.75;}
/* sheen sweep on hover — animates transform only (GPU), not inset-inline-start (reflow each frame) */
.areta-bento .cap::after{content:"";position:absolute;top:0;inset-inline-start:-60%;width:55%;height:100%;z-index:4;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-16deg) translateX(0);opacity:0;}
.areta-bento .cap:hover::after{opacity:1;will-change:transform,opacity;animation:aretaSheen 1.05s var(--ease-apple,cubic-bezier(.22,1,.36,1));}
@keyframes aretaSheen{from{transform:skewX(-16deg) translateX(0);}to{transform:skewX(-16deg) translateX(340%);}}
.areta-bento .cap:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--c) 30%,rgba(255,255,255,.55));
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 34px 64px -30px color-mix(in oklab,var(--c) 55%,transparent);}

/* glass gradient icon chip */
.areta-bento .cap .ic{position:relative;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;color:#fff;flex:0 0 auto;
  background:linear-gradient(140deg,var(--c),color-mix(in oklab,var(--c) 52%,#fff));
  box-shadow:0 12px 24px -10px var(--c),0 1px 0 rgba(255,255,255,.55) inset;
  transition:transform .5s var(--ease-apple,cubic-bezier(.22,1,.36,1));}
.areta-bento .cap .ic::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 55%);}
.areta-bento .cap .ic svg{width:27px;height:27px;position:relative;}
.areta-bento .cap:hover .ic{transform:scale(1.07) rotate(-3deg);}
.areta-bento .cap.w3 .ic{width:60px;height:60px;border-radius:18px;}
.areta-bento .cap.w3 .ic svg{width:30px;height:30px;}

.areta-bento .cap h3{font-family:var(--font-display,"Rubik",system-ui,sans-serif);font-weight:700;font-size:clamp(17px,1.5vw,20px);margin:0 0 8px;letter-spacing:-.01em;color:var(--ink,#16161a);}
.areta-bento .cap.w3 h3{font-size:clamp(19px,1.6vw,22px);}
.areta-bento .cap p{font-family:var(--font-body,"Heebo",system-ui,sans-serif);color:var(--muted,#6b6b73);font-size:14.5px;line-height:1.62;margin:0 0 16px;}
.areta-bento .cap.w3 p{font-size:15px;}

/* glass keyword chips */
.areta-bento .cap .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;}
.areta-bento .cap .tags span{font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);font-size:11px;letter-spacing:.01em;padding:5px 10px;border-radius:8px;
  color:color-mix(in oklab,var(--c) 72%,#000);
  background:color-mix(in oklab,var(--c) 14%,rgba(255,255,255,.82));
  border:1px solid color-mix(in oklab,var(--c) 22%,transparent);}

/* ─── responsive ─── */
@media (max-width:900px){.areta-bento{grid-template-columns:repeat(2,1fr);}.areta-bento .cap,.areta-bento .cap.w3{grid-column:span 1;}}
/* phones: keep a 2-up GRID (not a stacked list) — compact tiles that read like
   the desktop bento. Tighter padding/icon/type so two fit cleanly at ~360px. */
@media (max-width:560px){
  .areta-bento{grid-template-columns:repeat(2,1fr);gap:12px;}
  .areta-bento .cap,.areta-bento .cap.w3{grid-column:span 1;padding:15px;border-radius:18px;}
  .areta-bento .cap .ic,.areta-bento .cap.w3 .ic{width:44px;height:44px;border-radius:13px;margin-bottom:11px;}
  .areta-bento .cap .ic svg,.areta-bento .cap.w3 .ic svg{width:22px;height:22px;}
  .areta-bento .cap h3,.areta-bento .cap.w3 h3{font-size:15px;}
  .areta-bento .cap p,.areta-bento .cap.w3 p{font-size:12.5px;line-height:1.5;margin-bottom:11px;}
  .areta-bento .cap .tags{gap:5px;}
  .areta-bento .cap .tags span{font-size:10px;padding:4px 7px;}
}
@media (max-width:360px){
  .areta-bento{grid-template-columns:1fr;}
}

/* ─── reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  .areta-bento .cap,.areta-bento .cap .ic,.areta-bento .cap::after{transition:none!important;animation:none!important;}
}

/* ── icon chips wear the pillar's VIBRANT colour (--pc from the deep-section)
   instead of the muted per-card --c — matches the homepage gradient cards ── */
.deep-section .areta-bento .cap .ic{
  background:linear-gradient(140deg, var(--pc, var(--c)), color-mix(in oklab, var(--pc, var(--c)) 56%, #ffffff));
  box-shadow:0 12px 26px -10px var(--pc, var(--c)), 0 1px 0 rgba(255,255,255,.55) inset;
}