/* Teklla — página em atualização (estático puro) */
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; background:#070b1f; }

.tk-page{
  position:relative; width:100%; min-height:100vh; overflow:hidden;
  background:radial-gradient(120% 100% at 50% -10%, #122059 0%, #0a0f2c 45%, #070b1f 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:#eef1fb;
}

/* decorative layers */
.tk-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(120,150,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,150,255,.06) 1px, transparent 1px);
  background-size:46px 46px;
  animation:tk-drift 26s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image:radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}
.tk-topglow{
  position:absolute; top:0; left:0; right:0; height:140px;
  background:linear-gradient(180deg, rgba(120,160,255,.10), transparent);
  pointer-events:none;
}
.tk-scan{
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(122,162,255,.55), transparent);
  animation:tk-scan 9s linear infinite; pointer-events:none;
}
.tk-orb{
  position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(86,120,255,.16), transparent 65%);
  filter:blur(20px); animation:tk-glow 7s ease-in-out infinite; pointer-events:none;
}

/* content */
.tk-main{
  position:relative; z-index:2; width:min(720px, 90vw);
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 0;
}
.tk-badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px;
  border:1px solid rgba(122,162,255,.28); border-radius:999px;
  background:rgba(122,162,255,.06);
  font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size:12px; letter-spacing:.22em; color:#a9bcff; text-transform:uppercase;
}
.tk-dot{
  width:8px; height:8px; border-radius:50%; background:#7aa2ff;
  box-shadow:0 0 10px #7aa2ff; animation:tk-pulse 1.8s ease-in-out infinite;
}
.tk-logo{
  width:min(360px,62vw); height:auto; margin-top:46px;
  filter:drop-shadow(0 6px 30px rgba(60,90,200,.35));
}
.tk-title{
  margin-top:48px; font-size:clamp(30px,5vw,52px); font-weight:600;
  line-height:1.12; letter-spacing:-.01em;
}
.tk-title span{ color:#9fb4ff; }
.tk-text{
  margin-top:22px; max-width:520px; font-size:clamp(15px,1.6vw,18px);
  font-weight:300; line-height:1.7; color:#bcc6ec; text-wrap:pretty;
}

.tk-progress{
  margin-top:40px; width:min(380px,80vw); height:4px; border-radius:999px;
  background:rgba(122,162,255,.14); overflow:hidden;
}
.tk-progress-bar{
  width:28%; height:100%; border-radius:999px;
  background:linear-gradient(90deg, #5e7bff, #a9bcff);
  box-shadow:0 0 14px rgba(122,162,255,.6);
  animation:tk-bar 1.9s ease-in-out infinite;
}

.tk-chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:48px;
}
.tk-chip{
  padding:8px 16px; border:1px solid rgba(170,188,255,.16); border-radius:999px;
  font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size:12px; letter-spacing:.08em; color:#aeb9e4;
}

.tk-contact{
  margin-top:54px; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.tk-contact-label{
  font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#6f7bab;
}
.tk-contact a{
  color:#dbe2ff; text-decoration:none; font-size:16px; font-weight:500;
  border-bottom:1px solid rgba(122,162,255,.4); padding-bottom:3px; transition:color .2s, border-color .2s;
}
.tk-contact a:hover{ color:#ffffff; border-bottom-color:#9fb4ff; }

.tk-footer{
  position:relative; z-index:2; padding:26px 0;
  font-family:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size:11px; letter-spacing:.14em; color:#5a6594; text-transform:uppercase;
  text-align:center;
}

@keyframes tk-drift { 0%{ transform:translate(0,0); } 50%{ transform:translate(-3%,-2%); } 100%{ transform:translate(0,0); } }
@keyframes tk-scan { 0%{ top:-10%; opacity:0; } 8%{ opacity:.6; } 92%{ opacity:.6; } 100%{ top:110%; opacity:0; } }
@keyframes tk-pulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.82); } }
@keyframes tk-bar { 0%{ transform:translateX(-100%); } 100%{ transform:translateX(400%); } }
@keyframes tk-glow { 0%,100%{ opacity:.5; } 50%{ opacity:.85; } }
