/* Centered container like your previous Zone 1 */
:root{
  --brand-start:#0d6efd; --brand-end:#0b5ed7;
  --fg:#0f172a; --muted:#6b7280;
  --tile-border:rgba(15,23,42,.08);
  --tile-shadow:0 6px 18px rgba(13,110,253,.10);
  --tile-shadow-hover:0 14px 28px rgba(13,110,253,.18);
  --max: 1400px;
  --pad: clamp(12px, 2vw, 24px);
}

.calci-container{
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.calci-hero{ padding: 14px 0 20px; text-align:center; }
.calci-hero h1{ 
  font-weight:800; letter-spacing:-.015em; 
  font-size:clamp(28px,3.2vw,46px); margin:0 0 10px;
}
.calci-hero p{ max-width:900px; margin:0 auto; color:var(--muted); font-size:clamp(14px,1.5vw,18px); }
.calci-hero .accent{
  background:linear-gradient(90deg,var(--brand-start),var(--brand-end));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Zones */
.calci-zone{ width:100%; }
.calci-zone--tools{
  background:
    radial-gradient(900px 450px at 10% -200px, rgba(13,110,253,.08), transparent 70%),
    linear-gradient(180deg,#f6faff 0%, #ffffff 100%);
  padding: 20px 0 56px;
}
.calci-zone--features{
  background:
    radial-gradient(900px 450px at 90% -200px, rgba(255,99,132,.10), transparent 70%),
    linear-gradient(180deg,#fff7f2 0%, #ffffff 100%);
  padding: 30px 0 80px;
}

.calci-subtitle{ text-align:center; font-weight:800; letter-spacing:-.015em; font-size:clamp(24px,2.6vw,38px); margin-bottom:24px; }

/* Grid: centered & responsive; columns overridable with class */
.calci-grid{
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(210px, 1fr) );
  gap: 14px;
}
@media (min-width: 1200px){
  .calci-grid.cols-6{ grid-template-columns: repeat(6, 1fr); }
  .calci-grid.cols-5{ grid-template-columns: repeat(5, 1fr); }
  .calci-grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
  .calci-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
  .calci-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
}

/* Tile */
.calci-tile{ height:100%; }
.calci-tile__a{
  display:flex; flex-direction:column; gap:10px;
  min-height: 180px;
  padding:18px;
  border-radius:16px;
  border:1px solid var(--tile-border);
  background:#fff;
  text-decoration:none; color:inherit;
  box-shadow:var(--tile-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.calci-tile__a:hover{ transform: translateY(-4px); box-shadow: var(--tile-shadow-hover); }

.chip{
  width:40px;height:40px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--brand-start),var(--brand-end)); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px rgba(13,110,253,.22);
  font-size:18px;
}
.calci-tile h3{ font-size:16px; font-weight:800; margin:2px 0 6px; line-height:1.25; }
.calci-tile p{ font-size:13.5px; color:var(--muted); margin:0; }

/* Features: 3 cards */
.calci-features{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 992px){ .calci-features{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .calci-features{ grid-template-columns: 1fr; } }

.feature-card{
  background:#fff;border:1px solid var(--tile-border);border-radius:20px;overflow:hidden;
  box-shadow:var(--tile-shadow);transition:transform .16s ease, box-shadow .16s ease;
  cursor:default;
}
.feature-card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(13,110,253,.12); }
.feature-card .media{ aspect-ratio:16/9; min-height:170px; background:#f7f7f7; }
.feature-card .media img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-card .body{ padding:18px; }
.feature-card .title{ font-size:18px; font-weight:800; margin:0 0 6px; }
.feature-card p{ margin:0; color:var(--muted); font-size:14px; }