@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --ink:#1A1612;
  --red:#C8502A;
  --gold:#D4A96A;
  --cream:#F5EFE6;
  --paper:#E8D5B7;
  --muted:#7A6E63;
  --surface:#2C2520;
  --dark:#111009;
  --darker:  #0d0b08;
  --border:  rgba(26,22,18,.1);
  --dot-clr:#c8502a21;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'DM Sans',sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────
   NAVBAR
───────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: rgba(245,239,230,.9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(200,80,42,.1);
}

.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 700;
  color: var(--red); letter-spacing: -.3px;
  text-decoration: none; flex-shrink: 0;
}
.nav-links {
  display: flex; align-items: center; gap: 2px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-link {
  font-size: 13px; font-weight: 500;
  padding: 6px 12px; border-radius: 100px;
  border: none; background: transparent;
  color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s;
  text-decoration: none; white-space: nowrap;
}
.nav-link:hover  { color: var(--ink); background: rgba(26,22,18,.06); }
.nav-link.active { color: var(--ink); }
.nav-cta {
  font-size: 12px; font-weight: 500;
  padding: 8px 16px; border-radius: 100px;
  background: var(--ink); color: var(--cream);
  border: none; cursor: pointer;
  transition: background .15s, transform .08s;
  white-space: nowrap; flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
}
.nav-cta:hover  { background: var(--surface); }
.nav-cta:active { transform: scale(.97); }

.nav-cta{
  font-size:13px;
  font-weight:500;

  padding:9px 20px;
  border-radius:100px;

  background:var(--ink);
  color:var(--cream);

  border:none;
  cursor:pointer;

  transition:background .15s,transform .08s;

  letter-spacing:.02em;
}

.nav-cta:hover{
  background:var(--surface);
}

.nav-cta:active{
  transform:scale(.97);
}

/* ─────────────────────────
   HERO
───────────────────────── */

.hero::before{
  content:'';

  position:absolute;
  inset:0;

  background-image:
    radial-gradient(circle,var(--dot-clr) 1px,transparent 1px);

  background-size:28px 28px;

  pointer-events:none;
}

.hero::after{
  content:'';

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      ellipse 80% 60% at 50% 50%,
      transparent 40%,
      var(--cream) 100%
    );

  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:2;

  text-align:center;

  padding:0 24px;
  max-width:640px;
}

.hero-eyebrow{
  font-size:11px;
  font-weight:500;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--muted);

  margin-bottom:18px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.hero-eyebrow::before,
.hero-eyebrow::after{
  content:'';

  display:inline-block;

  width:24px;
  height:1px;

  background:var(--muted);
}

.hero-title{
  font-family:'Playfair Display',serif;

  font-size:clamp(42px,8vw,72px);
  font-weight:700;
  line-height:1;

  letter-spacing:-1.5px;

  color:var(--ink);

  margin-bottom:8px;
}

.hero-title em{
  color:var(--red);
  font-style:italic;
}

.hero-tagline{
  font-size:clamp(14px,2vw,17px);
  color:var(--muted);

  margin-bottom:6px;

  font-weight:300;
  letter-spacing:.04em;
}

.hero-sub{
  font-size:14px;
  color:var(--muted);

  line-height:1.65;

  margin-bottom:32px;

  max-width:380px;

  margin-left:auto;
  margin-right:auto;
}

.hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin-bottom:28px;
}

.btn-primary{
  padding:14px 32px;
  border-radius:100px;

  background:var(--red);
  color:#FDF5EC;

  border:none;

  font-size:15px;
  font-weight:500;

  cursor:pointer;

  transition:opacity .15s,transform .08s;

  font-family:'DM Sans',sans-serif;
  letter-spacing:.02em;
}

.btn-primary:hover{
  opacity:.88;
}

.btn-primary:active{
  transform:scale(.97);
}

.btn-ghost{
  padding:13px 24px;
  border-radius:100px;

  background:transparent;
  color:var(--muted);

  border:1px solid rgba(26,22,18,.2);

  font-size:14px;
  font-weight:400;

  cursor:pointer;

  transition:all .15s;

  font-family:'DM Sans',sans-serif;
}

