/* nikkore.ai — design preview 3 (served under /v3/). Loaded after site.css and site-v2.css; only /v3 loads it. */
/* =====================================================================================
   TWO-TONE (Nov 2026): the deep-night brand stays for the hero, the chrome and the
   product screens; content bands alternate with a soft "porcelain" light tone so the
   page has rhythm. Same logo, same violet → blue → cyan gradient, same typefaces.
   Light bands re-map the color variables, so every component adapts by itself;
   product screens always stay dark so they pop off the light paper.
   ===================================================================================== */
:root {
  --paper: #f6f9fc;
  --paper-2: #ffffff;
  --paper-3: #edf3f9;
  --paper-ink: #062145;
  --violet-soft: #2db364;
}

/* light scope: anything inside gets dark ink on light paper */
body.v3 .trust-band, body.v3 #ai, body.v3 #support, body.v3 .v2-live,
body.v3:not(.pg-home) main {
  --ink: #062145; --ink-2: #485e7a; --ink-3: #7a8ea8;
  --line: #e1eaf3; --line-2: #ccdcec;
  --night-2: #ffffff; --night-3: #eff4fa;
  color-scheme: light; color: var(--ink);
}
/* product screens, clips and dark cards keep the night palette wherever they sit */
body.v3 .t-frame, body.v3 .ls, body.v3 .deck, body.v3 .cta-band, body.v3 :is(.hero, .hx-hero) {
  --ink: #f2f6fb; --ink-2: #aebed3; --ink-3: #6f87a6;
  --line: #09336b; --line-2: #0c4591;
  --night-2: #041a37; --night-3: #06254d;
  color-scheme: dark; color: var(--ink);
}

/* ---------- the light bands ---------- */
body.v3 .trust-band, body.v3 #ai, body.v3 #support {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(40% 50% at 100% 0%, rgba(45, 179, 100, .13), transparent 70%),
    radial-gradient(40% 55% at 0% 100%, rgba(47, 188, 122, .12), transparent 70%),
    var(--paper);
}
/* fine dot grid, fading toward the middle so text stays clean */
body.v3 .trust-band::before, body.v3 #ai::after, body.v3 #support::after, body.v3:not(.pg-home) main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(45, 181, 104, .16) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, transparent 35%, #000 100%); mask-image: radial-gradient(75% 70% at 50% 50%, transparent 35%, #000 100%);
}
body.v3 .sp::before { z-index: -1; }
body.v3 .light-ink, body.v3 #ai .sp-eyebrow, body.v3 #support .sp-eyebrow { color: color-mix(in srgb, var(--sc) 78%, #000); }
body.v3 #support { --sc: #2eb870; }

/* the large dashboard sits across the seam between the dark hero and the light page */
body.v3 .v2-live { background: linear-gradient(180deg, var(--night) 0 46%, var(--paper) 46% 100%); padding-block: 8px 28px; }
body.v3 .v2-live .t-frame { box-shadow: 0 50px 100px -40px rgba(46, 184, 112, .55), 0 30px 60px -30px rgba(3, 18, 38, .55); }

