:root{
  --bg:#050505;
  --line:rgba(255,255,255,.08);
  --text:#f4f0e8;
  --muted:#a49d91;
  --gold:#d8bc84;
}

*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
html{scroll-behavior:smooth}

body{
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.035), transparent 18%),
    radial-gradient(circle at 50% 100%, rgba(216,188,132,.08), transparent 24%),
    linear-gradient(180deg,#080808 0%, #040404 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.04), transparent 24%);
  mix-blend-mode:soft-light;
}

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px 56px;
  text-align:center;
  position:relative;
}

.hero::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:7%;
  transform:translateX(-50%);
  width:min(760px,82vw);
  height:120px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 36%, rgba(255,255,255,0) 72%);
  filter:blur(28px);
  opacity:.42;
  pointer-events:none;
}

.stage{
  width:min(1040px,100%);
  position:relative;
  z-index:1;
  margin:0 auto;
  padding:40px 20px 56px;
  animation:fadeUp 1.15s ease both;
}

.logo-wrap{display:flex;justify-content:center;margin-bottom:26px}
.logo-img{
  width:min(560px,86vw);
  height:auto;
  display:block;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.34));
}

.eyebrow{
  margin:0 0 24px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
}

h1{
  margin:0 0 14px;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(54px, 10vw, 110px);
  line-height:.88;
  letter-spacing:.04em;
}

.sub{
  max-width:860px;
  margin:0 auto 34px;
  color:#d7d0c4;
  font-size:clamp(16px, 2vw, 20px);
  line-height:1.8;
}

.quote-rail{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 34px;
}

.quote-pill{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:#e7dfd1;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.count-shell{
  width:min(920px,100%);
  margin:0 auto;
  padding:24px 20px 20px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow:0 30px 80px rgba(0,0,0,.34);
}

.count-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.timebox{
  padding:20px 12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  text-align:center;
}

.time-value{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.02em;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(40px, 6vw, 74px);
  line-height:.9;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  min-height:1em;
}

.digit{
  display:inline-block;
  min-width:.52em;
  transition:transform .45s ease, opacity .45s ease;
}

.digit.roll{
  transform:translateY(-5px);
  opacity:.75;
}

