/* ============================================================
   UTKRAANTI — premium animated championship theme
   Loaded IN ADDITION to site.css + techstein.css
   ============================================================ */

/* --- Hero: animated gradient aurora + floating particles --- */
.utk-hero{position:relative;overflow:hidden}
.utk-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(40% 55% at 18% 20%, rgba(53,224,240,.35), transparent 60%),
    radial-gradient(45% 55% at 82% 25%, rgba(124,107,255,.35), transparent 60%),
    radial-gradient(50% 60% at 50% 90%, rgba(255,184,77,.22), transparent 60%);
  background-size:200% 200%;
  animation:auroraShift 14s ease-in-out infinite;
  filter:blur(6px)}
@keyframes auroraShift{
  0%{background-position:0% 50%,100% 50%,50% 100%}
  50%{background-position:100% 50%,0% 50%,50% 0%}
  100%{background-position:0% 50%,100% 50%,50% 100%}
}
/* floating tech particles */
.utk-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.utk-particles i{position:absolute;display:block;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--c1),var(--c3));opacity:.5;
  animation:floatUp linear infinite}
.utk-particles i:nth-child(1){left:8%;bottom:-10px;animation-duration:9s;animation-delay:0s}
.utk-particles i:nth-child(2){left:22%;bottom:-10px;width:4px;height:4px;animation-duration:12s;animation-delay:1.5s}
.utk-particles i:nth-child(3){left:38%;bottom:-10px;width:8px;height:8px;animation-duration:10s;animation-delay:.6s}
.utk-particles i:nth-child(4){left:54%;bottom:-10px;animation-duration:13s;animation-delay:2s}
.utk-particles i:nth-child(5){left:68%;bottom:-10px;width:5px;height:5px;animation-duration:8.5s;animation-delay:.9s}
.utk-particles i:nth-child(6){left:80%;bottom:-10px;width:7px;height:7px;animation-duration:11s;animation-delay:1.2s}
.utk-particles i:nth-child(7){left:92%;bottom:-10px;width:4px;height:4px;animation-duration:14s;animation-delay:.3s}
.utk-particles i:nth-child(8){left:15%;bottom:-10px;width:5px;height:5px;animation-duration:12.5s;animation-delay:3s}
.utk-particles i:nth-child(9){left:46%;bottom:-10px;width:6px;height:6px;animation-duration:9.5s;animation-delay:2.4s}
.utk-particles i:nth-child(10){left:74%;bottom:-10px;width:5px;height:5px;animation-duration:10.5s;animation-delay:1.8s}
@keyframes floatUp{
  0%{transform:translateY(0) scale(1);opacity:0}
  10%{opacity:.6}
  90%{opacity:.5}
  100%{transform:translateY(-104vh) scale(.4);opacity:0}
}
.utk-hero .wrap{position:relative;z-index:2}

/* hero badge shimmer */
.utk-hero .champ{position:relative;overflow:hidden}
.utk-hero .champ::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}80%,100%{left:130%}}

/* gradient-animated headline word */
.utk-hero h1 .g{
  background:linear-gradient(90deg,var(--c1),var(--c3),var(--c2),var(--c1));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueSlide 6s linear infinite}
@keyframes hueSlide{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* --- Section reveal: richer entrance --- */
.rv.utk-pop{opacity:0;transform:translateY(30px) scale(.98);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.utk-pop.in{opacity:1;transform:none}

/* --- How-it-works: animated connecting line + pulse nodes --- */
.utk-flow .cstep .num{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.utk-flow .cstep:hover .num{transform:scale(1.12) rotate(-4deg)}
.utk-flow .cstep .badge{position:relative}
.utk-flow .cstep .badge::after{content:"";position:absolute;inset:-6px;border-radius:inherit;
  border:2px solid var(--c1);opacity:0;animation:ringPulse 2.6s ease-out infinite}
.utk-flow .cstep:nth-child(2) .badge::after{animation-delay:.5s}
.utk-flow .cstep:nth-child(3) .badge::after{animation-delay:1s}
.utk-flow .cstep:nth-child(4) .badge::after{border-color:var(--c2);animation-delay:1.5s}
@keyframes ringPulse{0%{opacity:.5;transform:scale(.85)}70%{opacity:0;transform:scale(1.25)}100%{opacity:0}}

/* --- Finale: cinematic zoom + shimmering title --- */
.utk-finale img{animation:slowZoom 18s ease-in-out infinite alternate}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.09)}}
.utk-finale .fin-in h2 .g{
  background:linear-gradient(90deg,#8fc7ff,#c9b6ff,#8fc7ff);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueSlide 5s linear infinite}
.utk-finale .fin-stat{transition:transform .35s,box-shadow .35s}
.utk-finale .fin-stat:hover{transform:translateY(-5px);box-shadow:0 14px 40px rgba(53,224,240,.18)}

/* BECon finale badge — glow */
.becon-badge{position:relative;overflow:hidden}
.becon-badge::before{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(120,160,255,.1),transparent);
  background-size:220% 100%;animation:hueSlide 7s linear infinite;pointer-events:none}

/* --- Rounds: hover lift + icon bounce --- */
.utk-rounds .round{transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .4s}
.utk-rounds .round:hover{transform:translateY(-8px);box-shadow:0 22px 60px rgba(0,0,0,.45)}
.utk-rounds .round:hover .round-ico{animation:bounceIco .6s ease}
@keyframes bounceIco{0%,100%{transform:translateY(0)}40%{transform:translateY(-8px) rotate(-6deg)}}

/* --- Curriculum cards: stagger float-in + hover tilt --- */
.utk-curr .dom{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .3s}
.utk-curr .dom:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.utk-curr .dom .ring{transition:transform .5s}
.utk-curr .dom:hover .ring{transform:rotate(360deg) scale(1.05)}

/* --- Why cards: sheen sweep on hover --- */
.utk-why .wcard{position:relative;overflow:hidden;transition:transform .35s,border-color .3s}
.utk-why .wcard:hover{transform:translateY(-6px)}
.utk-why .wcard::before{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.08),transparent);
  transform:skewX(-18deg);transition:left .6s}
