/* ============================================================
   Cognify 2.0 — Neon spectrum dark design
   ============================================================ */

:root {
  --bg:       #06060E;
  --bg-2:     #0B0B18;
  --surface:  rgba(255,255,255,0.042);
  --surface-h:rgba(255,255,255,0.075);
  --border:   rgba(255,255,255,0.08);
  --border-h: rgba(255,255,255,0.18);

  --violet:   #8B5CF6;
  --violet-l: #A78BFA;
  --pink:     #EC4899;
  --pink-l:   #F472B6;
  --cyan:     #06B6D4;
  --cyan-l:   #22D3EE;
  --emerald:  #10B981;
  --emerald-l:#34D399;
  --amber:    #F59E0B;
  --amber-l:  #FCD34D;

  --grad-spectrum: linear-gradient(90deg,#A78BFA 0%,#F472B6 35%,#22D3EE 68%,#34D399 100%);
  --grad-cta:      linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%);
  --grad-cta-r:    linear-gradient(135deg,#EC4899 0%,#8B5CF6 100%);

  --text:   #F1F5F9;
  --text-2: rgba(241,245,249,0.55);
  --text-3: rgba(241,245,249,0.28);

  --r:     10px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-pill:9999px;

  --ease:   cubic-bezier(0.16,1,0.3,1);
  --ease-2: cubic-bezier(0.4,0,0.2,1);

  --pad:  clamp(1.25rem,5vw,2.5rem);
  --max:  1160px;

  --font: 'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{font-size:16px;scroll-behavior:smooth;color-scheme:dark}

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:800;line-height:1.08;letter-spacing:-0.03em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{list-style:none;margin:0;padding:0}

a{color:var(--cyan-l);text-decoration:none;transition:color .2s}
a:hover{color:var(--text)}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ── Skip link ────────────────────────────────────────────── */
.skip-link{
  position:absolute;top:-100%;left:1rem;z-index:9999;
  padding:.5rem 1.25rem;
  background:var(--violet);color:#fff;
  font-weight:600;font-size:.875rem;text-decoration:none;
  border-radius:0 0 var(--r) var(--r);transition:top .2s;
}
.skip-link:focus{top:0}

/* ── Layout ───────────────────────────────────────────────── */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(5rem,10vw,8rem) 0}

.grad{
  background:var(--grad-spectrum);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Header ───────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:200;
  background:rgba(6,6,14,.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
}
header.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.05),0 8px 48px rgba(0,0,0,.55)}

.nav-wrap{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;height:62px;
}

.nav-logo{
  font-size:1.125rem;font-weight:900;letter-spacing:-0.05em;
  text-decoration:none;
  background:var(--grad-spectrum);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  flex-shrink:0;
  transition:opacity .2s;
}
.nav-logo:hover{opacity:.8}

.nav-list{display:flex;align-items:center;gap:.25rem}

.nav-list a{
  display:block;padding:.4rem .875rem;
  font-size:.875rem;font-weight:500;color:var(--text-2);
  border-radius:var(--r);transition:color .2s,background .2s;
}
.nav-list a:hover{color:var(--text);background:var(--surface-h)}

.nav-cta{
  display:inline-flex;align-items:center;
  padding:.5rem 1.375rem;
  background:var(--grad-cta);
  color:#fff !important;
  font-size:.875rem;font-weight:600;
  border-radius:var(--r-pill);
  transition:opacity .2s,transform .2s var(--ease),box-shadow .2s;
}
.nav-cta:hover{
  opacity:.92;transform:translateY(-1px);
  box-shadow:0 4px 24px rgba(139,92,246,.45);
}

/* ── Cursor glow ──────────────────────────────────────────── */
.cursor-glow{
  position:fixed;top:0;left:0;z-index:0;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.07) 0%,transparent 60%);
  pointer-events:none;will-change:transform;transition:opacity .5s;
}

/* ── Hero ─────────────────────────────────────────────────── */
#hero{
  position:relative;min-height:95vh;
  display:flex;align-items:center;overflow:hidden;
  padding:clamp(6rem,14vw,10rem) 0 clamp(4rem,8vw,6rem);
}

