/* =========================================================================
   premium.css — additive premium polish + animations for the homepage.
   Pure transform/opacity (GPU-accelerated, no layout reflow → no CLS hit).
   Loaded only on the homepage; safe to remove this file + its <link> to revert.
   ========================================================================= */

/* ---- easing tokens ---- */
:root{ --prem-ease:cubic-bezier(.22,.61,.36,1); }

/* -------------------------------------------------------------------------
   Homepage learning hub. The "Finance cockpit" signature uses one visual
   metaphor (an orbit around the student's goal), then lets the product cards
   do the work. No hero images, sliders or third-party animation library are
   required above the fold.
   ------------------------------------------------------------------------- */
.homepage-hub{font-family:Roboto,Arial,sans-serif;color:#102344;background:#f5f7fb}
.hub-shell{width:min(1180px,calc(100% - 40px));margin:auto}
.hub-hero{position:relative;overflow:hidden;padding:78px 0 86px;background:#071b3c;background:radial-gradient(circle at 78% 42%,#184f96 0,rgba(24,79,150,.16) 25%,transparent 48%),linear-gradient(115deg,#06152f,#0c2d63)}
.hub-hero:before,.hub-hero:after{content:"";position:absolute;border:1px solid rgba(153,206,255,.12);border-radius:50%;pointer-events:none}.hub-hero:before{width:720px;height:720px;right:-290px;top:-315px}.hub-hero:after{width:430px;height:430px;right:9%;bottom:-350px}
.hub-hero .hub-shell{min-height:292px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.hub-intro{max-width:630px;color:#fff}.hub-eyebrow,.hub-kicker{margin:0 0 15px;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}.hub-eyebrow{color:#a8d9ff}.hub-eyebrow span{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#4cf1bb;box-shadow:0 0 0 5px rgba(76,241,187,.12)}
.hub-intro h1{margin:0;font-family:'Nanum Myeongjo',Georgia,serif;font-size:clamp(42px,5vw,67px);font-weight:800;line-height:1.04;letter-spacing:-2.5px;color:#fff}.hub-intro h1 em{font-style:normal;color:#79d7ff}.hub-lede{max-width:515px;margin:22px 0;color:#c9daef;font-size:16px;line-height:1.65}.hub-trust{display:flex;flex-wrap:wrap;gap:10px 23px;color:#e1efff;font-size:13px}.hub-trust i{margin-right:6px;color:#63edc1}
.hub-orbit{width:267px;height:267px;position:relative;flex:0 0 267px;margin-right:64px}.hub-orbit-ring{position:absolute;inset:0;border:1px solid rgba(181,223,255,.45);border-radius:50%;box-shadow:inset 0 0 35px rgba(77,174,255,.09)}.hub-orbit-ring:before,.hub-orbit-ring:after{content:"";position:absolute;border-radius:50%}.hub-orbit-ring:before{inset:31px;border:1px dashed rgba(199,231,255,.28)}.hub-orbit-ring:after{width:11px;height:11px;top:31px;left:31px;background:#6deac3;box-shadow:0 0 0 6px rgba(109,234,195,.17)}
.hub-orbit-core{position:absolute;inset:77px;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;background:linear-gradient(145deg,#6dd6ff,#3675e5);box-shadow:0 0 0 13px rgba(113,203,255,.11),0 18px 55px rgba(0,0,0,.3);color:#fff}.hub-orbit-core strong{font-size:36px;line-height:1;letter-spacing:-3px}.hub-orbit-core small{margin-top:4px;font-size:8px;font-weight:700;letter-spacing:1.6px}.hub-orbit-chip{position:absolute;display:grid;place-items:center;width:47px;height:47px;border:1px solid rgba(214,239,255,.48);border-radius:15px;background:rgba(12,43,91,.85);box-shadow:0 8px 24px rgba(0,0,0,.2);color:#b9e7ff;font-size:19px}.chip-a{top:3px;right:34px}.chip-b{bottom:31px;right:-17px;color:#6ceac5}.chip-c{bottom:4px;left:21px;color:#ffd984}
.hub-services{padding:49px 0 61px}.hub-services-heading{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:24px}.hub-kicker{color:#3977c4}.hub-services-heading h2{margin:0;color:#102344;font-family:'Nanum Myeongjo',Georgia,serif;font-size:clamp(27px,3vw,38px);font-weight:800;letter-spacing:-1.4px}.hub-help-link{display:inline-flex;align-items:center;gap:8px;color:#2365ba;font-size:13px;font-weight:700;text-decoration:none}.hub-help-link:hover{color:#102344;text-decoration:none}.hub-help-link i{transition:transform .2s var(--prem-ease)}.hub-help-link:hover i{transform:translateX(4px)}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.hub-card{min-height:128px;display:flex;align-items:center;gap:14px;padding:21px 18px;border:1px solid #e1e8f2;border-radius:18px;background:#fff;color:#102344;box-shadow:0 4px 14px rgba(20,47,84,.035);text-decoration:none;transition:transform .25s var(--prem-ease),box-shadow .25s var(--prem-ease),border-color .25s var(--prem-ease)}.hub-card:hover,.hub-card:focus{transform:translateY(-4px);border-color:#bbd9fa;box-shadow:0 16px 32px rgba(18,58,108,.11);color:#102344;text-decoration:none}.hub-card:focus-visible{outline:3px solid #ffce64;outline-offset:3px}.hub-card-icon{display:grid;place-items:center;flex:0 0 47px;width:47px;height:47px;border-radius:15px;background:#edf5ff;color:#2671cc;font-size:20px}.hub-card:nth-child(2) .hub-card-icon{color:#a35a0d;background:#fff3dc}.hub-card:nth-child(3) .hub-card-icon{color:#0d8b67;background:#e3fbf2}.hub-card:nth-child(4) .hub-card-icon{color:#7c59bc;background:#f0eaff}.hub-card:nth-child(5) .hub-card-icon{color:#d14d68;background:#ffeaef}.hub-card:nth-child(6) .hub-card-icon{color:#14769b;background:#e2f7fc}.hub-card-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.hub-card-copy strong{font-size:16px;line-height:1.2}.hub-card-copy small{color:#6b7d96;font-size:12px;line-height:1.35}.hub-card-arrow{margin-left:auto;color:#95a7bf;font-size:12px;transition:transform .2s var(--prem-ease),color .2s var(--prem-ease)}.hub-card:hover .hub-card-arrow{transform:translateX(3px);color:#276fc7}.hub-card-featured{border-color:#2d73c8;background:linear-gradient(130deg,#1a5ba9,#247fd9);box-shadow:0 14px 27px rgba(29,104,193,.23);color:#fff}.hub-card-featured:hover,.hub-card-featured:focus{border-color:#2d73c8;box-shadow:0 19px 35px rgba(29,104,193,.3);color:#fff}.hub-card-featured .hub-card-icon{background:rgba(255,255,255,.16);color:#fff}.hub-card-featured .hub-card-copy small,.hub-card-featured .hub-card-arrow{color:#d8edff}.hub-card-featured:hover .hub-card-arrow{color:#fff}
@media (max-width:767px){.hub-shell{width:min(100% - 28px,550px)}.hub-hero{padding:45px 0 35px}.hub-hero .hub-shell{min-height:0;display:block}.hub-intro h1{font-size:43px;letter-spacing:-2px}.hub-lede{font-size:14px;max-width:345px}.hub-orbit{width:192px;height:192px;margin:18px -6px -24px auto;opacity:.94}.hub-orbit-core{inset:56px}.hub-orbit-core strong{font-size:27px}.hub-orbit-ring:before{inset:22px}.hub-orbit-ring:after{top:22px;left:22px}.hub-orbit-chip{transform:scale(.78);transform-origin:center}.hub-services{padding:33px 0 42px}.hub-services-heading{align-items:start;margin-bottom:18px}.hub-services-heading h2{font-size:28px}.hub-help-link{display:none}.hub-grid{grid-template-columns:repeat(2,1fr);gap:10px}.hub-card{min-height:142px;align-items:flex-start;flex-direction:column;gap:12px;padding:16px;border-radius:16px}.hub-card-icon{flex-basis:43px;width:43px;height:43px;border-radius:13px;font-size:18px}.hub-card-copy strong{font-size:14px}.hub-card-copy small{font-size:11px}.hub-card-arrow{position:absolute;right:15px;bottom:17px}.hub-card{position:relative}.hub-card-featured{grid-column:span 2;min-height:104px;flex-direction:row;align-items:center}.hub-card-featured .hub-card-arrow{position:static;margin-left:auto}}
@media (prefers-reduced-motion:reduce){.hub-card,.hub-card-arrow,.hub-help-link i{transition:none !important}.hub-card:hover,.hub-card:focus{transform:none}}

/* ---------------------------------------------------------------
   1) Scroll reveal (class is added by premium.js only to off-screen
      elements, so above-the-fold content is never hidden → no FOUC)
   --------------------------------------------------------------- */
.js-anim .pa-reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .7s var(--prem-ease), transform .7s var(--prem-ease);
}
.js-anim .pa-reveal.pa-in{ opacity:1; transform:none; }
/* staggered children (steps / benefit blocks / video cards) */
.js-anim .pa-d1{transition-delay:.08s}
.js-anim .pa-d2{transition-delay:.16s}
.js-anim .pa-d3{transition-delay:.24s}
.js-anim .pa-d4{transition-delay:.32s}

/* respect users who prefer no motion */
@media (prefers-reduced-motion: reduce){
  .js-anim .pa-reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .center_content h2,.center_content p,.search_in_banner{animation:none !important}
}

/* ---------------------------------------------------------------
   2) Premium course / book cards — lift, soft shadow, image zoom
   --------------------------------------------------------------- */
.course_sec .course_inner{
  border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 4px 18px rgba(17,28,53,.07);
  transition:transform .38s var(--prem-ease), box-shadow .38s var(--prem-ease);
  /* NOTE: do NOT set height/position here — .button_sec is position:absolute;bottom:0
     anchored to this .course_inner, and the card relies on its original min-height:434px */
}
.course_sec .course_inner:hover{
  transform:translateY(-10px);
  box-shadow:0 22px 46px rgba(17,28,53,.16);
}
.course_sec .course_img{ overflow:hidden; }
.course_sec .course_img img{ transition:transform .6s var(--prem-ease); will-change:transform; backface-visibility:hidden; }
.course_sec .course_inner:hover .course_img img{ transform:scale(1.07); }

/* ---------------------------------------------------------------
   3) How-it-works steps & benefit blocks — gentle hover lift
   --------------------------------------------------------------- */
.step, .benifit_inner{
  transition:transform .35s var(--prem-ease), box-shadow .35s var(--prem-ease);
  border-radius:14px;
}
.step:hover, .benifit_inner:hover{
  transform:translateY(-7px);
  box-shadow:0 16px 34px rgba(17,28,53,.10);
}

/* ---------------------------------------------------------------
   4) Premium buttons — lift + soft brand shadow + shine sweep
   --------------------------------------------------------------- */
.hover_button, .view_all_button, .view_all_feedback, a.view_all_button{
  position:relative; overflow:hidden;
  transition:transform .25s var(--prem-ease), box-shadow .25s var(--prem-ease), filter .25s var(--prem-ease);
}
.hover_button:hover, .view_all_button:hover, .view_all_feedback:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(249,87,91,.38);
  filter:brightness(1.04);
}
/* subtle light sweep across filled brand buttons on hover */
.view_all_button::after, .hover_button::after{
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); transition:left .6s var(--prem-ease); pointer-events:none;
}
.view_all_button:hover::after, .hover_button:hover::after{ left:130%; }

/* ---------------------------------------------------------------
   5) Hero — refined entrance for the headline / tagline / search
      (transform+opacity only; the LCP is the slider image, the nav
      paints first, so FCP/LCP are unaffected)
   --------------------------------------------------------------- */
.center_content h2{ animation:premUp .9s var(--prem-ease) both; }
.center_content p{ animation:premUp .9s .12s var(--prem-ease) both; }
.center_content .search_in_banner{ animation:premUp .9s .24s var(--prem-ease) both; }
.center_content > ul{ animation:premUp .9s .36s var(--prem-ease) both; }
@keyframes premUp{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }

/* ---------------------------------------------------------------
   6) Social / contact icons in the top bar — playful hover
   --------------------------------------------------------------- */
.top_header_social a img, .header_social a img{
  transition:transform .3s var(--prem-ease);
}
.top_header_social a:hover img, .header_social a:hover img{ transform:translateY(-3px) scale(1.12); }

/* smoother default for links/icons that animate */
.common_heading h3{ transition:color .3s var(--prem-ease); }

/* ---------------------------------------------------------------
   7) Remaining sections — testimonials, top scorers, videos, stats
   --------------------------------------------------------------- */

/* ====== Premium testimonial cards ====== */
.feedback_slider .feed_design{
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(17,28,53,.05);
  box-shadow:0 14px 40px rgba(17,28,53,.10);
  transition:transform .4s var(--prem-ease), box-shadow .4s var(--prem-ease);
}
.feedback_slider .item:hover .feed_design{
  transform:translateY(-10px); box-shadow:0 26px 56px rgba(17,28,53,.17);
}
.feedback_slider .pd_C{ background:linear-gradient(180deg,#fff 0%,#f8faff 100%); }
/* decorative quote watermark (bring the double-arrow img inside so overflow:hidden won't clip it) */
.feedback_slider .pd_C img[src*="double_arrow"]{
  top:18px !important; right:20px !important; width:50px !important;
  opacity:.14; filter:grayscale(1);
}
/* gold star rating */
.feedback_slider .star .fa-star{ color:#e3e6ef; font-size:16px; letter-spacing:3px; }
.feedback_slider .star .fa-star.checked{ color:#f3c150; }
/* avatar — circular with a soft ring */
.feedback_slider .ll img{
  border-radius:50%; height:77px; object-fit:cover;
  border:3px solid rgba(255,255,255,.75);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.feedback_slider .lr h3{ color:#fff; font-weight:700; letter-spacing:.3px; }

/* ====== Premium top-scorer cards ====== */
.topper_sec .toper_description_Sec{
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  transition:transform .4s var(--prem-ease), box-shadow .4s var(--prem-ease);
}
.topper_sec .item:hover .toper_description_Sec{
  transform:translateY(-10px); box-shadow:0 24px 50px rgba(0,0,0,.42);
}
.topper_sec .toper_description_Sec img{ transition:transform .6s var(--prem-ease); }
.topper_sec .item:hover .toper_description_Sec img{ transform:scale(1.05); }
/* frosted-glass name band with a brand accent line */
.topper_sec .toper_name{
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-top:3px solid #ff585c;
  box-shadow:0 -6px 18px rgba(0,0,0,.08);
}

/* =========================================================================
   8) Premium++ : richer accents for testimonials & top scorers
   ========================================================================= */

/* --- Testimonials: gradient top accent + softer branded quote + brand glow --- */
.feedback_slider .feed_design{ position:relative; }
.feedback_slider .feed_design::after{      /* slim gradient accent across the top */
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#ff585c 0%,#ff9d6e 100%); z-index:3;
}
.feedback_slider .pd_C img[src*="double_arrow"]{   /* soft brand-tinted quote watermark */
  filter:none !important; opacity:.12 !important; width:56px !important;
}
.feedback_slider .item:hover .feed_design{   /* warm brand-tinted lift glow */
  box-shadow:0 26px 56px rgba(255,88,92,.16), 0 12px 26px rgba(17,28,53,.12);
}

/* --- Top scorers: gold "winner" treatment --- */
.topper_sec .toper_name{ border-top:none; }            /* replace pink line with gold below */
.topper_sec .toper_name::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#bf953f,#fcf6ba,#bf953f);
}
.topper_sec .toper_description_Sec::after{             /* small gold medal star, top-right */
  content:"\2605"; position:absolute; top:12px; right:12px; z-index:4;
  width:34px; height:34px; line-height:34px; text-align:center;
  border-radius:50%; font-size:15px; color:#6b4e00;
  background:linear-gradient(145deg,#fcf6ba,#d4af37);
  box-shadow:0 3px 10px rgba(0,0,0,.32);
}
.topper_sec .item:hover .toper_description_Sec{        /* gold ring + deeper lift */
  box-shadow:0 24px 50px rgba(0,0,0,.42), 0 0 0 2px rgba(212,175,55,.55);
}

/* Recent-video cards — lift + shadow + thumbnail zoom + play-button glow */
.video_inner{
  border-radius:14px; overflow:hidden;
  transition:transform .35s var(--prem-ease), box-shadow .35s var(--prem-ease);
}
.video_inner:hover{ transform:translateY(-8px); box-shadow:0 18px 40px rgba(17,28,53,.18); }
.video_inner > img{ transition:transform .6s var(--prem-ease); }
.video_inner:hover > img{ transform:scale(1.06); }
.video_inner .play_button{ transition:box-shadow .3s var(--prem-ease), filter .3s var(--prem-ease); }
.video_inner:hover .play_button{ box-shadow:0 0 0 10px rgba(249,87,91,.22); filter:brightness(1.05); }

/* "Why choose us" stat tiles — lift; numbers count up via premium.js */
.counter_sec .container_inner{ transition:transform .35s var(--prem-ease); }
.counter_sec .container_inner:hover{ transform:translateY(-6px); }
.counter_sec h4.os{ font-variant-numeric:tabular-nums; } /* steady width while counting */