/* =========================================================
   ENOFLIX CREATORS — PUBLIC DESIGN SYSTEM
   ---------------------------------------------------------
   Independent Creator Portal frontend.
   ========================================================= */

:root{
  --creator-public-bg:#fcf9f4;
  --creator-public-surface:#ffffff;
  --creator-public-ink:#261c17;
  --creator-public-muted:#776960;

  --creator-public-orange:#e85b2a;
  --creator-public-orange-dark:#c8441d;

  --creator-public-gold:#f3bf42;
  --creator-public-pink:#e77494;

  --creator-public-border:#eadfd8;

  --creator-public-shell:1220px;

  --creator-public-radius:22px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  color:
    var(--creator-public-ink);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(243,191,66,.16),
      transparent 28%
    ),
    var(--creator-public-bg);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

a{
  color:inherit;
}

img{
  display:block;

  max-width:100%;
}

button,
input,
select,
textarea{
  font:inherit;
}

.creator-public-shell{
  width:
    min(
      calc(100% - 40px),
      var(--creator-public-shell)
    );

  margin:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.creator-public-header{
  position:sticky;

  z-index:50;

  top:0;

  border-bottom:
    1px solid
    rgba(38,28,23,.07);

  backdrop-filter:
    blur(18px);

  background:
    rgba(252,249,244,.90);
}

.creator-public-nav{
  display:flex;
  align-items:center;

  min-height:74px;

  gap:24px;
}

.creator-public-brand{
  display:flex;
  align-items:center;

  gap:10px;

  flex:0 0 auto;

  color:
    var(--creator-public-ink);

  text-decoration:none;

  font-size:20px;
  font-weight:900;

  letter-spacing:-.02em;
}

.creator-public-brand-mark{
  width:29px;
  height:29px;

  border-radius:
    55% 45% 52% 48%;

  background:
    linear-gradient(
      135deg,
      var(--creator-public-orange),
      var(--creator-public-gold)
    );

  transform:
    rotate(-13deg);
}

.creator-public-nav-links{
  display:flex;
  align-items:center;

  gap:20px;

  margin-left:auto;
}

.creator-public-nav-links a{
  color:#675a52;

  text-decoration:none;

  font-size:13px;
  font-weight:650;
}

.creator-public-nav-links a:hover{
  color:
    var(--creator-public-orange);
}

.creator-public-nav-cta{
  padding:
    10px 14px;

  color:#fff!important;

  border-radius:10px;

  background:
    var(--creator-public-orange);
}


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

.creator-public-page-hero{
  padding:
    86px 0 52px;
}

.creator-public-kicker{
  color:
    var(--creator-public-orange);

  font-size:11px;
  font-weight:900;

  letter-spacing:.18em;

  text-transform:uppercase;
}

.creator-public-page-hero h1{
  max-width:950px;

  margin:
    8px 0 15px;

  font-size:
    clamp(
      43px,
      8vw,
      88px
    );

  line-height:.94;

  letter-spacing:-.062em;
}

.creator-public-page-hero p{
  max-width:680px;

  margin:0;

  color:
    var(--creator-public-muted);

  font-size:17px;
  line-height:1.7;
}


/* =========================================================
   HOME FEATURE
   ========================================================= */

.creator-public-feature{
  position:relative;

  isolation:isolate;

  overflow:hidden;

  display:flex;

  min-height:490px;

  margin-bottom:72px;

  padding:50px;

  border-radius:30px;

  color:#fff;

  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(243,191,66,.96),
      transparent 29%
    ),
    radial-gradient(
      circle at 74% 100%,
      rgba(231,116,148,.68),
      transparent 34%
    ),
    var(--creator-public-orange);
}

.creator-public-feature::after{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  right:-100px;
  bottom:-130px;

  border:
    48px solid
    rgba(255,255,255,.1);

  border-radius:50%;

  z-index:-1;
}

.creator-public-feature__content{
  display:flex;

  max-width:680px;

  flex-direction:column;

  justify-content:flex-end;
}

.creator-public-feature h2{
  margin:
    8px 0 15px;

  font-size:
    clamp(
      42px,
      6vw,
      74px
    );

  line-height:.95;

  letter-spacing:-.055em;
}

.creator-public-feature p{
  max-width:590px;

  margin:0;

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

  font-size:17px;
  line-height:1.65;
}


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

