/*
* WESAC Coming Soon — layout (no visible boxes behind logo, hero, or countdown)
*/

/* ===== Theme tokens / easy knobs ===== */
:root{
  --bg:#0f1012;
  --fg:#ffffff;
  --muted:#c9cbd1;
  --brand:#E91E63;
  --brand2:#00c2ff;
  --ring:rgba(255,255,255,.12);
  --card:#13161b;
  --radius:16px;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --wrap:1200px;

  /* Sizing knobs you can tweak */
 --logoSize:178px;    /* original logo size */
  --heroW: 870px;       /* hero image max width (desktop) */
  --heroH: 660px;       /* hero image max height (desktop) */
  --clockW: 800px;      /* flip clock width on desktop */
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background: radial-gradient(1400px 700px at 45% 20%, #2a2d33 0%, #17191d 45%, #0b0c0f 100%);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:20px 22px}
a{color:#9ee7ff;text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Header ===== */
header{padding:6px 0 10px}
.brand-row{display:flex;align-items:center;gap:15px}
.logo{
  width:var(--logoSize); height:var(--logoSize);
  display:block; object-fit:contain; /* no visible square */
}
.brand-block{display:flex;flex-direction:column}
.brand-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand-name{font-weight:900;letter-spacing:.2px;font-size: clamp(26px,4.6vw,44px);line-height:1.05}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 12px;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#fff;font-weight:800;font-size:12px;box-shadow:var(--shadow);
}
.brand-sub{margin-top:2px;color:#dfe2e7;font-weight:700;font-size: clamp(13px,2.2vw,15px)}
.subtitle{color:var(--muted);margin-top:2px;font-size: clamp(13px,2.2vw,14.5px)}

/* ===== Hero ===== */
.hero{
  display:grid;
  grid-template-columns:minmax(380px,1fr) minmax(420px, var(--heroW));
  gap:55px; align-items:center; padding:28px 0 10px;
}
.hero-copy{max-width:760px}
.title{margin:8px 0 8px;font-size:clamp(36px,6vw,64px);line-height:1.06;font-weight:900}
.kicker{color:var(--muted);max-width:70ch}

/* countdown heading (no box) */
.countdown-to-launch{margin:14px 0 10px;color:#cfd3db;font-weight:700}

/* Keep legacy flip-clock on the same row and without a card */
.countdown{ text-align:left }
.countDownClock .container{
  width:var(--clockW);
  margin:0;
  padding:0;
  text-align:left !important;
  background:transparent !important;
}

/* ===== Hero image (no visible box) ===== */
.hero-media{
  width:100%;
  max-width:var(--heroW);
  min-height:360px;
  display:flex;align-items:center;justify-content:center;
}
.hero-img{
  width:100%; height:100%;
  max-height:var(--heroH);
  object-fit:contain; object-position:center; display:block;
  filter:saturate(108%) contrast(104%);
}
/* ===== Signup / Notify Me ===== */
.signup{ margin-top:14px; }

/* form row */
.subscribe{
  display:flex;
  gap:10px;
  align-items:stretch;
  max-width: var(--clockW); /* lines up with your countdown width */
}

/* input */
.input{
  flex:1;
  background:#0e1116;
  color:var(--fg);
  border:1px solid var(--ring);
  border-radius:12px;
  padding:14px 14px;
  outline:none;
  transition:border .2s, box-shadow .2s, background .2s;
}
.input::placeholder{ color:#9aa3af; }
.input:focus{
  border-color: var(--brand2);
  box-shadow: 0 0 0 3px rgba(0,194,255,.20);
  background:#0d1117;
}

/* button */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  min-width:130px;
  border:0;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color:#fff;  /* high contrast on gradient */
  transition: filter .15s, transform .05s;
}
.btn:hover{ filter: brightness(1.05); }
.btn:active{ transform: translateY(1px); }

/* success + small print */
.thanks{ margin:.6rem 0 0; color:#22c55e; font-weight:700; }
.privacy{ margin:.25rem 0 0; font-size:12px; color:var(--muted); }

/* screen-reader only helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* responsive stack */
@media (max-width: 520px){
  .subscribe{ flex-wrap:wrap; }
  .btn{ width:100%; padding:12px 16px; }
}

/* ===== About + Connect ===== */
section{margin:44px 0}
h2{margin:0 0 8px;font-size:clamp(22px,3.5vw,34px)}
.lead{color:var(--muted);max-width:72ch}

.about-wrap{
  display:grid; grid-template-columns:1.45fr 0.85fr;
  gap:40px; align-items:start; margin:60px 0 10px;
}
.about-left{max-width:760px}
.about-right{
  background:var(--card); padding:24px 28px; border:1px solid var(--ring);
  border-radius:12px; box-shadow:var(--shadow);
}
.about-right h3{margin:0 0 14px;font-size:20px;font-weight:800}
.contact-list p{margin:10px 0;font-size:15px;line-height:1.6}
.contact-list a{color:#9ee7ff}
.contact-list a:hover{text-decoration:underline}

/* ===== Footer ===== */
footer{
  border-top:1px solid var(--ring);
  margin-top:40px; padding:20px 0; color:var(--muted);
  font-size:14px; text-align:center;
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  :root{ --heroW: 560px; --heroH: 480px; --clockW: 640px; }
  .hero{ grid-template-columns: 1fr; gap:24px }
  .hero-media{ margin:0 auto }
}
@media (max-width:780px){
  :root{ --logoSize:72px; --clockW: 520px; }
}
@media (max-width:520px){
  :root{ --logoSize:60px; --clockW: 440px; --heroH: 420px; }
}
@media (max-width:400px){
  :root{ --logoSize:54px; --clockW: 380px; }
}
/* === Logo: keep original size, heartbeat +10%, flash clipped inside === */

/* This wrapper sizes itself to the image and clips the flash inside it */
.logo-anim{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;            /* <-- ensures flash never spills outside */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Reset any earlier logo sizing to use the image's original intrinsic size */
.logo{
  width:var(--logoSize); 
  height:var(--logoSize);
  display:block; 
  object-fit:contain; /* no visible square */
}

/* === Add animation below === */
.logo.heartbeat {
  animation: heartbeat 2.5s infinite ease-in-out;
  position: relative;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.1); }  /* +10% increase */
  28%      { transform: scale(1); }
  42%      { transform: scale(1.1); }
  70%      { transform: scale(1); }
}

.logo.heartbeat::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  opacity: 0;
  pointer-events: none;
  animation: flash 2.5s infinite ease-in-out;
}

@keyframes flash {
  10% { opacity: 0.6; }
  20% { opacity: 0; }
}