/* ============================================================
   EMS Boost - 3D look (sample: homepage hero + student dashboard).
   3D icons live in img/3d/*.svg. One light source from the top left,
   soft contact shadows, and a gentle lift on hover.
   ============================================================ */
:root{ --i3-shadow: drop-shadow(0 6px 10px rgba(10,18,56,.22)); }
img.i3, .i3 img, .gx-ic img, .gx-opt3d, .gx-hero3d, .hx-3d{ -webkit-user-drag:none; user-select:none; pointer-events:none; }

/* ---------- homepage hero ---------- */
.hx-chip .ic.i3{ background:none !important; width:44px; height:44px; }
.hx-chip .ic.i3 img{ width:44px; height:44px; display:block; }
.hx-3d{ position:absolute; z-index:2; filter:drop-shadow(0 18px 22px rgba(0,0,0,.45)); animation:i3Float 7s ease-in-out infinite; }
.hx-3d-mic{ width:118px; right:calc(50% - 250px); top:-6px; animation-delay:-1s; transform:rotate(12deg); }
.hx-3d-trophy{ width:96px; left:calc(50% - 250px); top:300px; animation-delay:-3.5s; }
.hx-3d-spark{ width:58px; right:calc(50% - 196px); bottom:40px; animation-delay:-2s; opacity:.95; }
.hx-3d-coin{ width:54px; left:calc(50% - 168px); top:142px; animation-delay:-5s; }
@keyframes i3Float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }
@media(max-width:1180px){ .hx-3d-mic{ right:calc(50% - 210px); width:96px; } .hx-3d-trophy{ left:calc(50% - 210px); width:80px; } }
@media(max-width:900px){ .hx-3d-mic{ right:4px; top:0; width:84px; } .hx-3d-trophy{ left:2px; top:auto; bottom:110px; width:70px; } .hx-3d-coin{ left:16px; top:96px; width:44px; } .hx-3d-spark{ right:14px; bottom:26px; width:44px; } }
@media(max-width:420px){ .hx-3d-coin,.hx-3d-spark{ display:none; } .hx-3d-mic{ width:70px; } .hx-3d-trophy{ width:60px; } }