.time-label{
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

.btn{
  padding:14px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:inherit;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .2s ease, background .2s ease;
  cursor:pointer;
}

.btn.primary{
  background:var(--gold);
  color:#121212;
  border-color:rgba(0,0,0,.08);
}

.btn.secondary{
  background:rgba(255,255,255,.03);
}

.btn:hover{transform:translateY(-1px)}
.btn.is-loading{opacity:.7;pointer-events:none}

.info-strip{
  margin:28px auto 0;
  width:min(980px,100%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.info-card,.signup-panel,.admin-panel{
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.info-card strong{
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(24px, 3vw, 34px);
  font-weight:500;
  line-height:1;
}

.info-kicker{
  display:block;
  margin-bottom:10px;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
}

.signup-panel{
  margin:28px auto 0;
  width:min(980px,100%);
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
  text-align:left;
}

.signup-copy h2,.admin-head h3{
  margin:0 0 12px;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(34px, 4vw, 48px);
  line-height:.95;
}

.signup-copy p:last-child,.admin-note{
  margin:0;
  color:#d2cbbe;
  line-height:1.8;
}

.signup-form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.invite-form .input{flex:1 1 210px}

.input{
  flex:1 1 260px;
  min-height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#fff;
  padding:0 18px;
  font-size:15px;
  -webkit-appearance:none;
  appearance:none;
}

.input::placeholder{color:#a8a095}

.form-status{
  margin-top:12px;
  color:#d2cbbe;
  font-size:14px;
  line-height:1.6;
}

.form-status.success{color:#d8bc84}
.form-status.error{color:#ffb3b3}

/* Invite visual: clearer and lower in section */
.invite-panel-bg{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:620px;
}

.invite-bg-image{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:6px;
  width:64%;
  height:52%;
  object-fit:contain;
  object-position:center bottom;
  opacity:.62;
  z-index:0;
  pointer-events:none;
  filter:brightness(1.04) contrast(1.1);
}

.invite-panel-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.26) 36%, rgba(0,0,0,.10) 60%, rgba(0,0,0,.04) 100%);
  pointer-events:none;
}

.invite-panel-bg > *:not(.invite-bg-image){
  position:relative;
  z-index:2;
}

.invite-panel-bg .signup-copy,
.invite-panel-bg form,
.invite-panel-bg .form-status{
  max-width:100%;
}

/*.invite-panel-bg .signup-copy{
  max-width:560px;
  margin:0 auto;
} */

.invite-panel-bg .signup-copy h2,
.invite-panel-bg .signup-copy p,
.invite-panel-bg .eyebrow,
.invite-panel-bg .form-status{
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}

.invite-panel-bg .input{
  background:rgba(8,8,8,.34);
  border-color:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.invite-panel-bg .input::placeholder{
  color:#bbb4a8;
}

.admin-body .admin-page{padding-top:72px}
.admin-panel{text-align:left}
.admin-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  align-items:end;
  margin-bottom:14px;
}
.admin-actions{display:flex;gap:10px;flex-wrap:wrap}
.email-count{
  color:var(--gold);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.email-list{display:grid;gap:10px}
.email-item{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  color:#ece5d8;
  font-size:14px;
  word-break:break-word;
}
.email-item a{color:inherit}
.admin-divider{height:1px;background:rgba(255,255,255,.08);margin:24px 0}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:900px){
  .signup-panel{
    grid-template-columns:1fr;
    text-align:center;
  }
  .signup-form{justify-content:center}
  .info-strip{grid-template-columns:1fr}

  .invite-panel-bg{
    min-height:820px;
  }

  .invite-bg-image{
    width:82%;
    height:36%;
    bottom:16px;
    opacity:.52;
  }
}

@media (max-width:720px){
  .countdown{grid-template-columns:repeat(2,1fr)}
  .count-head{justify-content:center}
  h1{font-size:72px}

  .invite-panel-bg{
    min-height:780px;
  }

  .invite-bg-image{
    width:86%;
    height:34%;
    bottom:12px;
    opacity:.58;
  }
}



/* =========================================================
   Invite section fixes - appended overrides
   These rules intentionally use stronger selectors so they win.
========================================================= */

section.signup-panel.invite-panel-bg{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: auto !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important; /* reserves space for image */
  align-items: start !important;
  align-content: start !important;
  gap: 10px !important;
  background: none
    /*linear-gradient(
      to bottom,
      rgba(0,0,0,0.56) 0%,
      rgba(0,0,0,0.34) 34%,
      rgba(0,0,0,0.12) 62%,
      rgba(0,0,0,0.04) 100% 
    )*/ !important;
}

section.signup-panel.invite-panel-bg::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: none
    /* radial-gradient(circle at 50% 88%, rgba(255,255,255,0.06), transparent 26%),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.64) 0%,
      rgba(0,0,0,0.46) 24%,
      rgba(0,0,0,0.22) 52%,
      rgba(0,0,0,0.08) 78%,
      rgba(0,0,0,0.00) 100%
    ) */ !important;
}

section.signup-panel.invite-panel-bg > *:not(.invite-bg-image){
  position: relative !important;
  z-index: 2 !important;
}

section.signup-panel.invite-panel-bg .signup-copy{
  max-width: 720px !important;
  margin: 0 auto 6px !important;
}

section.signup-panel.invite-panel-bg .signup-copy h2{
  margin-bottom: 10px !important;
}

section.signup-panel.invite-panel-bg .signup-copy p{
  margin-bottom: 0 !important;
}

section.signup-panel.invite-panel-bg .signup-copy + div{
  width: 100% !important;
}

section.signup-panel.invite-panel-bg .invite-form{
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 0 !important;
}

section.signup-panel.invite-panel-bg .input{
  background: rgba(0,0,0,0.42) !important;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

section.signup-panel.invite-panel-bg .invite-bg-image{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 0 !important;
  width: 74% !important;
  height: 58% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  opacity: 0.78 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  filter: brightness(1.08) contrast(1.08) !important;
}

section.signup-panel.invite-panel-bg .form-status{
  margin-top: 8px !important;
}

/* Tablet */
@media (max-width: 900px){
  section.signup-panel.invite-panel-bg{
    min-height: auto !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    gap: 8px !important;
  }

  section.signup-panel.invite-panel-bg .invite-bg-image{
    width: 86% !important;
    height: 46% !important;
    bottom: 0 !important;
    opacity: 0.74 !important;
  }

  section.signup-panel.invite-panel-bg .signup-copy{
    margin-bottom: 4px !important;
  }
}

/* Mobile */
@media (max-width: 720px){
  section.signup-panel.invite-panel-bg{
    min-height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 6px !important;
  }

  section.signup-panel.invite-panel-bg .signup-copy{
    max-width: 100% !important;
    margin-bottom: 2px !important;
  }

  section.signup-panel.invite-panel-bg .invite-form{
    gap: 10px !important;
  }

  section.signup-panel.invite-panel-bg .invite-bg-image{
    width: 92% !important;
    height: 42% !important;
    bottom: 0 !important;
    opacity: 0.76 !important;
  }
}

#signup .signup-copy,
#invite .signup-copy{
    max-width: 560px  !important;
    margin: 0 auto  !important;
    padding-top: 10px !important;
}

#invite .signup-copy{
    padding-top: 16px !important;
}

#signup .signup-copy h2,
#invite .signup-copy h2{
    margin: 0 0 20px !important;
    line-heigt: 0.95 !important;
}

#signup .eyebrow,
#invite .eyebrow{
    margin: 0 0 24px !important;
}

