/* COLORS */
:root{
  --teal:#4CB8A6;
  --teal-darker:#eaf5f1;
  --light-blue:#E39B62;
  --light-darker:#fbeee0;
  --dark-gray:#131418;
  --slate-blue:#EDEAE5;
  --white:#131418;
  --white-a-62:rgba(19,20,24,.62);
  --white-a-42:rgba(19,20,24,.64);
  --white-a-10:rgba(19,20,24,.08);
  --glass:rgba(19,20,24,.035);
  --ultra-dark-gray:#f2f2f2;
}

/* ELEMENTS */

:root{
  --bg:var(--dark-gray);
  --bg-2:var(--slate-blue);
  --main-color:var(--light-blue);
  --sec-color:var(--teal);
  --body-bg:var(--ultra-dark-gray);
  --cn-gr-1:conic-gradient(from var(--a),var(--sec-color),var(--teal-darker),var(--main-color),var(--light-darker),var(--sec-color));
}

/* MISC */

:root{
  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
  --f:'Poppins',system-ui,-apple-system,sans-serif;
  --fd:'Poppins',system-ui,sans-serif;
}

@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f);color:var(--white);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:var(--body-bg);
}
::selection{background:var(--main-color);color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.02em;line-height:1.08;color:var(--dark-gray)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.cursor{display:inline-block;width:3px;height:.92em;background:var(--main-color);vertical-align:-.05em;margin-left:3px;
  border-radius:2px;animation:blink 1s step-end infinite;box-shadow:0 0 12px var(--main-color)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sec-color);
  display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--main-color),transparent)}
section{scroll-margin-top:90px}
.sec{padding:clamp(70px,9vw,120px) 0}
.sec-head{margin-bottom:clamp(38px,5vw,58px)}
.sec-head h2{font-size:clamp(30px,4.8vw,52px);margin-top:16px;color:var(--dark-gray)}
.sec-head p{color:var(--white);margin-top:16px;font-size:17px;font-family:var(--f)}
.bw{position:relative;border-radius:999px;display:inline-flex;isolation:isolate}
.bw::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;
  background:var(--cn-gr-1);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:spinA 3s linear infinite;z-index:-1}
@keyframes spinA{to{--a:360deg}}
.pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;
  background:#0c0724;color:#fff;border-radius:999px;padding:13px 26px;font-size:15px;font-weight:500;
  cursor:pointer;border:0;font-family:var(--f)}
.pill svg{width:17px;height:17px}
.pill::after{content:"";position:absolute;inset:0;background:var(--main-color);transform:translateX(-100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);z-index:0}
.pill.from-r::after{transform:translateX(100%)}
.pill:hover::after{transform:translateX(0)}
.pill>*{position:relative;z-index:1}
.pill--lg{padding:15px 30px;font-size:16px}
.link-u{position:relative;font-size:15px;color:var(--dark-gray)}
.link-u::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.link-u:hover::after{transform:scaleX(1)}
:focus-visible{outline:2px solid var(--main-color);outline-offset:3px;border-radius:3px}