/* ArkByTech shared look, from design-note.md sections 2, 5, 11, 12, 13 and the global UI conventions.
   Tokens first; mockups use these and never restyle a button or card per screen. */
@property --spin { syntax:'<angle>'; inherits:false; initial-value:0deg; }

:root {
  --violet:#6e42d8; --violet-deep:#4f2cb0; --violet-soft:#b79cff; --violet-tint:#eee8fc; --on-violet:#fff;
  --ink:#0a0b0e; --ink-2:#3a3d48; --muted:#5b5f6c;
  --page:#f3f5f7; --card:#fff; --line:#e3e5ee;
  --ok:#14804a; --ok-tint:#e2f5ea; --warn:#a4620a; --warn-tint:#fdf0d9; --bad:#b4302a; --bad-tint:#fbe6e4;
  /* The dark scene, same role as the sign-in scene in section 12: violet only, never to blue */
  --scene-1:#120d26; --scene-2:#1d1540; --scene-3:#35247a;
  --scene:linear-gradient(155deg,var(--scene-1) 0%,var(--scene-2) 55%,var(--scene-3) 100%);
  --on-scene:#f3f5f7; --on-scene-2:#c9c5dc;
  --r-btn:12px; --r-input:12px; --r-card:18px; --r-tile:22px; --r-device:26px;
  --float:0 18px 44px -14px rgba(32,16,84,.32), 0 4px 12px -4px rgba(32,16,84,.16);
  --float-lg:0 34px 80px -22px rgba(32,16,84,.5), 0 8px 22px -8px rgba(32,16,84,.25);
  --rest:0 1px 2px rgba(20,12,50,.05);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* Buttons: rounded, one primary per section, lift and soft glow on hover (global UI rules) */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border:0; border-radius:var(--r-btn); font:inherit; font-weight:700; white-space:nowrap; text-decoration:none; cursor:pointer; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s; }
