:root {
  --bg:#f4f4f4;
  --card-bg:#fff;
  --text:#222;
  --muted:#555;
  --btn:#0066cc;
  --btn-hover:#0053a3;
  --accent:#9a1f24;
  --fade-duration:900ms;
  --fade-delay-step:120ms;
  --redirect-seconds:10;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background-color:var(--bg);
  background-image:url('../assets/bg-architect-grid.svg');
  background-size:cover;
  background-attachment:fixed;
  display:grid;
  place-items:center;
  padding:24px
}

.container{
  width:100%;
  max-width:760px;
  background:var(--card-bg);
  padding:34px 28px;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  text-align:center;
  overflow:hidden
}

@keyframes fadeInUp{
  0%{opacity:0;transform:translateY(12px);filter:blur(4px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:translateY(0)}
}

.logo{
  width:min(360px,70vw);
  height:auto;
  margin:8px auto 18px;
  display:block;
  animation:fadeInUp var(--fade-duration) ease-out both
}

h1{
  font-size:clamp(1.6rem,2.5vw,2.2rem);
  margin:10px 0 8px;
  letter-spacing:.2px;
  animation:fadeInUp var(--fade-duration) ease-out calc(var(--fade-delay-step) * 1) both
}

p.desc{
  font-size:clamp(1rem,2vw,1.05rem);
  color:var(--muted);
  margin:0 0 18px;
  line-height:1.6;
  animation:fadeInUp var(--fade-duration) ease-out calc(var(--fade-delay-step) * 2) both
}

.progress-wrap{
  width:100%;
  max-width:420px;
  margin:0 auto 18px;
  animation:fadeInUp var(--fade-duration) ease-out calc(var(--fade-delay-step) * 3) both
}

.progress{
  height:8px;
  background:#e7e7e7;
  border-radius:999px;
  overflow:hidden
}

.progress>span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent),#b03036);
  transition:width .3s ease
}

.countdown{
  color:var(--muted);
  margin-bottom:18px;
  font-size:.98rem
}

.cta{
  display:inline-block;
  background:var(--btn);
  color:#fff;
  text-decoration:none;
  padding:12px 20px;
  border-radius:8px;
  font-weight:700;
  letter-spacing:.3px;
  transition:background 160ms ease,transform 160ms ease,box-shadow 160ms ease;
  animation:fadeInUp var(--fade-duration) ease-out calc(var(--fade-delay-step) * 4) both
}

.cta:hover{
  background:var(--btn-hover);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.12)
}

.action-row{
  margin-top:12px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap
}

.btn-secondary{
  background:transparent;
  color:var(--btn);
  border:1px solid var(--btn);
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer
}

.btn-secondary:hover{
  background:rgba(0,102,204,.08)
}

/* ================= CONTACT ================= */

.contact{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.08);
  font-size:.95rem;
  animation:fadeInUp var(--fade-duration) ease-out calc(var(--fade-delay-step) * 5) both
}

.contact h2{
  font-size:1.15rem;
  margin:0 0 12px;
  letter-spacing:.3px
}

.contact-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}

.contact-list li{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.contact a{
  color:var(--btn);
  text-decoration:none;
  font-weight:600
}

.contact a:hover{
  text-decoration:underline
}

/* Icon system (pure CSS, no fonts) */
.contact-list li::before{
  content:'';
  width:14px;
  height:14px;
  background:var(--accent);
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
}

.icon-user::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E")}
.icon-phone::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.6 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 5a1 1 0 0 1 1-1h3.4a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .6 3.6 1 1 0 0 1-.24 1Z'/%3E%3C/svg%3E")}
.icon-mail::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z'/%3E%3C/svg%3E")}
.icon-map::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 14.5 9 2.5 2.5 0 0 1 12 11.5Z'/%3E%3C/svg%3E")}

.note{
  margin-top:18px;
  font-size:.92rem;
  color:#666
}

/* Dark mode */
@media (prefers-color-scheme:dark){
  body{background-color:#111;color:#eee}
  .container{background:#1b1b1b;box-shadow:0 8px 28px rgba(0,0,0,.35)}
  p.desc,.note,.countdown{color:#bbb}
  .progress{background:#333}
  .contact{border-top-color:rgba(255,255,255,.12)}
}