/* ===========================================================================
   COUTURIA - Dark Luxury Editorial
   Charcoal fabric surface - premium typography - refined interactions
   Overrides couturia-theme.css visual layer.
   =========================================================================== */

:root {
  --c-bg:         #080807;
  --c-bg2:        #0D0C0A;
  --c-bg3:        #131210;
  --c-border:     rgba(255,255,255,0.06);

  --c-text:       #F3F0E8;
  --c-text-mid:   #A9A39A;
  --c-text-dim:   #6B6560;
  --c-accent:     rgba(169,163,154,0.25);
}


/* -- Base overrides ------------------------------------------------------ */

body {
  background-color: var(--c-bg);
  color: var(--c-text);
  background-image:
    repeating-linear-gradient(148deg, transparent 0 3px, rgba(255,255,255,0.006) 3px 4px),
    repeating-linear-gradient(32deg,  transparent 0 5px, rgba(255,255,255,0.004) 5px 6px);
}

::selection { background: var(--c-text-dim); color: var(--c-text); }

h1,h2,h3,h4 { color: var(--c-text); }
p { color: var(--c-text-mid); }


/* -- Keyframes ----------------------------------------------------------- */

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


/* -- Scroll reveal ------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.25,.46,.45,.94),
              transform .9s cubic-bezier(.25,.46,.45,.94);
}
.reveal.vis { opacity: 1; transform: translateY(0); }


/* -- Intro animations ---------------------------------------------------- */

.anim-fade { opacity:0; transform:translateY(14px); animation: fadeUp 1.1s cubic-bezier(.25,.46,.45,.94) forwards; }
.anim-draw { transform:scaleX(0); transform-origin:left; animation: drawX .9s cubic-bezier(.25,.46,.45,.94) forwards; }
.d1{animation-delay:.4s} .d2{animation-delay:.9s} .d3{animation-delay:1.3s} .d4{animation-delay:1.9s}


/* =====================================
   FABRIC TEXTURE OVERLAY
   ===================================== */

.fabric {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fabric::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

.fabric::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, transparent 35%, rgba(0,0,0,0.55) 100%);
}


/* =====================================
   SECTION DIVIDERS
   ===================================== */

.divider {
  width: 48px;
  height: 1px;
  margin: 0 auto;
  background: var(--c-border);
}


/* =====================================
   NAVBAR
   ===================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
  background: transparent;
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}

.nav--solid {
  background: rgba(8,8,7,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--c-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 var(--space-6);
}

.nav__logo {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-text);
}

.nav__cta {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  padding: 6px 16px;
  border: 1px solid var(--c-border);
  transition: color .2s, border-color .2s;
}
.nav__cta:hover { color: var(--c-text); border-color: var(--c-text-dim); }


/* =====================================
   COUTURE INTRO
   ===================================== */

.intro {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.intro__content { max-width: 360px; }

.intro__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--space-6);
}

.intro__rule {
  width: 48px;
  height: 1px;
  background: var(--c-text-dim);
  margin: 0 auto var(--space-8);
}

.intro__def {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--c-text-dim);
  margin-bottom: var(--space-8);
}
.intro__def em { font-style: italic; color: var(--c-text); }

.intro__bridge {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgba(169,163,154,0.55);
}


/* =====================================
   HERO
   ===================================== */

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

.hero__body {
  padding: 100px var(--space-6) var(--space-12);
}

.hero__tag {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--space-4);
}

.hero__h {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: .94;
  color: var(--c-text);
  max-width: 100%;
  margin-bottom: var(--space-5);
}

.hero__sub {
  font-size: var(--text-sm);
  color: var(--c-text-mid);
  line-height: 1.7;
  max-width: 100%;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
}


/* =====================================
   BUTTONS
   ===================================== */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  min-height: 52px;
  transition: all .25s ease;
}

.btn--fill {
  background: var(--c-text);
  color: var(--c-bg);
  border: none;
}
.btn--fill:hover { background: #E0DDD5; }

.btn--outline {
  background: transparent;
  color: var(--c-text-dim);
  border: 1px solid var(--c-border);
}
.btn--outline:hover { color: var(--c-text); border-color: var(--c-text-dim); }

.btn--submit {
  width: 100%;
  background: var(--c-text);
  color: var(--c-bg);
  border: none;
  margin-top: var(--space-4);
  min-height: 52px;
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
}
.btn--submit:hover { background: #E0DDD5; }


/* =====================================
   SECTIONS
   ===================================== */

.sec {
  position: relative;
  z-index: 1;
  padding: var(--space-16) var(--space-6);
}

.sec__inner { max-width: 960px; margin: 0 auto; }
.sec__inner--narrow { max-width: 440px; }

.sec__label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--space-4);
}

.sec h2 {
  font-size: var(--text-3xl);
  line-height: 1.15;
  margin-bottom: var(--space-6);
}

.sec__copy { max-width: 680px; }
.sec__copy p { font-size: var(--text-base); line-height: 1.7; margin-bottom: var(--space-5); }
.sec__copy p:last-child { margin-bottom: 0; }


/* =====================================
   CARDS
   ===================================== */

.cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.card {
  --bg-primary: var(--c-bg3);
  --color-mist: var(--c-bg3);
  position: relative;
  background: var(--c-bg3) !important;
  border: 1px solid var(--c-border);
  padding: var(--space-10) var(--space-6);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}

.card:hover,
.card:active,
.card:focus,
.card:focus-visible,
.card:focus-within {
  background: var(--c-bg3) !important;
}

