/* Custom Page Styles - Premium Design */



body.custom-page-active {

  background: linear-gradient(180deg, #0a0d1e 0%, #0d1028 100%);

  position: relative;

  overflow-x: hidden;

}



body.custom-page-active::before {

  content: '';

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: 

    radial-gradient(ellipse at 20% 10%, rgba(91, 75, 255, 0.15) 0%, transparent 50%),

    radial-gradient(ellipse at 80% 60%, rgba(0, 220, 228, 0.12) 0%, transparent 50%),

    radial-gradient(ellipse at 50% 90%, rgba(91, 75, 255, 0.08) 0%, transparent 50%);

  pointer-events: none;

  z-index: 0;

}



.custom-page {

  max-width: 1200px;

  margin: clamp(40px, 8vw, 100px) auto 140px;

  display: grid;

  gap: clamp(32px, 6vw, 56px);

  position: relative;

  z-index: 1;

}



/* Hero Section */

.custom-page-hero {

  position: relative;

  border-radius: 36px;

  padding: clamp(48px, 8vw, 80px);

  background: 

    linear-gradient(135deg, rgba(91,75,255,0.22) 0%, rgba(0,220,228,0.12) 100%),

    rgba(13, 16, 36, 0.75);

  border: 1px solid rgba(255,255,255,0.14);

  box-shadow: 

    0 0 0 1px rgba(91, 75, 255, 0.1) inset,

    0 40px 100px rgba(7, 12, 38, 0.6),

    0 0 80px rgba(91, 75, 255, 0.15);

  overflow: hidden;

  display: grid;

  gap: clamp(20px, 4.5vw, 36px);

  backdrop-filter: blur(20px);

  transition: transform 0.4s ease, box-shadow 0.4s ease;

}



.custom-page-hero:hover {

  transform: translateY(-4px);

  box-shadow: 

    0 0 0 1px rgba(91, 75, 255, 0.15) inset,

    0 50px 120px rgba(7, 12, 38, 0.7),

    0 0 100px rgba(91, 75, 255, 0.25);

}



.custom-page-hero::before {

  content: '';

  position: absolute;

  top: -50%;

  right: -20%;

  width: 500px;

  height: 500px;

  background: radial-gradient(circle, rgba(91, 75, 255, 0.3) 0%, transparent 70%);

  border-radius: 50%;

  filter: blur(60px);

  animation: float 8s ease-in-out infinite;

  pointer-events: none;

}



@keyframes float {

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

  50% { transform: translate(-30px, 30px) scale(1.1); }

}



.custom-page-hero::after {

  content: '';

  position: absolute;

  bottom: -30%;

  left: -10%;

  width: 400px;

  height: 400px;

  background: radial-gradient(circle, rgba(0, 220, 228, 0.25) 0%, transparent 70%);

  border-radius: 50%;

  filter: blur(50px);

  animation: float 10s ease-in-out infinite reverse;

  pointer-events: none;

}



.custom-page-hero > * {

  position: relative;

  z-index: 1;

}



.custom-page-hero h1 {

  margin: 0;

  font-size: clamp(36px, 5vw, 56px);

  line-height: 1.15;

  letter-spacing: -0.8px;

  font-weight: 700;

  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.85) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  text-shadow: 0 2px 20px rgba(91, 75, 255, 0.3);

}



.custom-page-hero p {

  margin: 0;

  max-width: 700px;

  color: rgba(220, 225, 255, 0.9);

  font-size: clamp(17px, 2vw, 19px);

  line-height: 1.7;

  font-weight: 400;

}



/* Meta Tags */

.custom-page-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 8px;

}



.custom-page-meta span {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 18px;

  border-radius: 999px;

  background: linear-gradient(135deg, rgba(91, 75, 255, 0.18) 0%, rgba(0, 220, 228, 0.12) 100%);

  border: 1px solid rgba(255,255,255,0.18);

  color: rgba(230, 235, 255, 0.92);

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 0.3px;

  text-transform: uppercase;

  backdrop-filter: blur(10px);

  transition: all 0.3s ease;

}