body::after{
  content:"";
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 85vh;

  background-image: url("invite-hero-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;

  opacity: 0.34;
  pointer-events: none;
  z-index: 0;

  filter: brightness(0.9) contrast(1.08);
  mix-blend-mode: screen;

  -webkit-mask-image:
    linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,.65) 78%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at center bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 52%, rgba(0,0,0,.75) 72%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;

  mask-image:
    linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,.65) 78%, rgba(0,0,0,0) 100%),
    radial-gradient(circle at center bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 52%, rgba(0,0,0,.75) 72%, rgba(0,0,0,0) 100%);
}

body{
  position: relative;
  z-index: 1;
} 

@media (max-width: 768px){
  body::after{
    height: 85vh;
    opacity: 0.34;
  }
}

@media (min-width: 1024px){
  body::after{
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 90vh;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 22%;
    
    opacity: 0.34;
  }
}

/* ===== Generate page fixes ===== */

body.generate-page::after,
body.generate-page .hero::after{
  display:none !important;
}

body.generate-page .stage{
  max-width: 760px;
}

body.generate-page h1{
  font-size: clamp(46px, 12vw, 88px);
  line-height: 0.92;
  margin-bottom: 20px;
}

body.generate-page .signup-panel{
  grid-template-columns: 1fr !important;
  max-width: 620px;
  margin: 28px auto 0;
  text-align: center;
  padding: 28px 24px;
}

body.generate-page .signup-form{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}

body.generate-page .signup-form .input,
body.generate-page .signup-form input[type="file"]{
  width:100%;
  max-width:480px;
}

body.generate-page .signup-form button{
  margin:0 auto;
}

body.generate-page #status{
  text-align:center;
  margin-top:14px;
}

body.generate-page #heroResult{
  display:none;
  max-width:100%;
  border-radius:20px;
  margin:30px auto 0;
}

@media (max-width: 720px){
  body.generate-page .signup-panel{
    padding: 22px 16px;
  }

  body.generate-page h1{
    font-size: clamp(40px, 14vw, 72px);
  }
}
/* ===== Custom file upload ===== */

.file-input-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.upload-wrap{
  width:100%;
  max-width:480px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.upload-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  width:100%;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.upload-trigger:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.05);
}

.upload-trigger:active{
  transform:translateY(0);
}

.upload-filename{
  width:100%;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  word-break:break-word;
}

body.generate-page .upload-trigger{
  max-width:480px;
}

.sub a {
  color: #d4b47a; /* din guld */
  text-decoration: none;
  border-bottom: 1px solid rgba(212,180,122,0.5);
  transition: all 0.2s ease;
}

.sub a:hover {
  border-bottom: 1px solid #d4b47a;
  color: #e6c98a;
}

a {
  color: inherit;
}
/* .count-shell{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.count-bg-art{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  transform: scale(1.02);
}

.count-shell::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.12) 30%, rgba(0,0,0,.28)),
    radial-gradient(circle at center, rgba(0,0,0,0) 35%, rgba(0,0,0,.22) 100%);
  z-index: 1;
  pointer-events: none;
}

.count-head,
.countdown{
  position: relative;
  z-index: 2;
} */
.count-shell{
  position: relative;
}

.count-head,
.countdown{
  position: relative;
  z-index: 1;
}

.seconds-box{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.seconds-box::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("drop01-cap.png") no-repeat center 58% / 155%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  filter: brightness(1.05) contrast(1.08);
}

.seconds-box::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.14);
  z-index: 1;
  pointer-events: none;
}

.seconds-box .time-value,
.seconds-box .time-label{
  position: relative;
  z-index: 2;
}
.minutes-box{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.minutes-box::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("drop01-cover1.png") no-repeat center 48% / 155%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  filter: brightness(0.75) contrast(1.08);
}

.minutes-box::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.14);
  z-index: 1;
  pointer-events: none;
}

.minutes-box .time-value,
.minutes-box .time-label{
  position: relative;
  z-index: 2;
}

.seo-panel{
  margin:38px auto;
  padding:30px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  text-align:left;
}

.seo-panel h2{
  margin:0 0 16px;
  font-family:"Cormorant Garamond", serif;
  font-size:clamp(38px, 5vw, 64px);
  line-height:.95;
  color:var(--cream);
}

.seo-panel p{
  color:rgba(255,255,255,.72);
  line-height:1.85;
  font-size:16px;
  max-width:820px;
}

.seo-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:22px;
}

.seo-mini-grid div{
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}

.seo-mini-grid strong{
  display:block;
  margin-bottom:8px;
  color:var(--gold);
}

.seo-mini-grid span{
  color:rgba(255,255,255,.65);
  line-height:1.6;
  font-size:14px;
}

@media (max-width: 760px){
  .seo-mini-grid{
    grid-template-columns:1fr;
  }

  .seo-panel{
    text-align:center;
  }
}

.seo-points{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.seo-point{
  padding:16px 18px;
  border-radius:20px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}

.seo-point strong{
  display:block;
  margin-bottom:8px;
  color:var(--gold);
}

.seo-point p{
  margin:0;
  color:rgba(255,255,255,.68);
  line-height:1.65;
  font-size:15px;
}