/* =========================================================
   KAILAS CLUB kc2 — Universal Tilda CSS Pack (Dark Premium)
   Paste into: Site Settings → Custom CSS
   ========================================================= */

:root{
  --kc2-bg-1:#101820;
  --kc2-bg-2:#020305;
  --kc2-bg-3:#000000;

  --kc2-grid: rgba(0,255,140,0.12);
  --kc2-accent:#00ff99;
  --kc2-gold:#d4a656;

  --kc2-text:#f6f6f6;
  --kc2-muted:#a8b3c7;

  --kc2-card-bg: radial-gradient(circle at top left, rgba(0,255,150,.12), rgba(5,7,10,.98));
  --kc2-border: 1px solid rgba(0,255,150,.35);
  --kc2-shadow: 0 24px 80px rgba(0,0,0,.75);

  --kc2-radius-lg:24px;
  --kc2-radius-md:16px;
}

/* ===== Global page background ===== */
html, body{
  background: radial-gradient(circle at top, var(--kc2-bg-1) 0, var(--kc2-bg-2) 55%, var(--kc2-bg-3) 100%) !important;
  color: var(--kc2-text);
}

/* ===== Typography ===== */
.t-title, .t-descr, .t-text, .t-name, .t-uptitle, .t-heading{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.t-title{
  letter-spacing: .02em;
}
.t-descr, .t-text{
  color: var(--kc2-muted) !important;
}

/* Optional: make all links accent */
a{ color: var(--kc2-accent); }
a:hover{ opacity:.9; }

/* =========================================================
   SECTION BACKGROUNDS
   Use in blocks: add Extra class name "kc2-section"
   ========================================================= */

.kc2-section{
  position: relative;
  background: radial-gradient(circle at top, var(--kc2-bg-1) 0, var(--kc2-bg-2) 55%, var(--kc2-bg-3) 100%) !important;
}

/* Matrix grid overlay for any block with class kc2-matrix */
.kc2-matrix{
  position: relative;
}
.kc2-matrix:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.4;
  background-image:
    linear-gradient(to right, var(--kc2-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--kc2-grid) 1px, transparent 1px);
  background-size:40px 40px;
  mix-blend-mode: lighten;
  pointer-events:none;
  z-index:1;
}
.kc2-matrix:after{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 14px,
    rgba(0,255,100,.06) 15px
  );
  opacity:.5;
  mix-blend-mode: screen;
  pointer-events:none;
  z-index:1;
}

/* Ensure content stays above overlays */
.kc2-matrix .t-container,
.kc2-matrix .t-col,
.kc2-matrix .t-row,
.kc2-matrix .t396__elem{
  position:relative;
  z-index:2;
}

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

.t-btn, .t-submit{
  border-radius:999px !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  transition: transform .2s ease-out, box-shadow .2s ease-out, opacity .2s ease-out;
}

.t-btn:hover, .t-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,0,0,.8);
}

/* Primary button style: add class "kc2-btn-primary" to button wrapper block */
.kc2-btn-primary .t-btn,
.kc2-btn-primary .t-submit{
  background: linear-gradient(120deg, var(--kc2-accent), var(--kc2-gold)) !important;
  color:#020202 !important;
  border: none !important;
  box-shadow: 0 0 30px rgba(0,255,170,.45);
}
.kc2-btn-primary .t-btn:hover,
.kc2-btn-primary .t-submit:hover{
  background: linear-gradient(135deg, var(--kc2-gold), var(--kc2-accent)) !important;
}

/* Secondary outline button: add class "kc2-btn-outline" */
.kc2-btn-outline .t-btn{
  background: rgba(0,0,0,.65) !important;
  color: var(--kc2-text) !important;
  border: 1px solid rgba(0,255,153,.5) !important;
}
.kc2-btn-outline .t-btn:hover{
  border-color: var(--kc2-accent) !important;
}

/* =========================================================
   CARDS (generic)
   Add class "kc2-card" to blocks that contain cards (e.g. T786/T868/T817)
   ========================================================= */

.kc2-card .t-card__wrap,
.kc2-card .t-item,
.kc2-card .t-col{
  border-radius: var(--kc2-radius-lg);
}

