:root{
  --deep-red:#7a0c0c;
  --crimson:#8e1111;
  --gold:#d4af37;
  --gold-20:rgba(212,175,55,.2);
  --ink:#111111;
  --paper:#f8f6f2;
  --muted:#7b7b7b;
  --radius:20px;
  --shadow:0 10px 25px rgba(0,0,0,.18);
  --transition:.3s ease;
  --maxw:1200px;
  --nav-h:56px; /* mobile top bar height */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0f0e0e;color:#f4f1ea;}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.6;}

/* ---------------- HERO (single fullscreen image) ---------------- */
.hero{
  position:relative;
  height:100svh;
  min-height:480px;
  overflow:hidden;
  isolation:isolate;
}
@supports (height: 100dvh){
  .hero{ height:100dvh; }
}
.hero-image{
  position:absolute; inset:0; width:100%; height:100%; overflow:hidden;
}
.hero-img{
  width:100%; height:100%;
  object-fit:cover; object-position:center; /* luxe fullscreen look */
  display:block;
}

/* Top-right overlay buttons (hidden on phones) */
.hero-actions{
  position:absolute; top:24px; right:24px; z-index:3;
  display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
}
.btn{
  display:inline-block; padding:10px 18px; border-radius:999px;
  font-weight:500; letter-spacing:.2px; text-decoration:none;
  border:1px solid var(--gold); color:#f6f1e6;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(0,0,0,.25);
  transition:transform var(--transition), background var(--transition), box-shadow var(--transition);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); background:rgba(212,175,55,.15); box-shadow:0 6px 18px rgba(0,0,0,.25);}
.btn.gold{background:linear-gradient(135deg, rgba(212,175,55,.25), rgba(212,175,55,.1));}

