/* ==============================
   DESIGN TOKENS
============================== */
:root{
  /* Brand family */
  --brand-1:#7c3aed;      /* violet */
  --brand-2:#3b82f6;      /* blue */

  /* Site surfaces & text */
  --bg:#0d1026;           /* page background */
  --surface:#111633;      /* card/section background */
  --surface-2:#0f1822;    /* inputs / deeper panels */
  --text:#e5e7eb;         /* primary text */
  --muted:#c7d2fe;        /* light text/accent on dark */
  --border:#1d2550;       /* borders */

  /* Convenience aliases used throughout the CSS */
  --primary: var(--brand-1);                         /* single-brand color */
  --accent: #a78bfa;                                 /* link/focus tint (violet-300/400) */
  --grad-accent: linear-gradient(90deg, var(--brand-1), var(--brand-2));

  /* Layout (unchanged) */
  --wrap:1400px;
  --radius:14px;
  --gap:28px;
}

/* ==============================
   BASE / RESETS
============================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block;border-radius:12px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin-inline:auto;padding:0 20px}
.container{max-width:var(--wrap);width:92%;margin-inline:auto}

/* Skip link */
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:10px;top:10px;background:#fff;color:#000;padding:.5rem;border-radius:8px}

/* ==============================
   HEADER / NAV (white, short)
============================== */
/* ==============================
   HEADER / NAV (dark, matches site)
============================== */
.site-header{
  background: var(--bg);
  color: var(--text);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px;
}
.brand img{ height:56px }

/* Hamburger / menu button — white, subtle border */
.nav__toggle{
  display:none;
  background: transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.75);
  border-radius:10px;
  padding:.55rem .8rem;
}

/* Desktop menu */
.nav__menu{ display:flex; gap:22px; list-style:none; padding:0; margin:0; }
.nav__menu a{
  color: var(--text);
  text-decoration:none;
  font-weight:600;
}
.nav__menu a[aria-current="page"]{
  border-bottom:2px solid var(--primary);
}

/* Mobile panel matches site (no white) */
@media (max-width:860px){
  .nav__toggle{ display:inline-block; }
  .nav__menu{
    display:none;
    position:absolute; right:20px; top:64px;
    flex-direction:column;
    background: var(--bg);
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
  }
  .nav__menu.is-open{ display:flex; }
}

/* ==============================
   BUTTONS
============================== */
/* ==============================
   BUTTONS (purple/blue family)
============================== */
.btn{
  display:inline-block;
  padding:.85rem 1.1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
}
.btn--primary{
  background: var(--primary);
  color: #fff;                /* was dark green — now white */
}
.btn--primary:hover{ filter:brightness(.95) }

.btn--ghost{
  border:2px solid var(--primary);
  color: var(--text);
}
.btn--ghost:hover{
  background: var(--primary);
  color:#fff;                 /* ensure contrast on hover */
}

/* Accent / gradient button */
.btn--accent{
  background: var(--grad-accent);
  color:#fff;                 /* ensure contrast on gradient */
}
.btn--accent:hover{ filter:brightness(.95) }


