/* =========================================================
   CREATORHUB — WARM CREATIVE STUDIO THEME
   Complete replacement style.css
   Functionality/classes preserved
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --primary:#6d4aff;
  --primary-dark:#5031d8;
  --secondary:#9b7cff;
  --accent:#ff8a65;

  --dark:#24221f;
  --text:#292722;
  --muted:#77736b;

  --background:#fcfaf6;
  --white:#ffffff;
  --border:#ebe7df;

  --green:#159a68;
  --red:#dc5656;
  --yellow:#a66b00;

  --shadow:0 18px 55px rgba(50,42,30,.08);
  --shadow-hover:0 24px 65px rgba(50,42,30,.13);

  --radius:22px;
  --container:1180px;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:"DM Sans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);

  background:
    radial-gradient(
      circle at 5% 8%,
      rgba(255,196,160,.18),
      transparent 25%
    ),
    radial-gradient(
      circle at 94% 22%,
      rgba(177,231,208,.18),
      transparent 25%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(220,210,255,.12),
      transparent 30%
    ),
    #fcfaf6;

  line-height:1.6;
  overflow-x:hidden;
}

/* Removed old dotted background */
body::before{
  display:none;
}

a{
  text-decoration:none;
  color:inherit;
}

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

button{
  cursor:pointer;
}

::selection{
  background:rgba(109,74,255,.18);
  color:var(--dark);
}


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

.primary-button,
.secondary-button,
.nav-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  border-radius:13px;
  padding:13px 20px;

  font-weight:700;
  border:1px solid transparent;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease;
}

.primary-button{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      #8668ff
    );

  border-color:var(--primary);

  box-shadow:
    0 10px 25px rgba(109,74,255,.20);
}

.primary-button:hover{
  transform:translateY(-3px);

  box-shadow:
    0 15px 32px rgba(109,74,255,.28);

  background:
    linear-gradient(
      135deg,
      var(--primary-dark),
      var(--primary)
    );
}

.secondary-button{
  color:var(--text);
  background:rgba(255,255,255,.88);
  border-color:var(--border);
}

.secondary-button:hover{
  transform:translateY(-3px);
  border-color:#cfc7ef;
  color:var(--primary);

  box-shadow:
    0 10px 25px rgba(40,30,20,.07);
}

.section-label{
  display:inline-flex;
  align-items:center;
  gap:8px;

  color:var(--primary);

  font-size:11px;
  font-weight:800;
  letter-spacing:1.7px;
  text-transform:uppercase;

  margin-bottom:10px;
}

.section-label::before{
  content:"✦";
  font-size:10px;
}

.section-heading h2{
  font-family:"Space Grotesk",sans-serif;

  font-size:clamp(30px,4vw,48px);
  line-height:1.08;

  letter-spacing:-1.4px;

  margin-bottom:13px;
}

.section-heading h2 span,
.hero h1 span,
.cta h2 span{
  color:var(--primary);
}

.section-heading p{
  color:var(--muted);
  max-width:650px;
}

.centered{
  text-align:center;
}

.centered p{
  margin-left:auto;
  margin-right:auto;
}


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

.navbar{
  width:100%;
  min-height:78px;

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

  padding:
    13px
    max(5%,calc((100% - 1220px)/2));

  background:rgba(255,255,255,.90);

  border-bottom:
    1px solid rgba(235,231,223,.85);

  position:sticky;
  top:0;
  z-index:1000;

  backdrop-filter:blur(20px);
}

.logo{
  display:flex;
  align-items:center;
  gap:11px;
}

.logo-icon{
  width:43px;
  height:43px;

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

  border-radius:14px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #6040ef,
      #9c7cff
    );

  box-shadow:
    0 9px 24px rgba(109,74,255,.24);

  position:relative;
  overflow:hidden;
}

.logo-icon::after{
  content:"";

  position:absolute;

  width:24px;
  height:24px;

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

  border-radius:50%;

  transform:
    translate(10px,-10px);
}

.logo h2{
  font-family:"Space Grotesk",sans-serif;
  font-size:19px;
  line-height:1.1;
  letter-spacing:-.4px;
}

.logo span{
  display:block;

  color:var(--muted);

  font-size:9px;
  letter-spacing:1.1px;

  margin-top:2px;

  text-transform:uppercase;
}

.navbar nav{
  display:flex;
  align-items:center;
  gap:27px;
}

.navbar nav a{
  color:#68645d;

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

  position:relative;

  transition:.2s ease;
}

.navbar nav a:hover,
.navbar nav a.active{
  color:var(--primary);
}

.navbar nav a.active::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:-28px;

  height:2px;

  border-radius:4px;

  background:var(--primary);
}

.nav-button{
  color:#fff;

  background:var(--dark);

  padding:10px 16px;

  font-size:12px;

  box-shadow:
    0 8px 20px rgba(35,32,27,.12);
}

.nav-button:hover{
  transform:translateY(-2px);

  background:var(--primary);

  box-shadow:
    0 12px 25px rgba(109,74,255,.22);
}


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

.hero{
  min-height:590px;

  padding:
    82px
    max(7%,calc((100% - 1180px)/2));

  display:grid;

  grid-template-columns:
    1.04fr
    .96fr;

  align-items:center;

  gap:65px;

  position:relative;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 82% 35%,
      rgba(177,231,208,.20),
      transparent 29%
    ),
    radial-gradient(
      circle at 8% 5%,
      rgba(255,205,174,.24),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #fffdf9 0%,
      #fcfaf6 100%
    );
}

.hero::before{
  content:"";

  position:absolute;

  width:380px;
  height:380px;

  border:
    1px solid
    rgba(255,166,120,.16);

  border-radius:50%;

  right:-100px;
  top:-120px;
}

.hero::after{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  border:
    1px dashed
    rgba(109,74,255,.12);

  border-radius:50%;

  left:45%;
  bottom:-100px;
}

.hero-content{
  max-width:700px;
  position:relative;
  z-index:2;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;

  background:#f0edff;
  color:var(--primary);

  padding:8px 13px;

  border:
    1px solid
    #ded6ff;

  border-radius:100px;

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

  margin-bottom:23px;
}

.hero-badge::before{
  content:"●";
  font-size:8px;
}

