/* Cooper Cost Consulting — coming-soon holding page. Dark, IBM Plex Sans, brand slate accent. */
:root {
  --bg: #14181e;
  --bg-2: #1b212a;
  --panel: #1b212a;
  --line: #2b323d;
  --text: #ece9e3;
  --muted: #8e99a6;
  --accent: #7d9db7;
  --accent-soft: #9db9d0;
  --radius: 16px;
  --ease: cubic-bezier(.7,0,.2,1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: radial-gradient(130% 130% at 50% 0%, #1e242d 0%, var(--bg) 60%);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.stage { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }

.card { width: min(460px, 100%); perspective: 1600px; }
.card__inner { display: grid; grid-template: 1fr / 1fr; transform-style: preserve-3d; transition: transform .85s var(--ease); }
.card.is-flipped .card__inner { transform: rotateY(180deg); }

.face {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel), var(--bg-2));
  box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden;
}
.face--front {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  cursor: pointer; color: var(--text); font: inherit; padding: 3.2rem 2rem; text-align: center; transition: border-color .3s;
}
.face--front:hover { border-color: var(--accent); }
.face--front:hover .brand { color: var(--accent-soft); }
.face--front:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kicker { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.brand { font-size: clamp(1.7rem, 7vw, 2.5rem); font-weight: 500; line-height: 1.15; text-wrap: balance; transition: color .3s var(--ease); }
.rule { width: 46px; height: 2px; background: var(--accent); border-radius: 2px; }
.hint { font-size: .76rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.face--back { transform: rotateY(180deg); padding: 1.7rem; display: flex; flex-direction: column; }
.back-close { align-self: flex-end; margin: -.4rem -.4rem .4rem 0; width: 30px; height: 30px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.5rem; line-height: 1; transition: color .2s; }
.back-close:hover { color: var(--accent); }
.form__title { margin: 0 0 1rem; font-size: 1.3rem; font-weight: 500; }
.field { margin-bottom: .85rem; }
.field label { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.field input, .field textarea {
  width: 100%; background: #11151b; border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font: inherit; padding: .65rem .8rem; resize: vertical; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 90px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #d4654f; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit { width: 100%; margin-top: .5rem; padding: .8rem 1rem; border: 0; border-radius: 999px; background: var(--accent); color: #0d1116; font: inherit; font-weight: 600; cursor: pointer; transition: background .2s, transform .15s var(--ease); }
.submit:hover { background: var(--accent-soft); }
.submit:active { transform: translateY(1px); }
.submit:disabled { opacity: .6; cursor: default; }
.form__msg { margin: .7rem 0 0; font-size: .85rem; color: var(--muted); min-height: 1em; }
.form__msg.is-error { color: #e89a84; }
.success { margin: auto 0; text-align: center; padding: 1.5rem .5rem; }
.success__tick { width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #0d1116; font-size: 1.6rem; font-weight: 700; }
.success p { color: var(--muted); margin: 0; }

@media (max-width: 380px) { .face--front { padding: 2.4rem 1.25rem; } .face--back { padding: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .card__inner { transition: none; } }