@media (hover: hover) {
  .card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -12px rgba(0,0,0,.5);
    border-color: rgba(255,255,255,0.1);
  }
}

.card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.card__desc {
  font-size: var(--text-sm);
  color: var(--c-text-mid);
  margin-bottom: var(--space-6);
}

.card__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--space-3); }
.card__list li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--c-text-mid);
  line-height: 1.5;
}
.card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-text-dim);
}


/* =====================================
   FEATURES (Why section)
   ===================================== */

.features {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--c-border);
}

.feat {
  padding: var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--c-border);
}

.feat__num {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .4em;
  color: var(--c-text-dim);
  margin-bottom: var(--space-4);
}

.feat__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--c-text);
  margin-bottom: var(--space-2);
}

.feat__desc {
  font-size: var(--text-sm);
  color: var(--c-text-mid);
  line-height: 1.65;
  max-width: 260px;
}


/* =====================================
   WAITLIST FORM CARD
   ===================================== */

.formcard {
  position: relative;
  padding: var(--space-12) var(--space-6) var(--space-10);
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  box-shadow: 0 8px 32px -12px rgba(0,0,0,.5);
}

.formcard .sec__label { margin-bottom: var(--space-3); }
.formcard h2 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.formcard__sub { font-size: var(--text-sm); color: var(--c-text-mid); line-height: 1.65; margin-bottom: var(--space-8); }

.fg { margin-bottom: var(--space-5); }

.fl {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.fl__opt { text-transform:none; letter-spacing:0; color:rgba(169,163,154,.4); }

.fi {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  outline: none;
  min-height: 48px;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  border-radius: 0;
}
.fi::placeholder { color: rgba(169,163,154,.3); }
.fi:focus {
  border-color: var(--c-text-mid);
  box-shadow: 0 0 0 1px rgba(169,163,154,.2);
}

.fi--sel { appearance:none; cursor:pointer; color:var(--c-text-mid); }

.fs-wrap { position:relative; }
.fs-wrap::after {
  content:'';
  position:absolute;
  right:16px; top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid var(--c-text-dim);
  pointer-events:none;
}

.fi--ta { resize:none; }

.form-err {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: #E87C6C;
  line-height: 1.5;
  padding: var(--space-3) 0;
}

.btn--submit:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.form-ok {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--space-4);
  gap: var(--space-5);
  color: var(--c-text);
}
.form-ok p {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--c-text);
  line-height: 1.3;
}


/* =====================================
   FOOTER
   ===================================== */

.foot {
  position: relative;
  z-index: 1;
  padding: var(--space-12) var(--space-6);
  border-top: 1px solid var(--c-border);
}

.foot__inner { display:flex; flex-direction:column; gap:var(--space-8); }

.foot__logo {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-text);
}

.foot__tag { font-size: var(--text-sm); color: var(--c-text-dim); margin-top: var(--space-2); }

.foot__links { display:flex; gap:var(--space-6); }
.foot__links a {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  transition: color .2s;
}
.foot__links a:hover { color: var(--c-text); }


/* ===============================================
   TABLET  (768px+)
   =============================================== */

@media (min-width: 768px) {
  .nav__inner { padding: 0 var(--space-10); }

  .intro__content { max-width: 460px; }
  .intro__def     { font-size: var(--text-xl); }

  .hero__body { padding: 120px var(--space-12) var(--space-16); }
  .hero__h    { font-size: var(--text-6xl); max-width: 800px; }
  .hero__sub  { max-width: 380px; }

  .hero__cta { flex-direction:row; gap:var(--space-4); }
  .btn { min-height:auto; padding: 14px var(--space-8); }
  .btn--submit { min-height: 52px; }

  .sec { padding: var(--space-20) var(--space-10); }
  .sec h2 { font-size: var(--text-4xl); }

  .cards { flex-direction:row; gap:var(--space-4); }
  .cards .card { flex:1; }

  .features { grid-template-columns: repeat(3, 1fr); }
  .feat { border-bottom:none; border-right: 1px solid var(--c-border); min-height: 200px; }
  .feat:last-child { border-right:none; }

  .formcard { padding: var(--space-12) var(--space-10); }
  .formcard h2 { font-size: var(--text-3xl); }

  .foot { padding: var(--space-16) var(--space-10); }
  .foot__inner { flex-direction:row; justify-content:space-between; align-items:flex-start; }
}


/* ===============================================
   DESKTOP  (1024px+)
   =============================================== */

@media (min-width: 1024px) {
  .intro__content { max-width: 520px; }
  .intro__def     { font-size: var(--text-2xl); line-height: 1.45; }
  .intro__bridge  { font-size: var(--text-base); }

  .hero__body { padding: 160px var(--space-16) var(--space-20); max-width: 60%; }
  .hero__h    { font-size: var(--text-7xl); }

  .sec { padding: var(--space-20) var(--space-16); }

  .cards { gap:0; }
  .cards .card:first-child { border-right:none; }
  .card { padding: var(--space-10); }

  .feat { padding: var(--space-10); }

  .formcard { padding: var(--space-16) var(--space-12); }
  .sec__inner--narrow { max-width: 480px; }

  .foot { padding: var(--space-16); }
}


/* ===============================================
   LARGE DESKTOP  (1280px+)
   =============================================== */

@media (min-width: 1280px) {
  .hero__h    { font-size: var(--text-8xl); }
  .hero__body { max-width: 55%; }
}