.hero h1{
  font-family:"Space Grotesk",sans-serif;

  font-size:clamp(44px,5.3vw,72px);

  line-height:1.01;

  letter-spacing:-3px;

  margin-bottom:23px;
}

.hero p{
  max-width:620px;

  color:var(--muted);

  font-size:17px;

  margin-bottom:31px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.hero-visual{
  min-height:400px;

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

  position:relative;
  z-index:2;
}

.creator-circle{
  width:275px;
  height:275px;

  border-radius:50%;

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

  background:
    radial-gradient(
      circle at 35% 25%,
      #fff 0 18%,
      transparent 19%
    ),
    linear-gradient(
      145deg,
      #fff8f1,
      #f0edff
    );

  border:11px solid #fff;

  box-shadow:
    0 35px 80px rgba(66,52,145,.13),
    inset 0 0 0 1px #e5dfd4;

  position:relative;
}

.creator-circle::before,
.creator-circle::after{
  content:"";

  position:absolute;

  border-radius:50%;

  border:
    1px dashed
    rgba(109,74,255,.20);
}

.creator-circle::before{
  inset:-25px;
}

.creator-circle::after{
  inset:27px;
}

.circle-icon{
  width:80px;
  height:80px;

  border-radius:25px;

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

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      #957aff
    );

  font-size:31px;

  margin-bottom:15px;

  box-shadow:
    0 15px 30px rgba(109,74,255,.25);

  position:relative;
  z-index:2;
}

.creator-circle span{
  color:var(--primary);

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

  letter-spacing:4px;

  position:relative;
  z-index:2;
}

.floating-card{
  position:absolute;

  display:flex;
  align-items:center;
  gap:12px;

  background:rgba(255,255,255,.94);

  padding:14px 17px;

  border-radius:16px;

  box-shadow:var(--shadow);

  border:
    1px solid
    rgba(235,231,223,.95);

  animation:
    floating 4.5s ease-in-out infinite;

  backdrop-filter:blur(12px);
}

.floating-card strong{
  display:block;
  font-size:13px;
}

.floating-card small{
  color:var(--muted);
  font-size:10px;
}

.card-one{
  left:0;
  top:65px;
}

.card-two{
  right:0;
  bottom:65px;
  animation-delay:1.1s;
}

.mini-icon{
  width:41px;
  height:41px;

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

  border-radius:12px;
}

.mini-icon.purple{
  color:var(--primary);
  background:#f0edff;
}

.mini-icon.green{
  color:var(--green);
  background:#e7f8f0;
}

@keyframes floating{
  0%,100%{
    transform:translateY(0) rotate(0);
  }

  50%{
    transform:translateY(-11px) rotate(.7deg);
  }
}


/* =========================================================
   STATS
   ========================================================= */

.stats{
  max-width:1100px;

  margin:-27px auto 0;

  position:relative;
  z-index:5;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  background:rgba(255,255,255,.94);

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

  border-radius:20px;

  box-shadow:var(--shadow);

  overflow:hidden;

  backdrop-filter:blur(12px);
}

.stat{
  text-align:center;

  padding:25px 15px;

  border-right:
    1px solid
    var(--border);
}

.stat:last-child{
  border-right:none;
}

.stat strong{
  display:block;

  font-family:"Space Grotesk",sans-serif;

  font-size:28px;

  color:var(--primary);
}

.stat span{
  color:var(--muted);

  font-size:11px;
  font-weight:600;
}


/* =========================================================
   MARKETPLACE
   ========================================================= */

.marketplace{
  padding:
    105px
    max(7%,calc((100% - 1180px)/2))
    85px;

  background:#fcfaf6;
}

.search-area{
  display:grid;

  grid-template-columns:
    1fr
    190px
    170px;

  gap:12px;

  margin-top:36px;
}

.search-box{
  height:54px;

  display:flex;
  align-items:center;

  gap:12px;

  background:#fff;

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

  border-radius:14px;

  padding:0 17px;

  transition:.2s ease;
}

.search-box:focus-within{
  border-color:#b9aaff;

  box-shadow:
    0 0 0 4px
    rgba(109,74,255,.08);
}

.search-box i{
  color:#99948a;
}

.search-box input{
  width:100%;

  border:none;
  outline:none;

  background:transparent;

  color:var(--text);

  font-size:13px;
}

.search-box input::placeholder{
  color:#aaa69d;
}

.search-area select{
  height:54px;

  padding:0 14px;

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

  border-radius:14px;

  background:#fff;

  color:var(--text);

  outline:none;

  cursor:pointer;

  font-size:13px;
}

.search-area select:focus{
  border-color:#b9aaff;
}

.category-chips{
  display:flex;

  gap:9px;

  flex-wrap:wrap;

  margin:
    22px
    0
    31px;
}

.category-chip{
  border:
    1px solid
    var(--border);

  background:#fff;

  color:#69645c;

  padding:9px 14px;

  border-radius:100px;

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

  transition:.2s ease;
}

.category-chip:hover,
.category-chip.active{
  color:#fff;

  background:var(--dark);

  border-color:var(--dark);

  transform:translateY(-2px);
}

.gig-grid{
  display:grid;

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

  gap:23px;
}

.gig-card{
  background:#fff;

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

  border-radius:22px;

  overflow:hidden;

  transition:.28s ease;

  box-shadow:
    0 8px 25px
    rgba(50,42,30,.045);
}

.gig-card:hover{
  transform:translateY(-8px);

  box-shadow:var(--shadow-hover);

  border-color:#d9d0ff;
}

.gig-cover{
  height:158px;

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

  position:relative;

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(255,255,255,.95),
      transparent 20%
    ),
    linear-gradient(
      135deg,
      #fff3e9,
      #f4f1ff
    );
}

.gig-cover::after{
  content:"✦  •  ✦";

  position:absolute;

  right:15px;
  bottom:12px;

  color:rgba(109,74,255,.25);

  font-size:12px;

  letter-spacing:4px;
}

.gig-cover .cover-icon{
  width:70px;
  height:70px;

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

  border-radius:21px;

  background:#fff;

  color:var(--primary);

  font-size:28px;

  box-shadow:
    0 12px 28px
    rgba(70,50,150,.10);

  transition:.28s ease;
}

