/* ============================================================
   CATCODE DESIGN SYSTEM
   Apple-inspired: system type, glassmorphism, superellipse corners
   ============================================================ */
:root{
  --accent:#2997ff;
  --accent-light:#64d2ff;
  --bg:#000;
  --panel:rgba(22,22,23,.8);
  --hairline:rgba(255,255,255,.18);
}

html{ background:#000; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",sans-serif;
  background:#000;
  color:#f5f5f7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:rgba(41,151,255,.35); color:#fff; }
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:#2c2c2e; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:#3a3a3c; }

/* ---------- Glassmorphism ---------- */
.glass{
  background:var(--panel);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--hairline);
}

/* ---------- Apple continuous curvature (squircle) ----------
   Chrome 134+ honours `corner-shape:superellipse`; every other
   browser gracefully falls back to the smooth border-radius.   */
.squircle    { border-radius:1.15rem;   corner-shape:superellipse; }
.squircle-lg { border-radius:2rem;      corner-shape:superellipse; }
.squircle-xl { border-radius:2.75rem;   corner-shape:superellipse; }
.squircle-sm { border-radius:.85rem;    corner-shape:superellipse; }

/* ---------- Typography helpers ---------- */
.text-gradient{
  background:linear-gradient(180deg,#fff 0%,#a1a1a6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-gradient-accent{
  background:linear-gradient(92deg,#2997ff 0%,#64d2ff 55%,#9be8ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:#98989d; font-weight:600;
}
.eyebrow .dot{
  width:.4rem; height:.4rem; border-radius:99px;
  background:var(--accent); box-shadow:0 0 12px rgba(41,151,255,.9);
  animation:dotpulse 2.4s ease-in-out infinite;
}
@keyframes dotpulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.45; transform:scale(.72)} }

/* ---------- Buttons ---------- */
.btn-primary{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(180deg,#3aa0ff 0%,#1481f0 100%);
  color:#fff; font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  padding:.9rem 1.75rem; border-radius:1rem; corner-shape:superellipse;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 28px -8px rgba(41,151,255,.65), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 38px -8px rgba(41,151,255,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-primary:active{ transform:translateY(0) scale(.98); }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  color:#f5f5f7; font-weight:500; font-size:.95rem;
  padding:.9rem 1.6rem; border-radius:1rem; corner-shape:superellipse;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:background .25s, transform .25s, border-color .25s;
}
.btn-ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }

/* ---------- Language toggle ---------- */
.lang-toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  color:#f5f5f7; padding:.42rem .8rem; border-radius:.85rem; corner-shape:superellipse;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:background .25s, border-color .25s, transform .25s;
  cursor:pointer; line-height:1;
}
.lang-toggle:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); }
.lang-toggle:active{ transform:scale(.95); }

/* ---------- Ambient noise + orbs ---------- */
.noise{
  position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.orb{ position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; }

/* ---------- Nav ---------- */
#nav{ transition:background .35s, border-color .35s, backdrop-filter .35s; border-bottom:1px solid transparent; }
#nav.nav-solid{
  background:rgba(0,0,0,.66);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-link{ position:relative; color:#a1a1a6; font-size:.875rem; font-weight:500; transition:color .25s; }
.nav-link:hover{ color:#fff; }
.nav-link.active{ color:#fff; }
.nav-link.active::after{
  content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:var(--accent); border-radius:99px; transition:right .35s cubic-bezier(.22,1,.36,1);
}
.nav-link.active::after{ right:0; }

/* ---------- Progress bar ---------- */
#progress-bar{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,#2997ff,#64d2ff);
  box-shadow:0 0 12px rgba(41,151,255,.7); z-index:70;
}

/* ---------- Hero cat scene ---------- */
.cat-scene{ perspective:1400px; }
.cat-float{ animation:bob 6.5s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.cat-eyes{ transform-origin:center; animation:blink 4.6s infinite; }
@keyframes blink{ 0%,91%,100%{transform:scaleY(1)} 94%{transform:scaleY(.08)} }

.cat-tail{ transform-origin:86px 356px; animation:wag 3.8s ease-in-out infinite; }
@keyframes wag{ 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-14deg)} }

.screen{ transform:rotateX(-7deg); transform-origin:bottom center; }
.deck{ transform:rotateX(30deg); transform-origin:top center; }

.paw{
  position:absolute; width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#FFD54F,#FFCA28 62%,#F0B429);
  box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 -4px 8px rgba(176,124,0,.35);
  z-index:5;
}
.paw::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-42%);
  width:26px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 30% 40%,#E8A23A 0 22%,transparent 40%);
  box-shadow:8px -2px 0 -1px #E8A23A, -8px -2px 0 -1px #E8A23A, 0 6px 0 -2px #E8A23A;
  opacity:.9;
}
.paw-l{ left:16%; bottom:10px; animation:type-l .52s ease-in-out infinite; }
.paw-r{ right:14%; bottom:10px; animation:type-r .46s ease-in-out infinite .1s; }
@keyframes type-l{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px) scale(.97)} }
@keyframes type-r{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px) scale(.97)} }

