/* Kliksight marketing site - shared layer (motion + classes). Marketing surfaces only, never the app. */ html{scroll-behavior:smooth} html,body{margin:0;overflow-x:clip} ::selection{background:rgba(255,122,92,.38);color:var(--ink-strong)} #ks-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#17D9A0,#FF7A5C);transform:scaleX(0);transform-origin:left;z-index:70;pointer-events:none} [data-magnet]{display:inline-block;transition:transform .22s var(--ease-out);will-change:transform} [data-magnet] button:hover,.cta-coral-line button:hover{background:#FF7A5C!important;border-color:#FF7A5C!important;color:#1A1526!important} .cta-coral button{background:#FF7A5C!important;border-color:#FF7A5C!important;color:#1A1526!important} .cta-coral button:hover{background:#FF9578!important;border-color:#FF9578!important;color:#1A1526!important} .cta-coral-line button{background:transparent!important;border-color:#FF7A5C!important;color:#FF7A5C!important;box-shadow:inset 0 0 0 1px #FF7A5C!important} .cta-coral-line button:hover{box-shadow:inset 0 0 0 1px #FF7A5C!important} /* hero line reveal */ .hl{display:block;overflow:hidden} .hl i{display:block;font-style:normal;transform:translateY(112%);animation:ks-lineup .9s var(--ease-out) both} @keyframes ks-lineup{to{transform:none}} .wrap{max-width:1320px;margin:0 auto;padding:0 32px} /* split section header: headline left, lead right - the one alignment system */ .sechead{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:20px 72px;align-items:end} .sechead>*{min-width:0} .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:flex-end} @media (max-width:860px){.sechead{grid-template-columns:1fr}.cta-row{justify-content:flex-start}} .eyebrow{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-muted);display:flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex-shrink:0} .eyebrow.center{justify-content:center} .h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.025em;line-height:1.08;color:var(--ink-strong);margin:14px 0 0;text-wrap:pretty} .lead{font-size:17.5px;color:var(--ui-muted);line-height:1.7;max-width:62ch;text-wrap:pretty} .card{background:var(--card);border:1px solid var(--glass-line);border-radius:var(--r-lg);padding:26px;transition:transform .35s var(--ease-out),border-color .35s var(--ease),box-shadow .35s var(--ease)} .card:hover{transform:translateY(-4px);border-color:rgba(23,217,160,.32);box-shadow:0 18px 50px rgba(0,0,0,.35)} .navlink{font-size:15px;color:var(--ui-muted);text-decoration:none;transition:color .2s var(--ease)} .navlink:hover{color:#FF7A5C} a{color:var(--ink)}a:hover{color:#FF7A5C} .pill{font-size:13.5px;border:1px solid var(--ui-line);border-radius:var(--r-pill);padding:4px 12px} /* scroll reveals - .motion is added to only when JS runs and motion is allowed */ .motion .rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)} .motion .rv.in{opacity:1;transform:none} .motion .rv.d1{transition-delay:.1s}.motion .rv.d2{transition-delay:.2s}.motion .rv.d3{transition-delay:.3s}.motion .rv.d4{transition-delay:.42s} /* load-in for the hero */ @keyframes ks-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .hero-in{animation:ks-rise .9s var(--ease-out) both} /* ambient glow */ @keyframes ks-drift{0%{transform:translate3d(-3%,-2%,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.07)}100%{transform:translate3d(-3%,-2%,0) scale(1)}} .glow{position:absolute;left:-10%;right:-10%;top:-18%;height:72vh;pointer-events:none;background:radial-gradient(46% 58% at 50% 32%,rgba(62,168,255,.13),transparent 66%),radial-gradient(38% 48% at 72% 18%,rgba(46,36,71,.55),transparent 70%);filter:blur(12px);animation:ks-drift 18s ease-in-out infinite} /* marquee */ @keyframes ks-marq{to{transform:translateX(-50%)}} .marquee{overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)} .marquee-track{display:flex;width:max-content;animation:ks-marq 38s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .mi{display:flex;align-items:center;gap:34px;padding:24px 0 24px 34px;font-size:18px;color:var(--ui-muted);white-space:nowrap} .mi b{color:var(--ink);font-weight:600} .mdot{width:4px;height:4px;border-radius:50%;background:var(--ui-line);flex-shrink:0} /* the formula */ .term{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:clamp(46px,8.4vw,118px);line-height:1;font-feature-settings:"tnum" 1} .term-label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ui-muted);margin-top:12px} .op{font-family:var(--display);font-weight:300;font-size:clamp(34px,5.6vw,72px);color:var(--ui-muted);line-height:1;padding-top:.14em} /* animated bars/diagrams (fire on .rv.in) */ .bar{height:10px;border-radius:999px;background:var(--mist);width:0;transition:width 1.2s var(--ease-out) .25s} .rv.in .bar{width:var(--w)} .vbar{width:clamp(26px,4vw,40px);border-radius:6px 6px 0 0;height:0;transition:height 1s var(--ease-out) .2s} .rv.in .vbar{height:var(--h)} .draw{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .2s} .rv.in .draw{transform:none} .pulse{width:14px;height:14px;border-radius:50%;background:var(--state-marked);animation:km-pixel-pulse 2.6s var(--ease) infinite} /* consent notice */ @keyframes ks-notice{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .notice-in{animation:ks-notice .6s var(--ease-out) .8s both} /* full-page ambient system (fixed, all pages): fine forensic grid + two drifting aurora blobs + a periodic scan sweep */ .bg-anim{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background-image:linear-gradient(rgba(247,245,251,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(247,245,251,.024) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(85% 75% at 50% 32%,#000 25%,transparent 100%);-webkit-mask-image:radial-gradient(85% 75% at 50% 32%,#000 25%,transparent 100%)} .bg-anim::before{content:"";position:absolute;width:58vmax;height:58vmax;left:-14%;top:-20%;border-radius:50%;background:radial-gradient(circle at 32% 32%,rgba(62,168,255,.15),transparent 60%);filter:blur(64px);animation:ks-blob-a 34s ease-in-out infinite alternate;will-change:transform} .bg-anim::after{content:"";position:absolute;width:50vmax;height:50vmax;right:-16%;bottom:-24%;border-radius:50%;background:radial-gradient(circle at 60% 60%,rgba(46,36,71,.85),transparent 62%),radial-gradient(circle at 30% 70%,rgba(154,147,181,.10),transparent 55%);filter:blur(72px);animation:ks-blob-b 46s ease-in-out infinite alternate;will-change:transform} @keyframes ks-blob-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vw,7vh,0) scale(1.16) rotate(8deg)}100%{transform:translate3d(-5vw,13vh,0) scale(.94)}} @keyframes ks-blob-b{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-11vw,-11vh,0) scale(1.22) rotate(-10deg)}} .bg-scan{position:absolute;left:0;right:0;top:0;height:22vh;background:linear-gradient(180deg,transparent,rgba(62,168,255,.045) 45%,rgba(62,168,255,.085) 50%,rgba(62,168,255,.045) 55%,transparent);animation:ks-scan 14s cubic-bezier(.4,0,.6,1) 2.4s infinite;opacity:0} @keyframes ks-scan{0%{transform:translateY(-30vh);opacity:0}10%{opacity:1}52%{opacity:1}68%{transform:translateY(120vh);opacity:0}100%{transform:translateY(120vh);opacity:0}} /* site opening (home): pupil ignites, ring draws, wordmark wipes, flyer lifts away */ #ov-veil{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center} #ov-veil::before{content:"";position:absolute;inset:0;background:var(--base);animation:ov-lift .55s var(--ease) 3.15s both} @keyframes ov-lift{to{opacity:0}} .ov-flyer{position:relative;display:flex;align-items:center;gap:clamp(18px,3vw,40px);animation:ov-dock .6s var(--ease-out) 3.15s both} @keyframes ov-dock{to{opacity:0;transform:translateY(-26vh) scale(.42)}} .ov-pup{transform:scale(0);transform-box:fill-box;transform-origin:center;animation:ov-pop .65s var(--ease-out) both} /* Ring dash overshoots its pathLength (102 > 100): a dasharray equal to the length leaves a hairline seam notch - the "line in the ring" defect. */ .ov-track{stroke-dasharray:102;stroke-dashoffset:102;animation:ov-draw .95s var(--ease-out) .35s both} /* Ripples run 100→200 so each line grows OUT of its round-cap dot, never toward it. */ .ov-r1{stroke-dasharray:100;stroke-dashoffset:100;animation:ov-ripple .55s var(--ease-out) 1.3s both} .ov-r2{stroke-dasharray:100;stroke-dashoffset:100;animation:ov-ripple .6s var(--ease-out) 1.55s both} .ov-wd{font-family:var(--display);font-weight:700;font-size:clamp(40px,7vw,72px);letter-spacing:-.015em;color:var(--ink-strong);clip-path:inset(0 100% 0 0);animation:ov-word 1.1s var(--ease-out) 1.9s both} .ov-it{position:relative} .ov-idot{position:absolute;left:50%;transform:translateX(-50%);top:.32em;width:.145em;height:.145em;border-radius:50%;background:#3EA8FF} @keyframes ov-pop{0%{transform:scale(0)}68%{transform:scale(1.35)}100%{transform:scale(1)}} @keyframes ov-draw{to{stroke-dashoffset:0}} @keyframes ov-ripple{to{stroke-dashoffset:200}} @keyframes ov-word{from{clip-path:inset(0 100% 0 0);transform:translateX(-10px)}to{clip-path:inset(0 0 0 0);transform:none}} /* pinned scroll-scrubbed sequence: tall + sticky ONLY when motion is active; static flow otherwise. The home page's report section left the pin on 7 Sep 2026 when the report became a full-page picture (a sticky 100vh frame clipped it); it carries .pinh-flow and its steps fade in as a normal reveal. */ .motion .pinh:not(.pinh-flow){height:260vh} .motion .pinh:not(.pinh-flow) .pin-sticky{position:sticky;top:0;min-height:100vh} .mi span{transition:color .25s var(--ease)} .mi span:hover{color:#17D9A0} /* footer wordmark */ .bigmark{font-family:var(--display);font-weight:900;font-size:clamp(64px,13vw,180px);letter-spacing:-.045em;line-height:.9;padding-bottom:.16em;margin-bottom:14px;color:transparent;-webkit-text-stroke:1px rgba(247,245,251,.38);user-select:none;transition:color .6s var(--ease)} .bigmark:hover{color:rgba(255,122,92,.1);-webkit-text-stroke-color:rgba(255,122,92,.55)} /* ---- background depth system ---- */ /* depth field: parallax speck layers (JS drives background-position on scroll) */ .bg-specks{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(247,245,251,.11) 1px,transparent 1.7px),radial-gradient(rgba(154,147,181,.09) 1px,transparent 1.6px);background-size:230px 190px,170px 240px;mask-image:radial-gradient(95% 85% at 50% 42%,#000 25%,transparent 100%);-webkit-mask-image:radial-gradient(95% 85% at 50% 42%,#000 25%,transparent 100%);transition:opacity 1.2s var(--ease)} .bg-specks.near{background-image:radial-gradient(rgba(120,190,255,.13) 1.5px,transparent 2.4px),radial-gradient(rgba(247,245,251,.08) 1.1px,transparent 1.9px);background-size:340px 280px,270px 330px;filter:blur(.5px)} /* contextual atmosphere: three crossfading veils over the bg layers, under content */ .bg-tint{position:fixed;inset:0;z-index:-1;pointer-events:none} .bg-tint i{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)} .bg-tint .t-focus{background:radial-gradient(70% 60% at 50% 42%,rgba(62,168,255,.06),transparent 72%)} .bg-tint .t-deep{background:radial-gradient(140% 120% at 50% 55%,rgba(8,6,15,.5),rgba(8,6,15,.22))} .bg-tint .t-warm{background:radial-gradient(90% 80% at 50% 82%,rgba(46,36,71,.55),transparent 74%)} body.atmo-focus .t-focus,body.atmo-deep .t-deep,body.atmo-warm .t-warm{opacity:1} .bg-anim{opacity:.88;transition:opacity 1.2s var(--ease)} body.atmo-focus .bg-anim{opacity:1} body.atmo-deep .bg-anim{opacity:.45} body.atmo-deep .bg-specks{opacity:.4} /* pointer spotlight: a brighter hidden grid + specks revealed only under the cursor */ .bg-lit{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);background-image:linear-gradient(rgba(140,200,255,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(140,200,255,.085) 1px,transparent 1px),radial-gradient(rgba(247,245,251,.15) 1.2px,transparent 2px);background-size:56px 56px,56px 56px,230px 190px;mask-image:radial-gradient(340px 340px at var(--mx,50vw) var(--my,40vh),#000 10%,transparent 74%);-webkit-mask-image:radial-gradient(340px 340px at var(--mx,50vw) var(--my,40vh),#000 10%,transparent 74%)} .bg-lit::after{content:"";position:absolute;left:var(--mx,50vw);top:var(--my,40vh);width:620px;height:620px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(62,168,255,.075),transparent 62%)} body.motion.spot .bg-lit{opacity:1} input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--danger)!important} input::placeholder{color:var(--state-quiet)} @media (prefers-reduced-motion:reduce){ .bg-lit,.bg-tint{display:none} .hero-in,.glow,.marquee-track,.pulse,.notice-in,.bg-anim::before,.bg-anim::after,.bg-scan,.hl i{animation:none!important} .hl i{transform:none!important} .bg-scan{display:none} #ov-veil{display:none} .bar{width:var(--w)}.vbar{height:var(--h)}.draw{transform:none} } /* ---- site nav, phone treatment (7 Sep 2026 mobile walk) ---- Six links wrapping under the wordmark is not a nav. Below 860px the links fold behind one control (a checkbox, so it works with no JS and is keyboard-operable), open as a full-width panel under the bar, each link a 48px row. Sign in keeps its outline as the last row. */ .nav-toggle{display:none} .nav-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--ui-line);border-radius:var(--r-sm);cursor:pointer;color:var(--ink);flex:none} .nav-btn svg{display:block} .nav-btn .x{display:none} @media (max-width:860px){ .site-bar{flex-wrap:wrap!important;gap:12px 16px!important;padding:0 20px!important} .nav-btn{display:flex} .site-nav{display:none!important;width:100%;flex-direction:column!important;align-items:stretch!important;gap:0!important;border-top:1px solid var(--hairline);padding:6px 0 12px} .site-nav .navlink{display:flex;align-items:center;min-height:48px;font-size:17px;padding:0 4px;border-bottom:1px solid var(--hairline);border-radius:0!important;white-space:normal!important} .site-nav .navlink:last-child{border-bottom:0;margin-top:10px;border:1px solid var(--ui-line)!important;border-radius:var(--r-sm)!important;justify-content:center} .nav-toggle:checked ~ .site-nav{display:flex!important} .nav-toggle:checked ~ .nav-btn .h{display:none} .nav-toggle:checked ~ .nav-btn .x{display:block} .nav-toggle:focus-visible ~ .nav-btn{outline:2px solid var(--ui-focus);outline-offset:2px} .wrap{padding:0 20px} .h2{font-size:clamp(26px,7vw,34px)} .term{font-size:clamp(38px,11vw,60px)} .op{font-size:clamp(26px,7vw,40px)} .lead{font-size:16px} .bigmark{font-size:clamp(48px,17vw,90px)} /* the pinned report sequence is a desk gesture: on a phone it flows statically and motion.js resolves every step to fully visible (total height under 60px means progress = 1) */ .motion .pinh{height:auto} .motion .pinh .pin-sticky{position:static;min-height:0} .pinh .pin-sticky{padding:40px 20px 56px!important} .card{padding:20px} }