:root{
  --bg:#0f0f11;
  --card:#1a1b1f;
  --text:#ffffff;  
  --muted:#aeb4bf;
  --brand:#00d4ff;
  --radius:32px;
  --shadow:0 20px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:#fff;

  /* Stars show at full strength; no dark fade */
  background: url('images/stars.jpg') center/cover fixed no-repeat;

  overflow-x:hidden;
  position: relative; /* lets us layer a warm tint below the content */
}

/* Warm, subtle sepia haze over the stars (below content) */
body::before{
  content:"";
  position: fixed; inset: 0;
  /* top: very light warm glow; edges: a touch darker for depth */
  background:
    radial-gradient(1600px 1000px at 60% -15%,
      rgba(255,205,155,.14) 0%,
      rgba(60,40,25,.18) 55%,
      rgba(0,0,0,.35) 100%
    ),
    /* a soft overall warm wash */
    linear-gradient(to bottom right,
      rgba(255,190,130,.10),
      rgba(80,50,30,.10)
    );
  pointer-events:none; /* never blocks clicks */
  z-index: 0;          /* sits between the body bg and your content */
}

/* Make sure the page content sits above that warm haze */
.wrap{ position: relative; z-index: 1; }

a{color:inherit;text-decoration:none}
.wrap{display:grid; grid-template-columns: 1fr min(550px, 92vw) 1fr;}
.grid{grid-column:2; display:grid; grid-template-columns: auto 1fr; column-gap: clamp(0px, 0.5vw, 10px); align-items:center; min-height:100dvh; padding: clamp(24px, 6vw, 64px) 0;}

/* LOGO RAIL (images only, no bubbles/borders/text) */
.logos{display:flex; flex-direction:column; gap:20px; align-items:flex-end; }
.logo{all:unset; display:grid; place-items:center; cursor:pointer;}
.logo img{width:64px; height:64px; object-fit:contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,.45)); transition: transform .2s ease;}
.logo:hover img{transform: translateY(-2px);}
.logo:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:8px;}


/* STACK LAYOUT */
.stack{position:relative; height: 820px; max-height: 85vh; perspective: 1200px;}
.card{
  position:absolute; inset:auto 0 40px 0; margin:auto;
  width: min(400px, 100%); height: 78%;

  /* subtle warm-tinted glass over the photo */
  background:
    linear-gradient(180deg, rgba(255,222,193,.08), rgba(255,222,193,.02)),
    rgba(28,22,18,.58);

  border-radius: var(--radius);
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 8px 28px rgba(255,200,150,.06); /* warm glow */
  overflow:hidden;

  transform-origin: center bottom;
  transform-style: preserve-3d;
  transition:
    transform .8s ease-out,
    opacity   .8s ease-out,
    filter    .8s ease-out,
    box-shadow .8s ease-out;

  /* frosted feel + slight richness */
  backdrop-filter: blur(10px) saturate(118%);

  border: none; /* stays borderless */
}

.title{ text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.sub  { text-shadow: 0 1px 6px rgba(0,0,0,.35); }

/* Stack positions (managed by JS) */
.card.stack-top{
  transform: translateY(0) scale(1) rotateX(0deg);
  z-index: 3; opacity: 1; filter: saturate(105%);
}
.card.stack-mid{
  transform: translateY(-10%) scale(.95) rotateX(-6deg);
  z-index: 2; opacity:.86; filter: saturate(95%);
}
.card.stack-back{
  transform: translateY(-20%) scale(.90) rotateX(-12deg);
  z-index: 1; opacity:.65; filter: saturate(85%);
}

/* Shuffle-out animation for the leaving (top) card going to the back */
@keyframes flipUpBack {
  0%   { transform: translateY(0)      scale(1)   rotateX(0deg);   opacity: 1;   }
  60%  { transform: translateY(-8%)    scale(.97) rotateX(-12deg); opacity: .9;  }
  100% { transform: translateY(-20%)   scale(.90) rotateX(-18deg); opacity: .65; }
}
.card.leaving{
  animation: flipUpBack .6s ease-in forwards;
  z-index: 4; /* ensure it's above while flipping */
}

/* Card internals */
.hero, .hero::after{position:absolute; inset:0; background-size:cover; background-position:center;}
.hero::after{
  content:"";
  position:absolute; inset:0;

  /* 1) New: warm sepia that fades IN from the bottom ~third
     2) Existing: subtle dark overlay for text readability */
  background:
    linear-gradient(to top,
      rgba(190, 160, 160, .13) 0%,     /* strongest at the very bottom */
      rgba(190, 160, 160, .12) 20%,
      rgba(190, 160, 160, .08) 32%,
      rgba(190, 160, 160, 0) 46%       /* fade out by ~bottom third */
    ),
    linear-gradient(180deg,
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.10) 40%,
      rgba(0,0,0,0.65)
    );
}

.content{position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; height:100%; padding: clamp(18px, 4vw, 28px);}
.title{font-weight:300; font-size: clamp(28px, 4vw, 48px); letter-spacing:.25px; margin: 0 0 22px 0}
.sub{color:var(--muted); max-width: 58ch; line-height:1.5; margin: 0 0 35px 0}
.buttons{display:flex; gap:12px; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:1px solid rgba(255,255,255,.22); border-radius: 40px; background: rgba(255,255,255,.05); backdrop-filter: blur(4px);}
.pill:hover{border-color:rgba(255,255,255,.4); transform: translateY(-2px); transition: transform .15s}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .card, .logo img{ transition: none !important; animation: none !important; }
}

.sub{ color:#fff !important; }

/* Circular social icons using CSS mask */
.socials{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 0 0 20px 0;
}

.social{
  --icon: none;                 /* set per-icon in HTML: style="--icon: url('icons/instagram.svg')" */
  width:44px; height:44px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background: rgba(255,255,255,.07);
  border:2px solid #ffffff;
  backdrop-filter: blur(2px);
  transition: transform .15s ease, border-color .2s ease, background .2s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

.social:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
}

/* The icon glyph: color comes from background-color here */
.social::before{
  content:"";
  width:20px; height:20px;
  background-color:#fff;             /* icon color */
  mask: var(--icon) center/contain no-repeat;
  -webkit-mask: var(--icon) center/contain no-repeat; /* Safari */
}

/* a11y helper: visually hide text but keep it for screen readers */
.sr-only{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden;
  clip: rect(1px,1px,1px,1px);
  white-space:nowrap;
  border:0; padding:0; margin:-1px;
}

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr; gap:24px}
  .logos{flex-direction:row; justify-content:center}
  .stack{margin-top: -100px; height: 600px; max-height: 600px;}
}