/* ==============================
   HERO
============================== */
.hero{background:linear-gradient(180deg,#0b1220 0%,#0b0f14 100%)}
.hero__inner{display:grid;align-items:center;gap:32px;grid-template-columns:1.05fr .95fr;padding:56px 0}
.hero__content h1{font-size:clamp(2rem,3.5vw,3rem);margin:.2rem 0 1rem}
.hero__content p{color:var(--muted);max-width:60ch}

/* Optional gradient text + image glow */
.gradient-text{
  background: var(--grad-accent);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.img-accent{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.04),
    0 6px 30px rgba(59,130,246,.20),
    0 12px 48px rgba(168,85,247,.15);
  border-radius:12px;
}

/* ==============================
   FEATURES (alternating image/text)
============================== */
.feature{padding:56px 0}
.feature__grid{display:grid;gap:36px;grid-template-columns:1fr 1fr;align-items:center}
.feature__content h2{margin:.2rem 0 1rem;font-size:clamp(1.4rem,2.5vw,2rem)}
.checklist{list-style:none;padding-left:0;margin:0}
.checklist li{margin:.25rem 0}
.checklist li::before{content:"✔ ";color:var(--primary)}
/* alternate layout */
.feature--alt .feature__grid{direction:rtl}
.feature--alt .feature__content{direction:ltr}
.feature--alt .feature__media{direction:ltr}

/* ==============================
   PANELS / DRAWERS
============================== */
.panels{padding:56px 0;background:var(--surface)}
.panels h2{margin:0 0 1rem}
.panels__list details{
  background:#0f1822;border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;margin:12px 0
}
.panels__list summary{cursor:pointer;font-weight:700}
.panels__list p{color:var(--muted);margin:.6rem 0 0}

/* ==============================
   REVIEWS
============================== */
.reviews{padding:56px 0}
.cards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.review p{font-style:italic;margin:0 0 .6rem}
.review footer{color:var(--muted)}

/* ==============================
   REQUEST / GENERIC FORM (Home CTA)
============================== */
.request{padding:56px 0;background:linear-gradient(180deg,#0c1522 0%,#0b0f14 100%)}
.request__grid{display:grid;gap:32px;grid-template-columns:1fr 1fr;align-items:start}
.form{
  display:grid;gap:18px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;padding:18px
}
.form--grid{grid-template-columns:1fr 1fr;column-gap:22px;row-gap:18px}
.form__row{display:flex;flex-direction:column;gap:8px;margin:0}
label{font-weight:700}
input,select,textarea{
  background:#0f1822;color:var(--text);
  border:1px solid #203042;border-radius:10px;padding:.75rem .9rem
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.form__note{color:var(--muted);font-size:.9rem}
.span-2{grid-column:1/-1}
.form .btn-row,.form button[type="submit"]{margin-top:6px}

/* Optional callout with blue/purple wash */
.callout{
  background:
    radial-gradient(1200px 800px at 0% 0%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(1200px 800px at 100% 0%, rgba(168,85,247,.10), transparent 60%),
    var(--surface);
  border: 1px solid rgba(120,144,255,.25);
  border-radius: var(--radius);
  padding: 20px;
}

/* Heading underline accent */
.h-underline{position:relative;display:inline-block;padding-bottom:.2rem}
.h-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;
  background:var(--grad-accent);border-radius:3px;
}

/* ==============================
   CONTACT PAGE (integrated)
============================== */
.form-grid{display:grid;gap:1rem;max-width:760px;margin-top:1.5rem}
.row{display:grid;gap:.75rem}
.row.cols-2{grid-template-columns:1fr 1fr}
.row.cols-3{grid-template-columns:2fr 1fr 1fr}
.field{display:grid;gap:.375rem}
.field label{font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:.75rem;border-radius:.625rem;
  border:1px solid #203042;background:#0b0f14;color:var(--text);font-size:1rem
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--accent);border-color:var(--accent)
}
/* Validation helpers used by your JS */
.error{color:#ff6b6b;font-weight:600;margin-top:.5rem}
.error-input{border-color:#ff6b6b !important;outline-color:#ff6b6b}
.helper{font-size:.85rem;color:var(--muted)}
/* Confirm page review */
.review{display:grid;gap:.5rem}
.review div{padding:.75rem;border:1px solid var(--border);border-radius:.25rem;background:var(--surface-2)}
.btns{margin-top:1rem;display:flex;gap:1rem;flex-wrap:wrap}

/* ==============================
   ICONS (PNG helpers)
============================== */
.icon{width:28px;height:28px;object-fit:contain;vertical-align:middle}
.icon--invert{filter:brightness(0) invert(1)} /* if a PNG is solid black */

/* ==============================
   FOOTER
============================== */
.site-footer{background:#081019;border-top:1px solid var(--border);color:var(--muted)}
.footer__grid{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.footer-nav a{color:var(--text);text-decoration:none}
.footer-nav a:hover{color:var(--accent)}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width:980px){
  .hero__inner,.feature__grid,.request__grid{grid-template-columns:1fr}
  .feature--alt .feature__grid{direction:ltr}
}
@media (max-width:860px){
  .nav__toggle{display:inline-block}
  .nav__menu{
    display:none;position:absolute;right:20px;top:64px;flex-direction:column;
    background:#fff;padding:12px;border:1px solid #e6eef7;border-radius:12px
  }
  .nav__menu.is-open{display:flex}
}
@media (max-width:800px){
  .form--grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
}

/* =======================================================================
   ADD-ON: Card glow for Home cards (non-breaking, targets .cards .card)
   Paste stayed at end so it overrides earlier card rules only on hover.
======================================================================== */
.cards .card{
  position: relative;
  overflow: hidden;
  transition: transform .16s ease,
              box-shadow .3s ease,
              border-color .3s ease,
              background .3s ease;
}
.cards .card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: var(--radius);
  background: radial-gradient(120% 120% at 50% -10%,
              rgba(59,130,246,.25), transparent 55%),
              radial-gradient(120% 120% at 110% 10%,
              rgba(168,85,247,.22), transparent 60%);
  filter: blur(14px);
  opacity: 0;
  pointer-events:none;
  transition: opacity .28s ease;
  z-index: 0;
}
.cards .card:hover,
.cards .card:focus-within{
  transform: translateY(-4px);
  border-color: rgba(120,144,255,.45);
  box-shadow:
    0 10px 30px rgba(59,130,246,.18),
    0 20px 60px rgba(168,85,247,.15);
}
.cards .card:hover::after,
.cards .card:focus-within::after{
  opacity: .85;
}
.cards .card > *{
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce){
  .cards .card{ transition: none; }
  .cards .card:hover,
  .cards .card:focus-within{ transform: none; }
}

/* =======================================================================
   SERVICES PAGE – add-only styles (scoped to .svc-*)
   Use these classes on services.html to avoid impacting other pages.
======================================================================== */

/* Header Area (optional) */
.svc-hero{
  padding:56px 0 22px;
  background: linear-gradient(180deg,#0b1220 0%, #0b0f14 100%);
}
.svc-hero h1{margin:.25rem 0 .5rem;font-size:clamp(1.8rem,3.2vw,2.4rem)}
.svc-hero p{color:var(--muted);max-width:70ch}

/* Service catalog wrapper */
.svc{
  padding: 42px 0 56px;
}

/* 8-up grid, responsive down to 1 column */
.svc-grid{
  display:grid;
  gap: 22px;
  grid-template-columns: repeat(4,1fr);
}
@media (max-width:1100px){ .svc-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:820px){  .svc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:460px){  .svc-grid{ grid-template-columns: 1fr; } }

/* Service card */
.svc-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 8px;
  transition: transform .16s ease, box-shadow .32s ease, border-color .32s ease, background .32s ease;
  position: relative;
  overflow: hidden;
}

/* Icon tile – works with PNG or SVG */
.svc-card__icon{
  width: 48px; height: 48px;
  display:grid;place-items:center;
  border-radius: 12px;
  background:
    radial-gradient(240px 160px at -10% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(240px 160px at 120% 0%, rgba(168,85,247,.14), transparent 65%),
    var(--surface-2);
  border: 1px solid #203042;
}
.svc-card__icon img,
.svc-card__icon svg{ width:26px;height:26px; display:block; }

/* Title + text */
.svc-card h3{ margin: 6px 0 2px; font-size: 1.05rem; }
.svc-card p{ margin: 0; color: var(--muted); }

/* Hover / focus effects (subtle neon) */
.svc-card::after{
  content:"";
  position:absolute; inset:-3px; border-radius: calc(var(--radius) + 2px);
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(59,130,246,.23), transparent 55%),
    radial-gradient(120% 120% at 110% 10%, rgba(168,85,247,.20), transparent 60%);
  filter: blur(16px);
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 0;
}
.svc-card:hover,
.svc-card:focus-within{
  transform: translateY(-3px);
  border-color: rgba(120,144,255,.45);
  box-shadow:
    0 10px 28px rgba(59,130,246,.16),
    0 18px 52px rgba(168,85,247,.14);
}
.svc-card:hover::after,
.svc-card:focus-within::after{ opacity: .85; }

/* Keep content above glow */
.svc-card > *{ position: relative; z-index: 1; }

/* Alternating sections specific to Services (optional) */
.svc-alt{
  margin: 40px 0;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
}
.svc-alt__grid{
  display:grid; gap: 24px; grid-template-columns: 1.15fr .85fr; align-items: center;
}
.svc-alt h2{ margin:.25rem 0 .5rem; font-size: clamp(1.3rem,2.2vw,1.8rem); }
.svc-alt p{ color: var(--muted); }
.svc-alt__media img{ border-radius: 12px; }
.svc-alt--reverse .svc-alt__grid{ grid-template-columns: .85fr 1.15fr; }
.svc-alt--reverse .svc-alt__text{ order:2; }
.svc-alt--reverse .svc-alt__media{ order:1; }
@media (max-width:920px){
  .svc-alt__grid,
  .svc-alt--reverse .svc-alt__grid{ grid-template-columns: 1fr; }
  .svc-alt--reverse .svc-alt__text,
  .svc-alt--reverse .svc-alt__media{ order: initial; }
}

/* CTA footer on Services */
.svc-cta{
  margin: 44px 0 64px;
  padding: 22px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(1200px 800px at 0% 0%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(1200px 800px at 100% 0%, rgba(168,85,247,.10), transparent 60%),
    var(--surface);
}
.svc-cta h2{ margin: 0 0 8px; }
.svc-cta p{ margin: 0 0 12px; color: var(--muted); }

/* Focus ring utility */
:where(.svc-card, .svc-cta, .svc-alt) :is(a,button,input,select,textarea):focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:8px;
}

/* Icon helpers if you use dark PNGs */
.svc-icon--invert{ filter: brightness(0) invert(1); }

/* Make dark PNG icons pop on dark cards (services + anywhere) */
.icon.icon--invert{
  filter: brightness(0) invert(1) contrast(1.25) saturate(1.05);
  opacity: .95;
}
.card.service:hover .icon.icon--invert{
  opacity: 1;
}

/* Fix service card icons: remove global rounding + make white & crisp */
.cards .service img{ border-radius:0 }             /* stops the weird corner artifact */
.icon.icon--invert{ filter:brightness(0) invert(1) contrast(1.3) saturate(1.1) }



/* === SERVICES ICON ENHANCEMENTS (safe, scoped to cards) === */

/* Remove rounded corners from tiny icons and give them a subtle tile */
.cards .service img.icon{
  width:64px;height:64px;           /* keep them crisp */
  padding:8px;                      /* room for the halo */
  border-radius:12px;               /* tile shape (not the image pixels) */
  background:
    radial-gradient(160px 120px at 0% 0%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(160px 120px at 100% 0%, rgba(168,85,247,.16), transparent 60%),
    var(--surface-2);
  border:1px solid #203042;
  box-shadow:
    0 0 0 1px rgba(120,144,255,.10) inset,
    0 10px 24px rgba(0,0,0,.35);
}

/* Re-color dark PNGs to bright white with a little glow */
.icon.icon--invert{
  filter:
    brightness(0)
    invert(1)
    contrast(1.65)
    saturate(1.15)
    drop-shadow(0 2px 6px rgba(0,0,0,.5));
  opacity: 1;
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}

/* A tiny hover lift and brighter glow */
.card.service:hover .icon.icon--invert{
  transform: translateY(-1px);
  filter:
    brightness(0)
    invert(1)
    contrast(1.85)
    saturate(1.2)
    drop-shadow(0 4px 10px rgba(0,0,0,.55));
}

/* Override global img rounding that was dulling the icons */
.cards .service img{ border-radius:12px } /* just the tile, not the image pixels */

/* === FIX: show the actual PNG glyphs (no white squares) === */
.cards .service img.icon{
  /* remove the tile/background/padding we added earlier */
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;

  width: 64px; height: 64px;
  /* make dark/colored PNGs read as bright white, with soft glow */
  filter:
    brightness(0)
    invert(1)
    contrast(1.9)
    saturate(1.15)
    drop-shadow(0 3px 10px rgba(0,0,0,.55));
  opacity: 1;
  transition: transform .15s ease, filter .2s ease;
}

.card.service:hover img.icon{
  transform: translateY(-1px);
  filter:
    brightness(0)
    invert(1)
    contrast(2.1)
    saturate(1.2)
    drop-shadow(0 6px 14px rgba(0,0,0,.6));
}

/* just in case the global img rounding leaks in anywhere else */
.cards .service img{ border-radius: 0 !important; }

/* === FINAL: service icons = pure white, NO shadow/box === */
.cards .service img.icon{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;

  width: 64px; height: 64px;
  display: block;

  /* brighten to solid white, no glow */
  filter: brightness(0) invert(1) contrast(2) saturate(1.1) !important;
  -webkit-filter: brightness(0) invert(1) contrast(2) saturate(1.1) !important;

  /* make absolutely sure no leftover drop-shadow survives */
  filter: brightness(0) invert(1) contrast(2) saturate(1.1) drop-shadow(0 0 0 rgba(0,0,0,0)) !important;
}

.card.service:hover img.icon{
  /* keep it flat on hover too */
  filter: brightness(0) invert(1) contrast(2) saturate(1.1) drop-shadow(0 0 0 rgba(0,0,0,0)) !important;
}


/* ==============================
   CONTACT PAGE UPLIFT (scoped)
============================== */
.page-contact .card{
  max-width: 980px;
  margin: 28px auto;
  padding: 28px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.page-contact h1{
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  margin-bottom: .5rem;
}

.page-contact .form-grid{
  max-width: 980px;
  margin: 1.25rem auto 0;          /* center the form */
  gap: 1.1rem;
}

.page-contact .row{ gap: 1rem; }
.page-contact .row.cols-2{ grid-template-columns: 1fr 1fr; }
.page-contact .row.cols-3{ grid-template-columns: 2fr 1fr 1fr; }

.page-contact .field label{
  font-weight: 800;
  font-size: 1rem;
}

.page-contact .field input,
.page-contact .field select,
.page-contact .field textarea{
  font-size: 1.05rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid #203042;
  background: #0f1822;             /* a hair brighter than bg for depth */
}

.page-contact .field input::placeholder,
.page-contact .field textarea::placeholder{ opacity:.85; }

.page-contact .field textarea{ min-height: 160px; }

.page-contact .error{
  margin-bottom: .5rem;
  border-left: 4px solid #ff6b6b;
  padding-left: .6rem;
}

/* Submit button: large & full width */
.page-contact button[type="submit"]{
  width: 100%;
  padding: 1rem 1.2rem;
  font-weight: 800;
  border-radius: 12px;
}

/* Mobile tweaks */
@media (max-width: 720px){
  .page-contact .row.cols-2,
  .page-contact .row.cols-3{
    grid-template-columns: 1fr;
  }
}

/* === Mobile nav fix: match desktop (dark panel + readable links) === */
@media (max-width:860px){
  .nav__menu{
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
  }
  .nav__menu a{
    color: var(--text) !important;          /* white-ish on dark */
    text-decoration: none;
    padding: 10px 8px;                       /* nicer tap targets */
  }
  .nav__menu a:hover{
    color: #fff !important;
    text-decoration: underline;
    text-decoration-color: var(--brand-2);
  }
  /* keep the hamburger white */
  .nav__toggle{
    color:#fff !important;
    background: transparent !important;
    border:1px solid rgba(255,255,255,.75) !important;
  }
}


/* Back-to-top button */
#toTop{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--grad-accent);
  color: #fff;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;

  /* hidden by default */
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}
#toTop.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#toTop:hover{ filter: brightness(1.08); }
#toTop:focus{ outline: 2px solid var(--brand-2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){
  #toTop{ transition: none; }
}

/* ===== A7: Fixed pile heights + visible cascades (no hanging panels) ===== */
#a7 .slot.pile{
  position: relative;
  height: 520px;              /* ALL tableau columns are same height */
  overflow: hidden;           /* nothing hangs out of the dashed panel */
  box-sizing: border-box;
}

#a7 #tableau .card-tile{
  position: absolute;
  left: 12px;
  right: 12px;
  width: auto;
  transition: top .18s ease, transform .18s ease;
}

/* Foundations: also fixed & cascaded so you can see the stack */
#a7 .slot[data-role="foundation"]{
  position: relative;
  height: 300px;              /* was auto; made fixed so it never grows */
  overflow: hidden;
  box-sizing: border-box;
}
#a7 .slot[data-role="foundation"] .card-tile{
  position: absolute;
  left: 12px;
  right: 12px;
}

/* subtle settle pop + tidy images */
#a7 .card-tile.settle{ transform: scale(1.02); }
#a7 .card-tile img{ display:block; width:100%; height:auto; border-radius:10px; }