.key{
  background:linear-gradient(180deg,#2a2a2c,#1c1c1e);
  border:1px solid rgba(255,255,255,.07); border-radius:.3rem;
  box-shadow:0 2px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}

.sbar{ border-radius:99px; animation:barpulse 2.8s ease-in-out infinite; }
@keyframes barpulse{ 0%,100%{opacity:.28} 50%{opacity:1} }

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 30s linear infinite; }
.marquee-track > span{ padding-right:3.5rem; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%);} }

/* ---------- Spotlight cards ---------- */
.spotlight{ position:relative; overflow:hidden; }
.spotlight::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(41,151,255,.14), transparent 65%);
  opacity:0; transition:opacity .35s;
}
.spotlight:hover::before{ opacity:1; }
.spotlight > *{ position:relative; z-index:1; }

/* ---------- Process cards ---------- */
.process-card{
  background:var(--panel);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:1.6rem; corner-shape:superellipse;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .4s, box-shadow .4s;
}
.process-card:hover{ transform:translateY(-6px); border-color:rgba(255,255,255,.3); box-shadow:0 24px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(41,151,255,.12); }
.process-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.process-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,1,.36,1); }
.process-card:hover .process-img img{ transform:scale(1.06); }
.process-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 100%);
}
.process-fallback{
  position:absolute; inset:0; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem; z-index:1;
  background:
    radial-gradient(80% 90% at 20% 10%, rgba(41,151,255,.18), transparent 60%),
    radial-gradient(80% 90% at 85% 90%, rgba(100,210,255,.12), transparent 60%),
    linear-gradient(160deg,#1d1d1f,#0c0c0d);
  color:#98989d;
}
.process-fallback.show{ display:flex; }
.process-num{
  font-size:.78rem; font-weight:700; letter-spacing:.18em; color:var(--accent);
}

/* ---------- Sheet (Google Sheets mock) ---------- */
#sheet-grid{ display:grid; grid-template-columns:38px repeat(5,minmax(0,1fr)); }
.sheet-row{ display:contents; }
.sheet-cell{
  border-right:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:7px 10px; font-size:12px; color:#e8e8ed;
  min-height:31px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .45s cubic-bezier(.22,1,.36,1), color .45s, box-shadow .45s;
}
.sheet-header{ background:rgba(255,255,255,.05); font-weight:600; color:#f5f5f7; }
.sheet-col-label{ color:#86868b; font-weight:600; font-size:11px; background:rgba(255,255,255,.025); }
.sheet-rownum{ border-right:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); padding:7px 4px; text-align:center; color:#5f5f63; font-size:11px; background:rgba(255,255,255,.02); }
.sheet-corner{ border-right:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03); }
.live-cell{ background:rgba(255,255,255,.018); }
.cell-flash{
  background:rgba(52,199,89,.6) !important;
  color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(52,199,89,.8);
  animation:cellpop .5s cubic-bezier(.22,1,.36,1);
}
@keyframes cellpop{ 0%{ transform:scale(1.07); } 100%{ transform:scale(1);} }

/* ---------- Demo form ---------- */
.mock-field label{
  display:block; font-size:.68rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:#86868b; margin-bottom:.4rem;
}
.mock-input{
  display:flex; align-items:center; gap:.1rem;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  border-radius:.65rem; corner-shape:superellipse;
  padding:.62rem .85rem; font-size:.92rem; color:#f5f5f7; min-height:40px;
  transition:border-color .3s, box-shadow .3s;
}
.mock-input:has(.caret){ border-color:rgba(41,151,255,.55); box-shadow:0 0 0 3px rgba(41,151,255,.15); }
.caret{
  display:inline-block; width:1.5px; height:1.05em; margin-left:1px;
  background:var(--accent); vertical-align:-.15em;
  animation:caretblink .9s steps(1) infinite;
}
@keyframes caretblink{ 0%,60%{opacity:1} 61%,100%{opacity:0} }

.btn-success{ background:linear-gradient(180deg,#34c759,#28a745) !important; border-color:rgba(52,199,89,.5) !important; box-shadow:0 8px 26px -8px rgba(52,199,89,.6) !important; }

/* ---------- Beam (form → sheet connection) ---------- */
#beam{ position:absolute; height:2px; pointer-events:none; z-index:10; }
#beam-line{
  position:absolute; inset:0; border-top:1px dashed rgba(255,255,255,.28);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
#beam-dot{
  position:absolute; top:50%; left:0; width:10px; height:10px; margin-top:-5px;
  border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(41,151,255,.22), 0 0 18px 3px rgba(41,151,255,.75);
}

.status-dot{ width:7px; height:7px; border-radius:50%; background:#86868b; transition:background .3s; }
.status-dot.ok{ background:#34c759; box-shadow:0 0 8px rgba(52,199,89,.8); }
.status-dot.busy{ background:var(--accent); animation:dotpulse 1.1s ease-in-out infinite; }

/* ---------- Toast ---------- */
#sync-toast{
  position:absolute; left:50%; bottom:-2.5rem; transform:translate(-50%,8px);
  opacity:0; pointer-events:none; transition:opacity .5s, transform .5s;
}
#sync-toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- Form validation ---------- */
.field-shake{ animation:shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{
  10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}
}
input:focus{ outline:none; }
.cta-input{
  width:100%; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  border-radius:.8rem; corner-shape:superellipse;
  padding:.85rem 1.05rem; font-size:.95rem; color:#f5f5f7;
  transition:border-color .3s, box-shadow .3s;
}
.cta-input::placeholder{ color:#6e6e73; }
.cta-input:focus{ border-color:rgba(41,151,255,.6); box-shadow:0 0 0 3px rgba(41,151,255,.15); }
.cta-input.input-error{ border-color:rgba(255,69,58,.7) !important; box-shadow:0 0 0 3px rgba(255,69,58,.15) !important; }
.cta-input.input-error::placeholder{ color:rgba(255,69,58,.55); }

.check-ring{ width:72px; height:72px; }
.check-ring circle{ fill:none; stroke-width:2.5; }
.check-ring .ring{ stroke:rgba(52,199,89,.35); }
.check-ring .tick{ stroke:#34c759; stroke-dasharray:60; stroke-dashoffset:60; animation:draw .7s .15s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ---------- Misc ---------- */
.grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
  mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
}
.glow-line{ height:1px; background:linear-gradient(90deg,transparent, rgba(255,255,255,.14), transparent); }

/* ---------- T&C modal ---------- */
.modal{
  position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:1rem;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.modal.open{ opacity:1; pointer-events:auto; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.66); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.modal-card{
  position:relative; width:min(680px,100%); max-height:82vh; display:flex; flex-direction:column;
  background:rgba(24,24,26,.96);
  border:1px solid rgba(255,255,255,.18);
  transform:translateY(20px) scale(.97);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  box-shadow:0 40px 110px -20px rgba(0,0,0,.95);
}
.modal.open .modal-card{ transform:translateY(0) scale(1); }
#tnc-body::-webkit-scrollbar{ width:6px; }
#tnc-body::-webkit-scrollbar-thumb{ background:#3a3a3c; border-radius:99px; }
#tnc-body b, #tnc-body strong{ color:#f5f5f7; font-weight:600; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}


/* scroll hint (was inline in hero) */
@keyframes scrolldrop{ 0%{transform:translateY(-12px)} 70%,100%{transform:translateY(40px)} }