.btn-ghost:hover{
  background:rgba(26,22,18,.06);
  color:var(--ink);
}

.hero-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;

  font-size:12px;
  color:var(--muted);
}

.h-dot{
  width:3px;
  height:3px;

  border-radius:50%;

  background:var(--muted);
  opacity:.5;
}

/* ─────────────────────────
   FLOATING CARDS
───────────────────────── */
.float-card{
  position:absolute;
  z-index:2;

  border-radius:18px;
  overflow:hidden;

  box-shadow:
    0 12px 40px rgba(26,22,18,.18),
    0 2px 8px rgba(26,22,18,.08);

  cursor:pointer;

  transition:transform .3s ease;
}

.float-card:hover{
  transform:scale(1.04) rotate(0deg) !important;
}

.float-card .card-inner{
  width:100%;
  height:100%;

  position:relative;

  transition:opacity .5s ease;
}

.float-card .card-inner.fade-out{
  opacity:0;
}

.strip-preview{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
  gap:4px;

  padding:10px;
}

.sp-slot{
  flex:1;
  border-radius:6px;
}

.strip-label{
  position:absolute;

  bottom:10px;
  left:10px;
  right:10px;

  font-size:10px;
  font-weight:500;

  color:rgba(255,255,255,.7);

  background:rgba(0,0,0,.3);

  backdrop-filter:blur(4px);

  border-radius:6px;

  padding:4px 8px;

  text-align:center;

  font-family:'DM Mono',monospace;
  letter-spacing:.05em;
}

.fc-1{
  width:90px;
  height:130px;

  top:14%;
  left:7%;

  transform:rotate(-8deg);
}

.fc-2{
  width:76px;
  height:110px;

  top:52%;
  left:11%;

  transform:rotate(5deg);
}

.fc-3{
  width:82px;
  height:120px;

  top:12%;
  right:8%;

  transform:rotate(6deg);
}

.fc-4{
  width:72px;
  height:105px;

  top:58%;
  right:9%;

  transform:rotate(-4deg);
}

/* ─────────────────────────
   DARK SECTION
───────────────────────── */
.dark-section{
  background:var(--dark);

  padding:64px 0 80px;

  position:relative;
  overflow:hidden;
}

.dark-section::before{
  content:'';

  position:absolute;
  inset:0;

  background-image:
    radial-gradient(circle,rgba(200,80,42,.08) 1px,transparent 1px);

  background-size:28px 28px;

  pointer-events:none;
}

.dark-section::after{
  content:'';

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--red),
      transparent
    );
}

.section-header{
  padding:0 40px;
  margin-bottom:32px;

  display:flex;
  align-items:center;
  gap:16px;
}

.section-title-dark{
  font-family:'Playfair Display',serif;

  font-size:13px;
  font-weight:700;

  color:rgba(245,239,230,.9);

  letter-spacing:.04em;
}

.section-badge{
  font-size:11px;
  font-weight:500;

  padding:4px 10px;
  border-radius:100px;

  background:rgba(200,80,42,.15);
  color:var(--red);

  border:1px solid rgba(200,80,42,.3);

  font-family:'DM Mono',monospace;
  letter-spacing:.04em;
}

/* ─────────────────────────
   RESULT CARDS
───────────────────────── */
.cards-row{
  display:flex;
  gap:20px;

  padding:0 40px;

  overflow-x:auto;

  scrollbar-width:none;
}

.cards-row::-webkit-scrollbar{
  display:none;
}

.result-card{
  flex-shrink:0;

  width:220px;

  border-radius:20px;
  overflow:hidden;

  background:#1e1a16;

  border:1px solid rgba(245,239,230,.08);

  cursor:pointer;

  transition:transform .2s,border-color .2s;
}

.result-card:hover{
  transform:translateY(-6px);
  border-color:rgba(200,80,42,.4);
}

