/* NT3D – Design „Studio Schiefer“ (einziges Design des Shops)
   Wird immer nach style.css geladen; style.css enthält Grundlayout und Komponenten,
   diese Datei Farben, Radien und Effekte. Änderungen am Aussehen gehören hierher.
   Konzept: Studio-Optik in Schiefergrau, große Produktbilder, weiche Radien,
   Cyan aus dem Logo als Leuchtakzent – im Wechsel mit hellen Flächen. */

html[data-design="b"] {
  color-scheme: dark;
  /* Schiefergrau mit Cyan-Akzent; das Logo ist auf diese Palette abgestimmt (img/logo-schiefer.png), Glow bleibt */
  --ink: #f7f9fb;
  --ink-2: #dde4ea;
  --graphite: #242c35;
  --graphite-2: #2b343e;
  --steel: #b4bfc9;
  --steel-2: #8996a3;
  --line: #4d5a68;
  --line-strong: #5f6e7d;
  --bg: #323d49;
  --bg-alt: #3a4653;
  --surface: #414e5c;
  --header-bg: rgba(50, 61, 73, .9);
  --accent: #5ec5dc;
  --accent-ink: #84dbee;
  --accent-soft: rgba(94, 197, 220, .10);
  --primary: #5ec5dc;
  --primary-hover: #98e6f5;
  --on-primary: #061317;
  --selected-bg: rgba(94, 197, 220, .07);
  --ok: #52c98e;
  --warn: #f2b867;
  --warn-soft: rgba(242, 184, 103, .10);
  --danger: #ff8278;
  --danger-soft: rgba(255, 130, 120, .10);
  --radius: 12px;
}

