/* DXCESS — alternative section designs
   Append this file AFTER "solution page.css" or paste rules into it.
   Variants reuse existing CSS variables (--brand, --accent, --foreground, etc.)
   ============================================================ */

/* Showcase helpers (only used by variants.html) ------------- */
.variant-label{
  display:inline-block;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;
  background:hsl(var(--foreground));color:hsl(var(--background));
  padding:.35rem .7rem;border-radius:9999px;margin-bottom:1.25rem;
}
.variant-label.alt{background:hsl(var(--brand));color:#fff;}
.variant-label.shift{background:var(--accent);color:#fff;}
.variant-divider{
  height:1px;background:hsl(var(--border));max-width:1400px;
  margin:0 auto;opacity:1.5;
}

/* ============================================================
   FEATURES — VARIANT B  (brand-safe: numbered two-column list)
   ============================================================ */
.featB-wrap{
  display:grid;gap:1rem 2.5rem;margin-top:3rem;
  grid-template-columns:1fr;
}
@media(min-width:768px){.featB-wrap{grid-template-columns:1fr 1fr;gap:1.25rem 3rem;}}
.featB-row{
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;
  padding:1.5rem 0;border-top:1px solid hsl(var(--border));
}
.featB-row:first-child,.featB-wrap > .featB-row:nth-child(2){border-top:0;}
@media(max-width:767px){.featB-wrap > .featB-row:nth-child(2){border-top:1px solid hsl(var(--border));}}
.featB-num{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:2.25rem;font-weight:800;line-height:1;
  color:hsl(var(--brand));min-width:2.5rem;
}
.featB-row h3{font-size:1.1rem;margin-bottom:.35rem;}
.featB-row p{color:hsl(var(--muted-foreground));font-size:.97rem;}

/* ============================================================
   FEATURES — VARIANT C  (visual shift: dark band bento grid)
   ============================================================ */
.featC-section{background:#0f1722;color:#f6f5f1;}
.featC-section .section-title{color:#fff;}
.featC-section .section-sub{color:#a9b2c0;}
.featC-grid{
  display:grid;gap:1rem;margin-top:3rem;
  grid-template-columns:1fr;
}
@media(min-width:768px){
  .featC-grid{
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:minmax(180px,auto);
  }
  .featC-grid > :nth-child(1){grid-column:span 2;}
  .featC-grid > :nth-child(4){grid-column:span 2;}
  .featC-grid > :nth-child(5){grid-column: span 2;}
}
.featC-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:1.25rem;padding:1.75rem;
  display:flex;flex-direction:column;gap:.75rem;
  transition:all .25s;
}
.featC-card:hover{background:rgba(255,255,255,.07);border-color:hsl(var(--brand)/.4);}
.featC-card .ic{
  width:2.75rem;height:2.75rem;border-radius:.85rem;
  display:grid;place-items:center;
  background:hsl(var(--brand)/.18);color:hsl(var(--brand));
}
.featC-card h3{font-size:1.1rem;color:#fff;}
.featC-card p{color:#a9b2c0;font-size:.95rem;}
.featC-card.feature-of{background:linear-gradient(135deg,hsl(var(--brand)/.22),rgba(255,255,255,.03));}
.featC-card.feature-of h3{font-size:1.35rem;}

/* ============================================================
   BEFORE/AFTER — VARIANT B  (split-screen card)
   ============================================================ */
.splitB{
  margin-top:3rem;border-radius:1.5rem;overflow:hidden;
  display:grid;grid-template-columns:1fr;
  box-shadow:var(--shadow-card);
  border:1px solid hsl(var(--border));
}
@media(min-width:768px){.splitB{grid-template-columns:1fr 1fr;}}
.splitB-side{padding:2.5rem;position:relative;}
.splitB-before{
  background:linear-gradient(160deg,#fdecdd,#fff6ec);
}
.splitB-after{
  background:linear-gradient(160deg,hsl(var(--brand-soft)),#f0fbf6);
  border-left:1px dashed hsl(var(--border));
}
.splitB-tag{
  display:inline-block;font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:9999px;margin-bottom:1.25rem;
}
.splitB-before .splitB-tag{background:var(--accent);color:#fff;}
.splitB-after .splitB-tag{background:hsl(var(--brand));color:#fff;}
.splitB-side h3{font-size:1.35rem;margin-bottom:1.25rem;}
.splitB-side ul{display:flex;flex-direction:column;gap:.75rem;}
.splitB-side li{
  display:flex;align-items:flex-start;gap:.65rem;
  font-size:1rem;color:hsl(var(--foreground));
}
.splitB-before li{opacity:.9;text-decoration:none;}
.splitB-dot{
  flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:9999px;
  display:grid;place-items:center;font-size:.7rem;color:#fff;margin-top:.15rem;
}
.splitB-before .splitB-dot{background:var(--accent);}
.splitB-after .splitB-dot{background:hsl(var(--brand));}
.splitB-dot svg{
    width:16px;
    height:16px;
}
/* ============================================================
   BEFORE/AFTER — VARIANT C  (soft contrast cards, light & airy)
   ============================================================ */
.softC{
  margin-top:3rem;display:grid;gap:1.5rem;
  grid-template-columns:1fr;
  position:relative;
}
@media(min-width:768px){.softC{grid-template-columns:1fr 1fr;gap:2rem;align-items:stretch;}}
.softC-card{
  position:relative;border-radius:1.5rem;padding:2.25rem 1.75rem;
  display:flex;flex-direction:column;gap:1.25rem;
  transition:transform .25s ease;
}
.softC-before{
  background:hsl(var(--secondary));
  border:1px solid hsl(var(--border));
  color:hsl(var(--muted-foreground));
}
.softC-after{
  background:linear-gradient(160deg,hsl(var(--brand-soft)) 0%, #ffffff 100%);
  border:1px solid hsl(var(--brand)/.25);
  box-shadow:0 18px 40px -22px hsl(var(--brand)/.35);
}
@media(min-width:768px){.softC-after{transform:translateY(-.5rem);}}
.softC-tag{
  align-self:flex-start;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:9999px;
}
.softC-before .softC-tag{background:#fff;color:hsl(var(--muted-foreground));border:1px solid hsl(var(--border));}
.softC-after .softC-tag{background:hsl(var(--brand));color:#fff;}
.softC-card h3{
  font-size:1.35rem;line-height:1.3;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:700;
}
.softC-before h3{color:hsl(var(--foreground));opacity:.75;}
.softC-after h3{color:hsl(var(--foreground));}
.softC-list{display:flex;flex-direction:column;gap:.85rem;margin-top:.25rem;list-style:none;padding:0;}
.softC-list li{
  display:flex;align-items:center;gap:.75rem;font-size:1rem;
}
.softC-ico{
  flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:9999px;
  display:grid;place-items:center;
}
.softC-before .softC-ico{background:hsl(var(--muted));color:hsl(var(--muted-foreground));}
.softC-after .softC-ico{background:hsl(var(--brand));color:#fff;}
.softC-before .softC-list li{text-decoration:line-through;text-decoration-color:hsl(var(--muted-foreground)/.4);}