.gig-card:hover .cover-icon{
  transform:
    scale(1.08)
    rotate(-4deg);
}

.gig-category{
  position:absolute;

  left:14px;
  top:14px;

  background:rgba(255,255,255,.95);

  color:var(--primary);

  padding:5px 9px;

  border-radius:8px;

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

  letter-spacing:.5px;
}

.gig-body{
  padding:21px;
}

.gig-body h3{
  font-family:"Space Grotesk",sans-serif;

  font-size:17px;

  line-height:1.35;

  margin-bottom:8px;
}

.gig-description{
  color:var(--muted);

  font-size:12px;

  display:-webkit-box;

  -webkit-line-clamp:2;
  line-clamp:2;

  -webkit-box-orient:vertical;

  overflow:hidden;

  min-height:38px;
}

.creator-info{
  display:flex;
  align-items:center;

  gap:9px;

  margin:17px 0;

  padding-top:15px;

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

.avatar{
  width:35px;
  height:35px;

  border-radius:50%;

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

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      #9a7dff
    );

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

.creator-info strong{
  display:block;
  font-size:12px;
}

.creator-info small{
  color:var(--muted);
  font-size:10px;
}

.gig-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.price strong{
  display:block;

  color:var(--text);

  font-family:"Space Grotesk",sans-serif;

  font-size:19px;
}

.price small{
  color:var(--muted);
  font-size:9px;
}

.book-button{
  border:none;

  color:#fff;

  background:var(--dark);

  padding:9px 14px;

  border-radius:10px;

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

  transition:.2s ease;
}

.book-button:hover{
  background:var(--primary);

  transform:translateY(-2px);

  box-shadow:
    0 8px 18px
    rgba(109,74,255,.22);
}

.empty-state{
  display:none;

  text-align:center;

  padding:65px 20px;

  background:#fff;

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

  border-radius:20px;
}

.empty-icon{
  width:56px;
  height:56px;

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

  margin:
    auto
    auto
    15px;

  border-radius:16px;

  color:var(--primary);

  background:#f0edff;
}

.empty-state h3{
  margin-bottom:5px;
}

.empty-state p{
  color:var(--muted);

  margin-bottom:18px;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.how-section{
  padding:
    95px
    max(7%,calc((100% - 1180px)/2));

  background:#ffffff;

  position:relative;
}

.steps{
  max-width:1100px;

  margin:
    55px
    auto
    0;

  display:flex;

  align-items:flex-start;

  justify-content:center;
}

.step{
  width:230px;

  text-align:center;

  position:relative;
}

.step-number{
  color:#aaa59b;

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

  letter-spacing:1px;

  margin-bottom:10px;
}

.step-icon{
  width:65px;
  height:65px;

  margin:
    auto
    auto
    15px;

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

  border-radius:19px;

  color:var(--primary);

  background:#f0edff;

  font-size:23px;

  transition:.25s ease;
}

.step:hover .step-icon{
  transform:
    translateY(-5px)
    rotate(-3deg);

  box-shadow:
    0 12px 25px
    rgba(109,74,255,.12);
}

.step h3{
  font-size:16px;

  margin-bottom:7px;
}

.step p{
  color:var(--muted);

  font-size:12px;
}

.step-line{
  width:65px;
  height:1px;

  margin-top:75px;

  background:
    linear-gradient(
      90deg,
      #ddd8cf,
      transparent
    );
}


/* =========================================================
   CTA
   ========================================================= */

.cta{
  margin:
    80px
    max(7%,calc((100% - 1180px)/2));

  padding:54px;

  border-radius:27px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  background:
    radial-gradient(
      circle at 90% 15%,
      rgba(255,255,255,.18),
      transparent 22%
    ),
    radial-gradient(
      circle at 10% 100%,
      rgba(155,124,255,.22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #211b3d,
      #49348c
    );

  color:#fff;

  position:relative;

  overflow:hidden;
}

.cta::after{
  content:"✦   ✦   ✦";

  position:absolute;

  right:30px;
  bottom:12px;

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

  font-size:26px;

  letter-spacing:12px;
}

.cta .section-label{
  color:#d5cbff;
}

.cta h2{
  font-family:"Space Grotesk",sans-serif;

  font-size:clamp(28px,4vw,44px);

  line-height:1.08;

  margin-bottom:12px;
}

.cta h2 span{
  color:#d2c7ff;
}

.cta p{
  max-width:560px;

  color:#d9d4e9;
}

.cta .primary-button{
  background:#fff;

  color:var(--primary);

  border-color:#fff;

  white-space:nowrap;

  position:relative;
  z-index:2;
}

.cta .primary-button:hover{
  background:#f4f1ff;
}


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

footer{
  padding:
    55px
    max(7%,calc((100% - 1180px)/2))
    25px;

  background:#25221e;

  color:#fff;
}

.footer-brand{
  max-width:430px;
}

.footer-brand .logo span{
  color:#aaa69d;
}

.footer-brand p{
  color:#aaa69d;

  font-size:13px;

  margin-top:15px;
}

.footer-links{
  display:flex;

  gap:25px;

  margin-top:30px;

  flex-wrap:wrap;
}

.footer-links a{
  color:#d4d0c9;

  font-size:12px;

  transition:.2s;
}

.footer-links a:hover{
  color:#fff;
}

.footer-bottom{
  margin-top:35px;

  padding-top:20px;

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

  display:flex;

  justify-content:space-between;

  gap:20px;

  color:#858179;

  font-size:10px;
}


/* =========================================================
   FORM PAGES
   ========================================================= */

.page-container{
  max-width:900px;

  margin:auto;

  padding:75px 20px;
}

.form-card{
  background:rgba(255,255,255,.97);

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

  border-radius:24px;

  padding:38px;

  box-shadow:var(--shadow);
}

.form-card h1{
  font-family:"Space Grotesk",sans-serif;

  font-size:34px;

  letter-spacing:-1px;

  margin-bottom:8px;
}

.form-card>p{
  color:var(--muted);

  margin-bottom:30px;
}

.form-grid{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:18px;
}

.form-group{
  margin-bottom:18px;
}

.form-group.full{
  grid-column:1/-1;
}

.form-group label{
  display:block;

  font-size:11px;

  font-weight:900;

  letter-spacing:.2px;

  margin-bottom:7px;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;

  padding:13px 14px;

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

  border-radius:12px;

  outline:none;

  background:#fff;

  color:var(--text);

  transition:.2s ease;
}

.form-group textarea{
  min-height:130px;

  resize:vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:#b7a7ff;

  box-shadow:
    0 0 0 4px
    rgba(109,74,255,.08);
}

.form-submit{
  margin-top:8px;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard{
  padding:
    65px
    max(7%,calc((100% - 1180px)/2));

  background:#fcfaf6;
}

.dashboard-header{
  margin-bottom:30px;
}

.dashboard-header h1{
  font-family:"Space Grotesk",sans-serif;

  font-size:40px;

  letter-spacing:-1.5px;
}

.dashboard-header p{
  color:var(--muted);
}

.dashboard-stats{
  display:grid;

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

  gap:15px;

  margin-bottom:25px;
}

.dashboard-stat{
  background:#fff;

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

  border-radius:18px;

  padding:22px;

  box-shadow:
    0 8px 25px
    rgba(50,42,30,.04);
}

.dashboard-stat strong{
  display:block;

  font-family:"Space Grotesk",sans-serif;

  font-size:27px;

  color:var(--primary);
}

.dashboard-stat span{
  color:var(--muted);

  font-size:11px;
}

.booking-table-wrapper{
  background:#fff;

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

  border-radius:20px;

  overflow-x:auto;

  box-shadow:
    0 8px 25px
    rgba(50,42,30,.04);
}

.booking-table{
  width:100%;

  border-collapse:collapse;

  min-width:700px;
}

.booking-table th{
  text-align:left;

  background:#faf8f3;

  color:#77736b;

  font-size:10px;

  padding:16px;

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

.booking-table td{
  padding:18px 15px;

  font-size:12px;

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

.booking-table tr:last-child td{
  border-bottom:none;
}

.status{
  display:inline-block;

  padding:5px 10px;

  border-radius:100px;

  font-size:9px;

  font-weight:900;
}

.status.pending{
  color:#9a6800;

  background:#fff4d5;
}

.status.accepted{
  color:#08794b;

  background:#ddf7eb;
}

.status.declined{
  color:#a73333;

  background:#ffe3e3;
}

.action-buttons{
  display:flex;

  gap:7px;
}

.action-button{
  border:none;

  padding:7px 10px;

  border-radius:8px;

  font-size:10px;

  font-weight:800;
}

.accept-button{
  color:#08794b;
  background:#ddf7eb;
}

.decline-button{
  color:#a73333;
  background:#ffe3e3;
}

.accept-button:hover,
.decline-button:hover{
  filter:brightness(.96);

  transform:translateY(-1px);
}


/* =========================================================
   CONFIRMATION
   ========================================================= */

.confirmation{
  max-width:650px;

  margin:80px auto;

  padding:20px;

  background:#fcfaf6;
}

.confirmation-card{
  text-align:center;

  background:#fff;

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

  border-radius:25px;

  padding:48px 30px;

  box-shadow:var(--shadow);
}

.success-icon{
  width:78px;
  height:78px;

  margin:
    auto
    auto
    20px;

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

  border-radius:50%;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #159a68,
      #31bc88
    );

  font-size:32px;

  box-shadow:
    0 15px 30px
    rgba(21,154,104,.20);
}

.confirmation-card h1{
  font-family:"Space Grotesk",sans-serif;

  margin-bottom:10px;
}

.confirmation-card p{
  color:var(--muted);

  margin-bottom:25px;
}

.confirmation-details{
  text-align:left;

  background:#faf8f3;

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

  border-radius:15px;

  padding:18px;

  margin-bottom:25px;
}

.detail-row{
  display:flex;

  justify-content:space-between;

  gap:20px;

  padding:10px 0;

  border-bottom:
    1px solid
    var(--border);

  font-size:12px;
}

.detail-row:last-child{
  border-bottom:none;
}

.detail-row span:first-child{
  color:var(--muted);
}

.detail-row strong{
  text-align:right;
}


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

@media(max-width:1050px){

  .navbar{
    padding-left:4%;
    padding-right:4%;
  }

  .navbar nav{
    gap:16px;
  }

  .hero{
    padding-left:5%;
    padding-right:5%;
  }

  .gig-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .stats{
    margin-left:5%;
    margin-right:5%;
  }
}


@media(max-width:850px){

  .navbar{
    flex-wrap:wrap;
    gap:12px;
  }

  .navbar nav{
    order:3;

    width:100%;

    justify-content:center;

    overflow-x:auto;

    padding:8px 0;
  }

  .navbar nav a.active::after{
    bottom:-8px;
  }

  .hero{
    grid-template-columns:1fr;

    text-align:center;

    padding-top:62px;
  }

  .hero-content{
    margin:auto;
  }

  .hero-actions{
    justify-content:center;
  }

  .hero-visual{
    min-height:350px;
  }

  .search-area{
    grid-template-columns:1fr;
  }

  .steps{
    flex-direction:column;

    align-items:center;

    gap:30px;
  }

  .step-line{
    width:1px;

    height:35px;

    margin:0;
  }

  .cta{
    flex-direction:column;

    align-items:flex-start;

    padding:38px;
  }
}


@media(max-width:650px){

  .navbar{
    padding:11px 4%;
  }

  .navbar .nav-button{
    display:none;
  }

  .navbar nav{
    justify-content:flex-start;
  }

  .hero{
    padding:52px 5%;
  }

  .hero h1{
    font-size:44px;

    letter-spacing:-2px;
  }

  .hero p{
    font-size:15px;
  }

  .hero-visual{
    transform:scale(.88);

    min-height:315px;
  }

  .card-one{
    left:-5px;
  }

  .card-two{
    right:-5px;
  }

  .stats{
    grid-template-columns:
      repeat(2,1fr);

    margin-top:-10px;
  }

  .stat{
    border-bottom:
      1px solid
      var(--border);
  }

  .stat:nth-child(2){
    border-right:none;
  }

  .stat:nth-child(3){
    border-right:
      1px solid
      var(--border);
  }

  .marketplace,
  .how-section{
    padding-left:5%;
    padding-right:5%;
  }

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

  .section-heading h2{
    font-size:33px;
  }

  .cta{
    margin-left:5%;
    margin-right:5%;
  }

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

  .form-group.full{
    grid-column:auto;
  }

  .form-card{
    padding:27px 19px;
  }

  .dashboard{
    padding-left:5%;
    padding-right:5%;
  }

  .dashboard-stats{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    flex-direction:column;
  }
}


@media(max-width:430px){

  .logo h2{
    font-size:16px;
  }

  .logo-icon{
    width:38px;
    height:38px;
  }

  .hero h1{
    font-size:38px;
  }

  .hero-visual{
    transform:scale(.78);

    margin-left:-10%;
    margin-right:-10%;
  }

  .primary-button,
  .secondary-button{
    width:100%;
  }

  .category-chips{
    gap:6px;
  }

  .category-chip{
    font-size:10px;

    padding:8px 10px;
  }

  .floating-card{
    padding:11px 12px;
  }

  .floating-card strong{
    font-size:11px;
  }
}

/* =========================================================
   CREATORHUB — PREMIUM COLORFUL BACKGROUND
   ========================================================= */

body{
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(255,184,145,.30),
      transparent 24%
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(159,224,196,.28),
      transparent 25%
    ),
    radial-gradient(
      circle at 48% 48%,
      rgba(207,196,255,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 90%,
      rgba(255,218,191,.18),
      transparent 25%
    ),
    #fcfaf6;

  background-attachment:fixed;
}


/* HERO — more visible soft gradient */

.hero{
  background:
    radial-gradient(
      circle at 78% 28%,
      rgba(158,226,198,.30),
      transparent 30%
    ),
    radial-gradient(
      circle at 5% 12%,
      rgba(255,190,151,.32),
      transparent 30%
    ),
    radial-gradient(
      circle at 52% 90%,
      rgba(205,194,255,.18),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #fffdf9 0%,
      #fcfaf6 55%,
      #f8fbf8 100%
    );
}


/* MARKETPLACE */

.marketplace{
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(255,204,176,.14),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 60%,
      rgba(178,229,207,.14),
      transparent 25%
    ),
    #fcfaf6;
}


/* HOW IT WORKS */

.how-section{
  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(255,213,190,.14),
      transparent 24%
    ),
    radial-gradient(
      circle at 85% 50%,
      rgba(193,231,213,.14),
      transparent 24%
    ),
    #ffffff;
}


/* FORM / DASHBOARD PAGES */

.page-container,
.dashboard,
.confirmation{
  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(255,196,160,.20),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 30%,
      rgba(177,231,208,.18),
      transparent 25%
    ),
    #fcfaf6;
}


/* Make white cards stand out */

.gig-card,
.form-card,
.dashboard-stat,
.booking-table-wrapper,
.confirmation-card,
.empty-state{
  background:rgba(255,255,255,.96);
}


/* Slight premium glass effect */

.stats{
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(18px);
}


/* Hero visual gets a soft colorful glow */

.hero-visual::before{
  content:"";
  position:absolute;

  width:340px;
  height:340px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(180,231,210,.20),
      transparent 68%
    );

  filter:blur(10px);

  z-index:-1;
}


/* Soft glow behind marketplace cards */

.gig-grid{
  position:relative;
}

.gig-grid::before{
  content:"";

  position:absolute;

  width:260px;
  height:260px;

  left:-120px;
  top:100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,196,160,.16),
      transparent 70%
    );

  pointer-events:none;

  z-index:0;
}