.utk-why .wcard:hover::before{left:130%}

/* --- Scroll progress bar --- */
.utk-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--c1),var(--c3),var(--c2));
  box-shadow:0 0 12px rgba(53,224,240,.6);transition:width .1s linear}

/* --- Stat count-up emphasis --- */
.utk-finale .fin-stat .big{background:linear-gradient(120deg,var(--c1),var(--c3));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .utk-aurora,.utk-particles i,.utk-hero .champ::after,.utk-hero h1 .g,
  .utk-finale img,.utk-finale .fin-in h2 .g,.becon-badge::before,
  .utk-flow .cstep .badge::after{animation:none !important}
  .utk-aurora{opacity:.35}
}

/* ============================================================
   UTKRAANTI 2026 — new sections
   ============================================================ */

/* --- WHAT IS: statement block --- */
.utk-what{position:relative;border-radius:26px;padding:52px 48px;overflow:hidden;
  background:linear-gradient(135deg,rgba(53,224,240,.07),rgba(124,107,255,.07));
  border:1px solid var(--line)}
.utk-what::after{content:"";position:absolute;right:-80px;bottom:-80px;width:320px;height:320px;
  background:radial-gradient(circle,rgba(255,184,77,.14),transparent 70%);pointer-events:none}
.utk-what p{color:var(--muted);line-height:1.75;font-size:1.05rem;margin-bottom:16px;max-width:70ch;position:relative;z-index:2}
.utk-what .punch{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,2.4vw,1.4rem);line-height:1.5;
  background:linear-gradient(90deg,var(--c1),var(--c3),var(--c2),var(--c1));background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueSlide 7s linear infinite;position:relative;z-index:2}

/* --- WHY DIFFERENT: contrast rows --- */
.utk-diff{display:grid;gap:12px;margin-top:34px}
.drow{display:flex;align-items:flex-start;gap:16px;padding:20px 22px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s}
.drow:hover{transform:translateX(6px);border-color:var(--c1);box-shadow:0 12px 34px rgba(0,0,0,.32)}
.drow .dn{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:.9rem;color:#04121b;
  background:linear-gradient(135deg,var(--c1),var(--c3))}
.drow .dt h4{font-family:var(--disp);font-size:1.08rem;margin-bottom:4px;color:var(--fg)}
.drow .dt p{color:var(--muted);font-size:.94rem;line-height:1.5}