/* Hero copy */
.hero-copy{
  position:absolute; z-index:2;
  left:8vw; bottom:14vh; max-width:680px;
}
.brand{
  font-family:"Playfair Display", serif;
  font-size:clamp(38px, 6vw, 72px);
  margin:0 0 10px; line-height:1.1;
  color:#fff;
  text-shadow:0 12px 30px rgba(0,0,0,.35);
}
.tag{margin:0; color:#e8e1d2; font-weight:300; letter-spacing:.2px;}

/* ---------------- SECTIONS ---------------- */
.section {
  padding:80px 24px;
  background: linear-gradient(180deg, #fffdf8, #faf7f0),radial-gradient(1000px 600px at 100% -200px, rgba(212,175,55,0.05), transparent 70%);
; /* subtle cream-beige gradient */
  color: #111; /* dark text works better on light bg */
}

.section.alt {
  background: linear-gradient(180deg, #faf7f0, #fffdf8),radial-gradient(1000px 600px at 100% -200px, rgba(212,175,55,0.05), transparent 70%);
; /* slightly different light tone */
  color: #111;
}

.container{max-width:var(--maxw); margin:0 auto;}
.section h2{
  font-family:"Playfair Display", serif; font-size:clamp(26px, 3.2vw, 40px);
  margin:0 0 22px; color:#fff;
}
.section p.lead{color:#333; max-width:820px; margin:0 0 36px;}
.accent{color:var(--gold);}

/* ---------------- CATALOGUE ---------------- */
.catalogue{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
/* Softer card borders for luxury look */
.card {
  border: 1px solid rgba(212,175,55,0.25); /* faint gold border */
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* lighter shadow */
}

.card:hover {
  border-color: var(--gold);              /* highlight in gold */
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.card-img{aspect-ratio:4/5; width:100%; object-fit:cover; display:block; background:#201b1b;}
.card-body{padding:18px 18px 20px;}
.card-title{font-family:"Playfair Display", serif; font-size:20px; margin:0 0 8px; color:#f7f3e7;}
.card-text{color:#d5cdbc; font-size:14px; margin:0;}

/* ---------------- FEATURE / ARTICLE BLOCK ---------------- */
.feature{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:32px;
  align-items:center;
}
.feature-media{
  position:relative;
  width:100%;
  max-width:420px;         /* smaller, balanced next to text */
  aspect-ratio:1/1;        /* gives the container a real height */
  margin:0 auto;           /* center in its column */
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#fff;
}

.f-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;       /* show full image, no cropping */
  object-position:center;
  opacity:0; transition:opacity .8s ease;
  display:block;
  background:#000;          /* letterbox fill if needed */
}
.f-slide.active{ opacity:1; }

/* Optional: tweak size on different screens */
@media (max-width:980px){
  .feature-media{ max-width:360px; aspect-ratio:3/4; }
}
@media (max-width:640px){
  .feature-media{ max-width:320px; aspect-ratio:1/1; }
}



.feature-copy h2{
  font-family:"Playfair Display", serif;
  font-size:clamp(26px,3.2vw,40px);
  margin:0 0 14px; color:#fff;
}
.feature-copy .lead{ color:#e9e4d8; margin:0 0 18px; }
.feature-list{
  margin:0 0 18px; padding:0; list-style:none; display:grid; gap:8px;
}
.feature-list li{ display:flex; align-items:center; gap:10px; }
.feature-list li::before{
  content:"•"; color:var(--gold); font-size:18px; line-height:1;
}
.feature-cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------------- ABOUT ---------------- */
.about{display:grid; gap:36px; align-items:center; grid-template-columns: 1.05fr .95fr;}
.about figure{
  margin:0; overflow:hidden; border-radius:var(--radius);
  border:1px solid rgba(212,175,55,.25); box-shadow:var(--shadow);
}
.about img{width:100%; height:auto; display:block; object-fit:cover;}
.about .copy p{color:#e6dfcf;}

/* ---------------- SIGNUP ---------------- */
.signup{display:grid; gap:18px; max-width:720px;}
.input{
  display:flex; gap:12px; flex-wrap:wrap;
  background:#171414; border:1px solid rgba(212,175,55,.35);
  border-radius:999px; padding:8px; align-items:center;
}
.input input{
  flex:1 1 240px; min-width:220px;
  padding:12px 16px; font-size:16px;
  border:none; outline:none; color:#f5efe3; background:transparent;
}
.btn-primary{
  border:none; color:#0e0c0c; background:linear-gradient(135deg, #f7e7a7, var(--gold));
  font-weight:600; padding:12px 20px; border-radius:999px; text-decoration:none;
  cursor:pointer; transition:filter var(--transition), transform var(--transition);
  box-shadow:0 10px 20px rgba(212,175,55,.25);
}
.btn-primary:hover{filter:saturate(110%); transform:translateY(-1px);}
.note{color:#cfc7b3; font-size:14px;}
.paylink{display:inline-block; margin-top:8px; color:#f7f3e7; border-bottom:1px dotted var(--gold); text-decoration:none;}
.paylink:hover{color:#fff;}

/* ---------------- FOOTER ---------------- */
footer {
  padding: 36px 24px;
  text-align: center;
  background: var(--gold);     /* luxury gold background */
  color: #111;                 /* dark text for contrast */
  font-weight: 500;
}


/* ---------------- MOBILE NAV (<=640px) ---------------- */
.mobile-bar, .drawer, .drawer-backdrop { display:none; }

@media (max-width:980px){
  .catalogue{grid-template-columns:repeat(2, 1fr);}
  .about{grid-template-columns:1fr;}
  .feature{grid-template-columns:1fr;}
  .feature-media{ aspect-ratio:3/4; }
  .hero-copy{left:7vw; bottom:12vh;}
}
@media (max-width:640px){
  /* Use the top bar’s height to avoid gaps */
  body{ padding-top: 0; }


  /* Hide desktop hero buttons on phones */
  .hero-actions{ display:none !important; }

  /* Mobile bar */
  .mobile-bar{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; align-items:center; justify-content:space-between;
    height:var(--nav-h); padding:0 12px;
    background:rgba(0,0,0,0);
    backdrop-filter: blur(6px) saturate(140%);
    border-bottom:1px solid rgba(212,175,55,.25);
  }
  .brand-mini{
    font-family:"Playfair Display", serif; font-size:18px;
    letter-spacing:.5px; color:#f7f3e7;
  }
  .hamburger{
    appearance:none; border:1px solid rgba(212,175,55,.5);
    background:rgba(0,0,0,.25); color:#f7f3e7;
    width:40px; height:34px; border-radius:8px;
    display:grid; place-items:center; font-size:18px; cursor:pointer;
  }

  /* Drawer & backdrop */
  .drawer-backdrop{ position:fixed; inset:0; z-index:998; background:rgba(0,0,0,.45); }
  .drawer{
    position:fixed; top:0; right:0; z-index:999;
    width:min(78vw, 320px); height:100svh;
    background:rgba(16,14,14,.98);
    border-left:1px solid rgba(212,175,55,.25);
    padding:14px; display:flex; flex-direction:column; gap:10px;
    transform:translateX(100%); transition:transform .28s ease;
  }
  @supports (height: 100dvh){ .drawer{ height:100dvh; } }
  .drawer a{
    display:block; padding:12px 10px; border-radius:10px;
    text-decoration:none; color:#f7f3e7; border:1px solid rgba(212,175,55,.2);
  }
  .drawer a.join{
    background:linear-gradient(135deg, #f7e7a7, #d4af37);
    color:#0e0c0c; border-color:transparent; font-weight:600;
  }
  .drawer-close{
    align-self:flex-end; margin-bottom:6px;
    appearance:none; border:1px solid rgba(212,175,55,.5);
    background:rgba(0,0,0,1); color:#f7f3e7;
    width:36px; height:32px; border-radius:8px; display:grid; place-items:center; font-size:18px; cursor:pointer;
  }
  .drawer.is-open{ transform:translateX(0); }
  .mobile-bar{ display:flex; }
 

  /* Lock scroll when drawer is open */
  body.noscroll{ overflow:hidden; }

  /* Hero stays full height under the bar */
  .hero{ height:100svh; }
  @supports (height: 100dvh){ .hero{ height:100dvh; } }

  /* Mobile layout tweaks */
  .catalogue{grid-template-columns:1fr;}
  .feature-media{ aspect-ratio:1/1; } /* square feel on phones */
  .brand{font-size:clamp(32px, 7vw, 56px);}
}/* ---- ABOUT as full-bleed background ---- */
.section.about-bg{
  position: relative;
  min-height: 60vh;
  background: url('../images/RASA_Perfume_Keychain/kudi6.png') center/cover no-repeat;
}

.section.about-bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0); /* tweak 0.25–0.5 to taste */
}

.section.about-bg .container{
  position: relative; /* ensures text sits above overlay */
  z-index: 1;
}

/* Cancel the 2-col grid, vertically center text */
.section.about-bg .about{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 60vh;
}

/* Light text on top of image */
.section.about-bg h2{ color:#fff; }
.section.about-bg .lead{ color:#f0ece4; }
.section.about-bg .copy p{ color:#eae6da; }

.section.about-bg .copy{
  background: rgba(0,0,0,0.15);   /* semi-transparent card */
  padding: 20px 24px;
  border-radius: 12px;
  backdrop-filter: blur(4px);     /* nice luxury blur effect */
  display: inline-block;          /* shrink-wraps around text */
}
/* Make text dark on light backgrounds */
.section,
.section.alt {
  color: #111; /* luxury deep grey, not harsh black */
}

.section h2 { color: #111; }
.section p,
.section .lead { color: #111; }


/* Softer button borders on light background */
.section .btn {
  border: 1px solid rgba(0,0,0,0.15);   /* light grey border */
}

.section .btn.gold {
  border: none;                         /* clean edge */
  background: linear-gradient(135deg, #f7e7a7, #d4af37);
  color: #111;
}
/* Override card styles for light background */
.section .card {
  background: #fff;
  border: 1px solid rgba(212,175,55,0.25) !important; /* faint gold */
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.section .card:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.card-img {
  border-radius: 12px 12px 0 0; /* round only top corners */
}
/* Make buttons readable on light background sections */
.section .btn {
  border: 1px solid rgba(0,0,0,0.15);   /* soft grey border */
  color: #111;                          /* dark text */
  background: rgba(255,255,255,0.7);    /* subtle frosted look */
}

.section .btn:hover {
  background: rgba(0,0,0,0.05);         /* light hover effect */
  transform: translateY(-2px);
}
/* ---- Force subtle luxury backgrounds on Catalogue and Signup ---- */
#catalogue.section {
  background:
    linear-gradient(180deg, #fffdf8, #faf7f0) !important; /* ultra-subtle warm gradient */
  color: #111;
}

#signup.section {
  background:
    linear-gradient(180deg, #faf7f0, #fffdf8) !important; /* slight variation */
  color: #111;
}

/* Optional: faint gold shimmer overlay (keep super subtle) */
#catalogue.section {
  background:
    linear-gradient(180deg, #fffdf8, #faf7f0),
    radial-gradient(1000px 600px at 100% -200px, rgba(212,175,55,0.05), transparent 70%) !important;
}

#signup.section {
  background:
    linear-gradient(180deg, #faf7f0, #fffdf8),
    radial-gradient(900px 550px at -150px -150px, rgba(212,175,55,0.04), transparent 65%) !important;
}

/* Keep text readable on light sections */
#catalogue.section h2,
#signup.section h2 { color: #111; }

#catalogue.section .lead,
#signup.section .lead { color: #333; }

/* Buttons look clear on light bg */
#catalogue.section .btn,
#signup.section .btn {
  border: 1px solid rgba(0,0,0,0.15);
  color: #111;
  background: rgba(255,255,255,0.7);
}
#catalogue.section .btn:hover,
#signup.section .btn:hover {
  background: rgba(0,0,0,0.05);
  transform: translateY(-2px);
}
/* ---- Subtle luxury backgrounds for FEATURE + SIGNUP ---- */
section#feature {
  /* ultra-subtle warm gradient + faint gold shimmer */
  background:
    linear-gradient(180deg, #fdfbf6, #f8f3e5), /* creamy beige */
    radial-gradient(1200px 800px at 100% -200px, rgba(212,175,55,0.08), transparent 70%); /* faint gold glow */
  color: #111;
}

section#signup {
  background:
    linear-gradient(180deg, #faf7f0, #fffdf8),
    radial-gradient(900px 550px at -150px -150px, rgba(212,175,55,0.04), transparent 65%) !important;
  color: #111;
}

/* readable text on these light sections */
section#feature h2,
section#signup h2 { color: #111; }

section#feature .lead,
section#signup .lead { color: #333; }

/* buttons on light backgrounds */
section#feature .btn,
section#signup .btn {
  border: 1px solid rgba(0,0,0,0.15);
  color: #111;
  background: rgba(255,255,255,0.7);
}
section#feature .btn:hover,
section#signup .btn:hover {
  background: rgba(0,0,0,0.05);
  transform: translateY(-2px);
}

/* Signup input restyle */
#signup .input {
  background: #fff;                         /* white box */
  border: 1px solid var(--gold);            /* gold border */
  border-radius: 999px;
  padding: 6px 8px;
  display: flex;
  gap: 12px;
  align-items: center;
}

#signup .input input {
  flex: 1 1 240px;
  min-width: 220px;
  padding: 12px 16px;
  font-size: 16px;
  border: none;
  outline: none;
  background: transparent;
  color: #111;                              /* black text */
}

#signup .input input::placeholder {
  color: #000;                              /* dark placeholder */
  opacity: 0.8;
}

/* Gold button stays consistent */
#signup .btn-primary {
  border: none;
  color: #111;
  background: linear-gradient(135deg, #f7e7a7, var(--gold));
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter .3s ease, transform .3s ease;
  box-shadow: 0 6px 12px rgba(212,175,55,.25);
}
#signup .btn-primary:hover {
  filter: saturate(110%);
  transform: translateY(-1px);
}
/* Make note + deposit link black */
#signup .note {
  color: #000 !important;
}

#signup .paylink {
  color: #000 !important;
  border-bottom: 1px dotted var(--gold);
  text-decoration: none;
}

#signup .paylink:hover {
  color: var(--gold); /* elegant hover */
}

/* Layout for signup content */
#signup .signup-grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:24px;
  align-items:start;
}
@media (max-width:980px){
  #signup .signup-grid{ grid-template-columns:1fr; }
}

/* Bullet list */
#signup .signup-points{
  list-style:none;
  margin:0; padding:0;
  display:grid; gap:10px;
  color:#111;           /* readable on light */
}
#signup .signup-points li::before{
  content:"•"; color:var(--gold); margin-right:8px;
}

/* Deposit callout */
#signup .deposit{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 14px;
  border:1px solid var(--gold);
  border-radius:14px;
  background:#fff;                  /* white card */
  box-shadow:0 6px 12px rgba(212,175,55,.12);
  margin-bottom:12px;
}
#signup .deposit-copy{
  display:flex; flex-direction:column; line-height:1.2;
  color:#111;
}
#signup .deposit .btn-primary.pay{
  white-space:nowrap;
  padding:10px 16px;
}

/* Existing input restyle kept, ensure black text/placeholder */
#signup .input{
  background:#fff;
  border:1px solid var(--gold);
  border-radius:999px;
  padding:6px 8px;
  display:flex; gap:12px; align-items:center;
}
#signup .input input{ color:#000; }
#signup .input input::placeholder{ color:#000 !important; opacity:1; }

/* Notes and link */
#signup .note{ color:#000 !important; }
#signup .paylink{ color:#000 !important; border-bottom:1px dotted var(--gold); text-decoration:none; }
#signup .paylink:hover{ color:var(--gold); }

/* Buttons on light background */
#signup .btn-primary{
  border:none;
  color:#111;
  background:linear-gradient(135deg, #f7e7a7, var(--gold));
  font-weight:600;
  padding:12px 20px;
  border-radius:999px;
  cursor:pointer;
  transition:filter .3s ease, transform .3s ease;
  box-shadow:0 6px 12px rgba(212,175,55,.25);
}
#signup .btn-primary:hover{ filter:saturate(110%); transform:translateY(-1px); }
/* --- Mobile fix: make the Pay €1 & Join pill stack nicely --- */
@media (max-width: 640px){
  /* The unified pill container */
  #signup .join-row{
    flex-wrap: wrap;          /* allow the button to drop below */
    padding: 10px;            /* a bit more breathing room */
    border-radius: 16px;      /* looks better when the pill is taller */
    gap: 8px;                 /* space between input and button */
  }

  /* Let the input span full width; kill the old min-width */
  #signup .join-row input{
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;             /* overrides earlier 220px min-width */
  }

  /* Make the button full-width under the input */
  #signup .join-row .btn-primary{
    flex: 1 1 100%;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;       /* comfy tap target */
    white-space: nowrap;
  }
}

