@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#f3faf7;--muted:#a4b6ae;--line:#ffffff17;--green:#16df8b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:radial-gradient(ellipse at 0 0,#0a4030,transparent 45%),#071513;color:var(--ink);font-family:'DM Sans',sans-serif;padding:28px 4%}main,header,footer{max-width:1400px;margin:auto}main{background:#0c100f;border-radius:0 0 34px 34px;overflow:hidden}a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:5px}.skip{position:absolute;top:-100px}.skip:focus{top:0;background:var(--green);color:#071513;padding:15px;z-index:30}header{height:95px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;background:#0e3126;border-radius:28px 28px 0 0;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:15px;font-weight:800}.brand-name{font:800 24px Manrope,sans-serif;letter-spacing:-1px}.mark{font-size:42px;letter-spacing:-4px}.mark span{color:var(--green);font-size:25px;vertical-align:top;letter-spacing:0}nav{display:flex;gap:30px;font-size:13px}.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;border-radius:40px;padding:17px 24px;background:var(--green);color:#05261b;font-size:14px;font-weight:700;transition:transform .2s}.button:hover{transform:translateY(-2px);background:#5cf1b2}.button.small{background:#f1fff7;padding:12px 20px;font-size:12px}.button span{font-size:20px}h1,h2,h3{font-family:Manrope,sans-serif;margin-top:0}p{font-size:15px;line-height:1.8;color:var(--muted);margin-top:0}.hero{position:relative;isolation:isolate;background:radial-gradient(ellipse at 20% 0,#00bc70 0,transparent 57%),radial-gradient(ellipse at 80% 60%,#075c45,transparent 65%),#0d3025;display:grid;grid-template-columns:1.1fr 1fr;gap:35px;padding:55px 4% 70px;border-radius:0 0 65px 65px;overflow:hidden;align-items:center}.hero-copy{z-index:2}.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid #ffffff40;background:#ffffff10;border-radius:30px;font-size:10px;letter-spacing:1.7px;color:white;margin-bottom:28px}.dot{width:6px;height:6px;border-radius:50%;background:#baffdb}.hero h1{font-size:clamp(48px,5.7vw,84px);line-height:1.03;font-weight:700;letter-spacing:-4px;margin:0 0 24px}em{font-style:normal;color:#50eaaa}.hero h1 em{color:#a7ffd3}.course-name{font-family:Manrope,sans-serif;font-size:clamp(21px,2vw,28px);font-weight:700;line-height:1.3;letter-spacing:-.7px;color:white;border-left:3px solid var(--green);padding-left:16px;margin-bottom:24px;max-width:470px}.lead{font-size:15px;color:#d0e7dc;max-width:450px}.hero-actions{display:flex;gap:23px;align-items:center;margin-top:26px}.text-link{font-size:12px;font-weight:700}.hero-location{display:flex;align-items:center;gap:10px;font-size:12px;color:#ecfff4;margin:20px 0 0}.hero-location svg{width:20px;height:25px;color:#a7ffd3}.hero-location small{display:block;font-size:8px;letter-spacing:1.5px;color:#a1cabb}.registration-deadline{color:#c1ffde;font-size:11px;line-height:1.6;margin:14px 0 0}.art{position:relative;min-height:510px;height:100%;isolation:isolate}.art-grid,.art-label,.art-bottom{display:none}.core{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);width:260px;height:260px;border-radius:50%;background:radial-gradient(circle at 25% 20%,#b6ffda,#18db8b 36%,#087b50 67%,#043e2c);box-shadow:inset -25px -30px 50px #022b26,0 0 90px #11e68b50;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;font:700 110px/1 Manrope,sans-serif;letter-spacing:-9px;color:#f1fff8}.core span{font-size:10px;line-height:1.5;letter-spacing:1.2px;font-weight:700;text-align:center;color:#d2ffe7}.orbit{position:absolute;top:43%;left:50%;width:410px;height:410px;transform:translate(-50%,-50%) rotate(-35deg) scaleY(.55);border:1px solid #7cffc563;border-radius:50%;z-index:-1}.orbit-two{transform:translate(-50%,-50%) rotate(50deg) scaleY(.68);width:380px;height:380px}.tile{position:absolute;padding:13px 17px;border:1px solid #b0ffdf38;background:#0e3e2dde;backdrop-filter:blur(10px);border-radius:40px;color:#f3fff9;font-size:12px;font-weight:500;box-shadow:0 15px 25px #001b2220}.tile span{color:#65ffc0;margin-right:9px}.t1{top:8%;left:4%;transform:rotate(-5deg)}.t2{top:27%;right:0;transform:rotate(4deg)}.t3{bottom:31%;left:0;transform:rotate(-4deg)}.t4{bottom:17%;right:0;transform:rotate(4deg)}.t5{bottom:4%;left:20%;transform:rotate(-2deg)}.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:38px 4%;background:#151917;border-radius:0 0 35px 35px}.mini-quotes figure{margin:0;text-align:center;padding:0 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}.mini-quotes figure:last-child{border:0}.mini-quotes blockquote{font-size:15px;line-height:1.6;margin:0;color:#d7e4dd}.mini-quotes strong{font-size:inherit;display:inline;font-weight:700;color:#fff}.mini-quotes figcaption{color:var(--green);font-size:11px;margin-top:16px}.section{padding:85px 4%}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--green);margin-bottom:24px}h2{font-size:clamp(33px,3.6vw,52px);font-weight:600;line-height:1.13;letter-spacing:-2px;margin-bottom:25px}.intro,.teacher,.faq{display:grid;grid-template-columns:1fr 1fr;gap:65px}.big-copy{font-size:22px;line-height:1.6;color:#edf5f0}.support{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:0 4% 25px}.support>div{text-align:center;padding:32px 26px;border-radius:22px;background:radial-gradient(ellipse at top,#193b2b,#141b17 75%);border:1px solid #3a604438}.support-icon{display:flex;justify-content:center;align-items:center;margin:0 auto 24px;width:57px;height:57px;color:#61f5b2;background:#1a4c32;border-radius:17px}.support-icon svg{width:30px;height:30px}.support h3{font-size:22px;letter-spacing:-.7px;font-weight:600;line-height:1.35;margin-bottom:14px}.support p{font-size:14px;margin:0}.section-head{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:35px}.section-head>p{max-width:325px;font-size:14px}#lessons{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:40px}.lesson{border-top:1px solid var(--line);min-width:0}.lesson-summary{display:grid;grid-template-columns:33px 1fr;gap:13px;padding:23px 0}.lesson-index{font-size:11px;color:var(--green);padding-top:5px}.lesson h3{font-size:18px;line-height:1.4;letter-spacing:-.5px;font-weight:600;margin:0 0 7px}.tagline{font-size:13px;line-height:1.8;color:var(--muted)}.lesson-exam{grid-column:1/-1;grid-row:7;background:#163021;border:1px solid #2b6746;border-radius:12px;padding:0 22px;margin-top:15px}.lesson-exam h3{color:#63f5b2}.testimonials{padding:80px 4%;background:#111a15}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.testimonial-card{padding:26px;margin:0;background:#171f1a;border:1px solid #2c3c31;border-radius:16px;display:flex;flex-direction:column;justify-content:space-between}.testimonial-card blockquote{margin:0;font-size:14px;line-height:1.85;color:#bacac0}.testimonial-card strong{color:#53dfff;font-weight:700}.testimonial-card figcaption{border-top:1px solid var(--line);padding-top:17px;margin-top:22px;font-weight:600;font-size:12px}.book-section{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center;background:#0c100f}.book{position:relative;width:275px;height:370px;margin:auto;background:linear-gradient(145deg,#114b31,#071e15);border-left:12px solid #126743;padding:25px;border-radius:2px;transform:rotate(-6deg);box-shadow:20px 25px 45px #0009;color:#ecfff4}.book-top{display:flex;justify-content:space-between;font-size:7px;color:#94d8b4}.book h3{font-size:56px;line-height:1;letter-spacing:-3px;font-weight:600;margin-top:38px}.book h3 span{display:block;font-size:9px;letter-spacing:3px;margin-top:14px}.book-symbol{position:absolute;bottom:50px;right:25px;color:var(--green);font-size:100px}.book>p{position:absolute;bottom:15px;font-size:7px;color:#95c8ad}.teacher{border-block:1px solid var(--line)}.teacher-profile{display:flex;gap:25px;align-items:center}.teacher-photo{width:150px;height:205px;object-fit:cover;flex-shrink:0;border-radius:15px;filter:saturate(.75)}.teacher-profile h2{font-size:34px}.teacher-role{font-size:8px;letter-spacing:1.2px}.linkedin-link{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--green);font-weight:600}.linkedin-icon{background:#12432b;color:#a3ffd0;padding:3px 5px;border-radius:3px;font-family:Arial,sans-serif;font-weight:700;font-size:18px}details{border-top:1px solid var(--line);padding:19px 0}summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-size:14px;gap:20px}summary::-webkit-details-marker{display:none}summary:after{content:'+';color:var(--green)}details[open] summary:after{content:'−'}details p{font-size:13px;margin:16px 0 0}.closing{text-align:center;padding:75px 20px;background:radial-gradient(ellipse at 50% 120%,#0da164,#113c2b 60%,#0b241a)}.closing h2{font-size:clamp(39px,4.5vw,64px)}.closing>p:last-child{font-size:11px;margin-top:20px}.closing .registration-deadline{color:#c1ffde}footer{display:flex;justify-content:space-between;align-items:center;padding:28px 4%;font-size:11px;color:var(--muted)}footer .brand{font-size:12px}@media(max-width:1050px){.hero h1{font-size:58px}.core{width:220px;height:220px;font-size:90px}.orbit{width:340px;height:340px}.tile{font-size:11px;padding:12px}.intro,.teacher,.faq{gap:35px}.teacher-profile{flex-direction:column;align-items:start}.testimonial-grid{grid-template-columns:repeat(2,1fr)}.support{gap:15px}.support>div{padding:25px 20px}}@media(max-width:720px){body{padding:12px 12px 0}header{height:80px;padding:0 5%;border-radius:20px 20px 0 0}nav{display:none}.brand-name{font-size:20px}.mark{font-size:32px}.button.small{font-size:11px;padding:10px 14px;gap:12px}.hero{grid-template-columns:1fr;padding:30px 6% 35px;gap:25px;border-radius:0 0 35px 35px}.hero h1{font-size:51px;letter-spacing:-2.5px}.hero-badge{margin-bottom:25px}.course-name{font-size:25px}.hero-actions{gap:20px}.button{font-size:12px;padding:16px 20px;gap:20px}.text-link{font-size:11px}.hero-location{font-size:11px}.art{height:410px;min-height:410px}.core{width:215px;height:215px}.t1{top:5%}.t2{top:25%}.t3{bottom:29%}.t4{bottom:15%}.t5{bottom:2%}.proof,.support{grid-template-columns:1fr}.proof{padding:30px 6%;gap:22px}.mini-quotes figure{border-right:0;border-bottom:1px solid var(--line);padding:0 0 20px}.mini-quotes figure:last-child{padding-bottom:0}.section{padding:60px 6%}.intro,.teacher,.faq,.book-section{grid-template-columns:1fr;gap:25px}.support{padding-inline:6%;gap:18px}.section-head{display:block}.section-head>p{max-width:none}.big-copy{font-size:20px}h2{font-size:36px;letter-spacing:-1.5px}#lessons{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}.lesson-exam{grid-row:auto;grid-column:auto}.lesson h3{font-size:17px}.testimonials{padding:60px 6%}.testimonial-grid{grid-template-columns:1fr}.book-section{gap:50px}.teacher-profile{flex-direction:row;align-items:center;gap:20px}.teacher-photo{width:115px;height:155px}.teacher-profile h2{font-size:27px}.closing .eyebrow{font-size:8px}footer{flex-wrap:wrap;gap:18px}.orbit{width:320px;height:320px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.hero .hero-badge{color:#fff;border-color:#ffffff60;background:#075f3e55}
.proof.mini-quotes{background:#0c100f;border-radius:0;padding:38px 4% 20px;gap:20px}.mini-quotes figure,.mini-quotes figure:last-child{position:relative;margin:0;padding:27px 25px 24px;text-align:left;border:1px solid #294336;border-radius:16px;background:linear-gradient(135deg,#18291f,#111b16);justify-content:space-between;gap:22px}.mini-quotes figure:before{content:"“";font-family:Georgia,serif;font-size:43px;line-height:1;color:#43e99e;height:24px;display:block}.mini-quotes blockquote{font-family:DM Sans,sans-serif;font-size:16px;line-height:1.65;margin:0;color:#d5e3da;min-height:105px}.mini-quotes blockquote strong{font:inherit;font-weight:700;color:#f5fff8;display:inline}.mini-quotes figcaption{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#a6bdae;margin:0}.mini-quotes figcaption:before{content:"";width:20px;height:2px;background:#29dd8b;display:block}@media(max-width:720px){.proof.mini-quotes{padding:25px 6% 10px;gap:15px}.mini-quotes figure,.mini-quotes figure:last-child{padding:24px}.mini-quotes blockquote{min-height:0;font-size:16px}}
.all-testimonials{position:relative;isolation:isolate;background:radial-gradient(ellipse at 0 15%,#135a3a60,transparent 40%),radial-gradient(ellipse at 100% 65%,#11564655,transparent 42%),#0c1511}.testimonial-grid{gap:23px}.testimonial-card{background:linear-gradient(135deg,#ffffff0d,#ffffff03);border:1px solid #c9ffde24;border-top-color:#d9ffe536;border-radius:20px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #ffffff0a,0 10px 28px #00000018;padding:28px;transition:background .2s,border-color .2s}.testimonial-card:hover{background:linear-gradient(135deg,#ffffff14,#ffffff07);border-color:#91edb947}.testimonial-card blockquote{font-size:15px;line-height:1.85;color:#c3d2c9}.testimonial-card strong{color:#9bf0c1;font-weight:700;font-size:inherit}.testimonial-card figcaption{border-color:#dbffe515;color:#edf8f1;font-size:13px;padding-top:18px;margin-top:25px}@media(prefers-reduced-motion:reduce){.testimonial-card{transition:none}}
header{background:radial-gradient(ellipse at 12% 0,#842d3b80,transparent 62%),linear-gradient(110deg,#361c24,#122d25 70%);border-bottom:1px solid #ffffff12}
body{padding:0;background:#0a100d}main,header,footer{max-width:none;border-radius:0}header{height:88px;padding-inline:max(6%,calc((100vw - 1320px)/2));background:#0b2119;border:0;position:sticky;top:0;backdrop-filter:blur(18px)}main{overflow:hidden}.hero{border-radius:0;padding:70px max(6%,calc((100vw - 1320px)/2)) 75px;background:radial-gradient(ellipse at 15% 0,#08754c85,transparent 60%),radial-gradient(ellipse at 80% 65%,#07684355,transparent 55%),#0b2119;gap:60px}.hero h1{font-size:clamp(50px,5.2vw,78px);font-weight:600;line-height:1.08;letter-spacing:-3.5px}.hero-badge{border:0;background:#64f8b915;padding:10px 16px}.hero .lead{font-size:17px;line-height:1.8}.course-name{border-left:0;padding-left:0;color:#9ef0c1;font-size:27px;margin-bottom:24px}.button{box-shadow:0 8px 30px #00df8715}.art{min-height:520px}.tile{border:0;background:#112f25c7;box-shadow:0 12px 35px #00000020;font-size:13px}.orbit{border-color:#7cffc532}.core{box-shadow:inset -25px -30px 50px #022b26,0 0 100px #11e68b28}.proof.mini-quotes{padding:34px max(6%,calc((100vw - 1320px)/2)) 20px;background:#0a100d}.mini-quotes figure,.mini-quotes figure:last-child{border:0;background:linear-gradient(135deg,#1a2b20,#101b15);border-radius:12px}.section{padding:90px max(6%,calc((100vw - 1320px)/2))}.support{padding-inline:max(6%,calc((100vw - 1320px)/2));gap:25px}.support>div{border:0;background:linear-gradient(150deg,#1a3023,#111d16);border-radius:15px;padding:35px 28px}.support p{font-size:15px}.support-icon{background:#22583a70}.program{background:#0d1510}.lesson{border-color:#ffffff12}.lesson-exam{border:0;background:#173523}.testimonials{padding:85px max(6%,calc((100vw - 1320px)/2))}.testimonial-card{border:0;border-radius:14px;background:linear-gradient(135deg,#ffffff0d,#ffffff04);box-shadow:inset 0 1px 0 #ffffff0a,0 12px 25px #00000010}.testimonial-card:hover{border:0;background:linear-gradient(135deg,#ffffff13,#ffffff07)}.book-section{background:#0b140e}.teacher{border:0;background:#101b14}.faq{background:#0c130e}.closing{padding-block:90px;background:radial-gradient(ellipse at 50% 130%,#0d8d55,#112c1d 60%,#0c1c13)}footer{padding-inline:max(6%,calc((100vw - 1320px)/2));background:#09100b}@media(max-width:720px){body{padding:0}header{height:76px;border-radius:0;padding-inline:6%}.hero{padding:40px 6% 45px;border-radius:0;gap:25px}.hero h1{font-size:49px;letter-spacing:-2.4px}.hero .lead{font-size:16px}.course-name{font-size:25px}.art{min-height:410px;height:410px}.section{padding:60px 6%}.support{padding-inline:6%}.proof.mini-quotes{padding:25px 6% 15px}.testimonials{padding:60px 6%}.closing{padding-block:65px}}
body{background:#080a0c}main{background:#090c0e}header{background:#0b0e10}.hero{background:radial-gradient(ellipse at 18% 0,#26313970,transparent 58%),radial-gradient(ellipse at 85% 70%,#17272a55,transparent 55%),#0a0e11}.hero h1 em{color:#fff}.course-name{color:#dbe4e8}.hero-badge{background:#ffffff0a;border-color:#ffffff20}.hero .hero-badge{background:#ffffff0a;border-color:#ffffff20}.hero .lead{color:#b5c0c7}.hero-location{color:#e4e9ec}.hero-location small{color:#93a1aa}.registration-deadline{color:#c7d5cc}.tile{background:#171e23cc;color:#edf1f3}.orbit{border-color:#bdced230}.core{background:radial-gradient(circle at 25% 20%,#83959d,#384b55 37%,#15262e 68%,#080f14);box-shadow:inset -25px -30px 50px #03080d,0 0 90px #8cb7b018}.core span{color:#d9e3e8}.proof.mini-quotes{background:#090c0e}.mini-quotes figure,.mini-quotes figure:last-child{background:linear-gradient(135deg,#1a2025,#111619)}.support>div{background:linear-gradient(150deg,#1b2329,#11171c)}.support-icon{background:#ffffff09;color:#c2d4cc}.program{background:#0d1115}.lesson-exam{background:#1a2227}.all-testimonials{background:radial-gradient(ellipse at 0 15%,#29343c50,transparent 45%),radial-gradient(ellipse at 100% 65%,#1c2c3450,transparent 45%),#0a0e12}.testimonial-card{background:linear-gradient(135deg,#ffffff0a,#ffffff03)}.testimonial-card blockquote{color:#bbc6cd}.testimonial-card strong{color:#e7f1ec}.testimonial-card figcaption{color:#edf1f3}.book-section{background:#090d10}.book{background:linear-gradient(145deg,#2c3a42,#10191f);border-left-color:#43565d}.teacher{background:#10161b}.faq{background:#0b1014}.closing{background:radial-gradient(ellipse at 50% 130%,#35464d,#151e24 60%,#0b1014)}footer{background:#080b0e}:root{--muted:#a4b0b9;--ink:#f0f3f5}.big-copy{color:#e4eaee}
.button,.button.small{position:relative;background:#f5f5f3;color:#090c0e;border-radius:999px;padding:8px 8px 8px 27px;gap:22px;min-height:62px;font-size:15px;font-weight:700;box-shadow:0 0 0 5px #ffffff08,0 10px 30px #0004;transition:transform .25s,box-shadow .25s,background .25s}.registration-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex-shrink:0;border-radius:50%;background:#090c0e;color:#fff;overflow:hidden;transition:background .25s}.registration-icon svg{width:21px;height:21px;transition:transform .25s,color .25s}.button:hover,.button.small:hover{background:#fff;transform:translateY(-2px);box-shadow:0 0 0 6px #ffffff10,0 12px 35px #0005}.button:hover .registration-icon svg{animation:registration-nudge .5s ease;color:#91efbf}.button:active{transform:translateY(0)}.button.small{min-height:46px;padding:6px 6px 6px 19px;font-size:12px;gap:17px}.button.small .registration-icon{width:34px;height:34px}.button.small .registration-icon svg{width:17px;height:17px}@keyframes registration-nudge{0%,100%{transform:translate(0,0)}40%{transform:translate(3px,-3px)}70%{transform:translate(-1px,1px)}}@media(max-width:720px){.button{font-size:13px;padding-left:20px;gap:17px;min-height:56px}.registration-icon{width:40px;height:40px}.button.small{padding-left:15px;gap:10px}}@media(prefers-reduced-motion:reduce){.button,.registration-icon,.registration-icon svg{transition:none!important}.button:hover .registration-icon svg{animation:none}}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#c4d5dc0a 1px,transparent 1px),linear-gradient(90deg,#c4d5dc0a 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);pointer-events:none}.hero{background:radial-gradient(ellipse at 78% 50%,#273c4140,transparent 55%),#0a0e11}.robot-art{display:flex;align-items:center;justify-content:center;min-height:560px;position:relative}.robot-cat{position:relative;width:100%;max-width:510px;height:540px;object-fit:contain;z-index:1;filter:drop-shadow(0 20px 35px #0008)}.robot-glow{position:absolute;width:350px;height:350px;border-radius:50%;background:#76d7be16;filter:blur(65px);top:18%;left:17%}.robot-caption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:Manrope,sans-serif;font-size:9px;letter-spacing:1.4px;font-weight:600;color:#a7b8bb;display:flex;align-items:center;gap:8px;padding:11px 15px;border-radius:30px;background:#ffffff04}.robot-status{height:5px;width:5px;border-radius:50%;background:#96efc2;box-shadow:0 0 12px #96efc260}@media(max-width:720px){.robot-art{height:420px;min-height:420px}.robot-cat{height:400px;max-width:380px}.robot-caption{font-size:8px;letter-spacing:1px;bottom:0}.robot-glow{width:250px;height:250px}.hero:before{mask-image:linear-gradient(180deg,transparent 10%,#000 75%)}}
.pixel-cat{width:min(100%,480px);height:auto;image-rendering:pixelated;position:relative;z-index:1;filter:drop-shadow(0 20px 30px #0007);touch-action:pan-y}.robot-art{overflow:hidden}
@media(max-width:720px){header{padding-inline:5%;gap:12px}.brand{gap:9px}.brand-name{font-size:19px}.hero{padding:30px 5% 40px;gap:18px}.hero-copy{min-width:0}.hero h1{font-size:clamp(36px,10.8vw,49px);letter-spacing:-1.8px;line-height:1.1}.hero .course-name{font-size:clamp(22px,6.4vw,27px);line-height:1.3}.hero .lead{font-size:16px;line-height:1.7}.hero-actions{flex-wrap:wrap;gap:20px;margin-top:24px}.hero-actions .button{min-height:56px}.hero-location{align-items:start}.hero-location span{font-size:12px}.registration-deadline{font-size:12px}.section{padding:50px 5%}.section h2,.testimonials h2{font-size:clamp(29px,8.4vw,37px);letter-spacing:-1.1px}.big-copy{font-size:19px}.section-head{margin-bottom:25px}.support{padding-inline:5%;gap:16px}.support>div{padding:28px 22px}.support p{font-size:15px}.lesson-summary{grid-template-columns:27px minmax(0,1fr);gap:9px;padding:21px 0}.lesson h3{font-size:17px;line-height:1.4}.tagline{font-size:14px;line-height:1.65}.testimonial-card blockquote{font-size:15px}.testimonials{padding:50px 5%}.teacher-profile{flex-direction:column;align-items:flex-start}.teacher-photo{width:155px;height:190px}.teacher-profile h2{font-size:30px}.teacher-role{font-size:10px}.book{max-width:85vw}.closing{padding:55px 5%}.closing h2{font-size:37px}.closing .eyebrow{font-size:9px;line-height:1.8}footer{padding:25px 5%;gap:18px;flex-wrap:wrap}.robot-art{height:auto;min-height:0;padding-bottom:38px;overflow:visible}.robot-cat{width:100%;height:auto;max-height:370px;object-fit:contain}.robot-caption{font-size:8px;white-space:normal;text-align:center;width:max-content;max-width:95%;bottom:0}.robot-glow{max-width:75%;left:12%}.art:not(.robot-art){max-width:100%}.mini-quotes blockquote{font-size:16px}html{scroll-padding-top:90px}}
@media(max-width:380px){.brand-name{font-size:17px}.mark{font-size:29px}.button.small{font-size:11px;gap:8px;padding-left:12px}.hero-actions{gap:18px}.hero h1{font-size:37px}.teacher-profile{gap:20px}}
.robot-cat{image-rendering:pixelated;max-width:470px;filter:drop-shadow(0 20px 30px #0005)}@media(max-width:720px){.robot-cat{max-width:350px;max-height:350px}}
.robot-cat{image-rendering:auto;max-width:550px;height:540px;object-fit:contain;filter:drop-shadow(0 25px 45px #0006)}@media(max-width:720px){.robot-cat{height:auto;max-height:370px;max-width:100%}}
.robot-art{flex-direction:column;padding-bottom:0;min-height:0}.feature-marquee{width:100%;max-width:560px;position:relative;padding:18px 0 0;overflow:hidden}.feature-row{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);padding:6px 0}.feature-track{display:flex;width:max-content;animation:feature-scroll 36s linear infinite}.feature-row:last-child .feature-track{animation-direction:reverse;animation-duration:42s}.feature-group{display:flex;gap:9px;align-items:center;padding-right:9px;flex-shrink:0}.feature-pill{display:inline-flex;align-items:center;white-space:nowrap;padding:9px 14px;border:1px solid #ffffff14;border-radius:999px;background:#ffffff04;color:#aebdc4;font-size:12px;font-weight:500}.feature-pill:before{content:"";width:4px;height:4px;background:#91bfab;border-radius:50%;margin-right:8px}.feature-marquee:hover .feature-track,.feature-marquee:focus-within .feature-track,.feature-marquee.is-paused .feature-track{animation-play-state:paused}.marquee-toggle{display:block;margin-left:auto;margin-right:16px;padding:3px 7px;color:#899da6;border:0;background:transparent;font:10px DM Sans,sans-serif;cursor:pointer}.marquee-toggle:focus-visible{outline:2px solid #96efc2;outline-offset:3px}@keyframes feature-scroll{to{transform:translateX(-50%)}}@media(max-width:720px){.robot-art{padding-bottom:0}.feature-marquee{padding-top:10px;max-width:100%}.feature-pill{font-size:11px;padding:8px 12px}}@media(prefers-reduced-motion:reduce){.feature-track{animation:none}.marquee-toggle{display:none}.feature-row{mask-image:none;-webkit-mask-image:none}.feature-row .feature-track{width:100%}.feature-group{flex-wrap:wrap;justify-content:center;width:100%;padding-right:0}.feature-group[aria-hidden]{display:none}}
.hero{row-gap:32px;padding-bottom:45px}.hero>.feature-marquee{grid-column:1/-1;max-width:none;width:100%;padding-top:8px}.hero>.feature-marquee .feature-row{padding:9px 0;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.hero>.feature-marquee .feature-pill{font-size:14px;padding:12px 21px}.hero>.feature-marquee .feature-group{gap:13px;padding-right:13px}.hero>.feature-marquee .feature-track{animation-duration:48s}.hero>.feature-marquee .feature-row:last-child .feature-track{animation-duration:54s}.robot-art{align-self:center}.hero>.feature-marquee .marquee-toggle{margin-right:25px}@media(max-width:720px){.hero{row-gap:20px;padding-bottom:30px}.hero>.feature-marquee{padding-top:0}.hero>.feature-marquee .feature-pill{font-size:12px;padding:10px 16px}.hero>.feature-marquee .feature-group{gap:10px;padding-right:10px}}
.proof.mini-quotes{padding-top:25px;padding-bottom:15px;gap:20px}.mini-quotes figure,.mini-quotes figure:last-child{padding:20px 23px;gap:13px}.mini-quotes figure:before{font-size:34px;height:16px;line-height:1}.mini-quotes blockquote{min-height:0;font-size:15px;line-height:1.6;flex:1}.mini-quotes figcaption{margin-top:4px;font-size:12px}@media(max-width:720px){.proof.mini-quotes{padding-top:20px;gap:12px}.mini-quotes figure,.mini-quotes figure:last-child{padding:19px 21px;gap:12px}.mini-quotes blockquote{min-height:0;font-size:15px}}
.support>div{background:radial-gradient(ellipse at 0 0,#4ce3a51c,transparent 60%),linear-gradient(145deg,#ffffff08,#ffffff02),#11181c;box-shadow:inset 0 1px 0 #d5ffe815,0 12px 35px #00000015;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.support>div:nth-child(2){background:radial-gradient(ellipse at 100% 0,#4ce3a51c,transparent 60%),linear-gradient(145deg,#ffffff08,#ffffff02),#11181c}.support>div:nth-child(3){background:radial-gradient(ellipse at 100% 100%,#4ce3a51c,transparent 60%),linear-gradient(145deg,#ffffff08,#ffffff02),#11181c}.support-icon{background:#b3ffdb08;color:#bcdbcd;box-shadow:inset 0 1px 0 #ffffff08}
.testimonial-card{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 0 0,#63dfa313,transparent 62%),linear-gradient(135deg,#ffffff0a,#ffffff03);transition:transform .3s ease,box-shadow .3s ease}.testimonial-card:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 100% 0,#68ecad1f,transparent 65%);opacity:0;transition:opacity .35s ease;pointer-events:none}@media(hover:hover){.testimonial-card:hover{transform:translateY(-3px);background:radial-gradient(ellipse at 0 0,#63dfa313,transparent 62%),linear-gradient(135deg,#ffffff0a,#ffffff03);box-shadow:inset 0 1px 0 #a8f2cc20,0 12px 28px #00000020,0 0 22px #50d79506}.testimonial-card:hover:before{opacity:1}}@media(prefers-reduced-motion:reduce){.testimonial-card,.testimonial-card:before{transition:none}.testimonial-card:hover{transform:none}}
@media(min-width:721px) and (max-width:1050px){nav{gap:16px;font-size:12px}}
.charging-cursor svg{width:23px;height:23px}.cursor-base{fill:#ffffff0d;stroke:none}.cursor-outline{fill:none;stroke:#e9fff2;stroke-width:1.5}.cursor-charge{fill:#6aefac;transform-box:fill-box;transform-origin:center bottom;animation:cursor-fill 2.8s ease-in-out infinite}.button:hover .charging-cursor svg{animation:none;color:inherit;transform:rotate(-5deg)}.button.small .charging-cursor svg{width:19px;height:19px}@keyframes cursor-fill{0%,10%{transform:scaleY(0);opacity:1}70%,85%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}@media(prefers-reduced-motion:reduce){.cursor-charge{animation:none;transform:scaleY(.6)}.button:hover .charging-cursor svg{transform:none}}
.hero .hero-badge{padding:13px 22px;font-size:14px;letter-spacing:1.5px;border:1px solid #79f5b52b;background:linear-gradient(135deg,#5ee6a510,#5ee6a504);box-shadow:0 0 25px #4fea9f0c;color:#9bffca}.hero .hero-badge strong{font-weight:800;color:#91ffc2;text-shadow:0 0 9px #5fffaa60,0 0 22px #4ce99235}.hero .hero-badge .dot{width:8px;height:8px;background:#91ffc2;box-shadow:0 0 10px #66ffad80}@media(max-width:720px){.hero .hero-badge{padding:12px 20px;font-size:13px;letter-spacing:1.3px}}
.charging-cursor svg{transform:scaleX(-1)}.button:hover .charging-cursor svg{transform:scaleX(-1) rotate(-5deg)}@media(prefers-reduced-motion:reduce){.button:hover .charging-cursor svg{transform:scaleX(-1)}}
.robot-art{width:100%;overflow:visible}.robot-cat{width:118%;max-width:680px;height:600px;flex-shrink:0;align-self:center}.hero{column-gap:40px}@media(max-width:1050px) and (min-width:721px){.robot-cat{width:120%;height:550px;max-width:600px}}@media(max-width:720px){.robot-art{width:100%;padding-top:10px}.robot-cat{width:110%;max-width:480px;height:auto;max-height:440px}.hero{column-gap:0}}
.robot-art{min-height:0;gap:12px}.robot-cat{height:auto;aspect-ratio:1.35;max-height:480px;width:115%;max-width:660px}.hero-info-pills{display:grid;grid-template-columns:.8fr 1.4fr;gap:12px;width:100%;position:relative;z-index:2}.info-pill{display:flex;align-items:center;gap:12px;padding:15px 17px;border-radius:16px;background:linear-gradient(135deg,#ffffff08,#ffffff03);box-shadow:inset 0 1px 0 #ffffff0a;min-width:0}.info-pill small{display:block;font-size:8px;letter-spacing:1.2px;color:#91a49f;margin-bottom:6px}.info-pill strong{font-family:DM Sans,sans-serif;font-size:12px;font-weight:600;line-height:1.5;color:#e9f3ee;display:block}.info-icon{width:21px;height:25px;flex-shrink:0;color:#99ecc1;font-size:26px;line-height:1}.hero{align-items:center;row-gap:28px}@media(max-width:1050px) and (min-width:721px){.robot-cat{height:auto;max-height:430px}.info-pill{padding:13px 12px;gap:8px}.info-pill strong{font-size:11px}.info-pill small{font-size:7px}}@media(max-width:720px){.robot-cat{width:110%;height:auto;max-height:410px;aspect-ratio:1.35}.hero-info-pills{grid-template-columns:1fr;gap:10px}.info-pill{padding:14px 18px;border-radius:13px}.info-pill strong{font-size:13px}.info-pill small{font-size:9px}.robot-art{gap:14px}}
@media(min-width:721px){.hero{align-items:stretch}.hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.hero-actions{margin-top:auto;padding-top:25px;min-height:82px;align-items:center;width:100%}.robot-art{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:12px}.hero-info-pills{min-height:82px;align-items:stretch;margin-top:auto}.info-pill{min-height:82px}.robot-cat{flex:1;min-height:0;max-height:480px;object-fit:contain}}
@media(min-width:721px){.hero-actions{padding-top:0;margin-top:auto;min-height:82px}.hero .lead{margin-bottom:25px}}
.hero-info-pills{grid-template-columns:.75fr 1.5fr}.info-pill:first-child .info-icon{color:#ff8589;animation:deadline-pulse 2.2s ease-in-out infinite}.info-pill:last-child strong{white-space:nowrap}@keyframes deadline-pulse{0%,100%{opacity:.75;transform:scale(1);text-shadow:0 0 0 #ff6b7100}50%{opacity:1;transform:scale(1.12);text-shadow:0 0 12px #ff6b7155}}@media(max-width:720px){.hero-info-pills{grid-template-columns:1fr}.info-pill:last-child strong{white-space:normal}}@media(prefers-reduced-motion:reduce){.info-pill:first-child .info-icon{animation:none}}

/* Navigation link hover styling */
header nav {
    align-items: center;
    gap: 8px;
}
header nav a {
    position: relative;
    padding: 8px 14px;
    border-radius: 999px;
    color: #9cb0a8;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.1px;
    background: transparent;
    border: 1px solid transparent;
    transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
header nav a:hover {
    color: #f2faf6;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(106, 239, 172, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 14px rgba(106, 239, 172, 0.08);
}
header nav a:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.11);
}
@media (min-width: 721px) and (max-width: 1050px) {
    header nav {
        gap: 4px;
    }
    header nav a {
        padding: 6px 10px;
        font-size: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    header nav a {
        transition: none !important;
        transform: none !important;
    }
}

/* Custom stylish scrollbar (Webkit & Firefox) */
html {
    scrollbar-width: auto;
    scrollbar-color: #1e5942 #060a08;
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background: #060a08;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1d4d38 0%, #103325 50%, #0d281d 100%);
    border-radius: 999px;
    border: 3px solid #060a08;
    box-shadow: inset 0 0 6px rgba(106, 239, 172, 0.25);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #30c884 0%, #1ca366 50%, #126e45 100%);
    box-shadow: inset 0 0 10px rgba(106, 239, 172, 0.6), 0 0 12px rgba(106, 239, 172, 0.35);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #5ef2a9 0%, #2bd98a 100%);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.7), 0 0 16px rgba(106, 239, 172, 0.6);
}

::-webkit-scrollbar-corner {
    background: #060a08;
}

/* --- ENHANCED CTA BUTTON & LIVE CURSOR ANIMATION --- */

.button, .button.small {
    position: relative;
    isolation: isolate;
    background: #ffffff;
    color: #07130e;
    border-radius: 999px;
    padding: 7px 8px 7px 26px;
    gap: 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 26px rgba(0, 0, 0, 0.4), 0 0 25px rgba(22, 223, 139, 0.15);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    overflow: visible;
}

.button:before, .button.small:before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(22, 223, 139, 0.5), transparent 70%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
    filter: blur(8px);
}

/* Subtle continuous pulse on CTA to attract attention */
@keyframes cta-beacon {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(22, 223, 139, 0.3);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 8px rgba(22, 223, 139, 0);
    }
}

.button:not(:hover), .button.small:not(:hover) {
    animation: cta-beacon 3.2s ease-in-out infinite;
}

.button:hover, .button.small:hover {
    background: #ffffff;
    transform: translateY(-3px) scale(1.02);
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(22, 223, 139, 0.5), 0 14px 36px rgba(0, 0, 0, 0.55), 0 0 35px rgba(22, 223, 139, 0.4);
}

.button:hover:before, .button.small:hover:before {
    opacity: 1;
}

.button:active, .button.small:active {
    transform: translateY(-1px) scale(0.99);
}

/* Small header variant */
.button.small {
    min-height: 44px;
    padding: 5px 6px 5px 18px;
    font-size: 13px;
    gap: 12px;
}

/* Icon circle container */
.registration-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #172821, #08120d);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 8px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.button.small .registration-icon {
    width: 32px;
    height: 32px;
}

.button:hover .registration-icon,
.button.small:hover .registration-icon {
    background: radial-gradient(circle at 35% 30%, #0c2016, #040d08);
    border-color: rgba(22, 223, 139, 0.4);
    box-shadow: inset 0 1px 0 rgba(22, 223, 139, 0.3), 0 0 12px rgba(22, 223, 139, 0.35);
}

/* Lively cursor animation */
.registration-icon svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 4px rgba(22, 223, 139, 0.5));
    animation: live-cursor-glide 3s ease-in-out infinite;
    transform-origin: center center;
}

.button.small .registration-icon svg {
    width: 16px;
    height: 16px;
}

/* Cursor path and fill styling */
.cursor-base {
    fill: rgba(22, 223, 139, 0.15);
}
.cursor-outline {
    stroke: #16df8b;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cursor-charge {
    fill: #4affb4;
    filter: drop-shadow(0 0 3px #16df8b);
    animation: cursor-radar-pulse 2s ease-in-out infinite;
}

/* Continuous lively bobbing and subtle tilt */
@keyframes live-cursor-glide {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(1.5px, -1.5px) rotate(-4deg);
    }
    50% {
        transform: translate(0px, -2.5px) rotate(2deg);
    }
    75% {
        transform: translate(-1.5px, -1px) rotate(-2deg);
    }
}

@keyframes cursor-radar-pulse {
    0%, 100% {
        opacity: 0.85;
        transform: scale(0.92);
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

/* Energetic hover animation on cursor */
.button:hover .registration-icon svg,
.button.small:hover .registration-icon svg {
    animation: cursor-launch 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cursor-launch {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    35% {
        transform: translate(-3px, 3px) scale(0.85) rotate(-15deg);
    }
    70% {
        transform: translate(4px, -4px) scale(1.18) rotate(8deg);
    }
    100% {
        transform: translate(2px, -2px) scale(1.1) rotate(4deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .button:not(:hover), .button.small:not(:hover) {
        animation: none !important;
    }
    .registration-icon svg, .cursor-charge {
        animation: none !important;
    }
    .button:hover .registration-icon svg,
    .button.small:hover .registration-icon svg {
        animation: none !important;
        transform: translate(1px, -1px) scale(1.05);
    }
}

/* --- STYLISH HOVER FOR 'Istraži program ↓' & TEXT-LINKS --- */

.hero-actions .text-link,
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    color: #c9ded4;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.25s ease,
                border-color 0.25s ease,
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
    cursor: pointer;
    text-decoration: none;
}

.hero-actions .text-link:hover,
.text-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(106, 239, 172, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 16px rgba(22, 223, 139, 0.12);
}

.hero-actions .text-link:hover {
    /* Subtle arrow bounce when hovered */
    color: #e6fff3;
}

.hero-actions .text-link span,
.hero-actions .text-link:after {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-actions .text-link:active,
.text-link:active {
    transform: translateY(0) scale(0.98);
}

@media (max-width: 720px) {
    .hero-actions .text-link {
        font-size: 13px;
        padding: 10px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .text-link,
    .hero-actions .text-link {
        transition: none !important;
        transform: none !important;
    }
}

/* --- FAST CONTINUOUS BATTERY CHARGING FILL ANIMATION FOR CURSOR --- */

.charging-cursor .cursor-base {
    fill: rgba(22, 223, 139, 0.16);
}

.charging-cursor .cursor-outline {
    stroke: rgba(22, 223, 139, 0.4);
    stroke-width: 1.5;
    transition: stroke 0.25s ease;
}

.charging-cursor .cursor-charge {
    fill: #2df79e;
    transform-box: fill-box;
    transform-origin: center bottom;
    filter: drop-shadow(0 0 4px #16df8b) drop-shadow(0 0 8px rgba(74, 255, 180, 0.8));
    animation: cursor-battery-fast-fill 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.button:hover .charging-cursor .cursor-outline {
    stroke: #ffffff;
    stroke-width: 1.8;
}

.button:hover .charging-cursor .cursor-charge {
    animation-duration: 0.75s;
    fill: #61ffba;
    filter: drop-shadow(0 0 6px #16df8b) drop-shadow(0 0 12px #4affb4);
}

@keyframes cursor-battery-fast-fill {
    0% {
        transform: scaleY(0);
        opacity: 0.9;
    }
    60% {
        transform: scaleY(1);
        opacity: 1;
    }
    82% {
        transform: scaleY(1);
        opacity: 1;
    }
    100% {
        transform: scaleY(1);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .charging-cursor .cursor-charge {
        animation: none !important;
        transform: scaleY(0.85);
        opacity: 1;
    }
}

/* --- OPTION 1: LUMINOUS EMERALD / CYBER NEON CTA BUTTON --- */

.button, .button.small {
    background: linear-gradient(135deg, #38f8a6 0%, #16df8b 50%, #08b96d 100%);
    color: #031c12;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(22, 223, 139, 0.3),
                0 10px 28px rgba(0, 0, 0, 0.4),
                0 0 28px rgba(22, 223, 139, 0.4);
    font-weight: 800;
    letter-spacing: -0.2px;
}

.button:before, .button.small:before {
    background: radial-gradient(circle at center, rgba(45, 247, 158, 0.6), transparent 70%);
}

@keyframes cta-beacon {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3),
                    0 8px 24px rgba(0, 0, 0, 0.4),
                    0 0 20px rgba(22, 223, 139, 0.35);
    }
    50% {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6),
                    0 12px 32px rgba(0, 0, 0, 0.5),
                    0 0 42px rgba(22, 223, 139, 0.65);
    }
}

.button:hover, .button.small:hover {
    background: linear-gradient(135deg, #5effb8 0%, #29ee9b 50%, #10d37e 100%);
    color: #02140d;
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8),
                0 14px 40px rgba(0, 0, 0, 0.5),
                0 0 50px rgba(22, 223, 139, 0.7);
}

/* Icon badge inside emerald button */
.registration-icon {
    background: radial-gradient(circle at 35% 30%, #061910, #020a06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.button:hover .registration-icon,
.button.small:hover .registration-icon {
    background: radial-gradient(circle at 35% 30%, #0a2518, #030d07);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 16px rgba(45, 247, 158, 0.5);
}

/* --- OPTION 2: DARK GLASSMORPHISM WITH NEON PERIMETER HALO --- */

.button, .button.small {
    background: radial-gradient(ellipse at 50% 0%, rgba(22, 223, 139, 0.18), transparent 75%),
                linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
                #0d1512;
    color: #f2faf6;
    border: 1px solid rgba(45, 247, 158, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
                inset 0 -1px 0 rgba(0, 0, 0, 0.5),
                0 8px 25px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(22, 223, 139, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-weight: 700;
    letter-spacing: -0.1px;
}

.button:before, .button.small:before {
    background: radial-gradient(circle at center, rgba(45, 247, 158, 0.5), transparent 70%);
}

@keyframes cta-beacon {
    0%, 100% {
        border-color: rgba(45, 247, 158, 0.4);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
                    0 8px 24px rgba(0, 0, 0, 0.5),
                    0 0 16px rgba(22, 223, 139, 0.18);
    }
    50% {
        border-color: rgba(45, 247, 158, 0.85);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                    0 10px 30px rgba(0, 0, 0, 0.6),
                    0 0 32px rgba(22, 223, 139, 0.45);
    }
}

.button:hover, .button.small:hover {
    background: radial-gradient(ellipse at 50% 0%, rgba(22, 223, 139, 0.28), transparent 75%),
                linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
                #111d18;
    color: #ffffff;
    border-color: #5ef2a9;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                0 0 0 2px rgba(45, 247, 158, 0.35),
                0 14px 38px rgba(0, 0, 0, 0.6),
                0 0 36px rgba(22, 223, 139, 0.5);
}

/* Icon badge inside dark glass button */
.registration-icon {
    background: radial-gradient(circle at 35% 30%, #1a382b, #091711);
    border: 1px solid rgba(45, 247, 158, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 10px rgba(22, 223, 139, 0.2);
}

.button:hover .registration-icon,
.button.small:hover .registration-icon {
    background: radial-gradient(circle at 35% 30%, #24523d, #0c2016);
    border-color: rgba(45, 247, 158, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 18px rgba(45, 247, 158, 0.55);
}


/* --- V4 CLEAN POLISHED DESIGN: SUBTLE BORDER-RADIUS & NO GLOW EFFECTS --- */

/* Subtle border radii for buttons and subtle 1px crisp borders */
.button, .button.small {
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    outline: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    padding: 8px 10px 8px 20px !important;
    gap: 14px !important;
}

.button:hover, .button.small:hover {
    border-color: rgba(255, 255, 255, 0.32) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px) !important;
}

.button.small {
    border-radius: 6px !important;
    padding: 6px 8px 6px 14px !important;
    gap: 10px !important;
}

/* Icon container inside button - subtle rounded square */
.registration-icon {
    border-radius: 6px !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

.button.small .registration-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 5px !important;
}

.button:hover .registration-icon,
.button.small:hover .registration-icon {
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: none !important;
}

/* Navigation items - subtle radius */
header nav a {
    border-radius: 6px !important;
    box-shadow: none !important;
}
header nav a:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Text links / secondary buttons - subtle radius */
.hero-actions .text-link,
.text-link {
    border-radius: 6px !important;
    box-shadow: none !important;
}
.hero-actions .text-link:hover,
.text-link:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Hero badge and feature marquee pills - subtle radius */
.hero-badge,
.hero .hero-badge {
    border-radius: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.hero .hero-badge strong {
    text-shadow: none !important;
}
.hero .hero-badge .dot {
    box-shadow: none !important;
}
.feature-pill {
    border-radius: 6px !important;
}
.robot-caption {
    border-radius: 6px !important;
}
.robot-status {
    box-shadow: none !important;
}

/* Info pills in hero */
.info-pill {
    border-radius: 8px !important;
}

/* Mini quotes / proof cards */
.mini-quotes figure,
.mini-quotes figure:last-child {
    border-radius: 8px !important;
}

/* Testimonial cards */
.testimonial-card {
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
.testimonial-card:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Support cards and icon wrappers */
.support {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.support-card {
    padding: 32px 24px 28px;
    border-radius: 10px;
    background: #0f1512;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    text-align: center;
}
.support-card:hover {
    transform: translateY(-2px);
    background: #121a16;
    border-color: rgba(255, 255, 255, 0.14);
}
.support-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    margin: 0 auto 18px;
}
.icon-quiz {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.icon-video {
    background: rgba(56, 189, 248, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.2);
}
.icon-viber {
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.feature-icon-svg {
    width: 28px;
    height: 28px;
}
.support-card h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #f1f8f4;
    margin-bottom: 12px;
}
.support-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #9cb0a5;
    margin: 0;
}

/* Teacher photo subtle radius */
.teacher-photo {
    border-radius: 8px !important;
}

/* Lesson exam card subtle radius */
.lesson-exam {
    border-radius: 8px !important;
}

/* Scrollbar thumb subtle radius */
::-webkit-scrollbar-thumb {
    border-radius: 6px !important;
    box-shadow: none !important;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    box-shadow: none !important;
}

/* Remove glow filters from cursor */
.charging-cursor .cursor-charge {
    filter: none !important;
}
.button:hover .charging-cursor .cursor-charge {
    filter: none !important;
}
.button:before, .button.small:before {
    display: none !important;
}
.robot-glow {
    display: none !important;
}

/* 3D Real Book Cover Showcase */
.book-cover-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.real-book-cover {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1.55;
    object-fit: cover;
    border-radius: 6px;
    transform: rotateY(-12deg) rotateX(4deg) rotateZ(-2deg);
    box-shadow: 
        -18px 24px 45px rgba(0, 0, 0, 0.75),
        -4px 6px 15px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.book-section:hover .real-book-cover {
    transform: rotateY(-6deg) rotateX(2deg) rotateZ(-1deg) translateY(-6px);
    box-shadow: 
        -24px 32px 55px rgba(0, 0, 0, 0.85),
        -6px 8px 20px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(22, 223, 139, 0.3);
}

@media (max-width: 720px) {
    .real-book-cover {
        max-width: 260px;
        transform: rotateY(-8deg) rotateZ(-1deg);
    }
}

/* Book Section Download Box & Metadata */
.book-download-box {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.download-book-btn {
    padding: 14px 24px;
    font-size: 13.5px;
    letter-spacing: -0.2px;
    gap: 18px;
    background: linear-gradient(135deg, #38f8a6 0%, #16df8b 50%, #08b96d 100%);
    color: #031c12;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 24px rgba(22, 223, 139, 0.35);
    border-radius: 999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-book-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 32px rgba(22, 223, 139, 0.55);
}

.download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(3, 28, 18, 0.85);
    color: #16df8b;
}

.download-icon svg {
    width: 16px;
    height: 16px;
}

.book-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 12.5px;
    color: #a4b6ae;
    backdrop-filter: blur(8px);
}

.meta-tag strong {
    color: #ffffff;
    font-weight: 700;
}

@media (max-width: 720px) {
    .book-download-box {
        align-items: stretch;
    }
    .download-book-btn {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 720px) {
    .support {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Testimonial title styling */
.testimonial-title {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.3px;
    color: #4ade80;
    margin: 0 0 14px 0;
}

/* --- MATCH HEIGHT OF HERO ACTION BUTTONS & INFO PILLS --- */

/* Standardize hero button height */
.hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 58px !important;
}

.hero-actions .button {
    height: 58px !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 10px 0 22px !important;
}

.hero-actions .text-link {
    height: 58px !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 20px !important;
}

/* Info pills matching exact 58px button height */
.hero-info-pills {
    display: grid !important;
    grid-template-columns: 0.82fr 1.48fr !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 58px !important;
    align-items: stretch !important;
}

.info-pill {
    height: 58px !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.info-pill > span:last-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
}

.info-pill small {
    display: block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    margin-bottom: 3px !important;
    text-transform: uppercase !important;
}

.info-pill strong {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #d2e4dc !important;
    display: block !important;
    white-space: nowrap !important;
}

.info-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
}

@media (max-width: 1050px) and (min-width: 721px) {
    .hero-info-pills {
        grid-template-columns: 1fr 1.35fr !important;
        gap: 10px !important;
    }
    .info-pill {
        padding: 0 12px !important;
        gap: 10px !important;
    }
    .info-pill small {
        font-size: 8.5px !important;
    }
    .info-pill strong {
        font-size: 11.5px !important;
    }
}

@media (max-width: 720px) {
    .hero-actions {
        min-height: auto !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .hero-actions .button,
    .hero-actions .text-link {
        height: 52px !important;
        min-height: 52px !important;
        justify-content: center !important;
    }
    .hero-info-pills {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        min-height: auto !important;
    }
    .info-pill {
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 16px !important;
    }
    .info-pill strong {
        white-space: normal !important;
    }
}

/* Smanjen bedž BESPLATAN KURS */
.hero-badge,
.hero .hero-badge {
    padding: 7px 14px !important;
    font-size: 11px !important;
    letter-spacing: 1.3px !important;
    margin-bottom: 22px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
}

.hero-badge .dot,
.hero .hero-badge .dot {
    width: 6px !important;
    height: 6px !important;
    background: #4ade80 !important;
    box-shadow: none !important;
}

.hero-badge strong,
.hero .hero-badge strong {
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

@media (max-width: 720px) {
    .hero-badge,
    .hero .hero-badge {
        padding: 6px 12px !important;
        font-size: 10px !important;
        margin-bottom: 18px !important;
    }
}

/* --- CLEAN & ROBUST SUPPORT CARDS STYLING (FIX HOVER FOR ALL CARDS) --- */
.support {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    padding-bottom: 25px !important;
}

.support > div,
.support-card {
    background: #101713 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 32px 24px 28px !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    cursor: default !important;
}

.support > div:hover,
.support-card:hover {
    transform: translateY(-3px) !important;
    background: #141f19 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.support-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 8px !important;
    margin: 0 auto 18px !important;
    transition: transform 0.25s ease !important;
}

.support-card:hover .support-icon-wrapper {
    transform: scale(1.05) !important;
}

.icon-quiz {
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
}
.icon-video {
    background: rgba(56, 189, 248, 0.1) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}
.icon-viber {
    background: rgba(168, 85, 247, 0.1) !important;
    border: 1px solid rgba(168, 85, 247, 0.25) !important;
}

.feature-icon-svg {
    width: 28px !important;
    height: 28px !important;
}

.support-card h3 {
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.4px !important;
    color: #f1f8f4 !important;
    margin-bottom: 12px !important;
}

.support-card p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #9cb0a5 !important;
    margin: 0 !important;
}

@media (max-width: 720px) {
    .support {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* --- PRESTIGE SHOWCASE STYLING FOR ZAVRŠNI ISPIT + ZVANIČNI CERTIFIKAT --- */
#exam-cert-box {
    width: 100% !important;
    margin-top: 28px !important;
}

.lesson-exam-prestige {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #12241b 0%, #151e17 45%, #1c1e12 100%) !important;
    border: 1px solid rgba(234, 179, 8, 0.38) !important;
    border-radius: 14px !important;
    padding: 34px 38px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(254, 240, 138, 0.15) !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.lesson-exam-prestige:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(250, 204, 21, 0.65) !important;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(254, 240, 138, 0.25) !important;
}

.exam-prestige-body {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important;
    gap: 40px !important;
    align-items: center !important;
}

.exam-prestige-left {
    min-width: 0 !important;
}

.exam-prestige-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #facc15 !important;
    background: rgba(234, 179, 8, 0.12) !important;
    border: 1px solid rgba(234, 179, 8, 0.32) !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    margin-bottom: 14px !important;
}

.exam-badge-icon {
    width: 14px !important;
    height: 14px !important;
    color: #fde047 !important;
    flex-shrink: 0 !important;
}

.exam-prestige-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.8px !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.25 !important;
}

.exam-prestige-lead {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #b7cbbf !important;
    margin: 0 0 22px 0 !important;
}

.exam-features-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.exam-feat-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
}

.feat-bullet-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.feat-bullet-icon.gold-bullet {
    background: rgba(234, 179, 8, 0.16) !important;
    color: #fde047 !important;
}

.feat-bullet-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.feat-text {
    min-width: 0 !important;
}

.feat-text strong {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #f1f8f4 !important;
    margin-bottom: 3px !important;
    letter-spacing: -0.2px !important;
}

.feat-text p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #94a89d !important;
    margin: 0 !important;
}

/* Certificate Plaque Graphic */
.exam-prestige-right {
    min-width: 0 !important;
}

.certificate-plaque {
    position: relative !important;
    background: linear-gradient(145deg, #1b2f23 0%, #132219 50%, #0d1711 100%) !important;
    border: 1px solid rgba(234, 179, 8, 0.45) !important;
    border-radius: 10px !important;
    padding: 24px 26px !important;
    text-align: center !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(254, 240, 138, 0.08) !important;
}

.plaque-corner {
    position: absolute !important;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none !important;
}

.plaque-corner.top-left {
    top: 6px !important;
    left: 6px !important;
    border-top: 1.5px solid #eab308 !important;
    border-left: 1.5px solid #eab308 !important;
}

.plaque-corner.top-right {
    top: 6px !important;
    right: 6px !important;
    border-top: 1.5px solid #eab308 !important;
    border-right: 1.5px solid #eab308 !important;
}

.plaque-corner.bottom-left {
    bottom: 6px !important;
    left: 6px !important;
    border-bottom: 1.5px solid #eab308 !important;
    border-left: 1.5px solid #eab308 !important;
}

.plaque-corner.bottom-right {
    bottom: 6px !important;
    right: 6px !important;
    border-bottom: 1.5px solid #eab308 !important;
    border-right: 1.5px solid #eab308 !important;
}

.plaque-org {
    display: block !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    color: #fde047 !important;
    margin-bottom: 4px !important;
}

.plaque-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    color: #ffffff !important;
    margin: 0 0 3px 0 !important;
}

.plaque-sub {
    display: block !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    color: #a3c4b2 !important;
}

.plaque-divider {
    width: 50px !important;
    height: 1.5px !important;
    background: linear-gradient(90deg, transparent, #eab308, transparent) !important;
    margin: 12px auto !important;
}

.plaque-desc {
    font-size: 10.5px !important;
    color: #8fa598 !important;
    margin: 0 0 4px 0 !important;
}

.plaque-course-name {
    display: block !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #4ade80 !important;
    margin-bottom: 16px !important;
}

.plaque-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-top: 1px dashed rgba(234, 179, 8, 0.25) !important;
    padding-top: 14px !important;
    margin-top: 10px !important;
}

.plaque-stars {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.star-icon {
    width: 14px !important;
    height: 14px !important;
    color: #eab308 !important;
    opacity: 0.8 !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)) !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.star-icon.star-main {
    width: 18px !important;
    height: 18px !important;
    color: #fde047 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.4)) !important;
}

/* --- CLEAN PROGRAM LESSONS GRID & RESPONSIVE RULES --- */
#lessons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: repeat(6, auto) !important;
    grid-auto-flow: column !important;
    column-gap: 40px !important;
}

@media (max-width: 960px) {
    .exam-prestige-body {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .exam-features-grid {
        grid-template-columns: 1fr !important;
    }
    .lesson-exam-prestige {
        padding: 26px 22px !important;
    }
}

@media (max-width: 720px) {
    #lessons {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        grid-auto-flow: row !important;
        column-gap: 0 !important;
    }
    #exam-cert-box {
        margin-top: 18px !important;
    }
    .lesson-exam-prestige {
        padding: 20px 18px !important;
    }
    .exam-prestige-title {
        font-size: 21px !important;
    }
    .certificate-plaque {
        padding: 20px 16px !important;
    }
}

/* --- TESTIMONIALS CLEAN LEFT-ALIGNED HEADER (ONE COLUMN) --- */
.testimonials-header-single {
    max-width: 760px !important;
    margin-bottom: 40px !important;
    text-align: left !important;
}

.testimonials-header-single .eyebrow {
    margin-bottom: 16px !important;
}

.testimonials-header-single h2 {
    margin-bottom: 14px !important;
}

.testimonials-lead {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #9cb0a5 !important;
    margin: 0 !important;
}

/* --- PROGRAM CLEAN LEFT-ALIGNED HEADER (ONE COLUMN) --- */
.program-header-single {
    max-width: 760px !important;
    margin-bottom: 40px !important;
    text-align: left !important;
}

.program-header-single .eyebrow {
    margin-bottom: 16px !important;
}

.program-header-single h2 {
    margin-bottom: 14px !important;
}

.program-lead {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #9cb0a5 !important;
    margin: 0 !important;
}

/* Teacher story under profile on left */
.teacher-story {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: #b5c7bd !important;
    margin: 10px 0 18px 0 !important;
}

/* --- PERFECTLY BALANCED TEACHER SECTION LAYOUT & BASELINES --- */
.teacher {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 55px !important;
    align-items: stretch !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.teacher-profile {
    display: flex !important;
    align-items: stretch !important;
    gap: 28px !important;
    height: 100% !important;
}

.teacher-photo {
    width: 200px !important;
    min-width: 200px !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
}

.teacher-profile > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.teacher-profile .eyebrow {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
    color: #16df8b !important;
    margin: 0 0 10px 0 !important;
}

.teacher-profile h2 {
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -1.5px !important;
    color: #ffffff !important;
    margin: 0 0 8px 0 !important;
}

.teacher-role {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px !important;
    color: #4ade80 !important;
    margin: 0 0 12px 0 !important;
    text-transform: uppercase !important;
}

.linkedin-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4ade80 !important;
    margin-top: auto !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
    width: fit-content !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.linkedin-link:hover {
    background: rgba(34, 197, 94, 0.16) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    color: #86efac !important;
    transform: translateY(-1px) !important;
}

.linkedin-icon {
    background: #143826 !important;
    color: #4ade80 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.teacher > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
}

.teacher > div:last-child .big-copy {
    font-size: 21px !important;
    line-height: 1.6 !important;
    color: #edf5f0 !important;
    margin: 0 0 18px 0 !important;
}

.teacher > div:last-child p:not(.big-copy) {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    color: #9cb0a5 !important;
    margin: 0 0 20px 0 !important;
}

.teacher > div:last-child .text-link {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4ade80 !important;
    margin-top: auto !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    width: fit-content !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.teacher > div:last-child .text-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(74, 222, 128, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 1050px) {
    .teacher {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .teacher-profile {
        align-items: stretch !important;
        gap: 22px !important;
    }
    .teacher-photo {
        width: 180px !important;
        min-width: 180px !important;
    }
}

@media (max-width: 720px) {
    .teacher {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .teacher-profile {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px !important;
    }
    .teacher-photo {
        width: 140px !important;
        min-width: 140px !important;
        height: 180px !important;
        min-height: 180px !important;
    }
}

/* --- MOBILE HAMBURGER TOGGLE BUTTON & DRAWER MENU --- */
.mobile-nav-cta {
    display: none;
}

.menu-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
    padding: 0;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
    color: #eaf4ef;
    position: relative;
    z-index: 101;
    -webkit-tap-highlight-color: transparent;
}

.menu-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(22, 223, 139, 0.4);
}

.hamburger-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 14px;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: #eaf4ef;
    border-radius: 2px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background-color 0.25s ease;
}

/* Animated Hamburger to X */
.menu-toggle-btn.is-active {
    background: rgba(22, 223, 139, 0.16);
    border-color: rgba(22, 223, 139, 0.5);
}

.menu-toggle-btn.is-active .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
    background: #4ade80;
}

.menu-toggle-btn.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-toggle-btn.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    background: #4ade80;
}

@media (max-width: 720px) {
    header {
        z-index: 1000 !important;
    }
    
    .menu-toggle-btn {
        display: flex !important;
    }
    
    header nav {
        display: none !important;
    }
    
    header nav.is-open {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #091712 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: 1px solid rgba(22, 223, 139, 0.3) !important;
        padding: 20px 6% 24px !important;
        gap: 10px !important;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8) !important;
        z-index: 999 !important;
        animation: mobileNavFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }
    
    @keyframes mobileNavFade {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    header nav.is-open a:not(.button) {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 13px 18px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #eaf4ef !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        text-align: left !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    header nav.is-open a:not(.button):after {
        content: '→' !important;
        font-size: 14px !important;
        color: #16df8b !important;
        opacity: 0.7 !important;
    }
    
    header nav.is-open a:not(.button):hover,
    header nav.is-open a:not(.button):active {
        background: rgba(22, 223, 139, 0.12) !important;
        border-color: rgba(22, 223, 139, 0.35) !important;
        color: #4ade80 !important;
    }
    
    .mobile-nav-cta {
        display: block !important;
        width: 100% !important;
        margin-top: 6px !important;
        padding-top: 12px !important;
        border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
    }
    
    .mobile-nav-cta .button {
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 52px !important;
        font-size: 13.5px !important;
        padding: 0 16px !important;
    }
}

/* --- SOLUTION A: TESTIMONIALS ACCORDION / SHOW MORE --- */
.testimonials-more-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, margin 0.35s ease;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
}

.testimonials-more-wrap.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 23px;
}

.more-grid {
    min-height: 0;
    overflow: hidden;
}

.testimonials-toggle-bar {
    display: flex;
    justify-content: center;
    margin-top: 36px;
    position: relative;
    z-index: 5;
}

.testimonials-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(22, 223, 139, 0.08);
    border: 1px solid rgba(22, 223, 139, 0.35);
    color: #eaf4ef;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: all 0.25s ease;
}

.testimonials-toggle-btn:hover {
    background: rgba(22, 223, 139, 0.18);
    border-color: rgba(22, 223, 139, 0.6);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(22, 223, 139, 0.25);
}

.btn-chevron {
    font-size: 16px;
    color: #4ade80;
    transition: transform 0.3s ease;
}

.testimonials-toggle-btn.is-expanded .btn-chevron {
    transform: rotate(180deg);
}