.gig-card{
  position:relative;
  z-index:1;
}

/* =========================================================
   CREATORHUB — PREMIUM AURORA STUDIO THEME
   High-end creative marketplace look
   ========================================================= */

/* ---------- PREMIUM PAGE BACKGROUND ---------- */

body{
  position:relative;
  min-height:100vh;

  background:
    radial-gradient(
      ellipse 55% 45% at 0% 0%,
      rgba(255,174,126,.34),
      transparent 65%
    ),
    radial-gradient(
      ellipse 50% 45% at 100% 8%,
      rgba(135,224,190,.30),
      transparent 65%
    ),
    radial-gradient(
      ellipse 55% 50% at 50% 45%,
      rgba(176,158,255,.13),
      transparent 70%
    ),
    radial-gradient(
      ellipse 45% 40% at 90% 100%,
      rgba(255,205,173,.22),
      transparent 70%
    ),
    #faf8f3;

  overflow-x:hidden;
}


/* ---------- HUGE SOFT AURORA BLOBS ---------- */

body::after{
  content:"";

  position:fixed;

  width:520px;
  height:520px;

  left:-260px;
  top:35%;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,180,137,.17),
      transparent 68%
    );

  filter:blur(45px);

  pointer-events:none;

  z-index:-2;

  animation:
    auroraMove 12s ease-in-out infinite alternate;
}