/* Optional: nicer layout on small tablets too */
@media (min-width: 641px) and (max-width: 900px){
  #signup .join-row{
    gap: 10px;
  }
  #signup .join-row input{
    flex: 1 1 60%;
    min-width: 0;
  }
  #signup .join-row .btn-primary{
    flex: 1 1 38%;
  }
}
.mobile-bar{ display:none !important; }
/* Floating hamburger on hero for mobile */
.mobile-hamburger{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  appearance: none;
  border: 1px solid rgba(212,175,55,.6);
  background: rgba(0,0,0,.25);
  color: #f7f3e7;
  width: 42px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(6px) saturate(140%);
}

/* Keep desktop hero buttons hidden on phones (unchanged) */
.hero-actions{ display:none !important; }
/* ---- LUXURY LIGHT-TINTED MOBILE DRAWER ---- */
/* ---- SEMI-TRANSPARENT DARK DRAWER ---- */
/* ---- SEMI-TRANSPARENT DARK DRAWER (no blur, pill buttons) ---- */
.drawer {
  background: rgba(0,0,0,0.4) !important;       /* light black with 40% opacity */
  border-left: 1px solid rgba(212,175,55,0.3) !important;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}

.drawer a {
  color: #f7f3e7 !important;                    /* light text */
  background: rgba(0,0,0,0.3) !important;       /* translucent pill buttons */
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 999px !important;              /* pill shape */
  padding: 10px 18px !important;
  text-align: center;
}

