/* ============================================================================
   Back Office — component layer
   Bespoke, reusable patterns that aren't worth expressing as raw utilities:
   buttons, cards, inputs, nav, footer, the auth orbit illustration, the
   landing flow-diagram animation, package-card 3D hover.
   Layout / spacing / type / color are handled by Tailwind utilities in markup.
   Tokens come from tokens.css (CSS custom properties).
============================================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* page background with soft corner glows */
.vf-page {
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(900px 480px at 6% 4%, rgba(168,85,247,.10), transparent 55%),
    var(--bg-page);
}

/* ---------- buttons ---------- */
.btn { border:0; border-radius: var(--r-md); font:600 15px/1 var(--font-sans);
  padding: 14px 22px; display:inline-flex; align-items:center; gap:9px; justify-content:center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--grad-primary); color:#fff; box-shadow: 0 8px 20px rgba(79,70,229,.28); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(79,70,229,.36); }
.btn-solid { background: var(--primary-600); color:#fff; }
.btn-solid:hover { background: var(--primary-700); }
.btn-dark { background: var(--btn-dark); color:#fff; }
.btn-dark:hover { background:#1f232d; }
.btn-ghost { background:#fff; color: var(--primary-600); border:1.5px solid var(--primary-300); }
.btn-ghost:hover { background: var(--primary-50); }
.btn[disabled] { opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-lg { padding:16px 28px; font-size:16px; }
.btn-block { width:100%; }

/* ---------- cards ---------- */
.card { background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }

/* ---------- inputs ---------- */
.field { display:flex; flex-direction:column; gap:7px; }
.field > label { font:600 14px/1.3 var(--font-sans); color:var(--fg-1); }
.field .req { color: var(--error); }
.input {
  width:100%; border:1px solid var(--border); border-radius: var(--r-md);
  padding:13px 15px; font:400 14px/1.55 var(--font-sans); color:var(--fg-1); background:#fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--fg-4); }
.input:focus { outline:none; border-color: var(--primary-500); box-shadow:0 0 0 3px var(--primary-100); }
.input.error { border-color: var(--error); background: var(--error-bg); }
select.input { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:38px; }
.hint { font:500 13px/1.4 var(--font-sans); color:var(--fg-3); }
.errmsg { font:500 13px/1.4 var(--font-sans); color: var(--error); display:flex; align-items:center; gap:5px; margin-top:1px; }

/* ---------- icon tiles ---------- */
.tile { border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.tile-violet { background: var(--tile-violet-bg); color: var(--tile-violet-fg); }
.tile-blue   { background: var(--tile-blue-bg);   color: var(--tile-blue-fg); }
.tile-green  { background: var(--tile-green-bg);  color: var(--tile-green-fg); }
.tile-orange { background: var(--tile-orange-bg); color: var(--tile-orange-fg); }
.tile-indigo { background: var(--tile-indigo-bg); color: var(--tile-indigo-fg); }

/* ---------- badges ---------- */
.badge { font:700 12px/1 var(--font-sans); padding:6px 12px; border-radius:999px; display:inline-flex; align-items:center; }
.badge-primary { background: var(--grad-primary); color:#fff; }
.badge-solid   { background: var(--primary-600); color:#fff; }
.badge-green   { background: var(--success-bg); color: var(--success); }
.badge-pink    { background:#fce7f3; color:#be185d; }

/* ---------- top nav ---------- */
.nav { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft); }
.nav-inner { height:78px; display:flex; align-items:center; justify-content:space-between; }
.nav-brand { display:flex; align-items:center; gap:11px; font:700 23px/1 var(--font-sans); color:var(--fg-1); letter-spacing:-.02em; }
.nav-brand img { height:34px; }
.nav-links { display:flex; align-items:center; gap:34px; }
.nav-links a { font:500 15px/1 var(--font-sans); color:var(--fg-2); text-decoration:none; }
.nav-links a:hover { color: var(--primary-600); }
.nav-sep { width:1px; height:26px; background:var(--border); }
.nav-login { font:500 15px/1 var(--font-sans); color:var(--fg-1); text-decoration:none; display:inline-flex; align-items:center; gap:7px; }

/* ---------- footer ---------- */
.footer { background:#fff; border-top:1px solid var(--border-soft); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:30px; padding:54px 0 28px; }
.footer h5 { font:700 14px/1 var(--font-sans); color:var(--fg-1); margin:0 0 16px; }
.footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer a { font:400 14px/1.3 var(--font-sans); color:var(--fg-3); text-decoration:none; }
.footer a:hover { color:var(--primary-600); }
.footer-tag { font:400 14px/1.6 var(--font-sans); color:var(--fg-3); max-width:300px; margin:14px 0 0; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between;
  padding:20px 0 34px; border-top:1px solid var(--border-soft); }
.footer-social { display:flex; gap:12px; }
.soc { width:38px; height:38px; border-radius:50%; background:var(--primary-600); display:flex; align-items:center; justify-content:center; }
.soc:hover { background:var(--primary-700); }
.soc svg { width:17px; height:17px; fill:#fff; }

/* ---------- misc ---------- */
.overline { font:600 12px/1.3 var(--font-sans); text-transform:uppercase; letter-spacing:.07em; color:var(--fg-3); }
.fade-in { animation: fade .35s var(--ease) both; }
@keyframes fade { from{ transform:translateY(6px); opacity:0; } to{ transform:none; opacity:1; } }

/* ---------- container ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ===== Flow-diagram entrance (transform-only so a frozen frame still shows
   the cards; opacity is never animated -> never blank) ===== */
@keyframes flowReveal { from { transform: translateX(var(--fx, -14px)); } to { transform: none; } }
@keyframes flowRise   { from { transform: translateY(7px); }            to { transform: none; } }
@keyframes flowDraw   { from { stroke-dashoffset: 1; }                  to { stroke-dashoffset: 0; } }
@keyframes flowArc    { from { stroke-dashoffset: 1; }                  to { stroke-dashoffset: var(--to, 0); } }
@media (prefers-reduced-motion: reduce) {
  [data-flow] * { animation: none !important; }
}
@keyframes flowDashLTR { to { stroke-dashoffset: -16; } }
@keyframes drawLTR { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }
.flow-base { stroke-dasharray: 1 6; animation: flowDashLTR 1s linear infinite; }
.flow-draw { stroke-dasharray: 64; animation: drawLTR .9s var(--ease) both; }
.flow-tilt { transform-style: preserve-3d; transition: transform .25s var(--ease), box-shadow .25s var(--ease); will-change: transform; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .flow-base, .flow-draw { animation: none; }
}

/* package cards: zoom + 3D lift on hover */
.pkg-card { transform-style: preserve-3d; transition: transform .28s var(--ease), box-shadow .28s var(--ease); will-change: transform; }
.pkg-card:hover { transform: perspective(900px) translateY(-8px) rotateX(4deg) scale(1.035); box-shadow: 0 28px 56px rgba(79,70,229,.22), 0 10px 22px rgba(16,24,40,.12) !important; z-index: 5; }
@media (prefers-reduced-motion: reduce) {
  .pkg-card { transition: none; }
  .pkg-card:hover { transform: none; }
}

/* module cards on the dark band */
.mod-card { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); will-change: transform;
  box-shadow: 0 14px 30px rgba(8,12,40,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.mod-card:hover { transform: scale(1.06); border-color: rgba(255,255,255,.32);
  box-shadow: 0 24px 48px rgba(8,12,40,.40), inset 0 1px 0 rgba(255,255,255,.20); }
@media (prefers-reduced-motion: reduce) { .mod-card, .mod-card:hover { transform:none; } }

/* ===== Auth (login / forgot password) ===== */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-left { display: flex; align-items: center; justify-content: center; padding: 48px 40px; }
.auth-form { width: 100%; max-width: 430px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 16px; }
.auth-logo img { height: 38px; }
.auth-title { font: 700 24px/1.25 var(--font-sans); color: var(--fg-1); text-align: center; margin: 0 0 22px; letter-spacing: -.01em; }
.auth-lead { font: 400 16px/1.6 var(--font-sans); color: var(--fg-3); margin: 0 0 26px; }
.pw-wrap { position: relative; }
.pw-toggle { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; padding: 0; display: flex; }
.link-violet { color: var(--primary-600); font-weight: 600; text-decoration: none; }
.link-violet:hover { text-decoration: underline; }

/* right illustration panel */
.auth-right { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 70% 18%, #16215c 0%, #0b1234 56%, #070b22 100%); }
.auth-right .wave { position: absolute; width: 69px; height: auto; opacity: .9; }
.orbit { position: absolute; top: 50%; left: 50%; width: 462px; height: 462px; transform: translate(-50%,-50%); }
.orbit-ring { position: absolute; inset: 0; border: 2.5px dashed rgba(255,255,255,.5); border-radius: 50%; }
.orbit-node { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; width: 92px; }
.orbit-badge { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.orbit-label { font: 600 11px/1.3 var(--font-sans); color: #c7d0f0; text-align: center; }
.auth-photo { position: absolute; transform: translate(-50%,-50%); border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(130,140,255,.55); box-shadow: 0 0 0 6px rgba(80,90,200,.16), 0 16px 40px rgba(0,0,0,.45); }
.auth-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.auth-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; }

@keyframes authFloat { 0%, 100% { transform: translate(-50%,-50%) translateY(0); } 50% { transform: translate(-50%,-50%) translateY(-10px); } }
@keyframes authSpin { to { transform: rotate(360deg); } }
.orbit-ring { animation: authSpin 90s linear infinite; }
.orbit-node, .auth-photo, .auth-core { animation: authFloat 4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .orbit-ring, .orbit-node, .auth-photo, .auth-core { animation: none; }
}
@media (max-width: 940px) {
  .auth { grid-template-columns: 1fr; }
  .auth-right { display: none; }
}