.rc-preview{
  height:280px;

  display:flex;
  flex-direction:column;
  gap:4px;

  padding:12px 12px 0;

  position:relative;
}

.rc-slot{
  flex:1;

  border-radius:8px;

  background:var(--surface);

  overflow:hidden;
  position:relative;
}

.rc-slot::after{
  content:'';

  position:absolute;
  inset:0;

  background:inherit;
  opacity:.3;
}

.rc-footer{
  padding:14px 14px 16px;
}

.rc-name{
  font-family:'Playfair Display',serif;

  font-size:16px;
  font-weight:700;

  color:var(--cream);

  margin-bottom:4px;
}

.rc-meta{
  display:flex;
  align-items:center;
  gap:8px;

  font-size:12px;

  color:rgba(245,239,230,.4);

  font-family:'DM Mono',monospace;
}

.rc-dot{
  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--red);
}

.rc-style-badge{
  display:inline-block;

  font-size:10px;

  padding:3px 8px;
  border-radius:4px;

  background:rgba(245,239,230,.06);

  color:rgba(245,239,230,.5);

  font-family:'DM Mono',monospace;

  margin-top:6px;
}

/* ─────────────────────────
   FOOTER
───────────────────────── */
footer{
  background:#0d0b08;

  padding:40px 40px 28px;

  border-top:1px solid rgba(245,239,230,.06);

  position:relative;
}

footer::before{
  content:'';

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--red),
      transparent
    );
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;

  gap:32px;

  margin-bottom:32px;
}

.footer-logo{
  font-family:'Playfair Display',serif;

  font-size:24px;
  font-weight:700;

  color:var(--red);

  margin-bottom:8px;
}

.footer-tagline{
  font-size:12px;

  color:rgba(245,239,230,.35);

  font-style:italic;

  margin-bottom:14px;
}

.footer-copy{
  font-size:11px;

  color:rgba(245,239,230,.2);

  font-family:'DM Mono',monospace;
  letter-spacing:.04em;
}