.drawer a:hover {
  background: rgba(212,175,55,0.25) !important; /* subtle gold hover */
  border-color: var(--gold) !important;
}

.drawer a.join {
  background: linear-gradient(135deg, #f7e7a7, #d4af37) !important;
  color: #111 !important;
  border-color: transparent !important;
  font-weight: 600;
}

.drawer-close {
  color: #f7f3e7 !important;
  background: rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 999px !important;              /* pill close button */
  width: 42px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: pointer;
}

/* backdrop stays darker to focus user attention */
.drawer-backdrop {
  background: rgba(0,0,0,0.45) !important;
}
/* Backdrop clickability */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,0.45) !important; /* your current tone */
  display: none;           /* hidden by default */
  pointer-events: none;    /* don't block clicks when hidden */
}
.drawer-backdrop.is-open{
  display: block;
  pointer-events: auto;    /* NOW it can receive the tap */
}
.drawer-backdrop[hidden]{
  display: none !important;
}

/* Reset any old hides */
.hero-actions{ display:flex; }       /* base default */
.mobile-hamburger{ display:none; }   /* base default */

/* Desktop & tablet: show buttons, hide hamburger */
@media (min-width: 641px){
  .hero-actions{
    display:flex !important;
    position:absolute; top:24px; right:24px;
    z-index:1001;
    gap:12px; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  }
  .mobile-hamburger{ display:none !important; }
}