/* --- THREE TRACKS --- */
.tracks3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.trk3{position:relative;border-radius:22px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .3s}
.trk3:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.trk3::before{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none}
.trk3.t1::before{background:radial-gradient(120% 80% at 100% 0%,var(--c1),transparent 62%)}
.trk3.t2::before{background:radial-gradient(120% 80% at 100% 0%,#3ddc84,transparent 62%)}
.trk3.t3::before{background:radial-gradient(120% 80% at 100% 0%,var(--c3),transparent 62%)}
.trk3 .thead{padding:26px 26px 18px;position:relative;z-index:2;border-bottom:1px solid var(--line)}
.trk3 .tnum{font-family:var(--mono,'Space Mono',monospace);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.trk3 .tico{font-size:2.2rem;line-height:1;margin-bottom:12px;display:block;
  transition:transform .4s}
.trk3:hover .tico{transform:scale(1.12) rotate(-6deg)}
.trk3 .thead h3{font-family:var(--disp);font-size:1.35rem;color:var(--fg)}
.trk3 .tbody{padding:22px 26px;display:flex;flex-direction:column;gap:18px;flex:1;position:relative;z-index:2}
.proj{padding-left:16px;border-left:2px solid var(--line);transition:border-color .3s}
.trk3.t1 .proj:hover{border-color:var(--c1)}
.trk3.t2 .proj:hover{border-color:#3ddc84}
.trk3.t3 .proj:hover{border-color:var(--c3)}
.proj .pk{font-family:var(--mono,'Space Mono',monospace);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c2);margin-bottom:5px}
.proj h5{font-family:var(--disp);font-size:1.02rem;color:var(--fg);margin-bottom:6px;line-height:1.3}
.proj p{color:var(--muted);font-size:.88rem;line-height:1.55}
.trk3 .tkit{margin-top:auto;padding:14px 26px;background:rgba(255,255,255,.03);
  border-top:1px solid var(--line);font-size:.84rem;color:var(--c1);font-weight:500;
  display:flex;align-items:center;gap:8px;position:relative;z-index:2}
.trk3.t3 .tkit{color:var(--c3)}

/* --- JOURNEY: 4-stage timeline --- */
.jstages{position:relative;margin-top:40px;display:grid;gap:16px}
.jstages::before{content:"";position:absolute;left:27px;top:30px;bottom:30px;width:2px;
  background:linear-gradient(180deg,var(--c1),var(--c3),var(--c2));opacity:.35}
.jstage{position:relative;display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;
  padding:22px 24px 22px 0;border-radius:18px;transition:background .3s}
.jstage:hover{background:rgba(255,255,255,.02)}
.jstage .jn{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:1.25rem;color:#04121b;position:relative;z-index:2;
  background:linear-gradient(135deg,var(--c1),var(--c3));
  box-shadow:0 8px 26px rgba(53,224,240,.28);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.jstage:nth-child(4) .jn{background:linear-gradient(135deg,var(--c2),#ffd98a);
  box-shadow:0 8px 26px rgba(255,184,77,.3)}
.jstage:hover .jn{transform:scale(1.1) rotate(-5deg)}
.jstage .jc h4{font-family:var(--disp);font-size:1.2rem;color:var(--fg);margin-bottom:4px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.jstage .jwhen{font-family:var(--mono,'Space Mono',monospace);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c2);background:rgba(255,184,77,.1);
  border:1px solid rgba(255,184,77,.25);padding:4px 10px;border-radius:999px}
.jstage .jc p{color:var(--muted);font-size:.96rem;line-height:1.6;margin-top:6px;max-width:62ch}

/* --- WHO / GAIN / SCHOOL: check lists --- */
.ulist{display:grid;gap:11px;margin-top:24px}
.ulist li{list-style:none;display:flex;align-items:flex-start;gap:13px;
  padding:15px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--line);
  color:var(--fg);font-size:.98rem;line-height:1.5;
  transition:transform .3s,border-color .3s}
.ulist li:hover{transform:translateX(5px);border-color:var(--c1)}
.ulist li::before{content:"✓";flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:.75rem;font-weight:700;color:#04121b;
  background:linear-gradient(135deg,var(--c1),var(--c3))}
.ulist.gold li::before{background:linear-gradient(135deg,var(--c2),#ffd98a)}

.school-note{margin-top:22px;padding:20px 24px;border-radius:16px;
  background:rgba(255,184,77,.07);border:1px solid rgba(255,184,77,.25);
  color:var(--fg);font-size:.96rem;line-height:1.65}
.school-note b{color:var(--c2)}

/* --- FEE card --- */
.fee-card{border-radius:24px;padding:44px 42px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,184,77,.1),rgba(124,107,255,.07));
  border:1px solid rgba(255,184,77,.3)}
.fee-card::after{content:"";position:absolute;left:-70px;top:-70px;width:260px;height:260px;
  background:radial-gradient(circle,rgba(53,224,240,.16),transparent 70%);pointer-events:none}
.fee-card .amt{font-family:var(--disp);font-weight:700;line-height:1;
  font-size:clamp(3rem,9vw,4.6rem);position:relative;z-index:2;
  background:linear-gradient(120deg,var(--c2),#ffd98a,var(--c2));background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hueSlide 6s linear infinite}
.fee-card .amt-u{display:block;font-family:'Inter',sans-serif;font-size:1rem;font-weight:500;
  color:var(--muted);margin-top:10px;-webkit-text-fill-color:var(--muted)}
.fee-card .flist{margin-top:30px;display:grid;gap:10px;max-width:600px;
  margin-left:auto;margin-right:auto;position:relative;z-index:2}
.fee-card .flist li{list-style:none;display:flex;align-items:flex-start;gap:11px;text-align:left;
  color:var(--fg);font-size:.95rem;line-height:1.5}
.fee-card .flist li::before{content:"✓";color:var(--c2);font-weight:700;flex:0 0 auto}

/* --- ABOUT strip --- */
.about-strip{border-radius:20px;padding:36px 38px;background:var(--panel);border:1px solid var(--line)}
.about-strip h3{font-family:var(--disp);font-size:1.4rem;margin-bottom:14px}
.about-strip p{color:var(--muted);line-height:1.75;margin-bottom:12px;max-width:78ch}

/* --- certification partner pill --- */
.cert-pill{display:inline-flex;align-items:center;gap:12px;margin-top:20px;
  background:#05070e;border:1px solid rgba(120,160,255,.3);border-radius:14px;padding:12px 18px}
.cert-pill img{height:34px;width:auto;object-fit:contain}
.cert-pill span{font-size:.9rem;color:#c3d0e8}
.cert-pill b{color:#fff}

@media(max-width:900px){
  .tracks3{grid-template-columns:1fr}
  .utk-what{padding:36px 26px}
}
@media(max-width:600px){
  .jstages::before{left:21px}
  .jstage{grid-template-columns:44px 1fr;gap:14px;padding:18px 0}
  .jstage .jn{width:44px;height:44px;font-size:1.05rem;border-radius:13px}
  .fee-card{padding:32px 22px}
  .about-strip{padding:26px 22px}
}

/* ============================================================
   3-ROUND CHAMPIONSHIP (Techstein-style)
   ============================================================ */
.rounds3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch;margin-top:38px}
.r3{position:relative;border-radius:20px;padding:28px 24px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .3s}
.r3::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
.r3-a::before{background:linear-gradient(90deg,var(--c1),#7ff0fa)}
.r3-b::before{background:linear-gradient(90deg,var(--c3),#9b8cff)}
.r3-c::before{background:linear-gradient(90deg,var(--c2),#ffd98a)}
.r3::after{content:"";position:absolute;inset:0;opacity:.1;pointer-events:none}
.r3-a::after{background:radial-gradient(120% 90% at 100% 0%,var(--c1),transparent 60%)}
.r3-b::after{background:radial-gradient(120% 90% at 100% 0%,var(--c3),transparent 60%)}
.r3-c::after{background:radial-gradient(120% 90% at 100% 0%,var(--c2),transparent 60%)}
.r3:hover{transform:translateY(-8px);box-shadow:0 22px 60px rgba(0,0,0,.45)}
.r3-c:hover{border-color:rgba(255,184,77,.4)}
.r3-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px;position:relative;z-index:1}
.r3-num{font-family:var(--mono,'Space Mono',monospace);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:#04121b;background:var(--c1);
  padding:5px 12px;border-radius:999px}
.r3-b .r3-num{background:var(--c3);color:#fff}
.r3-c .r3-num{background:var(--c2);color:#1a1200}
.r3-when{font-size:.72rem;color:var(--muted);font-weight:600;text-align:right}
.r3-when.gold{color:var(--c2)}
.r3-ico{font-size:2.6rem;line-height:1;margin-bottom:12px;position:relative;z-index:1;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));transition:transform .4s}
.r3:hover .r3-ico{transform:scale(1.12) rotate(-5deg)}
.r3 h3{font-family:var(--disp);font-size:1.4rem;margin-bottom:10px;position:relative;z-index:1;color:var(--fg)}
.r3 p{color:var(--muted);line-height:1.6;font-size:.95rem;position:relative;z-index:1;margin-bottom:16px;flex:1}
.r3-tags{display:flex;flex-wrap:wrap;gap:7px;position:relative;z-index:1}
.r3-tags span{font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);color:var(--fg);background:rgba(255,255,255,.03)}
.r3-a .r3-tags span{border-color:rgba(53,224,240,.3)}
.r3-b .r3-tags span{border-color:rgba(124,107,255,.35)}
.r3-c .r3-tags span{border-color:rgba(255,184,77,.35)}
.r3-arrow{display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  color:var(--c1);font-weight:700;opacity:.6}

.one-team{margin-top:26px;display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg,rgba(255,184,77,.1),rgba(124,107,255,.07));
  border:1px solid rgba(255,184,77,.28);border-radius:16px;padding:18px 26px;
  font-size:1.02rem;color:var(--fg);text-align:center}
.one-team .ot-ico{font-size:1.5rem}
.one-team b{color:var(--c2)}

@media(max-width:860px){
  .rounds3{grid-template-columns:1fr;gap:12px}
  .r3-arrow{transform:rotate(90deg);padding:2px 0;opacity:.5}
  .r3{padding:24px 22px}
}