:root{
  --bg: #f6f7f8;
  --card-w: 560px;
  --card-h: 220px;
  --radius: 18px;
  --accent: #0071e3;      /* Apple-like blue */
  --muted: #6b6b6b;
  --text: #0b1220;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", sans-serif;
}

/* layout */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(800px 400px at 10% 10%, #ffffff 0%, transparent 36%),
    var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* wrapper */
.stage{width:100%;display:flex;align-items:center;justify-content:center;padding:40px}
.card-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}

/* container (tilt) */
.card-container{
  width:var(--card-w);
  height:var(--card-h);
  perspective:1400px;
  border-radius:var(--radius);
  will-change:transform;
}

/* inner (flip + surface depth) */
.card-inner{
  width:100%;
  height:100%;
  border-radius:inherit;
  position:relative;
  transform-style:preserve-3d;
  transition: transform .66s cubic-bezier(.2,.9,.2,1);
  box-shadow: 0 30px 80px rgba(15,23,42,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,252,0.98));
  overflow:hidden;
  cursor:pointer;
}

/* flipped class toggled by JS */
.card-inner.is-flipped{ transform: rotateY(180deg); }

/* faces: add small translateZ to create surface depth like first version */
.card-face{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  padding:20px; border-radius:inherit;
  transform: translateZ(18px);
}

/* front */
.card-front{ background:#ffffff; }
.front-inner{ display:flex; align-items:center; justify-content:center; width:100%; }
.front-name{ font-size:48px; margin:0; font-weight:700; letter-spacing:-0.02em; }

/* back: grid 3 columns x 2 rows */
.card-back{ background: linear-gradient(180deg,#fbfdff,#f3f6ff); transform:rotateY(180deg); }
.back-grid{
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px 18px;
  padding:6px 18px;
}
.service{
  position:relative;
  padding-left:18px;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  display:flex;
  align-items:center;
  min-height:36px;
}
.service::before{
  content:'';
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  box-shadow:0 6px 14px rgba(10,132,255,0.12);
}

/* controls */
.controls{ display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:560px }
.apple-btn{
  background:#ffffff;
  color:var(--accent);
  padding:12px 28px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,0.06);
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 12px 36px rgba(11,18,32,0.08);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s;
}
.apple-btn:hover{ transform:translateY(-4px); box-shadow: 0 22px 60px rgba(11,18,32,0.10); }
.apple-btn:active{ transform:translateY(-1px); }
.email{ color:var(--muted); font-size:13px; }

@media (max-width:720px){
  :root{ --card-w:88vw; --card-h:160px; }
  .front-name{ font-size:28px }
  .back-grid{ gap:6px 12px; }
  .service{ font-size:13px; min-height:28px; padding-left:14px; }
}

@media (prefers-reduced-motion: reduce){
  .card-inner{ transition:none !important }
  .card-container{ transition:none !important; transform:none !important }
  .apple-btn{ transition:none !important }
}