:root{
  --bg: #060a0b;
  --bg-panel: #0a1113;
  --teal: #00d2be;
  --teal-dim: #0d6e69;
  --white: #f3f6f6;
  --muted: #9fb3b2;
  --line: rgba(22,184,176,0.25);
  --maxw: 640px;
}

*{ box-sizing: border-box; }

html, body{
  margin:0;
  padding:0;
  height:100%;
  background: var(--bg);
  color: var(--white);
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.bg-image{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}
.bg-tint{
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
	radial-gradient(1100px 700px at 78% 8%, rgba(22,184,176,0.10), transparent 60%),
	linear-gradient(180deg, rgba(6,10,11,0.55) 0%, rgba(6,10,11,0.75) 45%, rgba(6,10,11,0.95) 100%);
}

.wrap{
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6vh 24px 4vh;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

/* ============ Logo ============ */
.logo-row{
  display:flex;
  align-items:center;
  margin-bottom: 50px;
}
.logo {
	width: 400px;
	max-width: 100%;
	margin: 0 auto;
}

/* ============ Headline ============ */
.headline{
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
}
.headline .l1{
  display:block;
  font-size: clamp(44px, 10vw, 88px);
  color: var(--white);
}
.headline .l2{
  display:block;
  font-size: clamp(44px, 10vw, 88px);
  color: var(--teal);
}

.rule{
  width: 64px;
  height: 3px;
  background: var(--teal);
  margin: clamp(20px, 3vh, 32px) 0 clamp(18px, 3vh, 26px);
  border-radius: 2px;
}

.tagline{
  font-weight: 400;
  font-size: clamp(16px, 2.4vw, 20px);
  color: var(--white);
  max-width: 34ch;
  margin: 0 0 clamp(36px, 6vh, 32px);
}

/* ============ Loading bar ============ */
.loadbar-track{
  width: min(340px, 80vw);
  height: 20px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  padding: 3px;
  margin: 0 auto 14px;     
  overflow: hidden;
  display: flex;
}

.loadbar-fill{
  position: relative;
  height: 100%;
  width: 50%;
  border-radius: 999px;
  overflow: hidden;        
}

.loadbar-fill::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: repeating-linear-gradient(
	-45deg,
	var(--teal) 0 8px,
	var(--teal-dim) 8px 16px
  );
  animation: stripe-move 1.2s linear infinite;
  will-change: transform;
}

@keyframes stripe-move{
  from { transform: translateX(0); }
  to   { transform: translateX(-45px); }
}

.loading-text{
  font-weight: 700;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 0.34em;
  color: var(--teal);
  margin-bottom: clamp(36px, 6vh, 60px);
}
.loading-text::after{
  content: '';
  display:inline-block;
  width: 1.6em;
  text-align:left;
  animation: dots 1.4s steps(4,end) infinite;
}
@keyframes dots{
  0%{ content: ''; }
  25%{ content: '.'; }
  50%{ content: '..'; }
  75%{ content: '...'; }
  100%{ content: ''; }
}

/* ============ Footer ============ */
.footer{
  width: 100%;
  max-width: 480px;
  padding-top: clamp(20px, 4vh, 32px);
  border-top: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
}
.mail-icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.mail-icon svg{ width: 16px; height: 16px; }

.footer-text{
  font-size: clamp(14px, 2vw, 17px);
  color: var(--white);
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:center;
}
.footer a{
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.footer a:hover{
  color: var(--teal);
}
.arrow{ color: var(--teal); }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  .loadbar-fill{ animation: none; width: 45%; }
  .loading-text::after{ animation: none; content: '...'; }
}

/* ============ Responsive ============ */
@media (max-width: 560px){
  .wrap{ padding: 60px 40px 40px; }
}

@media (max-width: 380px){
  .headline .l1, .headline .l2{ font-size: 38px; }
}