/* Kips Scanner mockup-accurate home layout.
   This file keeps the scanner engine simple while making the first screen match the provided premium concept image. */

body {
  background:
    radial-gradient(circle at 34% 18%, rgba(0, 238, 255, .12), transparent 28%),
    radial-gradient(circle at 77% 30%, rgba(20, 62, 100, .28), transparent 34%),
    linear-gradient(120deg, #02050b 0%, #050b13 46%, #02050b 100%);
}

.artboard-shell {
  width: min(100%, 1500px);
  min-height: 100vh;
  padding: 6px 6px calc(88px + var(--safe-bottom));
}

.home-artboard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(360px, .98fr);
  min-height: calc(100vh - 12px);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(97, 203, 255, .1);
  background: rgba(1, 6, 12, .72);
  box-shadow: 0 40px 140px rgba(0, 0, 0, .66), inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.showcase-panel {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(22px, 4vw, 70px) clamp(14px, 3vw, 36px) 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 26%, rgba(0, 238, 255, .16), transparent 25%),
    radial-gradient(circle at 50% 72%, rgba(0, 238, 255, .09), transparent 32%),
    linear-gradient(180deg, rgba(3, 11, 20, .45), rgba(0, 2, 6, .92));
}

.showcase-panel::before,
.showcase-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.showcase-panel::before {
  left: -15%;
  right: -15%;
  top: 26%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 238, 255, .92), #f4ffff, rgba(0, 238, 255, .86), transparent);
  box-shadow: 0 0 22px rgba(0, 238, 255, .86), 0 0 80px rgba(0, 238, 255, .38);
  opacity: .9;
  animation: beamBreath 2.8s ease-in-out infinite;
}

.showcase-panel::after {
  left: 50%;
  top: 7%;
  width: min(660px, 82vw);
  height: min(660px, 82vw);
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(0, 238, 255, .22) 0 1px, transparent 2px 50px),
    conic-gradient(from 0deg, transparent, rgba(0, 238, 255, .12), transparent, rgba(0, 122, 255, .1), transparent);
  filter: blur(.2px);
  opacity: .42;
  animation: slowSpin 30s linear infinite;
}

@keyframes beamBreath {
  0%, 100% { opacity: .45; transform: scaleX(.96); }
  50% { opacity: 1; transform: scaleX(1.02); }
}

@keyframes slowSpin { to { transform: translateX(-50%) rotate(360deg); } }

.showcase-brand {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 520px;
  text-align: center;
  perspective: 900px;
}

.showcase-logo {
  width: min(360px, 42vw);
  height: min(360px, 42vw);
  max-height: 360px;
  object-fit: contain;
  animation: logoPremiumPulse 1s ease-in-out infinite, logoFloat3d 6s ease-in-out infinite;
}

.showcase-halo {
  top: 50%;
  width: min(370px, 44vw);
  height: min(370px, 44vw);
  max-width: 370px;
  max-height: 370px;
  transform: translateY(-58%);
  opacity: .8;
}

.showcase-fallback {
  width: 320px;
  height: 320px;
  margin: 0;
}

@keyframes logoPremiumPulse {
  0%, 100% {
    transform: scale(1) translateZ(0);
    filter: drop-shadow(0 0 15px rgba(0, 238, 255, .48)) drop-shadow(0 28px 42px rgba(0, 0, 0, .9));
  }
  50% {
    transform: scale(1.035) translateZ(26px);
    filter: drop-shadow(0 0 38px rgba(0, 238, 255, .95)) drop-shadow(0 34px 54px rgba(0, 0, 0, .92));
  }
}

@keyframes logoFloat3d {
  0%, 100% { rotate: 0 1 0 -4deg; }
  50% { rotate: 0 1 0 5deg; }
}

.showcase-brand h1 {
  margin: 6px 0 0;
  color: #cbd4dc;
  font-size: clamp(64px, 8vw, 116px);
  line-height: .82;
  letter-spacing: .08em;
  font-weight: 900;
  text-shadow:
    0 1px 0 #fff,
    0 10px 0 rgba(0, 0, 0, .13),
    0 28px 44px rgba(0, 0, 0, .92),
    0 0 28px rgba(0, 238, 255, .18);
}

.showcase-brand h1 span {
  display: block;
  margin-top: 24px;
  color: var(--cyan);
  font-size: .32em;
  letter-spacing: .42em;
  text-indent: .42em;
  text-shadow: 0 0 20px rgba(0, 238, 255, .9), 0 0 44px rgba(0, 238, 255, .38);
}

.showcase-brand p {
  margin: 30px 0 18px;
  color: var(--cyan);
  font-size: clamp(16px, 1.7vw, 22px);
  text-shadow: 0 0 18px rgba(0, 238, 255, .7);
}