/* Mobile: hide buttons, show hamburger over hero */
@media (max-width: 640px){
  .hero-actions{ display:none !important; }
  .mobile-hamburger{
    position:absolute; top:12px; right:12px; z-index:1001;
    display:grid !important; place-items:center;
    width:42px; height:36px; border-radius:10px;
    appearance:none; cursor:pointer;
    border:1px solid rgba(212,175,55,.6);
    background: rgba(0,0,0,.25);
    color:#f7f3e7; font-size:18px;
  }
}
/* ---- Hero copy overlay card ---- */
.hero-copy.overlay{
  background: rgba(0,0,0,0.35);
  padding: 16px 32px;         /* a bit more breathing room */
  left: 2%;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  display: inline-block;
  max-width: none;            /* remove width restriction */
  white-space: nowrap;    
  bottom: 35vh;    /* force heading + paragraph into one line */
}
/* ---- Hero overlay on mobile: 1 line heading, next line paragraph ---- */
/* ---- Hero overlay on mobile: heading 1 line, paragraph wraps ---- */
@media (max-width: 640px){
  .hero-copy.overlay{
    left: 50%;
    bottom: 32vh;
    transform: translateX(-50%);
    text-align: center;
    padding: 12px 18px;
    border-radius: 10px;
    max-width: 95vw;
  }

  /* Heading: single line only */
  .hero-copy.overlay h1{
    display: block;
    white-space: nowrap;          /* force into one line */
    overflow: hidden;
    text-overflow: ellipsis;      /* truncate if too long */
    font-size: clamp(24px, 6.5vw, 34px);
    margin: 0 0 6px;
    line-height: 1.25;
  }

  /* Paragraph: allow wrapping normally */
  /* Paragraph: allow wrapping + left align */
.hero-copy.overlay p{
  display: block;
  white-space: normal;          /* wrapping allowed */
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  text-align: left;             /* or use justify */
}

}