.footer-col-title{
  font-size:10px;
  font-weight:500;

  letter-spacing:.1em;
  text-transform:uppercase;

  color:rgba(245,239,230,.3);

  margin-bottom:14px;

  font-family:'DM Mono',monospace;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-link{
  font-size:13px;

  color:rgba(245,239,230,.5);

  text-decoration:none;

  transition:color .15s;
}

.footer-link:hover{
  color:var(--cream);
}

.footer-email{
  display:flex;
  gap:0;

  margin-top:4px;
}

.footer-input{
  flex:1;

  background:rgba(245,239,230,.05);

  border:1px solid rgba(245,239,230,.1);
  border-right:none;

  border-radius:8px 0 0 8px;

  padding:9px 12px;

  font-size:12px;

  color:var(--cream);

  font-family:'DM Sans',sans-serif;

  outline:none;

  transition:border-color .15s;
}

.footer-input::placeholder{
  color:rgba(245,239,230,.25);
}

.footer-input:focus{
  border-color:rgba(200,80,42,.4);
}

.footer-email-btn{
  background:var(--red);

  border:none;

  border-radius:0 8px 8px 0;

  padding:9px 14px;

  color:var(--cream);

  font-size:14px;

  cursor:pointer;

  transition:opacity .15s;
}

.footer-email-btn:hover{
  opacity:.85;
}

.footer-bottom{
  border-top:1px solid rgba(245,239,230,.06);

  padding-top:20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  flex-wrap:wrap;
  gap:12px;
}

.footer-bottom-left{
  font-size:11px;

  color:rgba(245,239,230,.2);

  font-family:'DM Mono',monospace;

  display:flex;
  gap:20px;

  flex-wrap:wrap;
}

.footer-bottom-left a{
  color:rgba(245,239,230,.2);

  text-decoration:none;

  transition:color .15s;
}

.footer-bottom-left a:hover{
  color:rgba(245,239,230,.5);
}

.footer-social{
  display:flex;
  gap:12px;
}

.social-btn{
  width:32px;
  height:32px;

  border-radius:8px;

  background:rgba(245,239,230,.06);

  border:1px solid rgba(245,239,230,.1);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  transition:background .15s,border-color .15s;

  text-decoration:none;

  font-size:13px;

  color:rgba(245,239,230,.5);
}

.social-btn:hover{
  background:rgba(200,80,42,.15);

  border-color:rgba(200,80,42,.3);

  color:var(--red);
}

/* ─────────────────────────
   ANIMATIONS
───────────────────────── */
@keyframes float-1{
  0%,100%{
    transform:rotate(-8deg) translateY(0);
  }

  50%{
    transform:rotate(-8deg) translateY(-10px);
  }
}

@keyframes float-2{
  0%,100%{
    transform:rotate(5deg) translateY(0);
  }

  50%{
    transform:rotate(5deg) translateY(-8px);
  }
}

@keyframes float-3{
  0%,100%{
    transform:rotate(6deg) translateY(0);
  }

  50%{
    transform:rotate(6deg) translateY(-12px);
  }
}

@keyframes float-4{
  0%,100%{
    transform:rotate(-4deg) translateY(0);
  }

  50%{
    transform:rotate(-4deg) translateY(-9px);
  }
}

.fc-1{
  animation:float-1 4.5s ease-in-out infinite;
}

.fc-2{
  animation:float-2 5.2s ease-in-out infinite .8s;
}

.fc-3{
  animation:float-3 4.8s ease-in-out infinite 1.2s;
}

.fc-4{
  animation:float-4 5.5s ease-in-out infinite .4s;
}

@keyframes fade-up{
  from{
    opacity:0;
    transform:translateY(24px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

.hero-content > *{
  animation:fade-up .7s ease-out both;
}

.hero-content > *:nth-child(1){
  animation-delay:.1s;
}

.hero-content > *:nth-child(2){
  animation-delay:.2s;
}

.hero-content > *:nth-child(3){
  animation-delay:.28s;
}

.hero-content > *:nth-child(4){
  animation-delay:.34s;
}

.hero-content > *:nth-child(5){
  animation-delay:.4s;
}

.hero-content > *:nth-child(6){
  animation-delay:.46s;
}

/* ─────────────────────────
   SCROLL CUE
───────────────────────── */
.scroll-cue{
  position:absolute;

  bottom:28px;
  left:50%;

  transform:translateX(-50%);

  z-index:4;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;

  opacity:.5;

  animation:fade-up .7s ease-out .8s both;
}

.scroll-cue span{
  font-size:10px;

  letter-spacing:.1em;
  text-transform:uppercase;

  color:var(--muted);

  font-family:'DM Mono',monospace;
}

.scroll-arrow{
  width:1px;
  height:32px;

  background:
    linear-gradient(
      to bottom,
      var(--muted),
      transparent
    );

  animation:scroll-drop 1.6s ease-in-out infinite;
}

@keyframes scroll-drop{
  0%{
    opacity:.5;
    transform:scaleY(1) translateY(0);
  }

  100%{
    opacity:0;
    transform:scaleY(.6) translateY(12px);
  }
}

/* ─────────────────────────
   MOBILE
───────────────────────── */
@media (max-width:700px){

  .fc-1{
    width:72px;
    height:104px;
    left: 8%;
    top: 20%;
  }

  .fc-2{
    width:62px;
    height:90px;
    left:3%;
  }

  .fc-3{
    width:66px;
    height:96px;
    right:8%;
  }

  .fc-4{
    display:none;
  }

  .hero-title{
    font-size:38px;
    letter-spacing:-1px;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .cards-row{
    padding:0 20px;
  }

  .section-header{
    padding:0 20px;
  }

  nav{
    padding:0 16px;
  }

  .nav-links .nav-link{
    padding:6px 8px;
    font-size:12px;
  }

}

@media (max-width:400px){

  .hero-title{
    font-size:32px;
  }
  .nav-cta {
    font-size: 10px;
  }

}