.hero-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.orb{
  position:absolute;border-radius:50%;
  filter:blur(100px);opacity:.5;
}
.orb-1{
  width:680px;height:680px;top:-20%;right:-8%;
  background:radial-gradient(circle,#7C3AED 0%,transparent 65%);
  animation:float 16s ease-in-out infinite;
}
.orb-2{
  width:520px;height:520px;bottom:-12%;left:-10%;
  background:radial-gradient(circle,#DB2777 0%,transparent 65%);
  animation:float 20s ease-in-out infinite reverse;
  animation-delay:-9s;
}
.orb-3{
  width:420px;height:420px;top:30%;left:33%;
  background:radial-gradient(circle,#0891B2 0%,transparent 65%);
  animation:float 24s ease-in-out infinite;
  animation-delay:-6s;
}
.orb-4{
  width:300px;height:300px;bottom:18%;right:18%;
  background:radial-gradient(circle,#059669 0%,transparent 65%);
  animation:float 19s ease-in-out infinite reverse;
  animation-delay:-13s;
}

@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  25%    {transform:translate(30px,-40px) scale(1.05)}
  50%    {transform:translate(-22px,28px) scale(0.96)}
  75%    {transform:translate(36px,18px) scale(1.02)}
}

.hero-grid{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.065) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black 5%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black 5%,transparent 75%);
}

.hero-inner{
  position:relative;z-index:1;
  max-width:var(--max);width:100%;
  margin:0 auto;padding:0 var(--pad);
  text-align:center;
}

/* Eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:.625rem;
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:2rem;
  animation:up .8s var(--ease) both;
}
.eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--grad-cta);
  box-shadow:0 0 10px var(--pink);
  animation:pulse-dot 2s ease-in-out infinite;
}
.eyebrow span{color:var(--text-2)}

@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 6px var(--pink)}
  50%    {box-shadow:0 0 16px var(--pink),0 0 28px var(--violet)}
}

/* Heading */
.hero-h1{
  font-size:clamp(3.25rem,11vw,9.5rem);
  font-weight:900;
  line-height:1.0;
  letter-spacing:-0.045em;
  margin-bottom:1.75rem;
  animation:up .8s .1s var(--ease) both;
}
.brand-line{
  display:block;
  font-weight:300;
  letter-spacing:-0.03em;
  font-size:.52em;
  color:rgba(241,245,249,.55);
  margin-bottom:.12em;
  animation:up .8s .08s var(--ease) both;
}

.rotator-track{
  display:block;
  overflow:hidden;
  height:1.06em;
  animation:up .8s .16s var(--ease) both;
}
#rotator{
  display:block;
  background:var(--grad-spectrum);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
#rotator.rot-exit {animation:rot-out .3s ease-in  forwards}
#rotator.rot-enter{animation:rot-in  .45s var(--ease) forwards}

@keyframes rot-out{from{opacity:1;transform:translateY(0)}  to{opacity:0;transform:translateY(-34px)}}
@keyframes rot-in {from{opacity:0;transform:translateY(42px)}to{opacity:1;transform:translateY(0)}}

.hero-sub{
  font-size:clamp(1.0625rem,2.4vw,1.3125rem);
  color:var(--text-2);max-width:520px;
  margin:0 auto 2.75rem;
  line-height:1.75;font-weight:400;
  animation:up .8s .28s var(--ease) both;
}

.hero-btns{
  display:flex;align-items:center;justify-content:center;
  gap:1rem;flex-wrap:wrap;
  animation:up .8s .38s var(--ease) both;
}

.scroll-cue{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:var(--text-3);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  animation:up .8s .65s var(--ease) both;
}
.scroll-line{
  width:1px;height:44px;
  background:linear-gradient(to bottom,transparent,rgba(167,139,250,.7));
  animation:line-glow 2.2s ease-in-out infinite;
}
@keyframes line-glow{0%,100%{opacity:.3}50%{opacity:1}}

@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font);font-size:.9375rem;font-weight:600;line-height:1;
  text-decoration:none;border:none;cursor:pointer;
  border-radius:var(--r-pill);
  transition:transform .22s var(--ease),box-shadow .25s,opacity .2s,background .2s,border-color .2s;
}
.btn:hover {transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  padding:.9375rem 2.25rem;
  background:var(--grad-cta);color:#fff;
}
.btn-primary:hover{
  box-shadow:0 0 36px rgba(139,92,246,.5),0 8px 32px rgba(0,0,0,.4);
  color:#fff;
}