@keyframes auroraMove{
  from{
    transform:translate(0,0) scale(1);
  }

  to{
    transform:translate(100px,-50px) scale(1.15);
  }
}


/* =========================================================
   NAVBAR — PREMIUM GLASS
   ========================================================= */

.navbar{
  background:rgba(255,255,255,.72);

  border-bottom:
    1px solid
    rgba(255,255,255,.75);

  box-shadow:
    0 8px 35px rgba(55,45,30,.035);

  backdrop-filter:
    blur(24px)
    saturate(150%);
}


/* =========================================================
   HERO — HERO AURORA
   ========================================================= */

.hero{
  min-height:610px;

  background:
    radial-gradient(
      ellipse 60% 70% at 100% 45%,
      rgba(158,229,201,.30),
      transparent 65%
    ),
    radial-gradient(
      ellipse 55% 65% at 0% 15%,
      rgba(255,190,150,.34),
      transparent 65%
    ),
    radial-gradient(
      ellipse 45% 45% at 50% 100%,
      rgba(183,165,255,.13),
      transparent 70%
    ),
    linear-gradient(
      135deg,
      #fffdf9 0%,
      #fbfaf7 48%,
      #f8fbf9 100%
    );

  isolation:isolate;
}


/* Large decorative orb */

.hero::before{
  width:470px;
  height:470px;

  right:-150px;
  top:-160px;

  border:none;

  background:
    radial-gradient(
      circle,
      rgba(174,231,207,.22),
      rgba(174,231,207,.07) 45%,
      transparent 70%
    );

  filter:blur(2px);

  opacity:1;

  z-index:-1;
}