.showcase-loader {
  width: min(445px, 58vw);
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(20, 142, 163, .2);
  box-shadow: inset 0 0 0 1px rgba(0, 238, 255, .15), 0 0 28px rgba(0, 238, 255, .12);
}

.showcase-loader span {
  display: block;
  width: 52%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--cyan), #efffff, var(--cyan), transparent);
  box-shadow: 0 0 26px rgba(0, 238, 255, .96);
  animation: loadSweep 1.25s ease-in-out infinite;
}

.phone-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 16px;
  align-items: end;
}

.phone-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(128, 222, 255, .22);
  background: linear-gradient(180deg, rgba(13, 29, 44, .86), rgba(2, 9, 17, .96));
  box-shadow: 0 26px 70px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(255, 255, 255, .03);
  padding: 16px;
}

.phone-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(0, 238, 255, .08), transparent);
  transform: translateX(-100%);
  animation: cardShine 5s ease-in-out infinite;
}

@keyframes cardShine {
  0%, 44% { transform: translateX(-110%); opacity: 0; }
  55% { opacity: 1; }
  78%, 100% { transform: translateX(110%); opacity: 0; }
}

.phone-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 38px;
  margin-bottom: 22px;
  color: #f2fbff;
  font-size: 13px;
  letter-spacing: .04em;
}

.ghost-icon {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  color: #e9f8ff;
  background: transparent;
}

.phone-actions {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  margin-top: 82px;
}

.mock-action {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  min-height: 76px;
  border-radius: 9px;
  border: 1px solid rgba(142, 218, 255, .14);
  color: #f3fbff;
  background: rgba(18, 34, 51, .92);
  text-align: left;
  cursor: pointer;
}

.mock-action.primary {
  border-color: rgba(0, 238, 255, .48);
  background: linear-gradient(135deg, rgba(0, 238, 255, .52), rgba(0, 107, 132, .78));
  box-shadow: 0 0 24px rgba(0, 238, 255, .16);
}

.mock-action span {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-left: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 238, 255, .38);
  color: var(--cyan);
  box-shadow: inset 0 0 20px rgba(0, 238, 255, .08);
}

.mock-action b { font-size: 14px; }
.mock-action small { color: #b2c1ca; font-size: 11px; }

.mini-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(132, 229, 255, .08);
  background: rgba(1, 8, 15, .65);
}

.mini-bottom button {
  min-height: 58px;
  border: 0;
  color: #778794;
  background: transparent;
}

.mini-bottom button span { display: block; margin-top: 4px; font-size: 11px; }
.mini-bottom .active { color: var(--cyan); }

.doc-preview {
  position: relative;
  height: 278px;
  margin-top: 35px;
  overflow: hidden;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg, #171f20 0 9px, #d9d0c0 10px 12px, #211c19 13px 20px),
    linear-gradient(120deg, #ded8ca, #5d4733);
  transform: perspective(450px) rotateX(6deg) rotateZ(-2deg);
  box-shadow: inset 0 0 0 2px rgba(0, 238, 255, .08), 0 24px 38px rgba(0, 0, 0, .48);
}

.doc-preview span {
  position: absolute;
  inset: 22px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top/42px 4px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left top/4px 42px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right top/42px 4px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right top/4px 42px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom/42px 4px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom/4px 42px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right bottom/42px 4px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right bottom/4px 42px no-repeat;
  filter: drop-shadow(0 0 8px rgba(0, 238, 255, .9));
}

.doc-preview i {
  position: absolute;
  left: 0;
  right: 0;
  top: 35%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 238, 255, .92), transparent);
  box-shadow: 0 0 14px rgba(0, 238, 255, .8);
  animation: scanMove 2s ease-in-out infinite;
}

.fake-shutter {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 66px;
  height: 66px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 4px solid rgba(0, 238, 255, .86);
  background: radial-gradient(circle, #fff 0 46%, rgba(0, 238, 255, .2) 48%);
  box-shadow: 0 0 24px rgba(0, 238, 255, .55);
}

.processing-preview-card {
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
}

.mini-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 166px;
  height: 166px;
  margin: 50px auto 18px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 24px, rgba(0,238,255,.16) 25px 26px),
    conic-gradient(from 0deg, rgba(0,238,255,.8), transparent, rgba(0,238,255,.55), transparent);
  animation: haloSpin 6s linear infinite;
}

.mini-orb img {
  width: 86px;
  height: 86px;
  border-radius: 50%;
}

