:root{
  --brand-1:#2563EB;
  --brand-1-d:#1D4ED8;
  --brand-2:#7C5CFF;
  --brand-3:#10DBA2;
  --brand-3-d:#0AA97D;

  --ink:#0B1220;
  --ink-2:#334155;
  --ink-3:#5B6B82;
  --ink-4:#8A98AC;

  --glass:rgba(255,255,255,.58);
  --glass-2:rgba(255,255,255,.36);
  --glass-3:rgba(255,255,255,.74);
  --glass-solid:rgba(255,255,255,.92);
  --line:rgba(255,255,255,.7);
  --line-2:rgba(15,23,42,.09);
  --line-3:rgba(15,23,42,.14);

  --shadow-1:0 1px 2px rgba(15,23,42,.05),0 10px 26px rgba(15,23,42,.07);
  --shadow-2:0 18px 44px rgba(15,23,42,.11);
  --shadow-3:0 40px 90px rgba(15,23,42,.2);
  --shadow-brand:0 12px 30px rgba(37,99,235,.28);

  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;

  --blur:22px;
  --max:1220px;
  --head-h:66px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --fast:.16s;
  --mid:.28s;
  --slow:.5s;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:"Inter","SF Pro Display",-apple-system,"Segoe UI Variable Display","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;
  line-height:1.62;
  letter-spacing:.005em;
  background:#F2F5FB;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-30vmax;
  z-index:-2;
  background:
    radial-gradient(38vmax 38vmax at 16% 10%,rgba(37,99,235,.34),transparent 62%),
    radial-gradient(32vmax 32vmax at 84% 6%,rgba(16,219,162,.3),transparent 60%),
    radial-gradient(42vmax 42vmax at 72% 76%,rgba(124,92,255,.28),transparent 64%),
    radial-gradient(30vmax 30vmax at 8% 86%,rgba(37,99,235,.2),transparent 62%),
    linear-gradient(180deg,#F4F7FC 0%,#EEF2FA 48%,#F5F7FC 100%);
  animation:ambient 26s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

@keyframes ambient{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
}

h1,h2,h3,h4{
  margin:0;
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.16;
}

p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
table{border-collapse:collapse;width:100%}
input,select,textarea{font:inherit;color:inherit}

::selection{background:rgba(37,99,235,.2)}

:focus-visible{
  outline:2px solid var(--brand-1);
  outline-offset:3px;
  border-radius:4px;
}

.shell{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
}

.glass-solid{
  background:var(--glass-solid);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
}

.g-wrap{position:relative}
.g-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.25) 42%,rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px 6px 8px;
  border-radius:100px;
  background:var(--glass-2);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid var(--line);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--ink-2);
  text-transform:uppercase;
}

.eyebrow i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--brand-3);
  box-shadow:0 0 0 4px rgba(16,219,162,.18);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:46px;
  padding:0 20px;
  border-radius:var(--r-sm);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:transform var(--fast) var(--ease),box-shadow var(--mid) var(--ease),background var(--fast),border-color var(--fast),color var(--fast);
  will-change:transform;
}

.btn:active{transform:translateY(1px) scale(.995)}

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--brand-1) 0%,#3B76F0 55%,var(--brand-2) 130%);
  box-shadow:var(--shadow-brand);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(37,99,235,.34);
}

.btn-line{
  color:var(--ink);
  background:var(--glass-2);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
}

.btn-line:hover{
  background:var(--glass-3);
  transform:translateY(-2px);
  box-shadow:var(--shadow-1);
}

.btn-ghost{
  color:var(--ink-3);
  background:transparent;
  border:1px solid var(--line-2);
}

.btn-ghost:hover{color:var(--ink);border-color:var(--line-3);background:rgba(255,255,255,.4)}

.btn-sm{height:38px;padding:0 14px;font-size:12.5px;border-radius:10px}

.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45;
  pointer-events:none;
  box-shadow:none;
}

.field{
  position:relative;
  display:flex;
  align-items:center;
}

.field input{
  width:100%;
  height:42px;
  padding:0 14px 0 38px;
  border-radius:11px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-size:13px;
  color:var(--ink);
  transition:border-color var(--fast),box-shadow var(--fast),background var(--fast);
}

.field input::placeholder{color:var(--ink-4)}

.field input:focus{
  outline:none;
  border-color:rgba(37,99,235,.55);
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.field::before{
  content:"";
  position:absolute;
  left:14px;
  width:12px;
  height:12px;
  border:1.6px solid var(--ink-4);
  border-radius:50%;
  pointer-events:none;
}

.field::after{
  content:"";
  position:absolute;
  left:23px;
  top:26px;
  width:5px;
  height:1.6px;
  background:var(--ink-4);
  transform:rotate(45deg);
  pointer-events:none;
}

.count{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:100px;
  background:rgba(255,255,255,.5);
  border:1px solid var(--line);
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-3);
  white-space:nowrap;
}

.count[data-bad="1"]{
  color:#B45309;
  border-color:rgba(180,83,9,.24);
  background:rgba(251,191,36,.14);
}

.grow{flex:1}

[hidden]{display:none !important}

.sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
