/* Editorial framing for Engines. The engine catalogue keeps its shared styles. */
.eng-flow-heading { max-width:820px; margin-inline:auto; text-align:center; }
.eng-flow-heading .lead { margin-inline:auto; }
.eng-benefits .card { padding:28px; overflow:hidden; background:linear-gradient(150deg,#131827,#0b101c); }
.eng-ui { height:188px; position:relative; display:flex; align-items:center; justify-content:center; margin:-4px -4px 28px; pointer-events:none; user-select:none; background:radial-gradient(ellipse at center,rgba(124,151,240,.1),transparent 72%); }
.eng-ui-window,.eng-ui-sheet { width:220px; max-width:90%; border:1px solid #333e58; border-radius:12px; background:linear-gradient(145deg,#1c2435,#101622); box-shadow:0 16px 36px #0005; overflow:hidden; }
.eng-ui-bar { display:flex; gap:4px; align-items:center; height:26px; padding-inline:12px; border-bottom:1px solid #ffffff09; }
.eng-ui-bar i { width:4px; height:4px; border-radius:50%; background:#63708a; }
.eng-ui-bar i:first-child { background:#aabaff; }
.eng-ui-canvas { height:85px; margin:12px 16px 8px; border-radius:5px; background:linear-gradient(135deg,#24334b,#3b4b65 55%,#1a263a); display:grid; place-items:center; }
.eng-ui-crop { width:62%; height:65px; border:1px solid #bbcaff; box-shadow:0 0 0 12px #0b112b40; position:relative; background:linear-gradient(150deg,transparent 55%,#98acce22 56%); }
.eng-ui-crop::before,.eng-ui-crop::after { content:''; position:absolute; inset:0 33%; border-inline:1px solid #aabaff30; }
.eng-ui-crop::after { inset:33% 0; border-inline:0; border-block:1px solid #aabaff30; }
.eng-ui-ratios { display:flex; justify-content:center; align-items:center; gap:17px; height:29px; margin-bottom:6px; }
.eng-ui-ratios i { width:13px; height:16px; border:1px solid #606e87; border-radius:2px; }
.eng-ui-ratios i:nth-child(2) { width:16px; }
.eng-ui-ratios i:nth-child(3) { width:22px; height:14px; border-color:#aabaff; background:#aabaff18; }
.eng-ui-ratios i:nth-child(4) { width:26px; height:12px; }
.eng-ui-sheet { position:absolute; width:190px; height:142px; }
.eng-ui-sheet-back { transform:translate(-20px,-15px) rotate(-7deg); opacity:.65; }
.eng-ui-sheet-front { transform:translate(18px,14px); }
.eng-ui-skeleton { margin:16px; width:70%; height:5px; background:#64748b; border-radius:4px; box-shadow:0 17px #64748b55,0 34px #64748b33; }
.eng-ui-row { display:flex; gap:16px; align-items:center; margin:13px 15px; }
.eng-ui-row b { width:43%; height:4px; border-radius:4px; background:#8997b34d; }
.eng-ui-row span { flex:1; height:17px; border:1px solid #46516a; border-radius:4px; background:#253048; }
.eng-ui-row:nth-child(3) span { border-color:#aabaff99; background:#aabaff18; }
.eng-ui-adjust .eng-ui-window { padding-bottom:13px; }
.eng-ui-slider { margin:23px 20px; height:3px; background:#354058; border-radius:4px; position:relative; }
.eng-ui-slider::before { content:''; display:block; height:100%; width:var(--value); background:#8fa6df; }
.eng-ui-slider i { position:absolute; left:var(--value); top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:#c0cefa; box-shadow:0 0 0 4px #aabaff0a; }
.eng-ui-options { display:flex; gap:8px; margin:0 20px; }
.eng-ui-options i { height:12px; flex:1; border:1px solid #46516a; border-radius:3px; }
.eng-ui-options i:nth-child(2) { background:#aabaff22; border-color:#8fa6df; }
.eng-benefits h3 { margin-bottom:16px; }
.eng-benefits p { color:var(--txt-2); line-height:1.65; margin:0; }
.eng-flow-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.eng-flow-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:#0d1220; display:flex; flex-direction:column; }
.eng-flow-copy { padding:28px 26px 24px; flex:1; }
.eng-flow-name { display:block; color:var(--eng-accent); font-size:.8rem; font-weight:600; margin-bottom:16px; }
.eng-flow-copy h3 { font-size:1.5rem; line-height:1.2; margin-bottom:14px; }
.eng-flow-copy p { color:var(--txt-2); font-size:1rem; line-height:1.6; margin:0; }
.eng-flow-preview { display:block; aspect-ratio:4/5; overflow:hidden; margin:0 16px; border:1px solid var(--line); border-radius:12px; background:#101421; }
.eng-flow-preview img { display:block; width:100%; max-width:none; height:auto; transform:translateY(-25%); }
.eng-flow-link { display:block; padding:18px 26px 22px; color:var(--txt-2); font-size:.85rem; }
.eng-flow-link:hover { color:var(--txt); }
.eng-flow-technical { max-width:760px; margin:36px auto 0; }
@media(max-width:760px) { .eng-flow-grid { grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
@media(min-width:1081px) and (max-width:1400px) {
  .hdr .nav { gap:12px; }
  .hdr .nav a { white-space:nowrap; font-size:.78rem; }
  .hdr .langs button { white-space:nowrap; }
}
.engines-page { --eng-accent: #aabaff; }
.eng-hero { padding: clamp(48px,7vw,108px) 0 64px; }
.eng-hero-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.eng-kicker { display:block; color:var(--eng-accent); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing: normal; margin-bottom:24px; }
.eng-hero h1 { font-size:clamp(2.6rem,3.9vw,4.05rem); line-height:1.08; letter-spacing: normal; margin:0 0 28px; }
.eng-hero .lead { max-width:530px; }
.eng-hero .btn-row { margin-top:32px; }
.eng-hero-art { position:relative; margin:0; border-radius:26px; overflow:hidden; height:clamp(430px,42vw,620px); background:var(--ink-800); }
.eng-hero-art img { height:100%; width:100%; object-fit:cover; object-position:50% center; }
.eng-hero-art figcaption { position:absolute; inset:auto 0 0; padding:60px 28px 26px; background:linear-gradient(transparent,rgba(4,6,12,.9)); font-size:.88rem; color:#e0e5f0; }
.eng-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:20px 48px; padding-block:24px; border-block:1px solid var(--line); }
.eng-nav a { color:var(--txt-2); font-weight:600; }
.eng-nav a:hover { color:var(--txt); }
.engines-page section[id] { scroll-margin-top:90px; }
.eng-control-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(40px,7vw,100px); align-items:center; }
.eng-controls { background:linear-gradient(135deg,rgba(98,122,197,.07),transparent); }
.eng-precision { border-top: none; }
.eng-precision h3 { margin-bottom:18px; }
.eng-precision p { color:var(--txt-2); }
.eng-panel { margin:0 auto; width:min(100%,340px); border:1px solid var(--line-2); border-radius:20px; overflow:hidden; box-shadow:0 24px 100px rgba(0,0,0,.3); }
.eng-panel img { display:block; width:100%; height:auto; }
.eng-details { margin-top:28px; border:1px solid var(--line); border-radius:16px; padding:0 24px; background:rgba(255,255,255,.02); }
.eng-details summary { cursor:pointer; padding:22px 0; font-weight:600; color:var(--txt); }
.eng-details[open] { padding-bottom:24px; }
.eng-details .spec-wrap { margin-top:8px; max-width:100%; overflow:auto; }
.eng-details .rv { opacity:1; transform:none; }
.eng-details .muted { margin-top:20px; font-size:.88rem; }
.eng-formats { display:grid; grid-template-columns:.75fr 1fr 1.5fr; align-items:end; gap:28px; }
.eng-format { margin:0; min-width:0; }
.eng-format img { display:block; width:100%; object-fit:cover; border-radius:18px; }
.eng-portrait img { aspect-ratio:2/3; object-position:50% top; }
.eng-square img { aspect-ratio:1; object-position:center; }
.eng-wide img { aspect-ratio:16/9; object-position:center; }
.eng-format figcaption { display:flex; justify-content:space-between; gap:12px; padding-top:18px; font-weight:600; }
.eng-format figcaption span:last-child { color:var(--txt-3); font-weight:400; }
.eng-note { font-size:.85rem; color:var(--txt-3); margin-top:24px; }
.engines-page a:focus-visible,.engines-page summary:focus-visible { outline:2px solid var(--eng-accent); outline-offset:5px; }
@media(max-width:900px) {
  .eng-hero-grid { grid-template-columns:1fr; }
  .eng-hero-art { height:440px; }
  .eng-hero .lead { max-width:680px; }
  .eng-control-grid { grid-template-columns:1fr 300px; gap:30px; }
}
@media(max-width:640px) {
  .eng-hero { padding-top:40px; }
  .eng-hero h1 { font-size:2.6rem; }
  .eng-hero-art { height:360px; border-radius:18px; }
  .eng-nav { justify-content:flex-start; gap:18px 26px; }
  .eng-control-grid { grid-template-columns:1fr; }
  .eng-panel { width:min(100%,300px); }
  .eng-formats { grid-template-columns:1fr 1fr; gap:24px 16px; }
  .eng-wide { grid-column:1/-1; }
  .eng-details { padding-inline:16px; }
  .eng-details .spec { min-width:540px; }
}

/* ==========================================================================
   Raccoon Precision Explainer
   ========================================================================== */
.raccoon-explains-card {
  max-width: 860px;
  margin: 36px auto 0;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(20, 26, 44, 0.92) 0%, rgba(11, 15, 26, 0.98) 100%);
  border: 1px solid rgba(139, 92, 246, 0.32);
  box-shadow: 0 16px 44px -10px rgba(0, 0, 0, 0.75), 0 0 30px rgba(139, 92, 246, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(22px, 3.5vw, 34px);
  position: relative;
  overflow: hidden;
}

.raccoon-explains-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(77, 124, 254, 0.15) 50%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
}

.raccoon-explains-header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
}

.raccoon-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.raccoon-avatar-wrap img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(139, 92, 246, 0.65);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.45), 0 8px 18px rgba(0,0,0,0.6);
  display: block;
}

.raccoon-avatar-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 11px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0d1220;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.raccoon-bubble-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fbbf24;
  margin-bottom: 6px;
}

.raccoon-bubble-title {
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.25;
}

.raccoon-bubble-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0;
}

/* 3 Presets Grid */
.raccoon-presets-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 28px;
  padding: 16px 8px 24px;
  perspective: 1000px;
}

.raccoon-preset-item {
  border-radius: 20px;
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 15px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s ease;
  position: relative;
}

/* Tilt the cards for dynamic playful look */
.raccoon-preset-item.preset-fast {
  transform: rotate(-3.5deg) translateY(6px);
  transform-origin: bottom center;
}

.raccoon-preset-item.preset-balanced {
  transform: translateY(-12px) rotate(0.4deg);
  z-index: 2;
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.6), 0 0 24px -4px rgba(139, 92, 246, 0.15);
}

.raccoon-preset-item.preset-max {
  transform: rotate(3.8deg) translateY(6px);
  transform-origin: bottom center;
}

/* Hover state: straightens, elevates smoothly */
.raccoon-preset-item:hover {
  transform: translateY(-14px) rotate(0deg) scale(1.03) !important;
  z-index: 10;
  border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 22px 42px -8px rgba(0, 0, 0, 0.65), 0 0 28px rgba(139, 92, 246, 0.3);
}

.raccoon-preset-item.preset-balanced:hover {
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 24px 46px -8px rgba(0, 0, 0, 0.7), 0 0 32px rgba(167, 139, 250, 0.25);
}

.preset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.preset-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}

.preset-tag {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 12px;
}

.preset-tag.is-rec {
  color: #c084fc;
}

.raccoon-preset-item p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 20px;
  flex: 1;
}

/* Quantization Cloud Bubble */
.preset-cloud {
  margin-top: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.raccoon-preset-item:hover .preset-cloud {
  transform: scale(1.03);
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.preset-cloud .cloud-item {
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.preset-cloud .cloud-dot {
  font-size: 1.35rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1;
  user-select: none;
}

.raccoon-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.24);
  color: #f1f5f9;
  font-size: 0.95rem;
  line-height: 1.5;
}

.raccoon-tip-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .raccoon-explains-header {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .raccoon-presets-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 8px 0;
  }
  .raccoon-preset-item.preset-fast,
  .raccoon-preset-item.preset-balanced,
  .raccoon-preset-item.preset-max {
    transform: none !important;
  }
}

/* Section Header with Raccoon Mascots */
.engines-header-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  max-width: fit-content;
  gap: clamp(24px, 3.5vw, 40px);
  margin-bottom: clamp(32px, 4vw, 48px);
}

.engines-header-wrap .sec-head {
  max-width: 680px;
  margin-bottom: 0;
}

.engines-rocket-badge {
  flex-shrink: 0;
  position: relative;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  padding: 4px;
  background: radial-gradient(circle at 30% 30%, rgba(192, 132, 252, 0.45) 0%, rgba(77, 124, 254, 0.25) 50%, rgba(13, 16, 32, 0.8) 100%);
  border: 1.5px solid rgba(192, 132, 252, 0.5);
  box-shadow: 0 12px 34px -6px rgba(0, 0, 0, 0.65), 0 0 28px rgba(139, 92, 246, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rocket-float 4.2s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.engines-rocket-badge:hover {
  transform: scale(1.08) rotate(4deg) !important;
  box-shadow: 0 16px 42px -6px rgba(0, 0, 0, 0.75), 0 0 38px rgba(168, 85, 247, 0.55);
}

.engines-rocket-badge img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

@keyframes rocket-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(3deg);
  }
}

@media (max-width: 680px) {
  .engines-header-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .engines-rocket-badge,
  .engines-writer-badge,
  .engines-vision-badge {
    width: 96px;
    height: 96px;
  }
}

/* Section Header with Raccoon Writer Mascot */
.engines-writer-badge {
  flex-shrink: 0;
  position: relative;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  padding: 4px;
  background: radial-gradient(circle at 35% 30%, rgba(245, 165, 36, 0.45) 0%, rgba(244, 114, 182, 0.3) 50%, rgba(13, 16, 32, 0.85) 100%);
  border: 1.5px solid rgba(245, 165, 36, 0.55);
  box-shadow: 0 12px 34px -6px rgba(0, 0, 0, 0.65), 0 0 28px rgba(245, 165, 36, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: writer-float 4.6s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.engines-writer-badge:hover {
  transform: scale(1.08) rotate(-4deg) !important;
  box-shadow: 0 16px 42px -6px rgba(0, 0, 0, 0.75), 0 0 38px rgba(245, 165, 36, 0.55);
}

.engines-writer-badge img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

@keyframes writer-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(-3deg);
  }
}

/* Section Header with Raccoon Vision Mascot */
.engines-vision-badge {
  flex-shrink: 0;
  position: relative;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  padding: 4px;
  background: radial-gradient(circle at 35% 30%, rgba(6, 182, 212, 0.5) 0%, rgba(168, 85, 247, 0.35) 50%, rgba(13, 16, 32, 0.85) 100%);
  border: 1.5px solid rgba(6, 182, 212, 0.65);
  box-shadow: 0 12px 34px -6px rgba(0, 0, 0, 0.65), 0 0 28px rgba(6, 182, 212, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: vision-float 4.8s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.engines-vision-badge:hover {
  transform: scale(1.08) rotate(4deg) !important;
  box-shadow: 0 16px 42px -6px rgba(0, 0, 0, 0.75), 0 0 38px rgba(168, 85, 247, 0.6);
}

.engines-vision-badge img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

@keyframes vision-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(3deg);
  }
}

.engine-card .copy-model {
  align-self: flex-start;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.76rem;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
}

.engine-card .copy-model:hover {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.45);
  color: #f1f5f9;
}



/* Modern Engines Cards Grid (Chulas / Cool Cards matching Raccoon Precision style) */
.engines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 38px;
  perspective: 1000px;
}

.engine-card {
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.065) 0%, rgba(13, 16, 32, 0.72) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.32s ease;
  position: relative;
}

/* Playful alternating tilt like the raccoon cards */
.engines-grid .engine-card:nth-child(3n+1) {
  transform: rotate(-1.2deg);
}

.engines-grid .engine-card:nth-child(3n+2) {
  transform: rotate(0.9deg) translateY(-2px);
}

.engines-grid .engine-card:nth-child(3n) {
  transform: rotate(-0.6deg);
}

.engine-card:hover {
  transform: translateY(-10px) rotate(0deg) scale(1.025) !important;
  z-index: 10;
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow: 0 24px 46px -8px rgba(0, 0, 0, 0.7), 0 0 32px rgba(168, 85, 247, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.engine-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.engine-card-icon {
  width: 22px;
  height: 22px;
  color: #c084fc;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.25s ease, color 0.25s ease;
}

.engine-card:hover .engine-card-icon {
  transform: scale(1.1);
  color: #e9d5ff;
}

.engine-card h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.015em;
}

.engine-card-tag {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #c084fc;
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

.engine-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #cbd5e1;
  margin: 0 0 18px;
  min-height: 3.1em;
  flex: 1;
}

/* Frosted pill cloud in engine cards */
.engine-card-cloud {
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.engine-card:hover .engine-card-cloud {
  transform: scale(1.025);
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.engine-card-cloud span {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  white-space: normal;
}

@media (max-width: 768px) {
  .engines-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .engines-grid .engine-card:nth-child(3n+1),
  .engines-grid .engine-card:nth-child(3n+2),
  .engines-grid .engine-card:nth-child(3n) {
    transform: none !important;
  }
}

/* Full-width Recommendation Banner Card */
.engine-rec-banner {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(26px, 3.2vw, 38px) clamp(28px, 3.8vw, 48px);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(26, 32, 54, 0.85) 0%, rgba(15, 20, 36, 0.95) 100%);
  border: 1px solid rgba(192, 132, 252, 0.28);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.55), 0 0 24px -6px rgba(139, 92, 246, 0.15);
  margin-bottom: clamp(28px, 3.5vw, 40px);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.engine-rec-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(192, 132, 252, 0.8) 0%, rgba(99, 102, 241, 0.5) 45%, transparent 80%);
}

.engine-rec-banner .eyebrow {
  margin-bottom: 12px;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
}

.engine-rec-banner h3 {
  font-size: clamp(1.6rem, 2.3vw, 2.25rem) !important;
  font-weight: 700;
  line-height: 1.18;
  color: #ffffff;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.engine-rec-banner p {
  font-size: clamp(1.06rem, 1.25vw, 1.2rem) !important;
  line-height: 1.65;
  color: #cbd5e1;
  margin: 0;
  max-width: 1100px;
}

/* Spacing between card title and text */
.card h4 {
  margin-bottom: 14px;
  line-height: 1.35;
  font-size: 1.15rem;
}

/* Hero 3 engine mini cards */
.eng-hero-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(28px, 3.5vw, 42px);
  width: 100%;
}

.engine-card-mini {
  padding: 26px 22px 26px;
  border-radius: 20px;
  text-decoration: none;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.engine-card-mini:hover {
  transform: translateY(-6px) scale(1.015) !important;
}

.engine-card-mini .engine-card-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 8px;
}

.engine-card-mini .engine-card-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.engine-card-mini h4 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.25;
}

.engine-card-mini .engine-card-tag {
  font-size: 0.94rem;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.35;
}

.engine-card-mini p {
  font-size: 1.0rem;
  line-height: 1.62;
  color: #cbd5e1;
  margin: 0;
  flex-grow: 1;
}

/* Individual accent highlights for each trio card */
.engine-card-mini.trio-gen .engine-card-icon,
.engine-card-mini.trio-gen .engine-card-tag {
  color: #c084fc;
}

.engine-card-mini.trio-text .engine-card-icon,
.engine-card-mini.trio-text .engine-card-tag {
  color: #aabaff;
}

.engine-card-mini.trio-vision .engine-card-icon,
.engine-card-mini.trio-vision .engine-card-tag {
  color: #38bdf8;
}

@media (max-width: 900px) {
  .eng-hero-trio {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .engine-card-mini {
    min-height: 0;
  }
}