.custom-page-meta span:hover {

  background: linear-gradient(135deg, rgba(91, 75, 255, 0.28) 0%, rgba(0, 220, 228, 0.2) 100%);

  border-color: rgba(255,255,255,0.3);

  transform: translateY(-2px);

}



/* Body Content */

.custom-page-body {

  background: 

    linear-gradient(135deg, rgba(13, 16, 36, 0.95) 0%, rgba(17, 20, 44, 0.95) 100%);

  border-radius: 30px;

  border: 1px solid rgba(255,255,255,0.1);

  padding: clamp(36px, 6.5vw, 64px);

  line-height: 1.85;

  font-size: clamp(16px, 1.8vw, 18px);

  display: grid;

  gap: 24px;

  box-shadow: 

    0 0 0 1px rgba(91, 75, 255, 0.08) inset,

    0 30px 80px rgba(5, 10, 30, 0.6);

  backdrop-filter: blur(15px);

  position: relative;

  overflow: hidden;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.custom-page-body:hover {

  transform: translateY(-2px);

  box-shadow: 

    0 0 0 1px rgba(91, 75, 255, 0.12) inset,

    0 35px 90px rgba(5, 10, 30, 0.7);

}



.custom-page-body::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, 

    rgba(91, 75, 255, 0.6) 0%, 

    rgba(0, 220, 228, 0.6) 50%, 

    rgba(91, 75, 255, 0.6) 100%);

  opacity: 0.8;

}



.custom-page-body p {

  margin: 0;

  color: rgba(235, 240, 255, 0.94);

  white-space: pre-line;

  font-weight: 400;

}



/* Section Grid */

.custom-page-section-grid {

  display: grid;

  gap: clamp(24px, 4.5vw, 36px);

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}



/* Section Cards */

.custom-page-section {

  background: 

    linear-gradient(135deg, rgba(17, 20, 44, 0.95) 0%, rgba(20, 24, 50, 0.95) 100%);

  border-radius: 28px;

  border: 1px solid rgba(255,255,255,0.09);

  padding: clamp(28px, 5.5vw, 42px);

  display: grid;

  gap: 18px;

  box-shadow: 

    0 0 0 1px rgba(91, 75, 255, 0.06) inset,

    0 24px 70px rgba(5, 8, 26, 0.55);

  position: relative;

  overflow: hidden;

  backdrop-filter: blur(10px);

  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

}



.custom-page-section::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(135deg, rgba(91, 75, 255, 0.08) 0%, rgba(0, 220, 228, 0.05) 100%);

  opacity: 0;

  transition: opacity 0.35s ease;

  pointer-events: none;

}



.custom-page-section:hover {

  transform: translateY(-6px);

  border-color: rgba(91, 75, 255, 0.25);

  box-shadow: 

    0 0 0 1px rgba(91, 75, 255, 0.15) inset,

    0 30px 90px rgba(5, 8, 26, 0.7),

    0 0 60px rgba(91, 75, 255, 0.2);

}



.custom-page-section:hover::before {

  opacity: 1;

}



.custom-page-section h3 {

  margin: 0;

  font-size: clamp(20px, 2.2vw, 24px);

  letter-spacing: -0.3px;

  font-weight: 700;

  background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.85) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  position: relative;

  padding-bottom: 12px;

}



.custom-page-section h3::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 50px;

  height: 3px;

  background: linear-gradient(90deg, rgba(91, 75, 255, 0.8) 0%, rgba(0, 220, 228, 0.8) 100%);

  border-radius: 999px;

  transition: width 0.35s ease;

}



.custom-page-section:hover h3::after {

  width: 80px;

}



.custom-page-section p {

  margin: 0;

  color: rgba(220, 225, 255, 0.85);

  font-size: clamp(15px, 1.6vw, 16px);

  line-height: 1.75;

  white-space: pre-line;

  font-weight: 400;

}