[data-design="b"] body { background: var(--bg); color: var(--ink); }
[data-design="b"] h1, [data-design="b"] h2, [data-design="b"] h3 { font-weight: 700; letter-spacing: -0.03em; }
[data-design="b"] a { color: var(--accent-ink); }
[data-design="b"] a:hover { color: #fff; }
[data-design="b"] ::selection { background: rgba(94, 197, 220, .35); }

/* Logo: eigene Variante in den Paletten-Farben (logo-schiefer.png), daher kein Filter */
[data-design="b"] .brand img, [data-design="b"] .footer-logo { filter: none; }
[data-design="b"] .brand-tag { border-color: var(--line-strong); color: var(--steel); }

/* Header */
[data-design="b"] .site-header { border-bottom-color: var(--line); backdrop-filter: saturate(1.6) blur(14px); }
[data-design="b"] .main-nav a { color: var(--ink-2); border-radius: 999px; }
[data-design="b"] .main-nav a:hover { background: var(--surface); color: #fff; }
[data-design="b"] .main-nav a[aria-current="page"] { box-shadow: none; background: var(--surface); color: #fff; border-radius: 999px; }
[data-design="b"] .cart-link { color: var(--ink); border-radius: 999px; }
[data-design="b"] .cart-link:hover, [data-design="b"] .cart-link.is-current { background: var(--surface); color: #fff; }
[data-design="b"] .cart-count { background: var(--accent); color: var(--on-primary); }
[data-design="b"] .admin-chip { border-color: var(--accent); color: var(--accent); border-radius: 999px; }
@media (max-width: 860px) {
  [data-design="b"] .main-nav { background: var(--bg); }
  [data-design="b"] .main-nav a { border-radius: 0; }
}

/* Buttons: Pill-Form */
[data-design="b"] .btn { border-radius: 999px; font-weight: 650; }
[data-design="b"] .btn-primary:hover { box-shadow: 0 0 0 4px rgba(94, 197, 220, .18), 0 10px 30px -10px rgba(94, 197, 220, .6); }
[data-design="b"] .btn-outline { border-color: var(--line-strong); color: var(--ink); }
[data-design="b"] .btn-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
[data-design="b"] .hero-actions .btn-primary { background: var(--primary); color: var(--on-primary); }
[data-design="b"] .hero-actions .btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
[data-design="b"] .btn-ghost { border-color: var(--line-strong); }

/* Kicker */
[data-design="b"] .kicker { color: var(--steel); }
[data-design="b"] .kicker-idx { color: var(--accent); border-color: var(--line-strong); }

/* Hero: Titelbild (Illustration Drucker bei Nacht) über die volle Breite, Text links darauf.
   Ebenen: Landschaft (hero-bg) → Zeichenpapier-Raster (::after, läuft nach unten aus) → Drucker (hero-fg).
   Beide Bilder haben dasselbe Format und denselben Ausschnitt, damit sie deckungsgleich liegen. */
[data-design="b"] .hero {
  display: flex; align-items: center; min-height: clamp(560px, 44vw, 760px);
  background: #151b21; isolation: isolate;
}
/* Bildebene ist reine Dekoration: Klicks gehen an die Buttons darüber */
[data-design="b"] .hero-scene { position: absolute; inset: 0; pointer-events: none; }
[data-design="b"] .hero-scene img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 100%;
}
[data-design="b"] .hero-bg { z-index: -3; }
[data-design="b"] .hero-fg { z-index: -1; }
[data-design="b"] .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%);
}
[data-design="b"] .hero-grid { width: 100%; grid-template-columns: minmax(0, 640px); text-align: left; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(120px, 12vw, 180px); }
/* Volle Schriftfarbe statt Verlauf: background-clip:text schneidet Unterlängen (g, p) ab */
[data-design="b"] .hero h1 { font-size: clamp(2.4rem, 4.8vw, 4.4rem); max-width: 16ch; line-height: 1.08; color: #fff; }
[data-design="b"] .hero-lead { color: var(--ink-2); max-width: 44ch; }
[data-design="b"] .hero .kicker-idx { color: var(--accent); }

/* Tablet/Handy: Text oben auf dem Nachthimmel, Illustration darunter (Drucker im Bildausschnitt) */
@media (max-width: 860px) {
  [data-design="b"] .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  [data-design="b"] .hero-scene { position: relative; inset: auto; order: 2; height: clamp(300px, 70vw, 440px); }
  [data-design="b"] .hero-scene img { object-position: 76% 100%; }
  [data-design="b"] .hero-grid { order: 1; padding-top: 48px; padding-bottom: 8px; }
}

/* 3D-Druck-Service: Landschaft (rechts, farbig), die nach links in eine technische Zeichnung übergeht.
   Ebenen wie auf der Startseite: Landschaft (hero-bg) → Seitenraster (::after) → Zeichnung mit Bemaßung (hero-fg). */
[data-design="b"] .hero-service { min-height: clamp(480px, 40vw, 660px); }
[data-design="b"] .hero-service .hero-scene img { object-position: 78% 35%; }
[data-design="b"] .hero-service h1 { max-width: none; }
[data-design="b"] .hero-service h1 span { white-space: nowrap; }
/* Zweiter Button deckend statt durchsichtig */
[data-design="b"] .hero-service .btn-ghost { background: var(--surface); border-color: rgba(255, 255, 255, .22); color: #fff; }
[data-design="b"] .hero-service .btn-ghost:hover { background: #4d5b6a; border-color: rgba(255, 255, 255, .5); }
/* Raster über Himmel und Zeichnung, über der farbigen Landschaft ausgeblendet */
[data-design="b"] .hero-service::after {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 82%);
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 82%);
}
[data-design="b"] .hero-service .hero-grid { padding-bottom: clamp(64px, 8vw, 112px); }
[data-design="b"] .hero-service .breadcrumb, [data-design="b"] .hero-service .breadcrumb a { color: var(--steel-2); }
[data-design="b"] .hero-service .breadcrumb { margin-bottom: 20px; }
@media (max-width: 860px) {
  [data-design="b"] .hero-service .hero-scene { height: clamp(280px, 80vw, 440px); }
  [data-design="b"] .hero-service .hero-scene img { object-position: 96% 100%; }
  [data-design="b"] .hero-service::after { -webkit-mask-image: none; mask-image: none; }
}

/* Shop: Sonnenuntergang mit Fesselballons (Körbe als Einkaufswagen), eine Bildebene, Raster nur oben */
/* Text mittig, Kategorie-Filter unten auf den Hügeln; Bild unten verankert, damit der Boden immer sichtbar ist */
[data-design="b"] .hero-shop { min-height: clamp(340px, 28vw, 460px); flex-direction: column; align-items: stretch; background: var(--bg); }
[data-design="b"] .hero-shop .hero-scene img { object-position: 80% 100%; }
[data-design="b"] .hero-shop .hero-grid { flex: 1; align-content: center; padding-top: clamp(36px, 4vw, 56px); padding-bottom: 12px; }
[data-design="b"] .hero-shop-filters { position: relative; width: 100%; padding-bottom: 14px; }
/* Raster nur im Himmel, läuft vor den Hügeln aus (sonst bleibt unten eine Rasterlinie als Kante stehen) */
[data-design="b"] .hero-shop::after {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 65%);
  mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 65%);
}
[data-design="b"] .hero-shop-filters .filter-bar { margin: 0; padding: 0; border: 0; }
[data-design="b"] .hero-shop-filters .chip:not(.is-active) { background: rgba(50, 61, 73, .82); border-color: rgba(255, 255, 255, .22); color: #fff; }
[data-design="b"] .hero-shop-filters .filter-count { color: #c3ccd4; }
[data-design="b"] .hero-shop .hero-lead { color: #e4e8ec; margin-bottom: 0; }
[data-design="b"] .hero-shop .breadcrumb, [data-design="b"] .hero-shop .breadcrumb a { color: #c3ccd4; }
[data-design="b"] .hero-shop .breadcrumb { margin-bottom: 20px; }
@media (max-width: 860px) {
  /* Handy: Text, darunter Bild, Filter auf dessen Boden gezogen */
  [data-design="b"] .hero-shop .hero-scene { height: clamp(220px, 60vw, 340px); }
  [data-design="b"] .hero-shop .hero-scene img { object-position: 82% 100%; }
  [data-design="b"] .hero-shop .hero-grid { padding-bottom: 20px; }
  [data-design="b"] .hero-shop-filters { order: 3; margin-top: -52px; }
}

/* Kennzahlen als Kacheln */
[data-design="b"] .stats { border: 0; }
[data-design="b"] .stats-grid { gap: 12px; padding-top: 8px; padding-bottom: 8px; }
[data-design="b"] .stat, [data-design="b"] .stat:first-child { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--surface); }
[data-design="b"] .stat-value { color: #fff; }
@media (max-width: 760px) {
  [data-design="b"] .stat:nth-child(odd), [data-design="b"] .stat:nth-child(n+3) { padding: 18px; border: 1px solid var(--line); }
}

/* Abschnitte */
[data-design="b"] .section-alt { background: var(--bg-alt); border-color: var(--line); }
[data-design="b"] .section-head { margin-bottom: 40px; }

/* Produktkarten: größer, quadratisches Bild, Schweben beim Hover */
[data-design="b"] .product-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
[data-design="b"] .product-card { border-color: var(--line); overflow: hidden; transition: transform .25s, border-color .2s, box-shadow .25s; }
[data-design="b"] .product-card:hover { transform: translateY(-4px); border-color: rgba(94, 197, 220, .45);
  box-shadow: 0 24px 60px -30px rgba(94, 197, 220, .55); }
[data-design="b"] .product-card-media { aspect-ratio: 1 / 1; border-bottom: 0; background: #2a333d; }
[data-design="b"] .product-card-body { padding: 20px 22px 22px; }
[data-design="b"] .product-card-foot { border-top: 1px solid var(--line); }
[data-design="b"] .product-card-cta { color: var(--accent-ink); }
[data-design="b"] .product-card-link, [data-design="b"] .product-card-link:hover { color: var(--ink); }
[data-design="b"] .badge { border-radius: 999px; background: rgba(22, 27, 33, .88); color: #fff; border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(6px); }
[data-design="b"] .badge-warn { color: var(--warn); }

/* Split / Schritte */
[data-design="b"] .split-media { border-radius: 20px; border-color: var(--line); }
[data-design="b"] .steps, [data-design="b"] .steps li { border-color: var(--line-strong); }
[data-design="b"] .step-no { color: var(--accent); }

/* Feature-Kacheln */
[data-design="b"] .feature-grid { border: 0; gap: 16px; }
[data-design="b"] .feature, [data-design="b"] .feature:first-child { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
[data-design="b"] .cta-box { border-radius: 20px; background: linear-gradient(160deg, rgba(94, 197, 220, .12), var(--surface) 55%); }

/* Seitenköpfe */
[data-design="b"] .page-head-dark { background:
  radial-gradient(700px 300px at 15% 0%, rgba(94, 197, 220, .16), transparent 70%),
  linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px,
  linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px,
  var(--bg-alt); }

/* Filter-Chips */
[data-design="b"] .chip { border-radius: 999px; border-color: var(--line-strong); color: var(--ink-2); }
[data-design="b"] .chip:hover { border-color: var(--ink); color: #fff; }
[data-design="b"] .chip.is-active { background: var(--accent); color: var(--on-primary); border-color: var(--accent); }

/* Produktseite */
[data-design="b"] .gallery-main { border-radius: 20px; background: #2a333d; border-color: var(--line); }
[data-design="b"] .gallery-main img { background: #2a333d; }
[data-design="b"] .gallery-thumb { border-radius: 10px; }
[data-design="b"] .gallery-thumb.is-active, [data-design="b"] .gallery-thumb:hover { border-color: var(--accent); }
[data-design="b"] .price-lg { color: #fff; }
[data-design="b"] .qty { border-radius: 999px; overflow: hidden; }
[data-design="b"] .qty-btn { color: var(--ink); }
[data-design="b"] .size-option input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
[data-design="b"] .notice { border-radius: var(--radius); border-left-width: 0; box-shadow: inset 3px 0 0 var(--accent); }
[data-design="b"] .notice-warn { box-shadow: inset 3px 0 0 var(--warn); }
[data-design="b"] .safety-list { border-radius: var(--radius); }

/* Tabellen */
[data-design="b"] .spec-table thead th, [data-design="b"] .spec-group th { border-bottom-color: var(--line-strong); color: var(--accent-ink); }
[data-design="b"] .data-table thead th { border-bottom-color: var(--line-strong); }
[data-design="b"] .data-table tbody tr:hover { background: rgba(255, 255, 255, .02); }

/* Formulare */
[data-design="b"] .panel { border-color: var(--line); }
[data-design="b"] .field input, [data-design="b"] .field select, [data-design="b"] .field textarea,
[data-design="b"] .search-bar input, [data-design="b"] .variant-row input, [data-design="b"] .image-item input {
  background: var(--bg-alt); border-color: var(--line-strong); color: var(--ink); border-radius: 10px;
}
[data-design="b"] .field input:focus, [data-design="b"] .field select:focus, [data-design="b"] .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94, 197, 220, .2);
}
[data-design="b"] .field input[readonly] { opacity: .7; }
[data-design="b"] .pay-option { border-color: var(--line-strong); }
[data-design="b"] .pay-option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
[data-design="b"] .pay-option input, [data-design="b"] .check input { accent-color: var(--accent); }
[data-design="b"] .upload-drop { background: var(--bg-alt); border-color: var(--line-strong); border-radius: var(--radius); }
[data-design="b"] .form-success { background: rgba(82, 201, 142, .1); }
[data-design="b"] .status { border-color: transparent; border-radius: 999px; padding: 5px 9px; }

/* Warenkorb / Kasse */
[data-design="b"] .summary { background: var(--surface); border-color: var(--line); border-radius: 16px; }
[data-design="b"] .summary-total { border-top-color: var(--line-strong); }
[data-design="b"] .cart-line-img { border-radius: 10px; }

/* Zahlungsleiste & Footer */
[data-design="b"] .pay-strip { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
[data-design="b"] .site-footer { background: var(--graphite); }
[data-design="b"] .footer-bottom { border-top-color: var(--line); }

/* Admin & Konto */
[data-design="b"] .admin-bar { background: var(--graphite-2); border-bottom: 1px solid var(--line); }
[data-design="b"] .kpi { background: var(--surface); }
[data-design="b"] .account-nav { background: var(--surface); }
[data-design="b"] .account-nav nav a:hover { background: rgba(255, 255, 255, .03); }
[data-design="b"] .bank-box { border-radius: 16px; }

/* ================================================================ Version 3: helle Akzente & Lesbarkeit */

/* Helle Flächen im Wechsel mit Schiefergrau: abwechselnde Abschnitte, Zahlungsleiste, Kennzahlen */
[data-design="b"] .section-alt,
[data-design="b"] .pay-strip {
  --ink: #16191c; --ink-2: #2c3238; --steel: #56606a; --steel-2: #8a949d;
  --line: #dde3e8; --line-strong: #c6ced5; --bg: #ffffff; --bg-alt: #eef2f5; --surface: #ffffff;
  --accent-ink: #0d6f86; --accent-soft: #e3f5f9; --selected-bg: #f4fafc;
  --ok: #1f8a5b; --warn: #a8660b; --warn-soft: #fff5e6; --danger: #c0392b; --danger-soft: #fdecea;
  color-scheme: light;
  background: linear-gradient(180deg, #f3f6f8, #e9eef2);
  color: var(--ink);
  border-color: #d5dce2;
}
[data-design="b"] .section-alt a:hover, [data-design="b"] .pay-strip a:hover { color: var(--ink); }
[data-design="b"] .section-alt .kicker-idx { color: var(--accent-ink); }
[data-design="b"] .section-alt .split-media { border-color: #d5dce2; box-shadow: 0 30px 70px -40px rgba(30, 45, 60, .45); }
[data-design="b"] .section-alt .steps,
[data-design="b"] .section-alt .steps li { border-color: #cdd5dc; }
[data-design="b"] .section-alt .step-no { color: var(--accent-ink); }
[data-design="b"] .section-alt .btn-outline { border-color: var(--ink); color: var(--ink); }
[data-design="b"] .section-alt .btn-outline:hover { background: var(--ink); color: #fff; }
[data-design="b"] .section-alt .spec-table thead th,
[data-design="b"] .section-alt .spec-group th { background: transparent; color: var(--ink); border-bottom-color: var(--ink); }
[data-design="b"] .section-alt .cta-box { background: #fff; border-color: #d5dce2; }
[data-design="b"] .section-alt .feature { background: #fff; }
[data-design="b"] .pay-strip { border-top: 0; border-bottom: 0; }
[data-design="b"] .pay-strip .mono { color: var(--steel); }

/* Kennzahlen-Kacheln: hell, ohne farbige Kante */
[data-design="b"] .stat, [data-design="b"] .stat:first-child {
  background: linear-gradient(180deg, #ffffff, #eef3f6); border-color: transparent;
}
[data-design="b"] .stat-value { color: #16191c; }
[data-design="b"] .stat-label { color: #56606a; }
/* Verlinkte Kacheln (Material, Express): Leuchten beim Hover wie bei den Produktkarten */
[data-design="b"] .stat-link { color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
[data-design="b"] .stat-link:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(94, 197, 220, .7), inset 0 0 0 1px rgba(94, 197, 220, .55); }
[data-design="b"] .stat-link .stat-label svg { vertical-align: -3px; color: #0d6f86; }
/* Materialliste in gleicher Schriftgröße wie die anderen Kacheln; schmale Trenner, Umbruch nur nach einem Trenner */
[data-design="b"] .stat-value-list .sep { margin: 0 .1em; color: var(--accent-ink); }

/* Lesbarkeit: Pill-Elemente mit kräftigerem Hintergrund statt Transparenz */
[data-design="b"] .btn-ghost { border-color: rgba(255, 255, 255, .6); color: #fff; background: rgba(255, 255, 255, .08); }
[data-design="b"] .btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
[data-design="b"] .chip { color: var(--ink); background: rgba(255, 255, 255, .06); }
[data-design="b"] .kicker { color: var(--ink-2); }
[data-design="b"] .status { color: #fff; }
[data-design="b"] .status-awaiting_payment, [data-design="b"] .status-payment_pending, [data-design="b"] .status-p-draft { background: #b9741a; }
[data-design="b"] .status-paid, [data-design="b"] .status-in_production { background: #1d7f97; }
[data-design="b"] .status-shipped, [data-design="b"] .status-completed, [data-design="b"] .status-p-active { background: #23895a; }
[data-design="b"] .status-cancelled, [data-design="b"] .status-failed, [data-design="b"] .status-payment_review { background: #b23a30; }
[data-design="b"] .status-pending_payment, [data-design="b"] .status-p-archived { background: #5f6e7d; }
[data-design="b"] .sale-badge, [data-design="b"] .badge-sale { background: #d64235; color: #fff; }
[data-design="b"] .price-sale { color: #ff9a8f; }
[data-design="b"] .section-alt .price-sale { color: #c0392b; }
[data-design="b"] .notice { background: rgba(94, 197, 220, .14); color: var(--ink); }

/* Produktkarten: im Ruhezustand besser lesbar, Leuchten beim Hover bleibt */
[data-design="b"] .product-card { background: #3d4a58; border-color: #586776; }
[data-design="b"] .product-card-sub, [data-design="b"] .product-card-cat { color: #cdd6de; }
[data-design="b"] .product-card-foot { border-top-color: #586776; }
[data-design="b"] .product-card .price { color: #fff; }

/* Header etwas heller, Footer bleibt dunkler als Abschluss */
[data-design="b"] .site-header { border-bottom-color: rgba(255, 255, 255, .12); }
[data-design="b"] .site-footer { background: #242c35; }

/* Button in der Testmodus-Leiste gut lesbar */
[data-design="b"] .test-bar .btn-outline { color: #10161b; border-color: #10161b; background: rgba(255, 255, 255, .45); }
[data-design="b"] .test-bar .btn-outline:hover { background: #10161b; color: #fff; }

/* Primär-Buttons als Link: die allgemeine Linkfarbe (Cyan) nicht auf den Button-Text anwenden */
[data-design="b"] a.btn-primary, [data-design="b"] a.btn-primary:hover { color: var(--on-primary); }

/* hervorgehobene Aktionsbox (Express) */
[data-design="b"] .cta-box-accent { border: 1px solid rgba(94, 197, 220, .55); background: linear-gradient(150deg, rgba(94, 197, 220, .3), rgba(94, 197, 220, .08) 60%, var(--surface)); box-shadow: 0 18px 50px -24px rgba(94, 197, 220, .55); }
[data-design="b"] .cta-box-accent h3 { color: #fff; }
[data-design="b"] .cta-box-accent p { color: var(--ink-2); }

/* große Angebotskacheln (3D-Druck-Service) */
[data-design="b"] .feature-grid-lg .feature { padding: 40px 32px 36px; border-top: 3px solid var(--accent); transition: transform .2s, box-shadow .2s; }
[data-design="b"] .feature-grid-lg .feature:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(94, 197, 220, .5); }
[data-design="b"] .feature-grid-lg .feature-no { font-size: 15px; margin-bottom: 18px; }
[data-design="b"] .feature-grid-lg h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; margin-bottom: 12px; }
[data-design="b"] .feature-grid-lg p { font-size: 17px; line-height: 1.6; }