.btn:active { transform:translateY(0) scale(.98); }
.btn:focus-visible, .ghost:focus-visible { outline:3px solid var(--violet-soft); outline-offset:3px; }
.btn-primary { background:var(--violet); color:var(--on-violet); box-shadow:0 10px 24px -10px rgba(110,66,216,.75); }
.btn-primary:hover { transform:translateY(-2px); background:var(--violet-deep); box-shadow:0 16px 32px -10px rgba(110,66,216,.95), 0 0 26px rgba(110,66,216,.5); }
.on-scene .btn-primary, .btn-primary.bright { background:var(--violet-soft); color:#150d30; box-shadow:0 10px 30px -8px rgba(183,156,255,.7); }
.on-scene .btn-primary:hover, .btn-primary.bright:hover { background:#c9b4ff; box-shadow:0 16px 40px -8px rgba(183,156,255,.95), 0 0 32px rgba(183,156,255,.65); }
.ghost { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 16px; border:0; border-radius:var(--r-btn); background:transparent; color:inherit; font:inherit; font-weight:600; white-space:nowrap; text-decoration:none; cursor:pointer; transition:background-color .18s; }
.ghost:hover { background:rgba(110,66,216,.1); }
.on-scene .ghost:hover { background:rgba(255,255,255,.1); }

/* The one hero action: a light circles its border and a shine passes, landing screens only */
.btn-live { position:relative; isolation:isolate; overflow:hidden; }
.btn-live::before { content:''; position:absolute; inset:-2px; z-index:-2; border-radius:inherit; background:conic-gradient(from var(--spin),transparent 0 70%,#fff 86%,transparent 100%); animation:ark-spin 3.4s linear infinite; }
.btn-live::after { content:''; position:absolute; inset:2px; z-index:-1; border-radius:calc(var(--r-btn) - 2px); background:inherit; background-color:var(--violet); }
.on-scene .btn-live::after, .btn-live.bright::after { background-color:var(--violet-soft); }
@keyframes ark-spin { to { --spin:360deg; } }

/* Cards: border at rest; a real shadow only for what floats */
.card { background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--rest); }
.card.floaty, .floaty { box-shadow:var(--float); }
.lift { transition:transform .22s var(--ease), box-shadow .22s var(--ease); }
.lift:hover { transform:translateY(-3px); box-shadow:var(--float); }
.chip { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 13px; border-radius:999px; font-size:14px; font-weight:600; background:var(--violet-tint); color:var(--violet-deep); white-space:nowrap; }
.on-scene .chip { background:rgba(183,156,255,.16); color:#e4dbff; }
.chip svg { width:16px; height:16px; flex:none; }
input, select, textarea { border-radius:var(--r-input); }

/* Scene: sweeping light streaks as in section 12 option B, a thin line plus a wide blurred band */
.on-scene { background:var(--scene); color:var(--on-scene); }
.streaks { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.streaks i { position:absolute; left:-20%; width:140%; transform:rotate(-14deg); }
.streaks i:nth-child(1) { top:30%; height:160px; background:rgba(110,66,216,.32); filter:blur(60px); }
.streaks i:nth-child(2) { top:38%; height:1px; background:rgba(183,156,255,.7); }
.streaks i:nth-child(3) { top:72%; height:220px; background:rgba(183,156,255,.14); filter:blur(70px); }
.streaks i:nth-child(4) { top:80%; height:1px; background:rgba(183,156,255,.3); }

/* Devices: the app screens, tilted and floating, like the DevPOS banner */
.device { position:relative; background:#14111f; padding:10px; border-radius:var(--r-device); box-shadow:var(--float-lg); }
.device > .screen { border-radius:calc(var(--r-device) - 9px); overflow:hidden; background:#f4f5fa; color:var(--ink); }
.device.phone { padding:7px; border-radius:30px; }
.device.phone > .screen { border-radius:24px; }
.tilt-l { transform:perspective(1400px) rotateY(14deg) rotateX(4deg) rotateZ(-2deg); }
.tilt-r { transform:perspective(1400px) rotateY(-14deg) rotateX(4deg) rotateZ(2deg); }
.drift { animation:ark-drift 6s ease-in-out infinite; }
.drift.slow { animation-duration:8s; animation-delay:-3s; }
@keyframes ark-drift { 50% { translate:0 -10px; } }
.callout { position:absolute; background:#fff; color:var(--ink); border-radius:16px; padding:12px 16px; box-shadow:var(--float); }
.callout small { display:block; font-size:13px; color:var(--muted); }
.callout b { display:block; font-size:clamp(17px,1.9vw,24px); color:var(--ok); white-space:nowrap; }

/* App screen fragments */
.ui { font:14px/1.35 Manrope,system-ui,sans-serif; padding:14px; display:grid; gap:10px; text-align:left; }
.ui .h { display:flex; justify-content:space-between; align-items:center; gap:8px; font-weight:800; font-size:15px; }
.ui .sample { font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap; }
.ui .tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ui .t, .ui .box { background:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 1px 3px rgba(30,20,70,.08); min-width:0; }
.ui .t span, .ui .box > span { display:block; font-size:12px; color:var(--muted); }
.ui .t b { display:block; font-size:clamp(15px,1.5vw,20px); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui .t em { display:block; font-style:normal; font-size:12px; color:var(--ok); font-weight:700; }
.ui .two { display:grid; grid-template-columns:3fr 2fr; gap:8px; }
.ui .bars { display:flex; align-items:flex-end; gap:6px; height:84px; margin-top:6px; }
.ui .bars i { flex:1; border-radius:6px 6px 2px 2px; background:#cdbdf6; transform-origin:bottom; animation:ark-grow .6s var(--ease) backwards; animation-delay:calc(.2s + var(--c,0) * 40ms); }
.ui .bars i:last-child { background:var(--violet); }
@keyframes ark-grow { from { transform:scaleY(0); } }
.ui .row { display:flex; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:8px; }
.ui .row:nth-child(even) { background:#f5f2fd; }
.ui .tag { font-size:12px; font-weight:700; padding:1px 8px; border-radius:999px; background:var(--warn-tint); color:var(--warn); white-space:nowrap; }
.ui .tag.bad { background:var(--bad-tint); color:var(--bad); }
.ui .tag.ok { background:var(--ok-tint); color:var(--ok); }
.ui .steps { display:flex; justify-content:space-between; position:relative; margin:6px 0 2px; }
.ui .steps::before { content:''; position:absolute; left:8px; right:8px; top:7px; height:2px; background:#dcd6ef; }
.ui .steps span { position:relative; font-size:12px; color:var(--muted); display:grid; justify-items:center; gap:4px; }
.ui .steps span::before { content:''; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #cdbdf6; }
.ui .steps span.on { color:var(--violet-deep); font-weight:700; }
.ui .steps span.on::before { background:var(--violet); border-color:var(--violet); }
.ui.dark { background:#17132b; color:#f3f5f7; }
.ui.dark .ticket { background:#241d42; border-left:4px solid var(--violet-soft); border-radius:12px; padding:10px 12px; }
.ui.dark .ticket b { font-size:17px; }
.ui.dark .sample { color:#b9b4d0; }
.ui .prof { display:grid; justify-items:center; gap:6px; text-align:center; }
.ui .prof .av { width:64px; height:64px; border-radius:50%; background:var(--violet); color:#fff; display:grid; place-items:center; font-weight:800; font-size:22px; }
.ui .acts3 { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.ui .acts3 span { background:var(--violet-tint); color:var(--violet-deep); border-radius:10px; padding:9px 0; text-align:center; font-weight:700; font-size:13px; }
.ui .save { background:var(--violet); color:#fff; border-radius:10px; padding:10px; text-align:center; font-weight:700; }

/* NFC card with a passing sheen */
.nfc-card { position:relative; aspect-ratio:1.586; border-radius:18px; overflow:hidden; background:linear-gradient(135deg,#221945,#120d26 70%); color:#f3f5f7; box-shadow:var(--float-lg); padding:7%; display:flex; flex-direction:column; justify-content:space-between; }
.nfc-card::after { content:''; position:absolute; inset:-40% -60%; background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%); animation:ark-sheen 5s ease-in-out infinite; }
@keyframes ark-sheen { from { transform:translateX(-40%); } 60%, to { transform:translateX(40%); } }

/* Page enter, section 13: fade and rise, backwards fill only */
.rise { animation:ark-up .55s var(--ease) backwards; animation-delay:calc(var(--i,0) * 70ms); }
.js-reveal { opacity:0; transform:translateY(16px); }
.js-reveal.shown { opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease); transition-delay:calc(var(--i,0) * 70ms); }
@keyframes ark-up { from { opacity:0; transform:translateY(14px); } }

@media (max-width:640px) { .ui .two { grid-template-columns:minmax(0,1fr); } }
@media (pointer:coarse) { .btn, .ghost { min-height:48px; } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js-reveal { opacity:1; transform:none; }
}