:root {
    --red: #E2231A;
    --red-dark: #B81810;
    --ink: #1a1a1a;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: "Helvetica Neue", Arial, "Segoe UI", sans-serif;
    background: #fdfdfd;
    color: var(--ink);
    overflow-x: hidden;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
  }

  /* Decorative background swoosh, echoing the logo's motion lines */
  .bg-swoosh {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }
  .bg-swoosh svg {
    position: absolute;
    opacity: 0.05;
  }
  .bg-swoosh .s1 {
    top: -10%;
    right: -15%;
    width: 60vw;
    min-width: 500px;
    animation: drift 22s ease-in-out infinite alternate;
  }
  .bg-swoosh .s2 {
    bottom: -15%;
    left: -20%;
    width: 55vw;
    min-width: 450px;
    transform: rotate(180deg);
    animation: drift 26s ease-in-out infinite alternate-reverse;
  }
  @keyframes drift {
    from { transform: translate(0, 0) rotate(0deg); }
    to   { transform: translate(-20px, 20px) rotate(3deg); }
  }
  .bg-swoosh .s2 { transform-origin: center; }

  .card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
    overflow: hidden;
    position: relative;
  }

  .card-top {
    padding: 44px 36px 28px;
    text-align: center;
    position: relative;
  }

  .logo {
    width: 108px;
    height: auto;
    opacity: 0;
    transform: translateY(-16px) scale(0.9);
    animation: fadeInDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
    filter: drop-shadow(0 6px 14px rgba(226, 35, 26, 0.18));
  }

  .name {
    margin: 22px 0 2px;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
  }

  .role {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--red);
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.58s forwards;
  }

  .practice {
    margin-top: 4px;
    font-size: 0.85rem;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeIn 0.6s ease 0.7s forwards;
  }

  .divider {
    height: 4px;
    background: linear-gradient(90deg, var(--red), var(--red-dark));
    transform: scaleX(0);
    transform-origin: left;
    animation: growLine 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards;
  }

  .contact {
    padding: 26px 36px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .contact a, .contact .addr {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 10px;
    opacity: 0;
    transform: translateX(-12px);
    animation: fadeInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .contact a:hover {
    background: #fdf1f0;
    transform: translateX(2px);
  }
  .contact .icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fdf1f0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contact .icon svg {
    width: 17px;
    height: 17px;
    stroke: var(--red);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .row1 { animation-delay: 0.95s; }
  .row2 { animation-delay: 1.05s; }
  .row3 { animation-delay: 1.15s; }
  .row4 { animation-delay: 1.25s; }
  .row5 { animation-delay: 1.35s; }

  .services {
    margin: 14px 24px 32px;
    padding: 20px 24px;
    background: linear-gradient(160deg, #fff6f5, #fff);
    border: 1px solid #fbe4e2;
    border-radius: 14px;
    opacity: 0;
    animation: fadeIn 0.7s ease 1.5s forwards;
  }

  .services h2 {
    margin: 0 0 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red);
  }

  .services ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .services li {
    font-size: 0.8rem;
    font-weight: 500;
    color: #555;
    background: #fff;
    border: 1px solid #f0d9d7;
    padding: 5px 12px;
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.85);
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  .services li:nth-child(1)  { animation-delay: 1.65s; }
  .services li:nth-child(2)  { animation-delay: 1.70s; }
  .services li:nth-child(3)  { animation-delay: 1.75s; }
  .services li:nth-child(4)  { animation-delay: 1.80s; }
  .services li:nth-child(5)  { animation-delay: 1.85s; }
  .services li:nth-child(6)  { animation-delay: 1.90s; }
  .services li:nth-child(7)  { animation-delay: 1.95s; }
  .services li:nth-child(8)  { animation-delay: 2.00s; }
  .services li:nth-child(9)  { animation-delay: 2.05s; }
  .services li:nth-child(10) { animation-delay: 2.10s; }

  .band {
    background: var(--red);
    color: #fff;
    text-align: center;
    padding: 16px;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    opacity: 0;
    animation: fadeIn 0.6s ease 2.25s forwards;
  }

  @keyframes fadeInDown {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInLeft {
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fadeIn {
    to { opacity: 1; }
  }
  @keyframes popIn {
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes growLine {
    to { transform: scaleX(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-delay: 0s !important;
    }
  }

  @media (max-width: 380px) {
    .card-top { padding: 36px 24px 24px; }
    .contact { padding: 22px 24px 8px; }
    .services { margin: 14px 16px 28px; padding: 16px; }
  }