/* ---------- floating objects: gradient rings and glass orbs fill the open sides ---------- */
.orb { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
body.v3 .trust-band > .wrap, body.v3 #ai > .wrap, body.v3 #support > .wrap, body.v3 #how > .wrap, body.v3 #security > .wrap { position: relative; }
/* rings: a gradient stroke drawn with a mask */
body.v3 #ai > .wrap::before, body.v3 #support > .wrap::before, body.v3 #how > .wrap::before, body.v3 #security > .wrap::after, body.v3 .trust-band > .wrap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  background: conic-gradient(from 210deg, #2db568, #2eb870, #2eb974, #2fbc7a, #2db364, #2db568);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  opacity: .55; animation: nk-float 14s ease-in-out infinite alternate;
}
body.v3 .trust-band > .wrap::before { width: 300px; height: 300px; left: -170px; top: -40px; }
body.v3 #ai > .wrap::before { width: 420px; height: 420px; right: -260px; top: -120px; }
body.v3 #support > .wrap::before { width: 340px; height: 340px; left: -220px; bottom: -120px; animation-duration: 17s; }
body.v3 #how > .wrap::before { width: 380px; height: 380px; left: -240px; bottom: -140px; opacity: .35; }
body.v3 #security > .wrap::after { width: 460px; height: 460px; right: -300px; top: -160px; opacity: .3; animation-duration: 19s; }
/* soft glass orbs */
body.v3 #ai > .wrap::after, body.v3 #support > .wrap::after, body.v3 .trust-band > .wrap::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 42%), radial-gradient(circle at 60% 65%, rgba(46, 185, 116,.55), rgba(45, 181, 104,.45) 60%, rgba(45, 179, 100,.25));
  filter: blur(.2px); box-shadow: 0 30px 60px -20px rgba(45, 181, 104, .35);
  animation: nk-float 11s ease-in-out infinite alternate-reverse;
}
body.v3 #ai > .wrap::after { width: 64px; height: 64px; left: -54px; bottom: 40px; }
body.v3 #support > .wrap::after { width: 90px; height: 90px; right: -70px; top: 10px; }
body.v3 .trust-band > .wrap::after { width: 54px; height: 54px; right: -40px; bottom: 30px; }
@keyframes nk-float { from { transform: translate3d(0, 0, 0) rotate(0); } to { transform: translate3d(0, -18px, 0) rotate(25deg); } }
@media (prefers-reduced-motion: reduce) { body.v3 * { animation-duration: 0s !important; } }
@media (max-width: 999px) {
  body.v3 .trust-band > .wrap::before, body.v3 #ai > .wrap::before, body.v3 #support > .wrap::before, body.v3 #how > .wrap::before, body.v3 #security > .wrap::after { width: 220px; height: 220px; opacity: .3; }
  body.v3 :is(#ai, #support, .trust-band) > .wrap::after { display: none; }
}

/* ---------- dark bands get a little more color and depth ---------- */
body.v3 #how, body.v3 #security { background:
  radial-gradient(45% 55% at 100% 50%, rgba(45, 181, 104, .22), transparent 70%),
  radial-gradient(40% 50% at 0% 0%, rgba(47, 188, 122, .10), transparent 70%),
  linear-gradient(180deg, #04152c, var(--night)); }
body.v3 #how::after, body.v3 #security::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(45, 182, 108, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 182, 108, .06) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 80% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 70% 40%, #000, transparent 75%); }
body.v3 #how > .wrap, body.v3 #security > .wrap { z-index: 1; }

/* ---------- hero: richer color behind the copy ---------- */
body.v3 .v2-hero { background:
  radial-gradient(38% 60% at 8% 30%, rgba(45, 181, 104, .32), transparent 70%),
  radial-gradient(35% 55% at 95% 15%, rgba(47, 188, 122, .16), transparent 70%),
  radial-gradient(30% 45% at 60% 100%, rgba(45, 179, 100, .22), transparent 70%), var(--night); }
body.v3 .v2-hero h1 { background: linear-gradient(180deg, #ffffff 30%, #d6e4f2); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.v3 .v2-hero h1::after { content: ""; display: block; width: 84px; height: 4px; border-radius: 4px; margin-top: 18px; background: var(--grad); }

/* ---------- trust band: tabs on the left, the screen on the right (no empty sides) ---------- */
@media (min-width: 1000px) {
  body.v3 .trust-band .wrap[data-tabs] { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 40px; align-items: center; }
  body.v3 .trust-band .trust-strip { grid-template-columns: 1fr; display: grid; gap: 12px; }
  body.v3 .trust-band .trust-panes { margin-top: 0; }
  body.v3 .trust-pane .ls { --room: calc(100svh - 220px); }
}
body.v3 .trust-band { padding-block: 56px; }

/* ---------- cards on light paper ---------- */
body.v3 :is(.trust-band, #ai, #support, main) :is(.trust-strip button, .ai-can li, .ai-tabs button, .help-team, .p-card, .p-calc, .help-groups > div) {
  background: var(--paper-2); border-color: var(--line); box-shadow: 0 1px 2px rgba(6, 33, 69, .04), 0 12px 32px -18px rgba(6, 33, 69, .18);
}
body.v3 .trust-strip button.on { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: 0 18px 40px -20px rgba(46, 184, 112, .45); }
body.v3 #ai .ai-tabs button.on { background: var(--grad); color: #fff; border-color: transparent; }
body.v3 #ai .ai-can li { border-left: 3px solid var(--violet-soft); }
body.v3 #ai .ai-cap { color: var(--ink-2); }
body.v3 :is(#ai, #support, .trust-band) h2 { color: var(--paper-ink); }
body.v3 :is(#ai, #support) .perm-list li b, body.v3 #ai .ai-can b { color: var(--paper-ink); }
body.v3 :is(#ai, #support, .trust-band) .btn:not(.primary) { background: #fff; }

/* ---------- security facts: glassy cards with a gradient number ---------- */
body.v3 .sec-facts > div { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); border: 1px solid rgba(46, 182, 108, .16); backdrop-filter: blur(6px); }
body.v3 .sec-facts b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- call-to-action band: dark card floating on the paper ---------- */
body.v3 main > section.wrap:last-of-type, body.v3.pg-home main > section.wrap { position: relative; }
body.v3.pg-home main > section.wrap { background: var(--paper); max-width: none; padding-block: 8px 72px; }
body.v3.pg-home main > section.wrap .cta-band { max-width: var(--max); margin: 0 auto; box-shadow: 0 40px 90px -40px rgba(46, 184, 112, .55); }
body.v3 .cta-band { background: radial-gradient(70% 140% at 100% 0%, rgba(47, 188, 122, .22), transparent 60%), radial-gradient(70% 140% at 0% 100%, rgba(45, 181, 104, .45), transparent 60%), linear-gradient(135deg, #062145, #04152c); border: 1px solid #0a3e81; }

/* ---------- footer: dark, with a gradient hairline and roomier columns ---------- */
body.v3 footer { margin-top: 0; position: relative; padding-top: 56px; background: linear-gradient(180deg, #04152c, var(--night)); border-top: 0; }
body.v3 footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--grad); opacity: .7; }
body.v3 footer a { transition: color .2s; } body.v3 footer a:hover { color: #fff; }
body.v3 footer b { letter-spacing: .02em; }
@media (max-width: 620px) { body.v3 footer .wrap { grid-template-columns: 1fr 1fr; } body.v3 footer .wrap > div:first-child { grid-column: 1 / -1; } }

/* ---------- nav: deep glass; the active link gets a gradient underline ---------- */
body.v3 .nav { background: color-mix(in srgb, #04152c 78%, transparent); border-bottom-color: rgba(46, 182, 108, .12); }
body.v3 .nav-links a { position: relative; padding: 6px 0; transition: color .2s; }
body.v3 .nav-links a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--grad); }
@media (max-width: 860px) {
  body.v3 .nav-links.open { background: #04172f; border-bottom: 1px solid rgba(46, 182, 108,.14); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
}

/* =====================================================================================
   INNER PAGES (pricing, tour, guide, help, legal, 404): a dark hero band, then light paper.
   ===================================================================================== */
body.v3:not(.pg-home) main { position: relative; isolation: isolate; background: var(--paper); padding-bottom: 72px; }
body.v3:not(.pg-home) main::before { -webkit-mask-image: linear-gradient(180deg, transparent 260px, #000 60%, transparent); mask-image: linear-gradient(180deg, transparent 260px, #000 60%, transparent); opacity: .7; }
body.v3:not(.pg-home) main > .hero { background: radial-gradient(40% 70% at 10% 20%, rgba(45, 181, 104, .32), transparent 70%), radial-gradient(35% 60% at 95% 10%, rgba(47, 188, 122, .16), transparent 70%), linear-gradient(180deg, #04152c, var(--night)); padding: 64px 0 56px; }
body.v3:not(.pg-home) main > .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grad); opacity: .5; }
body.v3:not(.pg-home) main > .hero h1 { color: #fff; }
/* pages without a hero (help, guides, legal) open with a slim dark band so the chrome reads as one piece */
body.v3:is(.pg-docs, .pg-privacy, .pg-terms) main { padding-top: 0; }
body.v3:is(.pg-docs, .pg-privacy, .pg-terms) main::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 210px; z-index: -1; background: radial-gradient(40% 120% at 15% 0%, rgba(45, 181, 104, .38), transparent 70%), radial-gradient(35% 120% at 90% 0%, rgba(47, 188, 122, .18), transparent 70%), linear-gradient(180deg, var(--night), #041832); border-bottom: 1px solid rgba(46, 182, 108, .18); }
body.v3:is(.pg-docs, .pg-privacy, .pg-terms) main > .wrap { position: relative; top: 0; }
body.v3 .legal, body.v3 .docs > .doc, body.v3 .help-home { margin-top: 56px; }
body.v3 .legal { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 48px clamp(22px, 5vw, 64px) 56px; box-shadow: 0 30px 70px -40px rgba(6, 33, 69, .3); }
body.v3 .legal h2 { color: var(--paper-ink); }
body.v3 .legal a, body.v3 .doc a { color: #2eb870; }
body.v3 .docs { padding-top: 0; }
body.v3 .docs-nav { margin-top: 56px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; top: 86px; box-shadow: 0 16px 40px -28px rgba(6, 33, 69, .3); }
body.v3 .docs-nav a[aria-current] { background: var(--paper-3); box-shadow: inset 3px 0 0 #2eb870; }
body.v3 .docs > .doc { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 40px clamp(22px, 4vw, 56px); box-shadow: 0 30px 70px -40px rgba(6, 33, 69, .3); }
body.v3 .doc code, body.v3 .doc .doc-code { background: var(--paper-3); color: var(--paper-ink); border-color: var(--line); }
body.v3 .doc figure img { border-color: var(--line); box-shadow: 0 20px 50px -30px rgba(6, 33, 69, .45); }
body.v3 .doc-pager a { background: var(--paper-2); border-color: var(--line); }
body.v3 .help-home h1 { color: var(--paper-ink); }
body.v3 .help-team { border-radius: 20px; padding: 28px; border: 1px solid var(--line); }
body.v3 .help-groups > div { border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
body.v3 .help-groups a:hover { color: #2eb870; }
@media (max-width: 999px) { body.v3 .docs-nav { margin-top: 32px; } body.v3 .docs > .doc { margin-top: 0; } }

/* pricing */
body.v3.pg-pricing .p-one { margin-top: 48px; }
body.v3.pg-pricing .p-card { border-radius: 22px; position: relative; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: 0 40px 80px -40px rgba(46, 184, 112, .45); }
body.v3.pg-pricing .p-calc { border-radius: 22px; border: 1px solid var(--line); }
body.v3.pg-pricing .plan-price { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.v3.pg-pricing .plan-price small { -webkit-text-fill-color: var(--ink-2); }
body.v3.pg-pricing .p-list li::before { color: #2eb870; }
body.v3 .trust-strip button.on b { color: #2eb870; }
body.v3 :is(#ai, #support) .perm-list li::before { background: rgba(46, 184, 112, .12) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%232eb870' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat; }
body.v3.pg-pricing .security { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 10px 32px 18px; box-shadow: 0 20px 50px -34px rgba(6, 33, 69, .3); }
body.v3.pg-pricing input[type=range] { accent-color: #2eb870; }
body.v3.pg-pricing .h-pill { background: var(--paper-3); }

/* tour and guide: each step is a white card; the screens stay dark */
body.v3 .t-toc a { background: rgba(255, 255, 255, .06); border-color: rgba(46, 182, 108, .2); }
body.v3 .t-toc a:hover { border-color: #2eb974; }
body.v3 :is(.t-step, .g-sec) { border-top: 0; }
body.v3 .t-body { padding-top: 40px; }
body.v3 .t-step { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 4vw, 44px); margin-bottom: 28px; box-shadow: 0 30px 70px -45px rgba(6, 33, 69, .35); }
body.v3 .t-num { color: #2eb870; }
body.v3 .t-step h2 { color: var(--paper-ink); }
body.v3 .g-cat-h h2 { color: var(--paper-ink); }
body.v3 .g-sec { background: #fff; border: 1px solid var(--line) !important; border-radius: 22px; padding: clamp(20px, 3.5vw, 36px); margin-top: 22px; box-shadow: 0 24px 60px -42px rgba(6, 33, 69, .35); }
body.v3 .g-toc a { background: rgba(255, 255, 255, .06); border-color: rgba(46, 182, 108, .2); color: #cbddee; }
body.v3 .g-doc { color: #2eb870; }
body.v3:not(.pg-home) main > section.wrap .cta-band { margin-top: 64px; }