/* ---------- student dashboard: section tiles ---------- */
.gx-ic{ width:50px !important; height:50px !important; border-radius:16px !important; background:linear-gradient(160deg,#f5f8ff,#e4ebfb) !important; box-shadow:inset 0 1px 0 #fff, 0 4px 10px rgba(15,40,90,.08); overflow:visible; }
.gx-ic img{ width:40px; height:40px; display:block; filter:var(--i3-shadow); transition:transform .25s cubic-bezier(.3,1.4,.5,1); }
.gx-g.on .gx-ic{ background:linear-gradient(160deg,#ffffff,#e8eeff) !important; box-shadow:0 6px 14px rgba(5,10,40,.25); }
.gx-g{ transition:transform .2s, box-shadow .2s !important; }
.gx-g:hover .gx-ic img{ transform:translateY(-3px) rotate(-6deg) scale(1.06); }
.gx-g.on .gx-ic img{ filter:drop-shadow(0 8px 12px rgba(5,10,40,.45)); transform:scale(1.06); }
@media(max-width:1180px){ .gx-ic{ width:44px !important; height:44px !important; border-radius:14px !important; } .gx-ic img{ width:35px; height:35px; } }
@media(max-width:760px){ .gx-ic{ width:40px !important; height:40px !important; border-radius:13px !important; } .gx-ic img{ width:32px; height:32px; } }

/* ---------- dashboard welcome banner ---------- */
.gx-hero{ position:relative; overflow:hidden; }
.gx-hero .t{ position:relative; z-index:1; }
.gx-mini{ position:relative; z-index:1; margin-right:120px; }
.gx-mini div{ display:grid !important; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:8px; align-items:center; justify-items:start; padding:10px 14px !important; }
.gx-mini div img.i3{ grid-row:1 / span 2; width:38px; height:38px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.gx-mini div b{ font-size:22px; line-height:1; }
.gx-hero3d{ position:absolute; right:14px; bottom:-14px; width:132px; filter:drop-shadow(0 18px 20px rgba(0,0,0,.45)); animation:i3Float 7s ease-in-out infinite; }
@media(max-width:1000px){ .gx-mini{ margin-right:0; } .gx-hero3d{ width:84px; right:8px; top:8px; bottom:auto; opacity:.95; } .gx-hero .t{ padding-right:80px; } }
@media(max-width:760px){ .gx-mini div{ grid-template-columns:1fr; justify-items:center; text-align:center; row-gap:2px; } .gx-mini div img.i3{ grid-row:auto; width:30px; height:30px; } .gx-mini div b{ font-size:18px; } .gx-hero3d{ width:64px; } }

/* ---------- "What do you want to do?" cards ---------- */
.gx-opt{ position:relative; }
.gx-opt3d{ display:block; width:76px; height:76px; margin:4px 0 6px -4px; filter:drop-shadow(0 10px 14px rgba(10,18,56,.22)); transition:transform .3s cubic-bezier(.3,1.4,.5,1); }
.gx-opt:hover .gx-opt3d{ transform:translateY(-4px) rotate(-5deg) scale(1.05); }
img.i3.inl{ width:28px; height:28px; vertical-align:-6px; filter:var(--i3-shadow); }

@media(prefers-reduced-motion:reduce){ .hx-3d,.gx-hero3d{ animation:none !important; } .gx-g:hover .gx-ic img,.gx-opt:hover .gx-opt3d{ transform:none; } }
.gx-groups .gx-g.ielts .gx-ic{ background:linear-gradient(160deg,#fff9e6,#ffe6a8) !important; }
.gx-groups .gx-g.ielts.on .gx-ic{ background:linear-gradient(160deg,#ffffff,#fff1cc) !important; }

/* ============================================================
   Homepage - 3D images in every section
   ============================================================ */
@keyframes i3Bob{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-10px) rotate(var(--r,0deg)); } }

/* three steps */
.hm-step{ padding-top:22px !important; transition:transform .25s, box-shadow .25s; }
.hm-step:hover{ transform:translateY(-4px); box-shadow:0 22px 46px rgba(15,40,90,.12); }
.hm-step .i3-step{ display:block; width:84px; height:84px; margin:-4px 0 6px -6px; filter:drop-shadow(0 12px 14px rgba(10,18,56,.2)); transition:transform .3s cubic-bezier(.3,1.4,.5,1); }
.hm-step:hover .i3-step{ transform:translateY(-4px) rotate(-6deg) scale(1.05); }
.hm-step .n{ position:absolute; right:22px; top:22px; }
@media(min-width:901px){
  .hm-steps{ position:relative; }
  .hm-step:not(:last-child):after{ content:""; position:absolute; right:-22px; top:62px; width:26px; height:3px; border-radius:3px; background:repeating-linear-gradient(90deg,#9db4ff 0 6px,transparent 6px 11px); z-index:1; }
}

/* learn your way */
.hm-way-c{ position:relative; overflow:hidden; }
.hm-way-c.big{ padding-bottom:200px !important; }
.i3-way-big{ position:absolute; right:22px; bottom:12px; width:190px; --r:-8deg; transform:rotate(-8deg); filter:drop-shadow(0 26px 30px rgba(0,0,0,.5)); animation:i3Bob 7s ease-in-out infinite; }
.i3-way-sm{ position:absolute; right:200px; bottom:96px; width:86px; --r:6deg; filter:drop-shadow(0 16px 18px rgba(0,0,0,.45)); animation:i3Bob 7s ease-in-out infinite; animation-delay:-3s; }
.hm-way-c.has3d{ padding-right:132px !important; }
.i3-way{ position:absolute; right:22px; top:50%; translate:0 -50%; width:96px; filter:drop-shadow(0 14px 16px rgba(10,18,56,.2)); transition:transform .3s cubic-bezier(.3,1.4,.5,1); }
.hm-way-c.has3d:hover .i3-way{ transform:rotate(-6deg) scale(1.06); }
@media(max-width:900px){ .hm-way-c.big{ padding-bottom:170px !important; } .i3-way-big{ width:150px; } .i3-way-sm{ right:170px; width:70px; bottom:70px; } }
@media(max-width:520px){ .hm-way-c.has3d{ padding-right:96px !important; } .i3-way{ width:70px; right:16px; } .i3-way-sm{ display:none; } }

/* feature pictures */
.feat-art.i3-host{ position:relative; overflow:visible; }
.i3-sat{ position:absolute; z-index:2; width:96px; filter:drop-shadow(0 16px 18px rgba(10,18,56,.25)); animation:i3Bob 8s ease-in-out infinite; }
.i3-sat.sm{ width:66px; animation-delay:-4s; }
.i3-sat.s-tl{ left:-26px; top:-26px; --r:-8deg; }
.i3-sat.s-br{ right:-22px; bottom:-22px; --r:8deg; }
.i3-scene{ position:relative; height:400px; max-width:440px; margin:0 auto; }
.i3-scene .glow{ position:absolute; inset:14% 12%; border-radius:50%; background:radial-gradient(circle,#c9d8ff,rgba(201,216,255,0) 70%); }
.i3-scene img{ position:absolute; filter:drop-shadow(0 20px 22px rgba(10,18,56,.25)); animation:i3Bob 8s ease-in-out infinite; }
.i3-scene .m{ width:62%; left:19%; top:24%; animation:none; }
.i3-scene .a{ width:34%; left:2%; top:4%; --r:-10deg; animation-delay:-1s; }
.i3-scene .b{ width:30%; right:2%; top:6%; --r:8deg; animation-delay:-3s; }
.i3-scene .c{ width:28%; right:6%; bottom:4%; --r:-6deg; animation-delay:-5s; }
.i3-scene .d{ width:16%; left:10%; bottom:12%; animation-delay:-2s; }
@media(max-width:900px){ .i3-sat{ width:72px; } .i3-sat.sm{ width:52px; } .i3-sat.s-tl{ left:-8px; top:-18px; } .i3-sat.s-br{ right:-6px; bottom:-14px; } .i3-scene{ height:320px; } }

/* speaking journey */
.jc-3d{ width:100%; max-width:150px; aspect-ratio:1; margin:0 auto 10px; border-radius:22px; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.22),rgba(255,255,255,.04) 70%); border:1px solid rgba(255,255,255,.14); }
.jc-3d img{ width:78%; filter:drop-shadow(0 16px 18px rgba(0,0,0,.45)); transition:transform .3s cubic-bezier(.3,1.4,.5,1); }
.jc:hover .jc-3d img{ transform:translateY(-6px) rotate(-6deg) scale(1.06); }

/* login side */
.la-3d{ position:relative; width:100%; max-width:460px; height:440px; margin:0 auto; }
.la-3d .glow{ position:absolute; inset:8% 8%; border-radius:50%; background:radial-gradient(circle,rgba(79,141,253,.55),rgba(79,141,253,0) 68%); }
.la-3d .ring{ position:absolute; inset:16%; border-radius:50%; border:1.5px dashed rgba(255,255,255,.18); }
.la-3d > img{ position:absolute; filter:drop-shadow(0 24px 28px rgba(0,0,0,.5)); }
.la-3d .m{ width:48%; left:26%; top:22%; animation:i3Bob 7s ease-in-out infinite; }
.la-3d .a{ width:22%; right:6%; top:4%; --r:12deg; animation:i3Bob 7s ease-in-out infinite; animation-delay:-2s; }
.la-3d .b{ width:13%; left:12%; top:12%; animation:i3Bob 7s ease-in-out infinite; animation-delay:-4s; }
.la-chip{ position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:16px; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 16px 34px rgba(0,0,0,.3); }
.la-chip img{ width:38px; height:38px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.la-chip b{ display:block; font-size:14px; } .la-chip small{ display:block; font-size:12px; color:#b9c6ee; }
.la-chip.c1{ left:0; top:30%; } .la-chip.c2{ right:0; bottom:22%; } .la-chip.c3{ left:6%; bottom:4%; }
@media(max-width:520px){ .la-3d{ height:380px; } .la-chip{ padding:8px 10px 8px 8px; } .la-chip img{ width:30px; height:30px; } .la-chip b{ font-size:12.5px; } .la-chip small{ font-size:11px; } }
.la-points .ico.i3{ background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.05)) !important; width:48px !important; height:48px !important; border-radius:14px; }
.la-points .ico.i3 img{ width:38px; height:38px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); }

/* about: why cards */
.hm-why div{ position:relative; transition:transform .25s, box-shadow .25s; }
.hm-why div:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(15,40,90,.1); }
.hm-why .i3-why{ display:block; width:58px; height:58px; margin:-4px 0 8px -4px; filter:drop-shadow(0 10px 12px rgba(10,18,56,.2)); }

/* IELTS feature tiles */
.hm-ielts-f i.i3{ background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.05)) !important; border:1px solid rgba(255,255,255,.16); }
.hm-ielts-f i.i3 img{ width:82%; height:82%; filter:drop-shadow(0 5px 7px rgba(0,0,0,.4)); }

/* teach and final call */
.gx-teach{ position:relative; overflow:hidden; }
.gx-teach > *:not(.i3-teach){ position:relative; z-index:1; }
.i3-teach{ position:absolute; z-index:0; filter:drop-shadow(0 22px 26px rgba(0,0,0,.45)); pointer-events:none; }
.i3-teach.a{ width:150px; left:30px; top:26px; --r:-10deg; animation:i3Bob 8s ease-in-out infinite; }
.i3-teach.b{ width:140px; right:30px; bottom:22px; --r:6deg; animation:i3Bob 8s ease-in-out infinite; animation-delay:-4s; }
#mJoin .in-wrap{ position:relative; }
#mJoin .in-wrap > *:not(.i3-join){ position:relative; z-index:1; }
.i3-join{ position:absolute; pointer-events:none; filter:drop-shadow(0 22px 26px rgba(0,0,0,.5)); animation:i3Bob 8s ease-in-out infinite; }
.i3-join.a{ width:150px; left:2%; top:-20px; --r:-6deg; }
.i3-join.b{ width:120px; right:4%; top:10px; --r:8deg; animation-delay:-3s; }
.i3-join.c{ width:56px; right:20%; bottom:-30px; animation-delay:-5s; }
@media(max-width:900px){ .i3-teach.a{ width:90px; left:10px; top:10px; opacity:.5; } .i3-teach.b{ width:84px; right:10px; bottom:10px; opacity:.5; } .i3-join.a{ width:84px; opacity:.6; } .i3-join.b{ width:70px; opacity:.6; } .i3-join.c{ display:none; } }

@media(prefers-reduced-motion:reduce){ .i3-way-big,.i3-way-sm,.i3-sat,.i3-scene img,.la-3d img,.i3-teach,.i3-join{ animation:none !important; } }
/* size fixes: the page's own ".feat-art img" and ".jc img" rules must not touch the 3D pieces */
.feat-art .i3-sat{ width:96px !important; max-width:none !important; max-height:none !important; height:auto !important; margin:0 !important; }
.feat-art .i3-sat.sm{ width:66px !important; }
.feat-art .i3-scene img{ max-width:none !important; max-height:none !important; height:auto !important; margin:0 !important; }
.jc .jc-3d img{ background:none !important; border-radius:0 !important; max-width:none !important; margin:0 !important; height:auto !important; }
.la-3d .ring{ display:none; }
.la-3d .m{ width:54% !important; left:23% !important; top:20% !important; }
.la-chip.c1{ left:-2%; top:8%; } .la-chip.c2{ right:-2%; top:auto; bottom:30%; } .la-chip.c3{ left:2%; bottom:6%; }
.la-3d .a{ right:2% !important; top:0 !important; } .la-3d .b{ left:auto !important; right:30% !important; top:2% !important; }
@media(max-width:900px){ .feat-art .i3-sat{ width:70px !important; } .feat-art .i3-sat.sm{ width:50px !important; } }
/* login card: all five sign-in types on one row */
#mLogin #loginHost .role-tabs{ grid-template-columns:1fr .85fr .95fr 1.2fr 1fr; }
#mLogin #loginHost .role-tabs .rtab{ font-size:12.5px; padding:10px 2px; }
@media(max-width:520px){ #mLogin #loginHost .role-tabs{ grid-template-columns:repeat(3,1fr); } }
/* phones: 3D pieces sit above the heading instead of behind the words */
@media(max-width:900px){
  .i3-join.b,.i3-join.c,.i3-teach.b{ display:none; }
  .i3-join.a,.i3-teach.a{ position:static; display:block; margin:0 auto 12px; width:92px; opacity:1; animation:none; transform:rotate(-8deg); }
}

/* hero: the free demo leads */
.hx .mcta #mCtaDemo{ font-size:16.5px; padding:15px 30px; }
.hx-demo-note{ margin:12px 0 0; font-size:14px; color:#b9c6ee; display:flex; align-items:center; gap:8px; }
.hx-demo-note:before{ content:""; width:8px; height:8px; border-radius:50%; background:#2dd4a7; box-shadow:0 0 10px #2dd4a7; flex:0 0 auto; }
/* hero CTA now sits right under the headline */
.hx-copy > .mcta{ margin-top:22px !important; margin-bottom:6px; }
.hx-copy > .hx-demo-note{ margin-bottom:22px; }
@media(max-width:600px){ .hx-copy > .mcta button[data-scroll]{ display:none; } .hx-copy > .mcta button{ width:100%; } }
.hx-copy > .mcta button[data-scroll]{ display:none; }
@media(max-width:1440px) and (min-width:601px){ .hx .mcta button{ padding:13px 20px; font-size:15px; } .hx .mcta #mCtaDemo{ padding:14px 24px; font-size:16px; } }
@media(min-width:901px){ .hx-c1{ top:150px !important; } .hx-3d-coin{ top:40px !important; left:calc(50% - 150px) !important; } }