.btn-outline{
  padding:.875rem 2rem;
  background:transparent;color:var(--text-2);
  border:1px solid var(--border-h);
}
.btn-outline:hover{
  border-color:rgba(255,255,255,.3);color:var(--text);
  background:var(--surface-h);
}

.btn-cta{
  padding:1.125rem 2.875rem;
  font-size:1.0625rem;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border-h);
}
.btn-cta:hover{
  background:var(--surface-h);
  border-color:rgba(167,139,250,.5);
  box-shadow:0 0 60px rgba(139,92,246,.18),0 0 120px rgba(236,72,153,.08);
  color:var(--text);
}

/* ── Products ─────────────────────────────────────────────── */
#products{background:var(--bg-2)}

.section-kicker{
  display:block;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--violet-l);margin-bottom:1rem;
}
.section-title{font-size:clamp(2rem,5vw,3.25rem);color:var(--text);margin-bottom:.75rem}
.section-sub{
  font-size:clamp(1rem,2vw,1.125rem);color:var(--text-2);
  margin-bottom:clamp(3rem,6vw,4.5rem);max-width:500px;
}

.grid-5{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:1.125rem;
}

/* ── Product card ─────────────────────────────────────────── */
.pcard{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:2rem 1.875rem 1.875rem;
  overflow:hidden;
  transition:border-color .3s,box-shadow .35s,transform .35s var(--ease),background .3s;
  opacity:0;transform:translateY(32px);
}
.pcard.visible{
  opacity:1;transform:translateY(0);
  transition:opacity .6s var(--ease),transform .6s var(--ease),
             border-color .3s,box-shadow .35s,background .3s;
}

/* top accent line */
.pcard::after{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  border-radius:var(--r-pill);
  background:var(--card-accent,var(--violet-l));
  opacity:0;transition:opacity .3s;
}
/* mouse glow */
.pcard::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
             rgba(var(--card-rgb,139,92,246),.1) 0%,transparent 55%);
  opacity:0;transition:opacity .4s;
}
.pcard:hover{
  transform:translateY(-7px);
  background:var(--surface-h);
  border-color:rgba(var(--card-rgb,139,92,246),.38);
  box-shadow:0 0 0 1px rgba(var(--card-rgb,139,92,246),.12),
             0 28px 80px rgba(0,0,0,.55),
             0 0 60px rgba(var(--card-rgb,139,92,246),.1);
}
.pcard:hover::after {opacity:1}
.pcard:hover::before{opacity:1}

.pcard--violet{--card-accent:var(--violet-l);--card-rgb:139,92,246}
.pcard--cyan  {--card-accent:var(--cyan-l);  --card-rgb:6,182,212}
.pcard--emerald{--card-accent:var(--emerald-l);--card-rgb:16,185,129}
.pcard--pink  {--card-accent:var(--pink-l);  --card-rgb:236,72,153}
.pcard--amber {--card-accent:var(--amber-l); --card-rgb:245,158,11}

.pcard-icon{
  width:52px;height:52px;margin-bottom:1.25rem;
  border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--card-rgb,139,92,246),.12);
  border:1px solid rgba(var(--card-rgb,139,92,246),.22);
  transition:box-shadow .3s;
}
.pcard:hover .pcard-icon{
  box-shadow:0 0 20px rgba(var(--card-rgb,139,92,246),.25);
}
.pcard-icon svg{width:26px;height:26px}

.pcard-name{
  font-size:1.0625rem;font-weight:700;letter-spacing:-0.025em;
  margin-bottom:.5rem;color:var(--text);
}
.pcard-name .brand{font-weight:400;color:var(--text-3);margin-right:.1em}

.pcard-desc{
  font-size:.9375rem;color:var(--text-2);line-height:1.65;margin-bottom:1.5rem;
}

.pcard-foot{display:flex;align-items:center;justify-content:space-between}

