/* IMPORT SYNCOPATE FONT (for SFOOR LABS badge) */
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap');

:root {
  --text-main:#ffffff;
  --accent:#0A84FF;
  --blob-1:#4facfe;
  --blob-2:#00f2fe;
  --glass-bg:rgba(30,30,35,0.45);
  --glass-border:rgba(255,255,255,0.15);
  --glass-radius:24px;
  --glass-blur:40px;
  --glass-shadow:0 8px 32px rgba(0,0,0,0.4);
  --item-bg:rgba(0,0,0,0.35);
  --item-hover:rgba(0,0,0,0.55);
  --muted-accent:rgba(255,255,255,0.28);
}

/* LOCAL FONTS (CLOCK 01-12) */
@font-face{font-family:'MyClock01';src:url('fonts/clock01.ttf') format('truetype');}
@font-face{font-family:'MyClock02';src:url('fonts/clock02.ttf') format('truetype');}
@font-face{font-family:'MyClock03';src:url('fonts/clock03.ttf') format('truetype');}
@font-face{font-family:'MyClock04';src:url('fonts/clock04.ttf') format('truetype');}
@font-face{font-family:'MyClock05';src:url('fonts/clock05.ttf') format('truetype');}
@font-face{font-family:'MyClock06';src:url('fonts/clock06.ttf') format('truetype');}
@font-face{font-family:'MyClock07';src:url('fonts/clock07.ttf') format('truetype');}
@font-face{font-family:'MyClock08';src:url('fonts/clock08.ttf') format('truetype');}
@font-face{font-family:'MyClock09';src:url('fonts/clock09.ttf') format('truetype');}
@font-face{font-family:'MyClock10';src:url('fonts/clock10.ttf') format('truetype');}
@font-face{font-family:'MyClock11';src:url('fonts/clock11.ttf') format('truetype');}
@font-face{font-family:'MyClock12';src:url('fonts/clock12.ttf') format('truetype');}

/* LOCAL FONTS (TEXT 01-03) */
@font-face{font-family:'MyText01';src:url('fonts/text01.ttf') format('truetype');}
@font-face{font-family:'MyText02';src:url('fonts/text02.ttf') format('truetype');}
@font-face{font-family:'MyText03';src:url('fonts/text03.ttf') format('truetype');}

/* base */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'SF Pro Display','Inter',sans-serif;
}
.ff-default{font-family:'SF Pro Display','Inter',sans-serif;}

/* scrollbars */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.3);}

/* layout */
body{
  background:#050505;
  color:var(--text-main);
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:background-color .5s;
}
.background-layer{position:fixed;inset:0;z-index:-1;}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  opacity:.6;
  animation:floatBlob 25s infinite alternate;
  transition:background 1s ease;
}
.blob-1{
  width:600px;
  height:600px;
  background:radial-gradient(circle,var(--blob-1),var(--accent));
  top:-150px;
  left:-150px;
}
.blob-2{
  width:700px;
  height:700px;
  background:radial-gradient(circle,var(--accent),var(--blob-2));
  bottom:-150px;
  right:-150px;
  animation-delay:-5s;
}
@keyframes floatBlob{
  0%{transform:translate(0,0)}
  100%{transform:translate(60px,40px)}
}