.kc2-card .t-card__wrap,
.kc2-card .t-item{
  background: var(--kc2-card-bg) !important;
  border: var(--kc2-border) !important;
  box-shadow: var(--kc2-shadow);
}

/* Card titles */
.kc2-card .t-card__title,
.kc2-card .t-name,
.kc2-card .t-title{
  color: var(--kc2-text) !important;
}

/* =========================================================
   PRICING (T817-like)
   Add class "kc2-pricing"
   ========================================================= */

.kc2-pricing .t817__col,
.kc2-pricing .t898__col{
  border-radius: var(--kc2-radius-lg) !important;
  background: var(--kc2-card-bg) !important;
  border: var(--kc2-border) !important;
  box-shadow: var(--kc2-shadow);
}

.kc2-pricing .t817__title{
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size: 13px !important;
  color:#35c26d !important;
}

.kc2-pricing .t817__price,
.kc2-pricing .t898__price{
  color: var(--kc2-text) !important;
}

/* Highlight premium column: add class to column wrapper in Tilda if possible, or apply manually */
.kc2-pricing .is-premium{
  border: 1px solid rgba(212,166,86,.6) !important;
  box-shadow: 0 0 44px rgba(212,166,86,.12), var(--kc2-shadow);
}

/* =========================================================
   QUIZ (T702)
   Add class "kc2-quiz"
   ========================================================= */

.kc2-quiz .t702__wrapper,
.kc2-quiz .t-form{
  max-width: 720px;
  margin: 0 auto;
  border-radius: var(--kc2-radius-lg);
  background: radial-gradient(circle at top, rgba(0,255,150,.12), rgba(5,8,10,.96)) !important;
  border: 1px solid rgba(0,255,150,.4) !important;
  box-shadow: var(--kc2-shadow);
  padding: 18px !important;
}

.kc2-quiz .t-input,
.kc2-quiz textarea{
  background: rgba(0,0,0,.82) !important;
  border: 1px solid rgba(0,255,150,.3) !important;
  color: var(--kc2-text) !important;
  border-radius: 999px !important;
}
.kc2-quiz textarea{
  border-radius: var(--kc2-radius-md) !important;
}

.kc2-quiz .t-radio__control,
.kc2-quiz .t-checkbox__control{
  border-color: rgba(0,255,150,.35) !important;
}
.kc2-quiz .t-radio__indicator,
.kc2-quiz .t-checkbox__indicator{
  background: transparent !important;
}

/* Make selected state more visible */
.kc2-quiz input:checked ~ .t-radio__indicator,
.kc2-quiz input:checked ~ .t-checkbox__indicator{
  background: var(--kc2-accent) !important;
  box-shadow: 0 0 18px rgba(0,255,150,.45);
}

/* =========================================================
   FAQ / Accordion
   Add class "kc2-faq"
   ========================================================= */

.kc2-faq .t-accordion__wrapper,
.kc2-faq .t585__container,
.kc2-faq .t668__wrapper{
  border-radius: var(--kc2-radius-lg);
}

.kc2-faq .t-accordion__item,
.kc2-faq .t585__accordion,
.kc2-faq .t668__item{
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(0,255,150,.18) !important;
  border-radius: var(--kc2-radius-md) !important;
  margin-bottom: 10px;
}

.kc2-faq .t-accordion__title,
.kc2-faq .t585__title,
.kc2-faq .t668__title{
  color: var(--kc2-text) !important;
}

/* =========================================================
   FOOTER
   Add class "kc2-footer" to footer block
   ========================================================= */

.kc2-footer{
  background:#000 !important;
  border-top: 1px solid rgba(255,255,255,.05);
}
.kc2-footer .t-text, .kc2-footer .t-descr{
  color: var(--kc2-muted) !important;
}

/* =========================================================
   MOBILE tweaks
   ========================================================= */
@media (max-width: 480px){
  .t-title{ letter-spacing: .01em; }
  .t-btn, .t-submit{ width:100% !important; }
  .kc2-quiz .t702__wrapper{ padding: 14px !important; }
}