.creator-public-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:max-content;

  min-height:44px;

  margin-top:20px;

  padding:
    0 17px;

  color:#2c201a;

  border:0;

  border-radius:11px;

  background:
    var(--creator-public-gold);

  text-decoration:none;

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

  cursor:pointer;
}

.creator-public-button--orange{
  color:#fff;

  background:
    var(--creator-public-orange);
}


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

.creator-public-section{
  margin-bottom:74px;
}

.creator-public-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:20px;
}

.creator-public-section-head h2{
  margin:0;

  font-size:30px;

  letter-spacing:-.035em;
}

.creator-public-section-head a{
  color:
    var(--creator-public-orange);

  text-decoration:none;

  font-size:13px;
  font-weight:800;
}


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

.creator-public-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:17px;
}

.creator-public-card{
  overflow:hidden;

  min-width:0;

  border:
    1px solid
    var(--creator-public-border);

  border-radius:
    var(--creator-public-radius);

  background:
    var(--creator-public-surface);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.creator-public-card:hover{
  transform:
    translateY(-3px);

  box-shadow:
    0 18px 35px
    rgba(75,47,30,.08);
}

.creator-public-card-media{
  overflow:hidden;

  aspect-ratio:
    16 / 10;

  background:#efe5dd;
}

.creator-public-card-media img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .45s ease;
}

.creator-public-card:hover
.creator-public-card-media img{
  transform:
    scale(1.045);
}

.creator-public-card-content{
  padding:20px;
}

.creator-public-card-content small{
  display:block;

  margin-bottom:7px;

  color:
    var(--creator-public-orange);

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

  letter-spacing:.075em;

  text-transform:uppercase;
}

.creator-public-card-content h3{
  margin:
    0 0 9px;

  font-size:20px;

  line-height:1.25;

  letter-spacing:-.02em;
}

.creator-public-card-content h3 a{
  text-decoration:none;
}

.creator-public-card-content p{
  display:-webkit-box;

  overflow:hidden;

  margin:0;

  color:
    var(--creator-public-muted);

  line-height:1.6;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
}


/* =========================================================
   CREATOR PROFILE CARD
   ========================================================= */

.creator-public-profile{
  padding:22px;

  border:
    1px solid
    var(--creator-public-border);

  border-radius:18px;

  background:#fff;
}

.creator-public-profile-banner{
  overflow:hidden;

  aspect-ratio:
    16 / 7;

  margin:
    -22px -22px 18px;

  border-radius:
    18px 18px 0 0;

  background:#f0e7df;
}

.creator-public-profile-banner img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.creator-public-profile h3{
  margin:
    0 0 5px;
}

.creator-public-profile strong{
  display:block;

  margin-bottom:6px;

  color:
    var(--creator-public-orange);
}

.creator-public-profile p{
  margin:0;

  color:
    var(--creator-public-muted);

  line-height:1.6;
}


/* =========================================================
   DETAILS
   ========================================================= */

.creator-public-detail{
  max-width:880px;

  margin:
    0 auto 90px;
}

.creator-public-detail-media{
  overflow:hidden;

  margin-bottom:30px;

  border-radius:26px;

  background:#efe5dd;
}

.creator-public-detail-media img{
  width:100%;

  max-height:580px;

  object-fit:cover;
}

.creator-public-detail h1{
  margin:
    8px 0 16px;

  font-size:
    clamp(
      38px,
      6vw,
      66px
    );

  line-height:.98;

  letter-spacing:-.052em;
}

.creator-public-summary{
  color:#62554d;

  font-size:19px;
  line-height:1.7;
}

.creator-public-rich{
  margin-top:28px;

  color:#4d423c;

  font-size:17px;
  line-height:1.82;
}

.creator-public-rich h2,
.creator-public-rich h3,
.creator-public-rich h4{
  color:
    var(--creator-public-ink);

  line-height:1.2;
}


/* =========================================================
   RESOURCE LIST
   ========================================================= */

.creator-public-resource-list{
  display:grid;

  gap:11px;

  margin-bottom:80px;
}

.creator-public-resource{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:21px;

  border:
    1px solid
    var(--creator-public-border);

  border-radius:16px;

  background:#fff;
}

.creator-public-resource h3{
  margin:
    4px 0 7px;
}

.creator-public-resource p{
  margin:0;

  color:
    var(--creator-public-muted);
}

.creator-public-resource a{
  flex:0 0 auto;

  color:
    var(--creator-public-orange);

  text-decoration:none;

  font-weight:800;
}


/* =========================================================
   FAQ
   ========================================================= */