/* Soft peach orb */

.hero::after{
  width:250px;
  height:250px;

  left:-80px;
  bottom:-120px;

  border:none;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,185,145,.18),
      transparent 70%
    );

  filter:blur(8px);

  z-index:-1;
}


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

.hero h1{
  text-shadow:
    0 2px 30px
    rgba(60,50,40,.035);
}

.hero-badge{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.90),
      rgba(241,236,255,.85)
    );

  border:
    1px solid
    rgba(109,74,255,.13);

  box-shadow:
    0 8px 25px
    rgba(70,55,130,.06);
}


/* =========================================================
   HERO CREATOR CIRCLE
   ========================================================= */

.creator-circle{
  background:
    radial-gradient(
      circle at 35% 22%,
      rgba(255,255,255,.98) 0 15%,
      transparent 16%
    ),
    radial-gradient(
      circle at 70% 75%,
      rgba(170,231,208,.32),
      transparent 45%
    ),
    radial-gradient(
      circle at 25% 70%,
      rgba(255,191,157,.28),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #fffdf9,
      #f0edff
    );

  border:
    10px solid
    rgba(255,255,255,.90);

  box-shadow:
    0 40px 100px rgba(70,55,125,.16),
    0 10px 35px rgba(255,175,130,.10),
    inset 0 0 0 1px rgba(255,255,255,.9);
}


/* =========================================================
   FLOATING CARDS — GLASS
   ========================================================= */

.floating-card{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.88),
      rgba(255,255,255,.68)
    );

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

  box-shadow:
    0 18px 45px rgba(50,42,30,.09),
    inset 0 1px 0 rgba(255,255,255,.95);

  backdrop-filter:
    blur(20px)
    saturate(140%);
}


/* =========================================================
   STATS — FLOATING GLASS PANEL
   ========================================================= */

.stats{
  background:
    rgba(255,255,255,.76);

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

  box-shadow:
    0 25px 70px rgba(60,48,30,.09),
    inset 0 1px 0 rgba(255,255,255,.9);

  backdrop-filter:
    blur(25px)
    saturate(140%);
}


/* =========================================================
   MARKETPLACE BACKGROUND
   ========================================================= */

.marketplace{
  position:relative;

  background:
    radial-gradient(
      ellipse 45% 35% at 5% 10%,
      rgba(255,190,150,.17),
      transparent 70%
    ),
    radial-gradient(
      ellipse 45% 40% at 95% 55%,
      rgba(166,228,201,.17),
      transparent 70%
    ),
    #faf8f3;
}


/* =========================================================
   GIG CARDS — PREMIUM
   ========================================================= */

.gig-card{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(255,255,255,.90)
    );

  border:
    1px solid
    rgba(231,226,216,.90);

  box-shadow:
    0 10px 35px
    rgba(50,42,30,.055);

  position:relative;
}


/* subtle gradient edge */