/* Enhanced mobile responsiveness */
@media (max-width: 375px) {
  .hero-img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
  }
}

/* Prevent horizontal overflow */
.hero-image {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Better object positioning for mobile */
@media (max-width: 640px) {
  .hero-img {
    object-fit: cover;
    object-position: center 20%; /* Adjust this percentage to focus on the important part of your image */
  }
}
/* Icon buttons in hero (match your pill style) */
.icon-btn{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--gold);
  background: rgba(0,0,0,.25);
  color:#f6f1e6; text-decoration:none;
  transition:transform var(--transition), background var(--transition), box-shadow var(--transition);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.icon-btn:hover{ transform: translateY(-2px); background: rgba(212,175,55,.15); }
.icon-btn .icon{ width:18px; height:18px; fill: currentColor; display:block; }

/* Drawer social row (mobile) */
.drawer-social{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.18);
  display:flex; gap:10px; flex-wrap:wrap;
}
.drawer-social .pill{
  display:inline-block; padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.30);
  color:#f7f3e7; text-decoration:none;
}
.drawer-social .pill:hover{
  background: rgba(212,175,55,0.25); border-color: var(--gold);
}

/* Light drawer variant? (if you’re using the light theme) uncomment:
.drawer-social{ border-top:1px solid rgba(0,0,0,.12); }
.drawer-social .pill{ background:#fff; color:#111; border:1px solid rgba(0,0,0,.12); }
.drawer-social .pill:hover{ background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.2); }
*/

/* Footer micro-row */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 14px;
}

.footer-social a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #111;  /* dark text since footer bg is gold */
  text-decoration: none;
  font-weight: 500;
  transition: color .3s ease;
}

.footer-social a:hover {
  color: var(--deep-red); /* luxury hover */
}

.footer-social .icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
/* Founder’s Gold badge */
.drop-badge{
  position:absolute; top:18px; left:18px; z-index:4;
  display:flex; gap:8px; align-items:center;
  padding:12px 24px; border-radius:999px;
  background:rgba(0,0,0,.35);
  color:#f7f3e7; border:1px solid var(--gold);
  backdrop-filter: blur(6px) saturate(140%);
  font-size:14px; line-height:1;
}
.drop-badge strong{ font-weight:700; color:var(--gold); }
@media (max-width:640px){ .drop-badge{ top:58px; left:12px; } }
/* Trust badges under signup */
/* Trust badges under signup */
/* Inline trust row with gold checkmarks */
.trust-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;              /* spacing between items */
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.trust-inline span {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.trust-inline .check {
  color: var(--gold);     /* use your existing gold accent */
  font-weight: bold;
  margin-right: 6px;
  font-size: 15px;
}

/* How it works list */
.howto{
  margin:8px 0 0 0; padding-left:18px; color:#111;
}
.howto li{ margin:4px 0; }
/* Minimal FAQ styling */
/* Minimal FAQ styling */
.faq {
  border: 1px solid var(--gold); /* gold border instead of grey */
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  margin: 10px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: #111;
}
.faq[open] {
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.faq p {
  margin: 8px 0 0 0;
  color: #333;
}