/* ════════════════════════════════════════════════════════════════
   ARETA — enhanced service cards.
   v2 "Frozen Deliverables": each banner is a STATIC product still —
   the deliverable itself (live site / month-end report / run-log /
   status page). Pure CSS, zero keyframes, one accent per scene,
   all real banner text = mono numbers/Latin (identical in he/en).
   SCOPED build: tokens live on .ecs-grid so nothing leaks.
   Loaded AFTER styles.css.
   ════════════════════════════════════════════════════════════════ */
.ecs-grid{
  --primary:#2563EB;--primary-glow:#3b89ff;
  --magenta:#ed52cb;--cyber-bright:#00d722;
  --dark-feature:linear-gradient(180deg,#101424,#070a14);
  --muted:#6e6e73;--on-dark-muted:#a8a8a8;
  --pill-teal:#0e7490;--pill-magenta:#a21caf;--pill-green:#047857;--pill-amber:#b45309;
  --glass-bg-light:rgba(255,255,255,.66);
  --ease-apple:cubic-bezier(.22,1,.36,1);
  --r-lg:28px;--r-md:18px;
  --font-display:"Rubik",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-num:"Bebas Neue",sans-serif;
}

/* ════════════════════════════════════════════════════════════════
   SERVICE CARDS
   ════════════════════════════════════════════════════════════════ */
.ecs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.ecs-card{position:relative;border-radius:var(--r-lg);padding:14px 14px 22px;overflow:hidden;isolation:isolate;
  content-visibility:auto;contain-intrinsic-size:auto 420px;
  background:var(--glass-bg-light-solid,rgba(255,255,255,.9));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 18px 44px -30px rgba(16,20,36,.5);
  transition:transform .55s var(--ease-apple),box-shadow .55s var(--ease-apple);
  transform-style:preserve-3d;}
.ecs-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:4;
  background:linear-gradient(140deg,rgba(255,255,255,.9),rgba(255,255,255,0) 35%,rgba(59,137,255,0) 60%,rgba(59,137,255,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;}
.ecs-card:hover{box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 34px 66px -28px rgba(16,20,36,.6);}
@media (hover:hover){.ecs-card:hover{will-change:transform;}}

.cs-banner{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;
  background:var(--dark-feature);margin-bottom:16px;}
.cs-banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,10,20,0) 55%,rgba(7,10,20,.45));}
.vz-grid{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/30px 30px,
             linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/30px 30px;
  -webkit-mask-image:radial-gradient(circle at 62% 36%,#000,transparent 84%);
  mask-image:radial-gradient(circle at 62% 36%,#000,transparent 84%);}

.cs-body{padding-inline:8px;}
.ecs-name{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-0.015em;margin-bottom:6px;}
.ecs-desc{color:var(--muted);font-size:13.5px;line-height:1.5;margin:0 0 16px;min-height:2.95em;}
.ecs-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ecs-big{font-family:var(--font-num);font-size:48px;line-height:.78;color:rgba(16,20,36,.16);letter-spacing:.02em;}
.ecs-pill{font-family:var(--font-mono);font-size:11.5px;color:#fff;padding:7px 12px;border-radius:999px;
  letter-spacing:.02em;white-space:nowrap;box-shadow:0 6px 16px -8px rgba(0,0,0,.5);}

/* ════════════════════════════════════════════════════════════════
   PREMIUM SERVICE EMBLEM — calm, static, one accent per card.
   Replaces the mini-UI "deliverable" stills: a lit glass medallion
   holding the pillar's line-icon, soft accent glow + concentric rings
   on a faint navy grid. No motion, no clutter — hover lifts the mark.
   ════════════════════════════════════════════════════════════════ */
.em{position:absolute;inset:0;display:grid;place-items:center;}
.em-glow{position:absolute;width:72%;aspect-ratio:1;border-radius:50%;filter:blur(48px);opacity:.5;
  top:-22%;inset-inline-end:-14%;pointer-events:none;}
.em-ring{position:absolute;width:152px;height:152px;border-radius:50%;border:1px solid var(--c);opacity:.22;pointer-events:none;}
.em-ring.r2{width:206px;height:206px;opacity:.10;}
.em-mark{position:relative;width:98px;height:98px;border-radius:27px;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 22px 44px -20px rgba(0,0,0,.72);
  transition:transform .5s var(--ease-apple);}
.em-mark::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 52px -10px var(--c);opacity:.7;}
.em-mark svg{position:relative;width:46px;height:46px;stroke:var(--c);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 10px rgba(0,0,0,.4));}
@media(hover:hover){.ecs-link:hover .em-mark{transform:translateY(-5px);}}

/* ─── responsive (cards only) ─── */
@media (max-width:920px){ .ecs-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .ecs-grid{grid-template-columns:1fr;} }

/* ─── reduced motion (transitions off; the stills ARE the design) ─── */
@media (prefers-reduced-motion:reduce){
  .ecs-grid *,.ecs-grid *::before,.ecs-grid *::after{transition-duration:.001ms!important;}
}

/* ════════════════════════════════════════════════════════════════
   SMOOTH STAGGERED ENTRANCE
   Cards start hidden; JS (GSAP if present, else IntersectionObserver)
   reveals them in a staggered cascade. Opacity transition is the CSS
   fallback; GSAP animates y+opacity inline for a richer rise.
   ════════════════════════════════════════════════════════════════ */
.ecs-card{opacity:0;
  transition:opacity .9s var(--ease-apple),transform .55s var(--ease-apple),box-shadow .55s var(--ease-apple);}
.ecs-card.is-in{opacity:1;}
@media (prefers-reduced-motion:reduce){ .ecs-card{opacity:1!important;transition:none!important;} }

/* ════════════════════════════════════════════════════════════════
   HOME — hero subline + trust strip, and the 4-pillar services
   preview (reuses .ecs-grid/.ecs-card; cards are whole-card links).
   ════════════════════════════════════════════════════════════════ */
.hero-cover-sub{margin-top:18px;max-width:560px;font-size:clamp(15px,2.1vw,19px);line-height:1.62;
  color:rgba(255,255,255,.88);font-weight:500;text-shadow:0 2px 18px rgba(0,0,0,.45);}
.hero-trust{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px;}
.hero-trust span{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.04em;color:#fff;
  padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);}
@media(max-width:560px){.hero-cover-sub{margin-top:14px;font-size:14.5px}.hero-trust{margin-top:16px;gap:6px}.hero-trust span{font-size:10px;padding:5px 10px}}

.home-svc-section{padding:74px 0;background:var(--canvas-soft);}
@media(max-width:560px){.home-svc-section{padding:48px 0}}
.home-svc-section .about-head{margin-bottom:42px;}
.home-svc-section .ecs-grid{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){.home-svc-section .ecs-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.home-svc-section .ecs-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto;}}
.ecs-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;}
.ecs-link:focus-visible{outline:2px solid var(--primary,#2563EB);outline-offset:3px;border-radius:18px;}
.home-svc-section .ecs-card{cursor:pointer;}
.home-svc-section .ecs-card::after{content:"";position:absolute;top:18px;inset-inline-start:18px;z-index:5;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;opacity:0;transform:translateX(6px);transition:opacity .4s var(--ease-apple),transform .4s var(--ease-apple);
  background:rgba(255,255,255,.9);box-shadow:0 6px 16px -6px rgba(16,20,36,.5);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 8H3m0 0l4 4M3 8l4-4' stroke='%232563EB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;}
@media(hover:hover){.home-svc-section .ecs-card:hover::after{opacity:1;transform:translateX(0);}}