:root {
   --deep-black: #08060F;
   --purple-bright: #5B3FBF;
   --purple-glow: #7B5FDF;
   --blue-bright: #2D5FD4;
   --cyan-accent: #00D4FF;
   --violet-accent: #C77DFF;
   --text-primary: #EDE8FF;
   --text-secondary: #9B8FBF;
   --text-muted: #5A5070;
   --border-subtle: rgba(123, 95, 223, 0.15);
 }

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

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'Vazirmatn', sans-serif;
   background: var(--deep-black);
   color: var(--text-primary);
   min-height: 100vh;
   overflow-x: hidden;
   position: relative;
 }

 body::before {
   content: '';
   position: fixed;
   inset: 0;
   background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(91, 63, 191, 0.18) 0%, transparent 60%),
     radial-gradient(ellipse 60% 80% at 80% 90%, rgba(45, 95, 212, 0.12) 0%, transparent 60%),
     radial-gradient(ellipse 40% 40% at 50% 50%, rgba(0, 212, 255, 0.04) 0%, transparent 70%);
   pointer-events: none;
   z-index: 0;
 }

 .noise {
   position: fixed;
   inset: 0;
   opacity: 0.03;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
   background-size: 200px 200px;
   pointer-events: none;
   z-index: 1;
 }

 .grid-overlay {
   position: fixed;
   inset: 0;
   background-image: linear-gradient(rgba(91, 63, 191, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 63, 191, 0.04) 1px, transparent 1px);
   background-size: 60px 60px;
   pointer-events: none;
   z-index: 0;
 }

 .container {
   position: relative;
   z-index: 10;
   max-width: 900px;
   margin: 0 auto;
   padding: 0 2rem;
 }

 header {
   padding: 2rem 0 0;
   position: relative;
   z-index: 10;
 }

 .logo-area {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   justify-content: space-between;
 }

 .logo-mark {
   width: 38px;
   height: 38px;
   border: 1.5px solid var(--purple-bright);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   font-weight: 700;
   color: var(--cyan-accent);
   letter-spacing: -1px;
   position: relative;
   overflow: hidden;
 }

 .logo-mark::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(91, 63, 191, 0.3), rgba(0, 212, 255, 0.1));
 }

 .logo-text {
   font-size: 15px;
   font-weight: 700;
   color: var(--text-primary);
   letter-spacing: 1px;
 }

 .logo-text span {
   color: var(--cyan-accent);
 }

 .beta-badge {
   font-size: 9px;
   font-weight: 700;
   color: var(--purple-bright);
   border: 1px solid rgba(91, 63, 191, 0.5);
   padding: 2px 6px;
   border-radius: 4px;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-right: auto;
 }

 /* Banner */
 .banner-section {
   padding: 2.5rem 0 0;
 }

 .banner-wrap {
   border-radius: 16px;
   overflow: hidden;
   border: 1px solid rgba(91, 63, 191, 0.25);
   box-shadow: 0 0 40px rgba(91, 63, 191, 0.12);
   background: #120E24;
 }

 .banner-wrap img {
   display: block;
   width: 100%;
   height: auto;
 }

 /* Hero */
 .hero {
   padding: 6rem 0 4rem;
   text-align: center;
   position: relative;
 }

 .hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   letter-spacing: 3px;
   color: var(--cyan-accent);
   text-transform: uppercase;
   margin-bottom: 2rem;
   padding: 6px 16px;
   border: 1px solid rgba(0, 212, 255, 0.2);
   border-radius: 100px;
   background: rgba(0, 212, 255, 0.05);
 }

 .hero-eyebrow::before {
   content: '';
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--cyan-accent);
   animation: pulse-dot 2s ease-in-out infinite;
 }

 @keyframes pulse-dot {

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

   50% {
     opacity: 0.4;
     transform: scale(0.8);
   }
 }

 .hero-title {
   font-size: 30px;
   font-weight: 900;
   line-height: 1.30;
   letter-spacing: -2px;
   margin-bottom: 1.5rem;
   color: var(--text-primary);
 }


 .hero-title .glow-word {
   color: var(--cyan-accent);
   text-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
 }

 .hero-sub {
   font-size: 1.1rem;
   font-weight: 300;
   color: var(--text-secondary);
   line-height: 1.8;
   max-width: 560px;
   margin: 0 auto 3rem;
 }

 .hero-sub strong {
   color: var(--violet-accent);
   font-weight: 500;
 }

 .topics {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-bottom: 5rem;
 }

 .topic-pill {
   font-size: 12px;
   font-weight: 400;
   color: var(--text-secondary);
   border: 1px solid var(--border-subtle);
   padding: 6px 14px;
   border-radius: 100px;
   background: rgba(26, 18, 50, 0.6);
   backdrop-filter: blur(8px);
   transition: all 0.2s;
   cursor: default;
 }

 .topic-pill:hover {
   color: var(--text-primary);
   border-color: rgba(123, 95, 223, 0.4);
   background: rgba(91, 63, 191, 0.1);
 }

 .topic-pill.hot {
   color: var(--cyan-accent);
   border-color: rgba(0, 212, 255, 0.2);
   background: rgba(0, 212, 255, 0.05);
 }

 .section-divider {
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(91, 63, 191, 0.4), transparent);
   margin: 0 0 5rem;
 }

 /* About */
 .about-section {
   padding-bottom: 4rem;
 }

 .about-inner {
   max-width: 700px;
   margin: 0 auto;
 }

 .section-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 10px;
   letter-spacing: 3px;
   color: var(--purple-glow);
   text-transform: uppercase;
   margin-bottom: 1.25rem;
   padding: 5px 14px;
   border: 1px solid rgba(123, 95, 223, 0.2);
   border-radius: 100px;
   background: rgba(91, 63, 191, 0.05);
 }

 .about-title {
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 700;
   letter-spacing: -1px;
   line-height: 1.2;
   margin-bottom: 1rem;
 }


 .about-title-2 {
   font-size: clamp(1.3rem, 3vw, 2rem);
   font-weight: 700;
   letter-spacing: -1px;
   color: #cccccc;
   line-height: 1.2;
   margin-bottom: 1rem;
 }

 .about-body p {
   font-size: 1rem;
   font-weight: 300;
   color: var(--text-secondary);
   line-height: 2;
   margin-bottom: 1.1rem;
 }

 .about-body p:last-child {
   margin-bottom: 0;
 }

 .about-body strong {
   color: var(--text-primary);
   font-weight: 500;
 }

 /* Conduct */
 .conduct-section {
   padding-bottom: 6rem;
 }

 .conduct-headline {
   text-align: center;
   margin-bottom: 3rem;
 }

 .conduct-headline h2 {
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 700;
   letter-spacing: -1px;
   line-height: 1.2;
   margin-bottom: 0.75rem;
 }

 .conduct-headline .event-meta {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 12px;
   color: var(--cyan-accent);
   background: rgba(0, 212, 255, 0.06);
   border: 1px solid rgba(0, 212, 255, 0.15);
   padding: 6px 16px;
   border-radius: 100px;
   margin-top: 1rem;
 }

 .conduct-timeline {
   max-width: 640px;
   margin: 0 auto;
   position: relative;
 }

 .conduct-timeline::before {
   content: '';
   position: absolute;
   right: 23px;
   top: 8px;
   bottom: 8px;
   width: 1px;
   background: linear-gradient(180deg, transparent, rgba(91, 63, 191, 0.4) 15%, rgba(91, 63, 191, 0.4) 85%, transparent);
 }

 .conduct-item {
   display: flex;
   gap: 1.25rem;
   margin-bottom: 1rem;
   position: relative;
 }

 .conduct-item:last-child {
   margin-bottom: 0;
 }

 .conduct-dot {
   flex-shrink: 0;
   width: 46px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 4px;
 }

 .conduct-dot-circle {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   border: 1.5px solid var(--purple-bright);
   background: var(--deep-black);
   position: relative;
   z-index: 1;
   transition: all 0.3s;
 }

 .conduct-item:hover .conduct-dot-circle {
   background: var(--purple-bright);
   box-shadow: 0 0 12px rgba(91, 63, 191, 0.6);
 }

 .conduct-item.highlight .conduct-dot-circle {
   border-color: var(--cyan-accent);
   background: rgba(0, 212, 255, 0.15);
 }

 .conduct-item.highlight:hover .conduct-dot-circle {
   background: var(--cyan-accent);
   box-shadow: 0 0 14px rgba(0, 212, 255, 0.5);
 }

 .conduct-card {
   flex: 1;
   background: rgba(18, 14, 36, 0.6);
   border: 1px solid var(--border-subtle);
   border-radius: 14px;
   padding: 1.1rem 1.4rem;
   transition: all 0.25s;
   cursor: default;
 }

 .conduct-card:hover {
   border-color: rgba(91, 63, 191, 0.35);
   background: rgba(26, 18, 50, 0.7);
 }

 .conduct-item.highlight .conduct-card {
   border-color: rgba(0, 212, 255, 0.15);
   background: rgba(0, 212, 255, 0.03);
 }

 .conduct-item.highlight .conduct-card:hover {
   border-color: rgba(0, 212, 255, 0.3);
 }

 .conduct-time {
   font-size: 11px;
   color: var(--text-secondary);
   letter-spacing: 1px;
   margin-bottom: 5px;
 }

 .conduct-item.highlight .conduct-time {
   color: rgba(0, 212, 255, 0.6);
   font-weight: 600;
 }

 .conduct-title {
   font-size: 14px;
   font-weight: 500;
   color: var(--text-primary);
   line-height: 1.5;
 }

 .conduct-tag {
   display: inline-block;
   font-size: 10px;
   padding: 2px 8px;
   border-radius: 4px;
   margin-top: 6px;
   letter-spacing: 0.5px;
 }

 .conduct-tag.tag-talk {
   background: rgba(91, 63, 191, 0.15);
   color: var(--purple-glow);
   border: 1px solid rgba(91, 63, 191, 0.2);
 }

 .conduct-tag.tag-fun {
   background: rgba(199, 125, 255, 0.1);
   color: var(--violet-accent);
   border: 1px solid rgba(199, 125, 255, 0.2);
 }

 .conduct-tag.tag-social {
   background: rgba(0, 212, 255, 0.08);
   color: var(--cyan-accent);
   border: 1px solid rgba(0, 212, 255, 0.15);
 }

 .conduct-tag.tag-explore {
   background: rgba(45, 95, 212, 0.1);
   color: #7BAAFF;
   border: 1px solid rgba(45, 95, 212, 0.2);
 }

 /* Form */
 .form-section {
   padding-bottom: 8rem;
 }

 .form-headline {
   text-align: center;
   margin-bottom: 3rem;
 }

 .form-headline h2 {
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 700;
   letter-spacing: -1px;
   line-height: 1.2;
   margin-bottom: 1rem;
 }

 .form-headline p {
   color: var(--text-secondary);
   font-size: 1.2rem;
   font-weight: 300;
 }

 .form-card {
   background: rgba(18, 14, 36, 0.8);
   border: 1px solid var(--border-subtle);
   border-radius: 20px;
   padding: 2.5rem;
   backdrop-filter: blur(20px);
   position: relative;
   overflow: hidden;
   max-width: 560px;
   margin: 0 auto;
 }

 .form-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 60%;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--purple-bright), transparent);
 }

 .form-card::after {
   content: '';
   position: absolute;
   top: -80px;
   right: -80px;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(91, 63, 191, 0.08), transparent 70%);
   pointer-events: none;
 }

 .field-group {
   margin-bottom: 1.25rem;
   position: relative;
 }

 .field-label {
   display: block;
   font-size: 12px;
   font-weight: 500;
   color: var(--text-secondary);
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 8px;
   transition: color 0.2s;
 }

 .field-group.focused .field-label,
 .field-group.valid .field-label {
   color: var(--cyan-accent);
 }

 .field-group.error .field-label {
   color: #FF6B8A;
 }

 .field-wrapper {
   position: relative;
 }

 .field-input {
   width: 100%;
   background: rgba(13, 10, 26, 0.7);
   border: 1.5px solid rgba(91, 63, 191, 0.2);
   border-radius: 10px;
   padding: 14px 44px 14px 16px;
   font-family: 'Vazirmatn', sans-serif;
   font-size: 15px;
   color: var(--text-primary);
   outline: none;
   transition: all 0.25s;
   direction: rtl;
 }

 .field-input::placeholder {
   color: var(--text-muted);
   font-size: 14px;
 }

 .field-input:focus {
   border-color: var(--purple-bright);
   background: rgba(13, 10, 26, 0.9);
   box-shadow: 0 0 0 3px rgba(91, 63, 191, 0.12), inset 0 0 0 1px rgba(91, 63, 191, 0.1);
 }

 .field-group.valid .field-input {
   border-color: rgba(0, 212, 255, 0.4);
 }

 .field-group.error .field-input {
   border-color: rgba(255, 107, 138, 0.5);
   box-shadow: 0 0 0 3px rgba(255, 107, 138, 0.08);
 }

 .field-icon {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   width: 18px;
   height: 18px;
   pointer-events: none;
 }

 .field-icon .check {
   color: var(--cyan-accent);
   display: none;
 }

 .field-icon .cross {
   color: #FF6B8A;
   display: none;
 }

 .field-group.valid .field-icon .check {
   display: block;
 }

 .field-group.error .field-icon .cross {
   display: block;
 }

 .field-msg {
   font-size: 11px;
   margin-top: 6px;
   min-height: 16px;
   color: transparent;
   transition: all 0.2s;
 }

 .field-group.error .field-msg {
   color: #FF6B8A;
 }

 .field-group.valid .field-msg {
   color: rgba(0, 212, 255, 0.6);
 }

 .submit-btn {
   width: 100%;
   margin-top: 0.5rem;
   padding: 15px;
   background: linear-gradient(135deg, var(--purple-bright), var(--blue-bright));
   border: none;
   border-radius: 10px;
   font-family: 'Vazirmatn', sans-serif;
   font-size: 15px;
   font-weight: 700;
   color: #fff;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: all 0.3s;
   letter-spacing: 0.5px;
 }

 .submit-btn::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
   opacity: 0;
   transition: opacity 0.3s;
 }

 .submit-btn:hover::before {
   opacity: 1;
 }

 .submit-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 8px 30px rgba(91, 63, 191, 0.4);
 }

 .submit-btn:active {
   transform: translateY(0);
 }

 .submit-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
   transform: none;
   box-shadow: none;
 }

 .success-panel {
   display: none;
   text-align: center;
   padding: 1rem 0;
   animation: fade-up 0.5s ease;
 }

 @keyframes fade-up {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .success-icon {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: rgba(0, 212, 255, 0.08);
   border: 1.5px solid rgba(0, 212, 255, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
   font-size: 28px;
 }

 .success-title {
   font-size: 1.4rem;
   font-weight: 700;
   margin-bottom: 0.75rem;
 }

 .success-body {
   font-size: 0.9rem;
   color: var(--text-secondary);
   line-height: 1.8;
   margin-bottom: 1.5rem;
 }

 .payment-box {
   background: rgba(0, 212, 255, 0.04);
   border: 1px solid rgba(0, 212, 255, 0.15);
   border-radius: 12px;
   padding: 1.25rem 1.5rem;
   text-align: right;
 }

 .payment-box .payment-label {
   font-size: 14px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: var(--text-secondary);
   margin-bottom: 8px;
 }

 .payment-box .payment-amount {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--cyan-accent);
   margin-bottom: 6px;
 }

 .payment-box .payment-account {
   font-size: 13px;
   color: var(--text-secondary);
   direction: ltr;
   text-align: left;
   letter-spacing: 1px;
 }

 .payment-box .payment-note {
   font-size: 14 px;
   color: var(--text-secondary);
   margin-top: 10px;
   line-height: 1.8;
 }

 footer {
   padding: 3rem 2rem 2rem;
   border-top: 1px solid var(--border-subtle);
   position: relative;
   z-index: 10;
 }

 .footer-inner {
   max-width: 900px;
   margin: 0 auto;
 }

 .footer-links {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   justify-content: center;
   margin-bottom: 1.5rem;
 }

 .footer-link {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 11px;
   color: var(--text-secondary);
   text-decoration: none;
   padding: 6px 14px;
   border: 1px solid rgba(123, 95, 223, 0.3);
   border-radius: 100px;
   transition: all 0.2s;
   letter-spacing: 0.5px;
   background: rgba(26, 18, 50, 0.5);
 }

 .footer-link:hover {
   color: var(--cyan-accent);
   border-color: rgba(0, 212, 255, 0.25);
   background: rgba(0, 212, 255, 0.04);
 }

 .footer-link .fl-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: currentColor;
   flex-shrink: 0;
 }

 .footer-copy {
   text-align: center;
   font-size: 11px;
   color: var(--text-primary);
   opacity: 0.5;
 }

 .api-error-msg {
   margin-top: 1rem;
   padding: 10px 14px;
   border-radius: 8px;
   font-size: 12px;
   text-align: center;
 }

 .api-error-msg.err {
   background: rgba(255, 107, 138, 0.08);
   border: 1px solid rgba(255, 107, 138, 0.2);
   color: #FF6B8A;
 }

 .api-error-msg.dup {
   background: rgba(255, 180, 50, 0.08);
   border: 1px solid rgba(255, 180, 50, 0.2);
   color: #FFB432;
 }

 .submit-btn.loading {
   opacity: 0.7;
   cursor: wait;
 }

 .reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity 0.7s ease, transform 0.7s ease;
 }

 .reveal.visible {
   opacity: 1;
   transform: none;
 }

 @media (max-width: 600px) {
   .hero {
     padding: 4rem 0 0;
   }

   .section-divider {

     margin: 0 0 3rem;

   }

   .form-card {
     padding: 1.75rem 1.25rem;
   }

   .hero-title {
     letter-spacing: -1px;
   }
 }



 .btn-donate {
   --clr-font-main: hsla(0 0% 20% / 100);
   --btn-bg-1: hsla(194 100% 69% / 1);
   --btn-bg-2: hsla(217 100% 56% / 1);
   --btn-bg-color: hsla(360 100% 100% / 1);
   --radii: 0.5em;
   cursor: pointer;
   padding: 0.9em 1.4em;
   min-width: 120px;
   min-height: 44px;
   font-size: var(--size, 1rem);
   font-weight: 500;
   transition: 0.8s;
   background-size: 280% auto;
   background-image: linear-gradient(325deg,
       var(--btn-bg-2) 0%,
       var(--btn-bg-1) 55%,
       var(--btn-bg-2) 90%);
   border: none;
   border-radius: var(--radii);
   color: var(--btn-bg-color);
   box-shadow:
     0px 0px 20px rgba(71, 184, 255, 0.5),
     0px 5px 5px -1px rgba(58, 125, 233, 0.25),
     inset 4px 4px 8px rgba(175, 230, 255, 0.5),
     inset -4px -4px 8px rgba(19, 95, 216, 0.35);
 }

 .btn-donate:hover {
   background-position: right top;
 }

 .btn-donate:is(:focus, :focus-visible, :active) {
   outline: none;
   box-shadow:
     0 0 0 3px var(--btn-bg-color),
     0 0 0 6px var(--btn-bg-2);
 }

 @media (prefers-reduced-motion: reduce) {
   .btn-donate {
     transition: linear;
   }
 }

 #register,
 #register:focus {
   font-size: 17px;
   padding: 8px 20px;
   border-radius: 0.7rem;
   background-image: linear-gradient(rgb(214, 202, 254), rgb(158, 129, 254));
   border: 2px solid rgb(50, 50, 50);
   border-bottom: 5px solid rgb(50, 50, 50);
   box-shadow: 0px 1px 6px 0px rgb(158, 129, 254);
   transform: translate(0, -3px);
   cursor: pointer;
   transition: 0.2s;
   transition-timing-function: linear;
   color: black;
   font-weight: 500;

 }

 #register:active {
   transform: translate(0, 0);
   border-bottom: 2px solid rgb(50, 50, 50);
 }


 a {
   all: unset;
   cursor: pointer;
 }




 .rotating-topics {
   display: inline-flex;
   align-items: center;
   gap: 0;
   flex-wrap: wrap;
 }

 .rotating-word {
   display: inline-block;
   min-width: 90px;
   text-align: center;
   transition:
     opacity 0.45s ease,
     transform 0.45s ease,
     filter 0.45s ease;
   will-change: opacity, transform, filter;
 }

 .rotating-word.is-changing {
   opacity: 0;
   transform: translateY(-10px) scale(0.96);
   filter: blur(6px);
 }

 .plus-sign,
 .dots {
   display: inline-block;
   opacity: 0.9;
 }

 /* ریسپانسیو برای موبایل */
 @media (max-width: 768px) {
   .rotating-word {
     min-width: 72px;
   }

   .about-section {
     padding-bottom: 3rem;

   }

   .conduct-section {
     padding-bottom: 3rem;

   }
   .form-section{
    padding-bottom: 4rem;

   }
   .topics {
     margin-bottom: 3rem;
   }
 }