.gig-card::before{
  content:"";

  position:absolute;

  inset:0;

  border-radius:22px;

  padding:1px;

  background:
    linear-gradient(
      135deg,
      rgba(255,190,150,.25),
      transparent 35%,
      rgba(174,229,205,.22)
    );

  -webkit-mask:
  linear-gradient(#fff 0 0) content-box,
  linear-gradient(#fff 0 0);

mask:
  linear-gradient(#fff 0 0) content-box,
  linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;
mask-composite:exclude;

  pointer-events:none;

  opacity:.65;
}

.gig-card:hover{
  transform:translateY(-10px);

  border-color:
    rgba(174,157,245,.38);

  box-shadow:
    0 30px 70px
    rgba(70,55,125,.13),
    0 10px 30px
    rgba(255,180,140,.07);
}


/* =========================================================
   GIG COVER — COLORFUL CREATIVE
   ========================================================= */

.gig-cover{
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255,255,255,.95),
      transparent 22%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(178,229,207,.34),
      transparent 42%
    ),
    radial-gradient(
      circle at 15% 85%,
      rgba(255,194,160,.32),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #fff3e8,
      #f0edff 55%,
      #edf9f4
    );
}


/* =========================================================
   COVER ICON
   ========================================================= */

.gig-cover .cover-icon{
  background:
    rgba(255,255,255,.86);

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

  box-shadow:
    0 15px 35px
    rgba(70,55,125,.10),
    inset 0 1px 0
    rgba(255,255,255,.95);

  backdrop-filter:blur(12px);
}

.gig-card:hover .cover-icon{
  transform:
    scale(1.10)
    translateY(-3px)
    rotate(-4deg);

  box-shadow:
    0 20px 40px
    rgba(70,55,125,.15);
}


/* =========================================================
   CATEGORY CHIP
   ========================================================= */

.category-chip{
  background:
    rgba(255,255,255,.80);

  border:
    1px solid
    rgba(225,220,211,.90);

  box-shadow:
    0 4px 14px
    rgba(50,42,30,.025);
}

.category-chip:hover,
.category-chip.active{
  background:
    linear-gradient(
      135deg,
      #24221f,
      #3b3731
    );

  box-shadow:
    0 8px 20px
    rgba(35,32,27,.15);
}


/* =========================================================
   SEARCH BOX
   ========================================================= */

.search-box{
  background:
    rgba(255,255,255,.86);

  border:
    1px solid
    rgba(225,220,211,.90);

  box-shadow:
    0 8px 25px
    rgba(50,42,30,.035);

  backdrop-filter:blur(15px);
}

.search-area select{
  background:
    rgba(255,255,255,.86);

  box-shadow:
    0 8px 25px
    rgba(50,42,30,.035);
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.how-section{
  background:
    radial-gradient(
      ellipse 40% 60% at 0% 50%,
      rgba(255,199,168,.13),
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 60% at 100% 50%,
      rgba(178,229,207,.13),
      transparent 70%
    ),
    #fff;
}


/* =========================================================
   STEP ICONS
   ========================================================= */

.step-icon{
  background:
    linear-gradient(
      145deg,
      #f1edff,
      #fff3e9
    );

  border:
    1px solid
    rgba(109,74,255,.08);

  box-shadow:
    0 8px 25px
    rgba(70,55,125,.05);
}

.step:hover .step-icon{
  box-shadow:
    0 18px 35px
    rgba(109,74,255,.13);
}


/* =========================================================
   CTA — PREMIUM
   ========================================================= */

.cta{
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(173,231,207,.25),
      transparent 30%
    ),
    radial-gradient(
      circle at 5% 90%,
      rgba(255,183,143,.22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #211d36,
      #40336f 55%,
      #2c5a50
    );

  box-shadow:
    0 30px 80px
    rgba(50,40,80,.16);

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


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

.form-card{
  background:
    rgba(255,255,255,.88);

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

  box-shadow:
    0 25px 70px
    rgba(55,45,30,.09),
    inset 0 1px 0
    rgba(255,255,255,.95);

  backdrop-filter:
    blur(22px)
    saturate(140%);
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard{
  background:
    radial-gradient(
      ellipse 45% 40% at 5% 5%,
      rgba(255,188,151,.18),
      transparent 70%
    ),
    radial-gradient(
      ellipse 45% 45% at 95% 70%,
      rgba(174,229,206,.18),
      transparent 70%
    ),
    #faf8f3;
}

.dashboard-stat{
  background:
    rgba(255,255,255,.88);

  border:
    1px solid
    rgba(235,231,223,.90);

  box-shadow:
    0 12px 35px
    rgba(50,42,30,.05);
}

.booking-table-wrapper{
  background:
    rgba(255,255,255,.90);

  border:
    1px solid
    rgba(235,231,223,.90);

  box-shadow:
    0 18px 50px
    rgba(50,42,30,.06);
}


/* =========================================================
   CONFIRMATION
   ========================================================= */

.confirmation{
  background:
    radial-gradient(
      ellipse 45% 40% at 10% 10%,
      rgba(255,190,150,.20),
      transparent 70%
    ),
    radial-gradient(
      ellipse 45% 40% at 90% 80%,
      rgba(177,231,208,.20),
      transparent 70%
    ),
    #faf8f3;
}

.confirmation-card{
  background:
    rgba(255,255,255,.90);

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

  box-shadow:
    0 30px 80px
    rgba(50,42,30,.10);

  backdrop-filter:blur(22px);
}


/* =========================================================
   INPUTS — PREMIUM
   ========================================================= */

.form-group input,
.form-group select,
.form-group textarea{
  background:
    rgba(255,255,255,.82);

  border:
    1px solid
    #e5e0d7;

  box-shadow:
    inset 0 1px 2px
    rgba(50,42,30,.025);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  background:#fff;

  border-color:
    rgba(109,74,255,.45);

  box-shadow:
    0 0 0 4px
    rgba(109,74,255,.08),
    0 8px 25px
    rgba(109,74,255,.05);
}


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

.primary-button{
  background:
    linear-gradient(
      135deg,
      #6546f5,
      #876cff
    );

  box-shadow:
    0 12px 30px
    rgba(109,74,255,.22);
}

.primary-button:hover{
  box-shadow:
    0 18px 38px
    rgba(109,74,255,.30);
}

.book-button{
  background:
    linear-gradient(
      135deg,
      #25221f,
      #3b3731
    );
}

.book-button:hover{
  background:
    linear-gradient(
      135deg,
      #6546f5,
      #876cff
    );
}


/* =========================================================
   MOBILE SAFETY
   ========================================================= */

@media(max-width:850px){

  body::after{
    width:350px;
    height:350px;
  }

  .hero::before{
    width:330px;
    height:330px;

    right:-150px;
    top:-100px;
  }

  .gig-card:hover{
    transform:translateY(-5px);
  }
}

/* =========================================================
   CREATORHUB PREMIUM HERO LOGO
   ========================================================= */

.creator-hero-visual{
    position:relative;
    min-height:500px;

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

    overflow:visible;
}


/* =========================================================
   MAIN LOGO AREA
   ========================================================= */

.creator-logo-orbit{
    position:relative;

    width:390px;
    height:390px;

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

    flex-direction:column;

    z-index:5;
}


/* soft glow behind logo */

.logo-glow{
    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(110,80,255,.18),
            rgba(185,160,255,.10) 45%,
            transparent 72%
        );

    filter:blur(12px);

    z-index:-3;
}


/* =========================================================
   ORBIT RINGS
   ========================================================= */

.orbit{
    position:absolute;

    border-radius:50%;

    pointer-events:none;
}


.orbit-one{
    width:330px;
    height:200px;

    border:
        2px solid
        rgba(103,77,255,.38);

    transform:
        rotate(18deg);

    box-shadow:
        0 0 20px
        rgba(103,77,255,.08);

    animation:
        logoOrbitOne 10s linear infinite;
}


.orbit-two{
    width:340px;
    height:205px;

    border:
        2px solid
        rgba(255,172,125,.35);

    transform:
        rotate(-20deg);

    animation:
        logoOrbitTwo 12s linear infinite;
}


@keyframes logoOrbitOne{

    0%{
        transform:rotate(18deg);
    }

    50%{
        transform:rotate(198deg);
    }

    100%{
        transform:rotate(378deg);
    }

}


@keyframes logoOrbitTwo{

    0%{
        transform:rotate(-20deg);
    }

    50%{
        transform:rotate(-200deg);
    }

    100%{
        transform:rotate(-380deg);
    }

}


/* =========================================================
   CREATORHUB LOGO BOX
   ========================================================= */

.creator-logo-box{

    position:relative;

    width:135px;
    height:135px;

    border-radius:34px;

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

    background:
        linear-gradient(
            145deg,
            #7354ff,
            #4d2ee8
        );

    box-shadow:
        0 25px 55px
        rgba(82,56,220,.28),

        0 8px 20px
        rgba(82,56,220,.18),

        inset 0 1px 1px
        rgba(255,255,255,.55);

    z-index:5;

    animation:
        logoFloat 4s ease-in-out infinite;
}


@keyframes logoFloat{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-7px);
    }

}


/* =========================================================
   C LETTER
   ========================================================= */

.creator-c{

    font-family:
        Arial,
        sans-serif;

    font-size:92px;

    font-weight:900;

    line-height:1;

    color:white;

    letter-spacing:-8px;

    transform:
        translateX(-3px);
}


/* =========================================================
   SPARK INSIDE LOGO
   ========================================================= */

.creator-spark{

    position:absolute;

    right:25px;
    top:27px;

    width:28px;
    height:28px;

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

    color:#ffdca8;

    font-size:22px;

    filter:
        drop-shadow(
            0 4px 8px
            rgba(255,220,168,.35)
        );

    animation:
        sparkPulse 2s ease-in-out infinite;
}


@keyframes sparkPulse{

    0%,
    100%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(1.25);
        opacity:.75;
    }

}


