/* Variant: Flip — six cards flip over on hover or focus to reveal the details. Dark navy. */
:root {
  --bg: #0b1024; --surface: #141a33; --muted: #0f1530; --ink: #eef1fb; --ink-2: #9aa3c2; --line: #232b4d;
  --accent: #7c9cff; --accent-ink: #0b1024; --accent-soft: #1a2550; --green-soft: #1a2245; --amber-soft: #2a2438;
  --night: #141a33; --night-2: #1c2344; --night-line: rgba(255, 255, 255, 0.09); --night-ink: #eef1fb; --night-ink-2: #9aa3c2;
  --ui-bg: #1b2240; --ui-line: #28305a; --ui-fill: #333c66; --ui-fill-2: #20284a; --ui-strong: #eef1fb;
  --ui-accent: #7c9cff; --ui-img: #23305e; --ui-tint-a: #2d3a7a; --ui-tint-b: #4a2a4a; --ui-tint-c: #4a3a2a;
  color-scheme: dark;
}
.fp-inner-wrap { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
.fp-text { display: grid; gap: 1.5rem 4rem; }
.fp-title { max-width: 14ch; font-size: clamp(3rem, 6.6vw, 6.25rem); line-height: 0.96; letter-spacing: -0.055em; }
@media (min-width: 60em) { .fp-text { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .fp-title { grid-column: 1 / -1; } }
.fp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 64em) { .fp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fp-card { height: clamp(11rem, 18vw, 14rem); perspective: 1200px; border-radius: 24px; }
.fp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.fp-inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fp-card:hover .fp-inner, .fp-card:focus .fp-inner { transform: rotateY(180deg); }
.fp-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2.4vw, 28px); border-radius: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fp-front h2 { font-size: clamp(1.25rem, 2.2vw, 1.875rem); letter-spacing: -0.035em; line-height: 1.05; color: #ffffff; hyphens: manual; }
.fp-back { transform: rotateY(180deg); justify-content: flex-start; gap: 0.6rem; background: var(--surface); border: 1px solid var(--line); }
.fp-back h3 { font-size: 1.125rem; }
.fp-back p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; }
.fp-shape { width: 2.75rem; height: 2.75rem; border-radius: 14px; background: rgba(255, 255, 255, 0.3); }
.fp-card--web .fp-front { background: linear-gradient(150deg, #5b7cff, #2f45c9); }
.fp-card--crm .fp-front { background: linear-gradient(150deg, #ff7d8f, #c43760); }
.fp-card--doc .fp-front { background: linear-gradient(150deg, #ffbf5a, #e0751f); }
.fp-card--con .fp-front { background: linear-gradient(150deg, #a98bff, #6440d8); }
.fp-card--coa .fp-front { background: linear-gradient(150deg, #5fd0ff, #2b7fd6); }
.fp-card--prd .fp-front { background: linear-gradient(150deg, #ff9ad6, #b0408f); }
.fp-card--web .fp-shape { border-radius: 8px 8px 14px 14px; } .fp-card--crm .fp-shape { border-radius: 50%; }
.fp-card--doc .fp-shape { border-radius: 6px; clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }
.fp-card--con .fp-shape { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border-radius: 0; }
.fp-card--coa .fp-shape { border-radius: 50% 50% 14px 14px; } .fp-card--prd .fp-shape { border-radius: 14px 50% 14px 50%; }
.fp-hint { margin-top: 1rem; font-size: 0.875rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .fp-inner { transition: none; } }
.tile--dark { background: linear-gradient(160deg, #1a2550, #141a33 70%); }