
/* ALTRAMINE V18 - PREMIUM COMING SOON PAGE */
.v18-coming{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:120px 0 70px;
  background:#020507;
}
.v18-bg{
  position:absolute;
  inset:0;
  background:
    url('https://images.unsplash.com/photo-1610375461246-83df859d849d?auto=format&fit=crop&fm=jpg&q=92&w=2600')
    center/cover no-repeat;
  transform:scale(1.04);
  animation:v18Zoom 18s ease-in-out infinite alternate;
}
@keyframes v18Zoom{
  to{transform:scale(1.11) translateX(-1%)}
}
.v18-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 75% 25%,rgba(241,192,66,.18),transparent 28%),
    linear-gradient(90deg,rgba(2,5,8,.96),rgba(2,5,8,.90) 48%,rgba(2,5,8,.70));
}
.v18-grid{
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,213,93,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,213,93,.12) 1px,transparent 1px);
  background-size:64px 64px;
}
.v18-shell{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
}
.v18-card{
  width:min(920px,100%);
  position:relative;
  padding:48px 50px 42px;
  border:1px solid rgba(235,188,67,.34);
  border-radius:24px;
  background:
    linear-gradient(145deg,rgba(8,14,19,.94),rgba(4,8,11,.86));
  backdrop-filter:blur(20px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.58),
    0 0 60px rgba(220,159,28,.08);
  overflow:hidden;
  text-align:center;
}
.v18-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:5;
  padding:2px;
  border-radius:24px;
  pointer-events:none;
  background:
    conic-gradient(
      from var(--v18-angle),
      transparent 0 45deg,
      rgba(255,218,105,.10) 60deg,
      #ffe180 80deg,
      #fff5c8 88deg,
      #d9a329 100deg,
      transparent 118deg 360deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:v18Border 4.2s linear infinite;
}
@property --v18-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
@keyframes v18Border{to{--v18-angle:360deg}}
.v18-card-glow{
  position:absolute;
  width:420px;height:420px;
  border-radius:50%;
  left:50%;top:-240px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(236,185,57,.18),transparent 70%);
  filter:blur(20px);
}
.v18-topline{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:#c7baa0;
  font-size:10px;
  letter-spacing:1.7px;
}
.v18-status-dot{
  width:8px;height:8px;border-radius:50%;
  background:#5fe083;
  box-shadow:0 0 16px #5fe083;
  animation:v18Pulse 1.5s ease-in-out infinite;
}
@keyframes v18Pulse{50%{opacity:.35;transform:scale(.75)}}
.v18-logo-wrap{
  margin:22px auto 6px;
}
.v18-logo-wrap img{
  height:86px;
  width:auto;
  margin:auto;
  filter:drop-shadow(0 12px 25px rgba(0,0,0,.45));
}
.v18-eyebrow{
  color:#efc650;
  font-size:11px;
  letter-spacing:.28em;
  font-weight:900;
  margin-top:5px;
}
.v18-title{
  margin:8px 0 12px;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(64px,8vw,104px);
  line-height:.85;
  letter-spacing:-2px;
  background:linear-gradient(100deg,#8b5a05,#d8a42b,#fff1ac,#e8bd46,#8d5c07,#ffe17c);
  background-size:250% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:v18Gold 5s linear infinite,v18TitleIn .9s cubic-bezier(.16,.8,.2,1) both;
}
@keyframes v18Gold{to{background-position:250% center}}
@keyframes v18TitleIn{
  from{opacity:0;transform:translateY(45px) scale(.96);filter:blur(10px)}
  to{opacity:1;transform:none;filter:none}
}
.v18-lead{
  max-width:650px;
  margin:0 auto;
  color:#bdb3a2;
  line-height:1.8;
  font-size:14px;
}
.v18-launch-date{
  width:max-content;
  margin:24px auto 22px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 22px;
  border:1px solid rgba(236,188,65,.34);
  border-radius:14px;
  background:linear-gradient(145deg,#0c1115,#06090c);
  box-shadow:0 16px 45px rgba(0,0,0,.30);
}
.v18-launch-date>span{
  font-family:"Cormorant Garamond",serif;
  font-size:52px;
  line-height:.8;
  color:#ffe07a;
}
.v18-launch-date b{
  display:block;
  font-size:16px;
  letter-spacing:.18em;
}
.v18-launch-date small{
  display:block;
  color:#ad9d7a;
  letter-spacing:.3em;
  font-size:11px;
  margin-top:4px;
}
.v18-countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  max-width:700px;
  margin:0 auto 26px;
}
.v18-countdown>div{
  padding:17px 10px;
  border:1px solid rgba(231,184,61,.24);
  border-radius:12px;
  background:linear-gradient(145deg,#0c1116,#070a0d);
  box-shadow:inset 0 0 22px rgba(255,214,95,.025);
}
.v18-countdown strong{
  display:block;
  font-family:"Cormorant Garamond",serif;
  font-size:34px;
  color:#fff0b8;
}
.v18-countdown span{
  display:block;
  margin-top:4px;
  color:#90846f;
  font-size:9px;
  letter-spacing:.18em;
}
.v18-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:24px 0;
}
.v18-feature{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  text-align:left;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(12,17,22,.76);
  transition:.25s ease;
}
.v18-feature:hover{
  border-color:rgba(237,190,69,.42);
  transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(0,0,0,.28);
}
.v18-feature>span{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid #e5b940;
  color:#eac04c;
  font-family:"Cormorant Garamond",serif;
  font-size:20px;
}
.v18-feature b{
  display:block;
  font-size:12px;
}
.v18-feature small{
  display:block;
  color:#978f83;
  font-size:9px;
  margin-top:3px;
}
.v18-progress-wrap{
  margin:26px auto 24px;
  max-width:680px;
}
.v18-progress-label{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:8px;
  font-size:9px;
  letter-spacing:.14em;
  color:#a79d8a;
}
.v18-progress-label b{
  color:#e9bd49;
}
.v18-progress{
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:#080b0e;
  border:1px solid rgba(255,255,255,.06);
}
.v18-progress i{
  display:block;
  width:92%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#9b6409,#f4c84f,#ffe68f);
  box-shadow:0 0 18px rgba(236,186,58,.32);
  animation:v18Progress 2s cubic-bezier(.16,.8,.2,1) both;
}
@keyframes v18Progress{
  from{width:0}
  to{width:92%}
}
.v18-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.v18-btn-primary,
.v18-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 20px;
  border-radius:8px;
  text-decoration:none;
  font-weight:900;
  font-size:12px;
  transition:.25s ease;
}
.v18-btn-primary{
  color:#070707;
  background:linear-gradient(135deg,#9a6207,#ffde75 52%,#ae730a);
  border:1px solid #e9bd45;
  box-shadow:0 12px 34px rgba(207,149,22,.18);
}
.v18-btn-secondary{
  color:#fff;
  border:1px solid rgba(235,191,72,.66);
  background:#080c10;
}
.v18-btn-primary:hover,
.v18-btn-secondary:hover{
  transform:translateY(-3px);
}
.v18-note{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:20px;
  font-size:10px;
  color:#8f8677;
}
.v18-note span{
  width:6px;height:6px;border-radius:50%;
  background:#e6ba42;
  box-shadow:0 0 12px #e6ba42;
}
.v18-note p{margin:0}
.v18-note b{color:#e8bf4d}

@media(max-width:700px){
  .v18-coming{padding:105px 0 45px}
  .v18-card{padding:34px 20px 30px;border-radius:18px}
  .v18-logo-wrap img{height:68px}
  .v18-title{font-size:58px}
  .v18-countdown{grid-template-columns:1fr 1fr}
  .v18-features{grid-template-columns:1fr}
  .v18-launch-date{padding:12px 18px}
  .v18-launch-date>span{font-size:45px}
}