/* =========================================================
   CREATORHUB TEXT
   ========================================================= */

.creator-logo-name{

    margin-top:22px;

    font-size:34px;

    line-height:1;

    font-weight:800;

    letter-spacing:-1.5px;

    color:#242039;

    text-shadow:
        0 5px 20px
        rgba(60,45,120,.08);
}


/* =========================================================
   TAGLINE
   ========================================================= */

.creator-logo-tagline{

    margin-top:11px;

    font-size:10px;

    font-weight:800;

    letter-spacing:4px;

    color:#6755c8;

    white-space:nowrap;
}


.creator-logo-tagline span{

    margin:
        0 6px;

    color:#ff9b73;
}


/* =========================================================
   FLOATING CATEGORY CARDS
   ========================================================= */

.creator-card{

    position:absolute;

    min-width:190px;

    padding:15px 17px;

    display:flex;

    align-items:center;

    gap:12px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.92),
            rgba(255,255,255,.72)
        );

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

    box-shadow:
        0 18px 45px
        rgba(50,42,30,.10),

        inset 0 1px 0
        rgba(255,255,255,.95);

    backdrop-filter:
        blur(18px)
        saturate(140%);

    z-index:10;

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


.creator-card:hover{

    transform:
        translateY(-8px)
        scale(1.03);

    box-shadow:
        0 25px 55px
        rgba(60,48,120,.14);
}


/* =========================================================
   CARD POSITIONS
   ========================================================= */

.photo-card{

    top:35px;
    left:5px;

    animation:
        floatingPhoto 5s ease-in-out infinite;
}


.programming-card{

    top:55px;
    right:-10px;

    animation:
        floatingProgramming 5.5s ease-in-out infinite;
}


.video-card{

    bottom:45px;
    right:0;

    animation:
        floatingVideo 4.8s ease-in-out infinite;
}


@keyframes floatingPhoto{

    0%,
    100%{
        transform:translateY(0);
    }

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

}


@keyframes floatingProgramming{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(9px);
    }

}


@keyframes floatingVideo{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-7px);
    }

}


/* =========================================================
   MINI ICONS
   ========================================================= */

.creator-card .mini-icon{

    width:43px;
    height:43px;

    flex-shrink:0;

    border-radius:13px;

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

    font-size:17px;
}


.creator-card .mini-icon.purple{

    background:
        linear-gradient(
            135deg,
            #eee9ff,
            #ddd5ff
        );

    color:#684cff;
}


.creator-card .mini-icon.green{

    background:
        linear-gradient(
            135deg,
            #e3faef,
            #cef3e1
        );

    color:#0eaa72;
}


.creator-card .mini-icon.orange{

    background:
        linear-gradient(
            135deg,
            #fff0e7,
            #ffe0d1
        );

    color:#f06b35;
}


/* =========================================================
   CARD TEXT
   ========================================================= */

.creator-card strong{

    display:block;

    font-size:14px;

    font-weight:800;

    color:#27233b;

    white-space:nowrap;
}


.creator-card small{

    display:block;

    margin-top:3px;

    font-size:11px;

    color:#898493;

    font-weight:500;
}


.card-arrow{

    margin-left:auto;

    color:#8c82b9;

    font-size:12px;

    transition:
        transform .25s ease;
}


.creator-card:hover .card-arrow{

    transform:
        translateX(4px);

    color:#6247ed;
}


/* =========================================================
   DECORATIVE SPARKS
   ========================================================= */

.hero-spark{

    position:absolute;

    color:#7255ff;

    z-index:2;

    filter:
        drop-shadow(
            0 4px 8px
            rgba(100,75,255,.18)
        );
}


.spark-one{

    top:125px;
    left:48%;

    font-size:20px;

    animation:
        sparkFloat 3s ease-in-out infinite;
}


.spark-two{

    bottom:95px;
    left:34%;

    font-size:12px;

    color:#ff9d73;

    animation:
        sparkFloat 4s ease-in-out infinite reverse;
}


@keyframes sparkFloat{

    0%,
    100%{
        transform:translateY(0) rotate(0deg);
    }

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

}


/* =========================================================
   FLOATING DOTS
   ========================================================= */

.hero-dot{

    position:absolute;

    border-radius:50%;

    z-index:1;
}


.dot-one{

    width:15px;
    height:15px;

    right:80px;
    bottom:125px;

    background:
        linear-gradient(
            135deg,
            #7b61ff,
            #b6a6ff
        );

    box-shadow:
        0 8px 20px
        rgba(100,75,255,.20);

    animation:
        dotFloat 4s ease-in-out infinite;
}


.dot-two{

    width:11px;
    height:11px;

    left:75px;
    bottom:165px;

    background:
        linear-gradient(
            135deg,
            #ffb28e,
            #ffd0b9
        );

    animation:
        dotFloat 3.5s ease-in-out infinite reverse;
}


@keyframes dotFloat{

    0%,
    100%{
        transform:translateY(0);
    }

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

}


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

@media(max-width:1100px){

    .creator-logo-orbit{
        transform:scale(.90);
    }

    .creator-hero-visual{
        min-height:460px;
    }

    .creator-card{
        min-width:175px;
    }

    .photo-card{
        left:-5px;
    }

    .programming-card{
        right:-5px;
    }

}


@media(max-width:850px){

    .creator-hero-visual{
        min-height:470px;

        margin-top:25px;

        transform:
            scale(.82);
    }

    .photo-card{
        top:20px;
        left:-10px;
    }

    .programming-card{
        top:40px;
        right:-15px;
    }

    .video-card{
        bottom:20px;
        right:-5px;
    }

}


@media(max-width:560px){

    .creator-hero-visual{
        min-height:410px;

        transform:
            scale(.70);

        transform-origin:
            center center;

        margin-top:-20px;
        margin-bottom:-40px;
    }

}