.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .75rem;border-radius:var(--r-pill);
}
.badge-live{
  color:var(--emerald-l);
  background:rgba(16,185,129,.1);
  border:1px solid rgba(16,185,129,.25);
}
.badge-live::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--emerald-l);box-shadow:0 0 6px var(--emerald);
  animation:blink 2s ease-in-out infinite;
}
.badge-soon{
  color:var(--text-3);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

.pcard-link{
  font-size:.8125rem;font-weight:600;color:var(--text-3);
  display:flex;align-items:center;gap:.35rem;transition:color .2s;text-decoration:none;
}
.pcard-link:hover{color:var(--card-accent,var(--violet-l))}
.pcard-link svg{width:12px;height:12px;transition:transform .2s}
.pcard-link:hover svg{transform:translate(2px,-2px)}

/* ── About ────────────────────────────────────────────────── */
#about{position:relative;overflow:hidden}
#about::before{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:800px;height:500px;
  background:radial-gradient(ellipse,rgba(139,92,246,.06) 0%,transparent 65%);
  pointer-events:none;
}

.about-wrap{max-width:680px;margin:0 auto;text-align:center;position:relative}
.about-wrap h2{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:1.5rem}
.about-wrap p{font-size:clamp(1rem,2vw,1.125rem);color:var(--text-2);line-height:1.8}

.stats{
  display:flex;justify-content:center;gap:clamp(2rem,6vw,5rem);
  flex-wrap:wrap;margin-top:3.5rem;padding-top:3rem;
  border-top:1px solid var(--border);
}
.stat{text-align:center}
.stat-val{
  font-size:clamp(2.25rem,5vw,3rem);font-weight:900;letter-spacing:-0.04em;line-height:1;
  background:var(--grad-spectrum);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-label{font-size:.875rem;color:var(--text-3);margin-top:.35rem}

/* ── Contact ──────────────────────────────────────────────── */
#contact{
  background:var(--bg-2);text-align:center;
  position:relative;overflow:hidden;
}
#contact::before{
  content:'';position:absolute;bottom:-20%;left:50%;
  transform:translateX(-50%);
  width:700px;height:400px;
  background:radial-gradient(ellipse,rgba(236,72,153,.08) 0%,transparent 65%);
  pointer-events:none;
}
.contact-wrap{max-width:640px;margin:0 auto;position:relative}
.contact-wrap h2{font-size:clamp(2.25rem,5.5vw,4rem);margin-bottom:1rem}
.contact-wrap>p{color:var(--text-2);font-size:1.0625rem;margin-bottom:2.5rem}
.contact-center{display:flex;justify-content:center}

/* ── Footer ───────────────────────────────────────────────── */
footer{background:#030308;border-top:1px solid var(--border);padding:2rem 0}

.foot-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
}
.foot-logo{
  font-size:1rem;font-weight:900;letter-spacing:-0.04em;text-decoration:none;
  background:var(--grad-spectrum);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.foot-links{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.foot-links a{font-size:.875rem;color:var(--text-3);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--text-2)}
.foot-copy{
  width:100%;text-align:center;font-size:.8125rem;color:var(--text-3);
  padding-top:1.25rem;border-top:1px solid var(--border);margin-top:.5rem;
}

/* ── Policy page ──────────────────────────────────────────── */
.page-hero{
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--border);
}
.page-hero h1{font-size:clamp(1.875rem,4.5vw,3rem);margin-bottom:.5rem}
.page-hero p{color:var(--text-3);font-size:.9375rem;margin:0}

.policy-body{padding:clamp(3rem,6vw,5rem) 0}
.policy-content{max-width:720px}
.policy-content h2{
  font-size:1.25rem;color:var(--text);
  margin:2.5rem 0 .75rem;letter-spacing:-.015em;
}
.policy-content h2:first-child{margin-top:0}
.policy-content p,.policy-content li{color:var(--text-2);font-size:1rem;line-height:1.75}
.policy-content ul{list-style:disc;padding-left:1.5rem;margin-bottom:1em}
.policy-content li{margin-bottom:.4em}
.policy-content a{color:var(--cyan-l)}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:640px){
  .grid-5{grid-template-columns:1fr}
  .rotator-track{overflow:visible;height:auto}
  .stats{gap:2rem}
  .foot-inner{flex-direction:column;align-items:flex-start}
  .foot-links{gap:1rem}
  .hero-btns{flex-direction:column;align-items:center}
}

/* ── Reduced motion ───────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .orb{animation:none!important}
  .scroll-line,.badge-live::before,.eyebrow-dot{animation:none!important}
  .pcard{opacity:1!important;transform:none!important;transition:border-color .01ms,box-shadow .01ms!important}
  .cursor-glow{display:none}
}