.creator-public-faq{
  max-width:900px;

  margin:
    0 auto 80px;

  border-top:
    1px solid
    var(--creator-public-border);
}

.creator-public-faq-item{
  padding:
    21px 0;

  border-bottom:
    1px solid
    var(--creator-public-border);
}

.creator-public-faq-item h3{
  margin:
    0 0 9px;

  font-size:18px;
}

.creator-public-faq-answer{
  color:
    var(--creator-public-muted);

  line-height:1.7;
}


/* =========================================================
   APPLICATION FORM
   ========================================================= */

.creator-public-form{
  max-width:830px;

  margin:
    0 auto 90px;

  padding:31px;

  border:
    1px solid
    var(--creator-public-border);

  border-radius:24px;

  background:#fff;

  box-shadow:
    0 15px 35px
    rgba(75,47,30,.045);
}

.creator-public-form-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:16px;
}

.creator-public-field{
  min-width:0;
}

.creator-public-field--full{
  grid-column:
    1 / -1;
}

.creator-public-field label{
  display:block;

  margin-bottom:7px;

  color:#4e423b;

  font-size:12px;
  font-weight:800;
}

.creator-public-field input:not([type="checkbox"]),
.creator-public-field select,
.creator-public-field textarea{
  width:100%;

  min-height:46px;

  padding:
    11px 13px;

  color:
    var(--creator-public-ink);

  border:
    1px solid
    #dccfc7;

  border-radius:10px;

  outline:0;

  background:#fff;
}

.creator-public-field textarea{
  min-height:140px;

  resize:vertical;
}

.creator-public-field input:focus,
.creator-public-field select:focus,
.creator-public-field textarea:focus{
  border-color:
    var(--creator-public-orange);

  box-shadow:
    0 0 0 3px
    rgba(232,91,42,.08);
}

.creator-public-consent{
  display:flex!important;
  align-items:flex-start;

  gap:9px;

  color:
    var(--creator-public-muted)!important;

  line-height:1.5;
}

.creator-public-consent input{
  margin-top:3px;
}

.creator-public-submit{
  width:100%;

  min-height:50px;

  margin-top:20px;

  color:#fff;

  border:0;

  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      var(--creator-public-orange),
      #ed8a31
    );

  font-weight:900;

  cursor:pointer;
}


/* =========================================================
   FEEDBACK / EMPTY
   ========================================================= */

.creator-public-feedback,
.creator-public-empty{
  padding:23px;

  border:
    1px solid
    var(--creator-public-border);

  border-radius:16px;

  background:#fff;
}

.creator-public-feedback{
  margin-top:17px;
}

.creator-public-feedback.is-success{
  color:#067647;

  background:#ecfdf3;
}

.creator-public-feedback.is-error{
  color:#b42318;

  background:#fef3f2;
}

.creator-public-empty{
  margin-bottom:80px;

  color:
    var(--creator-public-muted);

  text-align:center;
}


/* =========================================================
   CONTACT
   ========================================================= */

.creator-public-contact-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:16px;

  margin-bottom:80px;
}

.creator-public-contact-card{
  padding:24px;

  border:
    1px solid
    var(--creator-public-border);

  border-radius:18px;

  background:#fff;
}

.creator-public-contact-card strong{
  display:block;

  margin-bottom:8px;

  font-size:18px;
}

.creator-public-contact-card a{
  color:
    var(--creator-public-orange);

  overflow-wrap:anywhere;
}


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

.creator-public-footer{
  margin-top:70px;

  padding:
    38px 0;

  border-top:
    1px solid
    var(--creator-public-border);
}

.creator-public-footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  color:
    var(--creator-public-muted);

  font-size:12px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

  .creator-public-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .creator-public-nav-links{
    display:none;
  }

  .creator-public-contact-grid{
    grid-template-columns:
      1fr;
  }

}


@media(max-width:600px){

  .creator-public-shell{
    width:
      min(
        calc(100% - 26px),
        var(--creator-public-shell)
      );
  }

  .creator-public-page-hero{
    padding:
      58px 0 36px;
  }

  .creator-public-grid,
  .creator-public-form-grid{
    grid-template-columns:
      1fr;
  }

  .creator-public-field--full{
    grid-column:auto;
  }

  .creator-public-feature{
    min-height:400px;

    padding:29px;
  }

  .creator-public-resource{
    align-items:flex-start;

    flex-direction:column;
  }

  .creator-public-footer-inner{
    align-items:flex-start;

    flex-direction:column;
  }

}