.processing-preview-card strong { margin-top: 10px; }
.processing-preview-card small { margin-top: 6px; color: var(--muted); }
.processing-preview-card em { margin-top: 12px; color: var(--cyan); font-style: normal; font-weight: 800; }
.mini-progress {
  width: 85%;
  height: 6px;
  overflow: hidden;
  margin-top: 28px;
  border-radius: 999px;
  background: rgba(0, 238, 255, .12);
}
.mini-progress span {
  display: block;
  width: 75%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00a8ff, #00eaff);
  box-shadow: 0 0 16px rgba(0, 238, 255, .7);
}

.sample-result {
  min-height: 226px;
  padding: 16px;
  margin-top: 22px;
  border-radius: 11px;
  border: 1px solid rgba(142, 218, 255, .13);
  color: #eaf4f8;
  background: rgba(2, 10, 18, .74);
  font-size: 14px;
  line-height: 1.45;
}

.mock-copy,
.mock-share {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border-radius: 9px;
  border: 0;
  color: #06222a;
  font-weight: 800;
  background: linear-gradient(135deg, #6effff, #00a8ff);
}

.mock-share {
  color: #dfefff;
  border: 1px solid rgba(142, 218, 255, .13);
  background: rgba(13, 27, 43, .86);
}

.readme-panel {
  position: relative;
  overflow: hidden;
  padding: 24px 24px 18px;
  border-left: 1px solid rgba(142, 218, 255, .1);
  background: linear-gradient(180deg, rgba(5, 12, 21, .94), rgba(2, 7, 13, .98));
}

.readme-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 0%, rgba(0,238,255,.08), transparent 32%);
  pointer-events: none;
}

.readme-panel > * { position: relative; z-index: 1; }
.readme-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(160, 219, 255, .1);
  color: #dfefff;
  font-weight: 800;
  letter-spacing: .05em;
}
.readme-top i { opacity: .22; font-style: normal; }
.readme-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 26px 0 10px;
}
.readme-title img { width: 58px; height: 58px; object-fit: contain; }
.readme-title h2 { margin: 0 0 4px; font-size: clamp(28px, 2.8vw, 42px); }
.readme-title p { margin: 0; color: #b6c5cf; }
.badges { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 30px; }
.badges span {
  padding: 5px 10px;
  border-radius: 7px;
  color: #eefaff;
  background: rgba(118, 136, 151, .32);
  font-size: 12px;
  font-weight: 800;
}
.badges span:nth-child(3) { background: rgba(31, 172, 83, .78); }
.badges span:nth-child(4) { background: rgba(117, 80, 200, .82); }
.readme-section { margin: 26px 0; }
.readme-section h3 { margin: 0 0 14px; font-size: 22px; }
.readme-section ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: #d9e7ee; }
.readme-section pre {
  overflow: auto;
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(142, 218, 255, .14);
  background: rgba(7, 17, 29, .84);
  color: #e8f8ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}
.readme-section code { font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tech-list { list-style: disc !important; padding-left: 18px !important; }

@media (min-width: 820px) {
  .artboard-shell {
    display: block;
  }
  .artboard-shell .bottom-nav {
    width: min(100%, 760px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
  }
  .artboard-shell .scan-panel,
  .artboard-shell .processing-panel,
  .artboard-shell .result-panel,
  .artboard-shell .history-panel {
    width: min(560px, calc(100vw - 24px));
    min-height: calc(100vh - 32px);
    margin: 10px auto;
  }
}

@media (max-width: 1080px) {
  .home-artboard { grid-template-columns: 1fr; }
  .readme-panel { display: none; }
  .showcase-panel { min-height: calc(100vh - 12px); }
  .phone-row { grid-template-columns: repeat(2, minmax(148px, 1fr)); }
}

@media (max-width: 560px) {
  .artboard-shell { padding: 0 0 calc(84px + var(--safe-bottom)); }
  .home-artboard { border: 0; border-radius: 0; min-height: 100vh; }
  .showcase-panel { padding: 24px 14px 18px; }
  .showcase-brand { min-height: 420px; }
  .showcase-logo { width: min(270px, 74vw); height: min(270px, 74vw); }
  .showcase-halo { width: min(280px, 78vw); height: min(280px, 78vw); }
  .showcase-brand h1 { font-size: clamp(52px, 16vw, 74px); }
  .showcase-brand h1 span { margin-top: 16px; }
  .showcase-brand p { margin-top: 24px; }
  .phone-row { grid-template-columns: 1fr; gap: 14px; }
  .phone-card { min-height: 290px; }
  .phone-card:not(.home-phone) { display: none; }
  .phone-actions { margin-top: 32px; }
  .mini-bottom { position: relative; margin: 36px -16px -16px; }
  .artboard-shell .bottom-nav { display: grid; }
}