/* Cekvara theme, after Awwwards Sites of the Day, May–June 2026:
   framed full-bleed stage (Serve Robotics), oversized left-aligned headline (Tresmares Capital),
   viewfinder corners (Vaulk), one electric colour on monochrome (Razorpay Sprint 26), floating pill nav.
   Brand stays: #17113a, violet, Outfit, the round lens mark. */

body {
  --night: #17113a;
  --night-2: #221a54;
  --volt: #6a4ff0;          /* the one electric colour: actions, focus, the scan */
  --volt-2: #5236e0;
  --lilac: #b9a6ff;
  --paper: #f4f3f8;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bg-primary: #0b0820;
  --bg-secondary: #120d30;
  --bg-card: #120d30;
  --border-subtle: rgba(185, 166, 255, .16);
  --text-secondary: #c3bbe6;
  --text-muted: #9a91c8;
  background: #0b0820;
  padding-top: 92px;
}
body.light-theme {
  --bg-primary: var(--paper);
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --border-subtle: rgba(23, 17, 58, .1);
  --text-primary: #17113a;
  --text-secondary: #4b4470;
  --text-muted: #67608a;
  background: var(--paper);
  background-image: none;
}

/* ---------- floating pill navigation ---------- */
body header {
  top: 14px; left: 50%; right: auto; width: min(960px, calc(100% - 24px)); transform: translateX(-50%);
  border-radius: 999px; border: 1px solid rgba(185,166,255,.18);
  background: rgba(23, 17, 58, .78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.7);
}
body header .container { max-width: none; padding: 0 10px 0 18px; }
body header .nav-bar { height: 56px; }
body.light-theme header { background: rgba(23, 17, 58, .92); }
body.light-theme header .brand, body.light-theme header .wordmark { color: #f5f3ff; }
body.light-theme header .wordmark-check { stroke: #9d87ff; }
body .privacy-pill, body .icon-button, body .lang-toggle { background: rgba(255,255,255,.06); border-color: rgba(185,166,255,.22); color: #e6e0ff; }
body.light-theme .privacy-pill, body.light-theme .icon-button, body.light-theme .lang-toggle { background: rgba(255,255,255,.06); border-color: rgba(185,166,255,.22); color: #e6e0ff; }
body.light-theme .icon-button svg { color: #e6e0ff; }
body.light-theme .lang-btn:not(.active) { color: #cfc7ef; }
body .lang-btn.active { background: var(--volt); color: #fff; }

/* ---------- the framed stage ---------- */
.cv-stage {
  position: relative; overflow: hidden; isolation: isolate;
  width: calc(100vw - 24px); margin-left: calc((100% - (100vw - 24px)) / 2); margin-bottom: 72px;
  border-radius: 28px; background: var(--night); color: #f4f1ff;
  padding: clamp(40px, 5.2vw, 76px) max(24px, calc((100vw - 24px - 1120px) / 2)) clamp(32px, 4vw, 56px);
}
/* concentric rings from the lens mark, very faint, bottom right */
.cv-stage::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -320px; bottom: -520px; border-radius: 50%;
  border: 1px solid rgba(185,166,255,.14); box-shadow: 0 0 0 120px rgba(185,166,255,.035), 0 0 0 240px rgba(185,166,255,.025); }
.cv-stage::after { content: ""; position: absolute; z-index: -1; width: 12px; height: 12px; border-radius: 50%; background: var(--lilac); right: 22%; bottom: 120px; box-shadow: 0 0 24px var(--lilac); }

body .cv-stage .hero { text-align: left; padding: 0; display: grid; grid-template-columns: 1.55fr 1fr; column-gap: 48px; align-items: end; }
body .cv-stage .hero-tag { grid-column: 1 / -1; justify-self: start; background: none; border: 0; padding: 0; margin-bottom: 22px; color: var(--lilac); font-size: 15px; font-weight: 500; letter-spacing: .01em; gap: 10px; }
body .cv-stage .hero-tag::before { content: "("; color: rgba(185,166,255,.6); }
body .cv-stage .hero-tag::after { content: ")"; color: rgba(185,166,255,.6); }
body .cv-stage .hero-tag svg { display: none; }
body .cv-stage .hero h2 {
  grid-column: 1; margin: 0; max-width: 13ch;
  font-size: clamp(52px, 6.6vw, 100px); line-height: .92; letter-spacing: -.045em; font-weight: 600;
  background: none; color: #ffffff; -webkit-text-fill-color: #ffffff;
}
body .cv-stage .hero p { grid-column: 2; margin: 0 0 10px; max-width: 30ch; font-size: 17px; line-height: 1.5; color: #c9c1ec; justify-self: end; }

/* the search card becomes a dark instrument panel inside the stage */
body .cv-stage .search-card { margin: clamp(32px, 4.4vw, 56px) 0 0; padding: 0; background: none; border: 0; box-shadow: none; max-width: 760px; }
body .cv-stage .input-label { color: #c9c1ec; }
body .cv-stage .info-toggle { color: #c9c1ec; }
body .cv-stage .input-group { position: relative; padding: 14px; gap: 10px; }
/* one pill-shaped field: the input carries the border and the focus ring; the wrapper draws nothing */
body .cv-stage .input-wrap, body .cv-stage .input-wrap:focus-within { background: none; border: 0; box-shadow: none; border-radius: 999px; }
body .cv-stage .search-input, body.light-theme .cv-stage .search-input {
  border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(185,166,255,.28); color: #fff; box-shadow: none;
  padding-left: 84px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body .cv-stage .search-input:focus, body.light-theme .cv-stage .search-input:focus,
body .cv-stage .search-input:focus-visible, body.light-theme .cv-stage .search-input:focus-visible {
  border-color: var(--lilac); background: rgba(255,255,255,.09); box-shadow: 0 0 0 4px rgba(106,79,240,.38); outline: none;
}
body .cv-stage .search-input::placeholder { color: rgba(230,224,255,.5); }
body .cv-stage .country-prefix { border-color: rgba(185,166,255,.24); left: 16px; }
body .cv-stage .country-code { background: rgba(255,255,255,.08); border-color: rgba(185,166,255,.3); color: #e6e0ff; }
body .cv-stage .search-btn { border-radius: 999px; background: var(--volt); box-shadow: 0 12px 30px -12px rgba(106,79,240,.9); padding: 0 30px; transition: background .2s, transform .2s var(--ease); }
body .cv-stage .search-btn:hover:not(:disabled) { background: var(--volt-2); transform: translateY(-1px); }
body .cv-stage .quick-picks { padding: 0 14px; }
body .cv-stage .turnstile-row { padding: 0 14px; margin-bottom: 6px; }
body .cv-stage .turnstile-note { color: #a99fd6; }
body .cv-stage .quick-label { color: #a99fd6; }
body .cv-stage .chip-btn { background: transparent; border: 1px solid rgba(185,166,255,.3); color: #e6e0ff; border-radius: 999px; }
body .cv-stage .chip-btn:hover, body.light-theme .cv-stage .chip-btn:hover { border-color: var(--lilac); background: rgba(185,166,255,.14); color: #ffffff; }
body.light-theme .cv-stage .chip-btn { background: transparent; color: #e6e0ff; border-color: rgba(185,166,255,.3); }
/* format tooltip: a solid white card with #17113a text in both themes, so it reads clearly over the dark stage */
body .cv-stage .info-tooltip, body.light-theme .cv-stage .info-tooltip { background: #ffffff; border: 1px solid rgba(23,17,58,.12); color: #17113a; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); }
body .cv-stage .info-tooltip::before, body.light-theme .cv-stage .info-tooltip::before { background: #ffffff; border-color: rgba(23,17,58,.12); }
body .cv-stage .info-tooltip-title, body.light-theme .cv-stage .info-tooltip-title { color: #17113a; }
body .cv-stage .info-tooltip-desc, body.light-theme .cv-stage .info-tooltip-desc { color: #4b4470; }
body .cv-stage .info-tooltip-list li, body.light-theme .cv-stage .info-tooltip-list li { color: #4b4470; }
body .cv-stage .tooltip-label, body.light-theme .cv-stage .tooltip-label { color: #17113a; }
body .cv-stage .tooltip-code, body.light-theme .cv-stage .tooltip-code { color: #5236e0; background: #f1edff; border-color: #ddd3fb; }

/* viewfinder corners and a slow scan line */
.cv-finder { position: absolute; inset: 0; pointer-events: none; }
.cv-finder i { position: absolute; width: 22px; height: 22px; border: 2px solid var(--lilac); }
.cv-finder .tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.cv-finder .tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.cv-finder .bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.cv-finder .br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.cv-finder .scan { position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--lilac), transparent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cv-finder .scan { animation: cv-scan 4.8s 1.2s ease-in-out infinite; }
  @keyframes cv-scan { 0% { top: 12%; opacity: 0; } 15% { opacity: .9; } 50% { top: 88%; opacity: .9; } 65%, 100% { top: 88%; opacity: 0; } }
  .cv-finder i { transition: transform .5s var(--ease); }
  .input-group:focus-within .cv-finder .tl { transform: translate(4px, 4px); }
  .input-group:focus-within .cv-finder .tr { transform: translate(-4px, 4px); }
  .input-group:focus-within .cv-finder .bl { transform: translate(4px, -4px); }
  .input-group:focus-within .cv-finder .br { transform: translate(-4px, -4px); }
}

/* ---------- guarantees: editorial, numbered, hairlines ---------- */
body .guarantee-bar { gap: 0; margin-bottom: 64px; border-top: 1px solid var(--border-subtle); }
body .guarantee-item { background: none; border: 0; border-radius: 0; padding: 28px 28px 8px 0; text-align: left; box-shadow: none; backdrop-filter: none; position: relative; }
body .guarantee-item + .guarantee-item { padding-left: 28px; border-left: 1px solid var(--border-subtle); }
body .guarantee-item::before { content: attr(data-n); display: block; font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-bottom: 18px; color: var(--volt); font-variant-numeric: tabular-nums; }
body .guarantee-item .icon { display: none; }
body .guarantee-item h4 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 6px; }
body .guarantee-item p { font-size: 15.5px; line-height: 1.55; }
body.light-theme .guarantee-item { background: none; }

/* ---------- result: calm, editorial ---------- */
body .result-card { border-radius: 28px; border: 1px solid var(--border-subtle); box-shadow: none; padding: clamp(22px, 4vw, 40px); }
body .score-overview { border-radius: 20px; }
body .signal-card { border-radius: 16px; box-shadow: none; }
body .masked-display { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.01em; }
body .search-btn:not(.cv-stage .search-btn) { border-radius: 999px; }

/* ---------- footer ---------- */
body footer { border-top: 0; }
body .footer-links a, body .footer-links .quota-status { border-radius: 999px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cv-js .cv-stage .hero > *, .cv-js .cv-stage .search-card { opacity: 0; translate: 0 24px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
  .cv-js.cv-in .cv-stage .hero > *, .cv-js.cv-in .cv-stage .search-card { opacity: 1; translate: 0 0; }
  .cv-js .cv-stage .hero h2 { transition-delay: .08s; }
  .cv-js .cv-stage .hero p { transition-delay: .2s; }
  .cv-js .cv-stage .search-card { transition-delay: .32s; }
  .cv-js .guarantee-item { opacity: 0; translate: 0 16px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
  .cv-js .guarantee-item.cv-seen { opacity: 1; translate: 0 0; }
  .cv-js .guarantee-item:nth-child(2) { transition-delay: .1s; }
  .cv-js .guarantee-item:nth-child(3) { transition-delay: .2s; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  body { padding-top: 84px; }
  body header { width: calc(100% - 16px); top: 8px; }
  .cv-stage { width: calc(100vw - 16px); margin-left: calc((100% - (100vw - 16px)) / 2); border-radius: 22px; padding: 36px 18px 24px; }
  body .cv-stage .hero { grid-template-columns: 1fr; row-gap: 18px; }
  body .cv-stage .hero p { grid-column: 1; justify-self: start; }
  body .cv-stage .hero h2 { font-size: clamp(44px, 13vw, 64px); }
  body .cv-stage .input-group { padding: 12px; }
  body .cv-stage .turnstile-row { padding: 0 12px; }
  body .guarantee-bar { grid-template-columns: 1fr; }
  body .guarantee-item, body .guarantee-item + .guarantee-item { padding: 24px 0 8px; border-left: 0; border-top: 1px solid var(--border-subtle); }
  body .guarantee-item:first-child { border-top: 0; }
}

/* Logo on the dark pill: a lilac ring and a soft glow lift the #24195c circle off the #17113a bar */
body header .brand-mark { border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(185,166,255,.75), 0 0 8px rgba(185,166,255,.3); }

/* Light theme: a light glass navbar; logo and controls in #17113a */
body.light-theme header { background: rgba(255, 255, 255, .82); border-color: rgba(23,17,58,.1); box-shadow: 0 14px 34px -24px rgba(23,17,58,.45); }
body.light-theme header .brand, body.light-theme header .wordmark { color: #17113a; }
body.light-theme header .wordmark-check { stroke: #6a4ff0; }
body.light-theme header .brand-mark { box-shadow: none; }
body.light-theme .privacy-pill, body.light-theme .icon-button, body.light-theme .lang-toggle { background: #f4f3f8; border-color: rgba(23,17,58,.12); color: #17113a; }
body.light-theme .privacy-pill svg { color: #0d8a63; }
body.light-theme .icon-button svg { color: #17113a; }
body.light-theme .lang-btn:not(.active) { color: #4b4470; }

/* Reduced motion: no transitions or animations anywhere (the theme switch at load included) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Privacy / Terms: "Back to Cekvara" as a pill like the other navbar controls */
body .legal-back-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px 0 10px;
  border: 1px solid rgba(185,166,255,.22); border-radius: 999px; background: rgba(255,255,255,.06);
  color: #e6e0ff; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
body .legal-back-link .icon-svg { width: 16px; height: 16px; }
body .legal-back-link:hover { border-color: var(--lilac); background: rgba(185,166,255,.14); color: #ffffff; }
body.light-theme .legal-back-link { background: #f4f3f8; border-color: rgba(23,17,58,.12); color: #17113a; }
body.light-theme .legal-back-link:hover { border-color: #6a4ff0; background: #f3f0ff; color: #140e33; }