{"id":30,"date":"2026-07-01T08:01:25","date_gmt":"2026-07-01T08:01:25","guid":{"rendered":"https:\/\/inquizlabs.com\/?page_id=30"},"modified":"2026-07-01T10:37:12","modified_gmt":"2026-07-01T10:37:12","slug":"home","status":"publish","type":"page","link":"https:\/\/inquizlabs.com\/","title":{"rendered":"Test"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Hero Section<\/title>\r\n <!-- Tabler Icons link for design elements -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@latest\/tabler-icons.min.css\">\r\n \r\n <style>\r\n :root {\r\n --teal: #159A98;\r\n --teal-deep: #0F6E70;\r\n --teal-ink: #06343A;\r\n --coral: #E8385A;\r\n --coral-deep: #B3243F;\r\n --amber: #E89A4C;\r\n --ink: #14201F;\r\n --paper: #FBF7F0;\r\n --cloud: #FFFFFF;\r\n --muted: #5E6A66;\r\n --line: rgba(15,110,112,0.15);\r\n --display: 'Fraunces', Georgia, serif;\r\n --body: 'Outfit', system-ui, sans-serif;\r\n --wrap: 1180px;\r\n }\r\n\r\n *{margin:0;padding:0;box-sizing:border-box}\r\n body{font-family:var(--body);color:var(--ink);background:var(--paper);overflow-x:hidden}\r\n .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}\r\n h1{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-0.02em}\r\n .eyebrow{font-family:var(--body);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-deep)}\r\n\r\n \/* Buttons Base Styling *\/\r\n .btn{font-family:var(--body);font-weight:600;font-size:.95rem;padding:.72em 1.5em;border-radius:100px;border:none;cursor:pointer;transition:transform .18s, box-shadow .18s, background .18s, color .18s;display:inline-flex;align-items:center;gap:.5em;text-decoration:none}\r\n \r\n .btn-primary{background:var(--coral);color:#fff;box-shadow:0 6px 20px rgba(232,56,90,.28)}\r\n .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(232,56,90,.36);color:#fff !important}\r\n \r\n \/* FIXED: Added Secondary Button & Color Hover Inversion *\/\r\n .btn-secondary {background: transparent; color: var(--teal-deep); border: 2px solid var(--teal-deep); box-shadow: none;}\r\n .btn-secondary:hover {background: var(--teal-deep); color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,110,112,0.15);}\r\n \r\n .btn:hover i{transform:translateX(4px);transition: transform 0.18s;}\r\n .btn-lg{font-size:1.02rem;padding:.88em 1.8em}\r\n\r\n \/* Animations *\/\r\n .reveal{opacity:0;transform:translateY(26px);animation: fadeInUp 0.7s cubic-bezier(.2,.7,.2,1) forwards;}\r\n @keyframes fadeInUp { to { opacity:1; transform:none; } }\r\n @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}\r\n @keyframes floatyB{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}\r\n @keyframes pulsering{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}\r\n\r\n \/* Hero Section Structure *\/\r\n .hero{position:relative;padding:84px 0 104px;overflow:hidden}\r\n .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}\r\n .hero h1{font-size:clamp(2.4rem, 4.8vw, 3.8rem);font-weight:600}\r\n .hero h1 .em{font-style:italic;color:var(--coral);font-weight:500}\r\n \r\n \/* Font size & spacing refinements *\/\r\n .hero .lead{font-size:1.1rem;color:var(--muted);margin:24px 0 32px;max-width:44ch;line-height:1.65;font-weight:400}\r\n .hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}\r\n .hero-note{font-size:.86rem;color:var(--muted);margin-top:24px;display:flex;align-items:center;gap:8px}\r\n .hero-note i{color:var(--teal)}\r\n\r\n \/* Price Tag Components *\/\r\n .price-tag{display:inline-flex;align-items:stretch;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 14px 36px -14px rgba(15,32,30,.2);border:1px solid var(--line)}\r\n .price-tag .pt-tab{background:var(--teal);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:13px 17px;line-height:1.25}\r\n .price-tag .pt-tab span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.94}\r\n .price-tag .pt-body{padding:11px 20px;display:flex;flex-direction:column;justify-content:center}\r\n .price-tag .pt-amt{font-family:var(--display);font-size:1.45rem;font-weight:600;color:var(--ink);line-height:1}\r\n .price-tag .pt-amt small{font-size:.86rem;color:var(--muted);font-weight:400;font-family:var(--body)}\r\n .price-tag .pt-sub{font-size:.78rem;color:var(--muted);margin-top:3px}\r\n .price-tag .pt-was{text-decoration:line-through;color:var(--muted);font-weight:400;font-size:1rem;opacity:.6;margin-right:4px}\r\n\r\n \/* Hero Visual Frame Setup *\/\r\n .hero-visual{position:relative;height:540px;border-radius:30px}\r\n .photo-frame{position:absolute;inset:0;border-radius:30px;overflow:hidden;box-shadow:0 34px 80px -30px rgba(15,52,58,.45)}\r\n .photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 30%}\r\n .photo-frame::after{content:\"\";position:absolute;inset:0;background:linear-gradient(150deg,rgba(21,154,152,.2) 0%,rgba(21,154,152,0) 42%,rgba(232,56,90,.1) 100%);mix-blend-mode:multiply}\r\n .photo-frame::before{content:\"\";position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(20,32,31,.35),transparent 44%)}\r\n \r\n .shape{position:absolute;border-radius:50%;z-index:3}\r\n .shape.s1{width:118px;height:118px;background:var(--coral);bottom:-30px;left:-30px;box-shadow:0 16px 40px rgba(232,56,90,.3);animation:floaty 6s ease-in-out infinite}\r\n .shape.s1::after{content:\"\";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;top:22px;left:24px}\r\n .shape.s2{width:58px;height:58px;background:var(--paper);border:7px solid var(--teal);top:-20px;right:54px;animation:pulsering 5s ease-in-out infinite}\r\n .shape.s3{width:30px;height:30px;background:var(--amber);top:34px;right:-12px;box-shadow:0 8px 22px rgba(0,0,0,.1);animation:floatyB 4.5s ease-in-out infinite}\r\n \r\n .pill{position:absolute;z-index:4;background:#fff;border-radius:100px;padding:11px 18px;display:flex;align-items:center;gap:9px;font-weight:600;font-size:.9rem;box-shadow:0 14px 36px -10px rgba(15,32,30,.25)}\r\n .pill i{font-size:1.05rem}\r\n .pill.p1{top:19%;left:-36px;animation:floaty 7s ease-in-out infinite}\r\n .pill.p1 i{color:var(--teal-deep)}\r\n .pill.p2{bottom:12%;right:-30px;animation:floatyB 6.5s ease-in-out infinite}\r\n .pill.p2 i{color:var(--coral)}\r\n \r\n .hero-bg-dot{position:absolute;border-radius:50%;opacity:.4;z-index:0}\r\n .hbd1{width:380px;height:380px;background:radial-gradient(circle,rgba(21,154,152,.12),transparent 70%);top:-120px;right:-80px;animation:floaty 12s ease-in-out infinite}\r\n .hbd2{width:300px;height:300px;background:radial-gradient(circle,rgba(232,56,90,.08),transparent 70%);bottom:-100px;left:-60px;animation:floatyB 14s ease-in-out infinite}\r\n\r\n \/* Responsive Settings *\/\r\n @media(max-width:992px){\r\n .hero-grid{grid-template-columns:1fr;gap:48px}\r\n .hero-visual{max-width:460px;margin:0 auto;width:100%;height:460px}\r\n .pill{font-size:.84rem;padding:10px 16px}\r\n .pill.p1{top:14px;left:10px}\r\n .pill.p2{bottom:14px;right:10px}\r\n }\r\n @media(max-width:480px){\r\n .hero-visual{height:380px}\r\n .hero-cta{flex-direction:column;align-items:stretch;gap:14px}\r\n .btn{justify-content:center}\r\n .price-tag{width:100%;justify-content:center}\r\n .pill{font-size:.78rem;padding:8px 12px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <header class=\"hero\">\r\n <div class=\"hero-bg-dot hbd1\"><\/div>\r\n <div class=\"hero-bg-dot hbd2\"><\/div>\r\n <div class=\"wrap hero-grid\">\r\n <!-- Left Side: Text and Content -->\r\n <div class=\"hero-content reveal\">\r\n <span class=\"eyebrow\">Academy of Applied Intelligence<\/span>\r\n <h1>The world is being rewritten by AI. <span class=\"em\">Become one of its <\/span>authors.<\/h1>\r\n <p class=\"lead\">The future of work is arriving fast. Whoever you are, wherever you\u2019re starting - this is where the fear of being left behind turns into the confidence of someone who builds. No code. No jargon. Just a clear path forward.<\/p>\r\n \r\n <div class=\"hero-cta\">\r\n <a href=\"#flagship\" class=\"btn btn-primary btn-lg\">Explore AI Mastery <i class=\"ti ti-arrow-right\"><\/i><\/a>\r\n <!-- FIXED: Added Missing Secondary Action Button with white text hover -->\r\n <a href=\"#how-it-works\" class=\"btn btn-secondary btn-lg\">Why it matters now<\/a>\r\n \r\n <div class=\"price-tag\">\r\n <div class=\"pt-tab\"><span>Summer 2026\r\n<\/span><b>cohort<\/b><\/div>\r\n <div class=\"pt-body\">\r\n <div class=\"pt-amt\"><span class=\"pt-was\">$699<\/span>$395 <small>USD<\/small><\/div>\r\n <div class=\"pt-sub\">or 4 easy payments of $98.75 USD \u00b7 includes everything\r\n<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-note\"><i class=\"ti ti-shield-check\"><\/i> Future-proof skills for teenagers and adults alike.\r\n<\/div>\r\n <\/div>\r\n \r\n <!-- Right Side: Graphic Visuals and Interactive Shapes -->\r\n <div class=\"hero-visual reveal\">\r\n <div class=\"photo-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/inquizlabs.com\/wp-content\/uploads\/2026\/07\/download-2.jpeg\" alt=\"Applied Intelligence Training\">\r\n <\/div>\r\n <div class=\"shape s1\"><\/div>\r\n <div class=\"shape s2\"><\/div>\r\n <div class=\"shape s3\"><\/div>\r\n <div class=\"pill p1\"><i class=\"ti ti-brain\"><\/i> Beginners welcome\r\n<\/div>\r\n <div class=\"pill p2\"><i class=\"ti ti-chart-dots\"><\/i> Real human experts\r\n<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-534705b e-con-full e-flex e-con e-parent\" data-id=\"534705b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe8b308 elementor-widget elementor-widget-html\" data-id=\"fe8b308\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- The Stakes \/ Conversation Section -->\r\n<section class=\"stakes-section\">\r\n <div class=\"wrap stakes-grid\">\r\n <!-- Left Content Block -->\r\n <div class=\"stakes-content\">\r\n <span class=\"stakes-eyebrow\">The Conversation in Every Home<\/span>\r\n <h2 class=\"stakes-heading\">\r\n \"How will my kids - and I - keep up in a world run by AI?\" \r\n <span class=\"stakes-highlight\">You're not alone in asking.<\/span>\r\n <\/h2>\r\n <p class=\"stakes-text\">\r\n It's the quiet worry at dinner tables everywhere. Jobs are shifting. The rules are being rewritten in real time. And it's easy to feel like the future is arriving faster than any of us can prepare for. That fear is real \u2013 and it deserves an honest, hopeful answer.\r\n <\/p>\r\n <div class=\"stakes-badge\">\r\n Take a breath. This is something you can get ahead of.\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Right Image Block -->\r\n <div class=\"stakes-visual\">\r\n <div class=\"stakes-image-wrapper\">\r\n <!-- Image placeholder matches the layout in image_c66b9c.jpg -->\r\n <img decoding=\"async\" src=\"https:\/\/inquizlabs.com\/wp-content\/uploads\/2026\/07\/download-3.jpeg\" alt=\"Family conversation or future outlook\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Combined CSS for this Section (Place inside your main <style> tag) -->\r\n<style>\r\n .stakes-section {\r\n background-color: #14201F; \/* Dark dark teal\/ink shade from screenshot *\/\r\n color: #FFFFFF;\r\n padding: 96px 0;\r\n overflow: hidden;\r\n }\r\n \r\n .stakes-grid {\r\n display: grid;\r\n grid-template-columns: 1.1fr 0.9fr;\r\n gap: 64px;\r\n align-items: center;\r\n }\r\n \r\n .stakes-eyebrow {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n font-weight: 600;\r\n font-size: 0.75rem;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n color: #159A98; \/* Bright teal eyebrow *\/\r\n display: block;\r\n margin-bottom: 16px;\r\n }\r\n \r\n .stakes-heading {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n font-weight: 700;\r\n font-size: clamp(2rem, 3.5vw, 2.8rem);\r\n line-height: 1.2;\r\n letter-spacing: -0.01em;\r\n color: #FFFFFF;\r\n margin-bottom: 24px;\r\n }\r\n \r\n .stakes-highlight {\r\n display: block;\r\n font-style: italic;\r\n color: #E8385A; \/* The coral\/pink color from screenshot *\/\r\n font-weight: 600;\r\n margin-top: 4px;\r\n }\r\n \r\n .stakes-text {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n font-size: 1.05rem;\r\n line-height: 1.65;\r\n color: #A3B3AF; \/* Muted text for readability over dark bg *\/\r\n max-width: 52ch;\r\n margin-bottom: 36px;\r\n }\r\n \r\n .stakes-badge {\r\n display: inline-block;\r\n border: 1px solid rgba(21, 154, 152, 0.35);\r\n background-color: rgba(21, 154, 152, 0.06);\r\n color: #49C5B6; \/* Light green\/teal tone text *\/\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n font-style: italic;\r\n font-size: 1.1rem;\r\n padding: 12px 28px;\r\n border-radius: 100px;\r\n }\r\n \r\n .stakes-visual {\r\n display: flex;\r\n justify-content: center;\r\n }\r\n \r\n .stakes-image-wrapper {\r\n width: 100%;\r\n max-width: 440px;\r\n height: 380px;\r\n border-radius: 24px; \/* Matches rounded corners in image *\/\r\n overflow: hidden;\r\n }\r\n \r\n .stakes-image-wrapper img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n \r\n \/* Responsive styling *\/\r\n @media (max-width: 992px) {\r\n .stakes-grid {\r\n grid-template-columns: 1fr;\r\n gap: 48px;\r\n }\r\n .stakes-text {\r\n max-width: 100%;\r\n }\r\n .stakes-image-wrapper {\r\n max-width: 100%;\r\n height: 400px;\r\n }\r\n }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9b02996 e-con-full e-flex e-con e-parent\" data-id=\"9b02996\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ccdb0c9 elementor-widget elementor-widget-html\" data-id=\"ccdb0c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Stats Banner Section -->\r\n<section class=\"stats-banner\">\r\n <div class=\"wrap stats-container\">\r\n <!-- Big Stat Number -->\r\n <div class=\"stats-number\">39%<\/div>\r\n \r\n <!-- Right Side Text Content -->\r\n <div class=\"stats-content\">\r\n <p class=\"stats-main-text\">\r\n of the skills your job needs today are set to change by 2030. The ones rising fastest? <span class=\"stats-highlight\">AI and technological literacy<\/span> \u2013 exactly what you\u2019ll build here.\r\n <\/p>\r\n <span class=\"stats-source\">WORLD ECONOMIC FORUM \u2022 FUTURE OF JOBS REPORT 2025<\/span>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Combined CSS for this Section (Place inside your main <style> tag) -->\r\n<style>\r\n .stats-banner {\r\n background-color: #116967; \/* Exact dark teal background from image_c673a1.png *\/\r\n color: #FFFFFF;\r\n padding: 64px 0;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .stats-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 40px;\r\n width: 100%;\r\n }\r\n\r\n .stats-number {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n font-size: clamp(4.5rem, 8vw, 7.5rem); \/* Huge prominent typography *\/\r\n font-weight: 500;\r\n line-height: 1;\r\n color: #A6E3DB; \/* Light cyan\/teal accent for the percentage *\/\r\n letter-spacing: -0.03em;\r\n }\r\n\r\n .stats-content {\r\n max-width: 540px; \/* Constrains text width like the image layout *\/\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .stats-main-text {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n font-size: clamp(1.1rem, 2vw, 1.35rem);\r\n font-weight: 500;\r\n line-height: 1.45;\r\n color: #FFFFFF;\r\n }\r\n\r\n .stats-highlight {\r\n color: #A6E3DB; \/* Light cyan highlight for key phrase *\/\r\n font-weight: 600;\r\n }\r\n\r\n .stats-source {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: rgba(255, 255, 255, 0.6); \/* Semi-transparent white for attribution *\/\r\n }\r\n\r\n \/* Responsive adjustments *\/\r\n @media (max-width: 768px) {\r\n .stats-container {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 20px;\r\n padding: 0 24px;\r\n }\r\n .stats-number {\r\n font-size: 5.5rem;\r\n }\r\n .stats-content {\r\n max-width: 100%;\r\n }\r\n }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b62f7bd e-con-full e-flex e-con e-parent\" data-id=\"b62f7bd\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-accab3c elementor-widget elementor-widget-html\" data-id=\"accab3c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- The Shift Section (Pixel-Perfect Typography Matching) -->\r\n<section class=\"shift-section\">\r\n <div class=\"wrap shift-grid\">\r\n <!-- Left Content Side -->\r\n <div class=\"shift-content\">\r\n <span class=\"shift-eyebrow\">The Shift That Changes Everything<\/span>\r\n <h2 class=\"shift-heading\">\r\n The people who thrive in this new world won't be the ones who <span class=\"coral-txt\">feared<\/span> AI. They'll be the ones who learned to <span class=\"coral-txt\">master<\/span> it.\r\n <\/h2>\r\n <p class=\"shift-text\">\r\n AI isn't the threat. Being unprepared is. And preparation is something you can actually do something about - starting now, without a technical bone in your body. INQUIZ exists to turn that anxious feeling into genuine, hands-on capability - for your teenager, or for you.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Right Image Side -->\r\n <div class=\"shift-visual\">\r\n <div class=\"shift-image-container\">\r\n <img decoding=\"async\" src=\"https:\/\/inquizlabs.com\/wp-content\/uploads\/2026\/07\/download-4.jpeg\" alt=\"Person thriving with capability\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Recalibrated CSS for Exact Match to image_c6827f.jpg -->\r\n<style>\r\n .shift-section {\r\n background-color: #f2ebdd;\r\n color: #14201F;\r\n padding: 120px 0; \/* Generous breathing space around the element *\/\r\n }\r\n\r\n .shift-grid {\r\n display: grid;\r\n grid-template-columns: 1.05fr 0.95fr; \/* Perfectly balanced half-split *\/\r\n gap: 84px; \/* Gives the classic spacious layout feel *\/\r\n align-items: center;\r\n }\r\n\r\n .shift-content {\r\n max-width: 520px; \/* Constrains the entire text block tightly like the original *\/\r\n }\r\n\r\n .shift-eyebrow {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n font-weight: 700;\r\n font-size: 0.68rem; \/* Extremely small and sophisticated tracking *\/\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n color: #0F6E70;\r\n display: block;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .shift-heading {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n font-weight: 500; \r\n font-size: 2rem; \/* Significantly reduced size to fix the giant text issue *\/\r\n line-height: 1.35; \/* Relaxed line-height so text can breath perfectly *\/\r\n letter-spacing: -0.01em;\r\n color: #14201F;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .shift-heading .coral-txt {\r\n color: #E8385A;\r\n font-style: italic;\r\n font-weight: 400; \/* Keeps the italic elegance slender *\/\r\n }\r\n\r\n .shift-text {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n font-weight: 400;\r\n font-size: 0.92rem; \/* Clean, modern, crisp small body copy *\/\r\n line-height: 1.7; \/* Perfectly readable long line tracking *\/\r\n color: #5E6A66;\r\n }\r\n\r\n .shift-visual {\r\n display: flex;\r\n justify-content: flex-end;\r\n }\r\n\r\n .shift-image-container {\r\n width: 100%;\r\n max-width: 440px; \/* Snaps the image proportions precisely *\/\r\n height: 330px;\r\n border-radius: 20px; \/* Subtle soft rounded edges *\/\r\n overflow: hidden;\r\n box-shadow: 0 20px 50px -15px rgba(20, 32, 31, 0.12);\r\n }\r\n\r\n .shift-image-container img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n \/* Responsive adjustments *\/\r\n @media (max-width: 992px) {\r\n .shift-grid { grid-template-columns: 1fr; gap: 48px; }\r\n .shift-content { max-width: 100%; }\r\n .shift-visual { justify-content: center; }\r\n .shift-image-container { max-width: 100%; height: 360px; }\r\n }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-77e11a1 e-con-full e-flex e-con e-parent\" data-id=\"77e11a1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd37ffb elementor-widget elementor-widget-html\" data-id=\"fd37ffb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- The Promise & Features Section -->\r\n<section class=\"promise-section-unique\">\r\n <div class=\"wrap\">\r\n \r\n <!-- Top Split Layout -->\r\n <div class=\"promise-top-grid\">\r\n <!-- Left Image Side -->\r\n <div class=\"promise-visual-box\">\r\n <div class=\"promise-image-container\">\r\n <img decoding=\"async\" src=\"https:\/\/inquizlabs.com\/wp-content\/uploads\/2026\/07\/download-5.jpeg\" alt=\"INQUIZ capability close-up\">\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- Right Content Side -->\r\n <div class=\"promise-content-box\">\r\n <span class=\"promise-eyebrow\">The INQUIZ Promise<\/span>\r\n <h2 class=\"promise-heading\">\r\n You don't need to be technical. You need to begin.\r\n <\/h2>\r\n <p class=\"promise-lead-text\">\r\n INQUIZ Labs is where curious, capable people - teens and adults alike - learn to actually use AI: to create, to build, and to stay ahead. No gatekeeping. Just a calm, clear path from \"I'm worried\" to \"I've got this.\"\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Bottom 3-Card Grid Layout -->\r\n <div class=\"promise-cards-grid\">\r\n <!-- Card 1 -->\r\n <div class=\"promise-card\">\r\n <div class=\"card-icon-box icon-teal\"><\/div>\r\n <h3 class=\"card-title\">Future-proof, not fearful<\/h3>\r\n <p class=\"card-text\">Turn AI anxiety into a genuine edge. The skills here are exactly the ones tomorrow's work will reward - learned calmly, step by step.<\/p>\r\n <\/div>\r\n\r\n <!-- Card 2 -->\r\n <div class=\"promise-card\">\r\n <div class=\"card-icon-box icon-pink\"><\/div>\r\n <h3 class=\"card-title\">Two free tools, that's it<\/h3>\r\n <p class=\"card-text\">No sprawling toolkit, no costs to fear. You'll go from zero to a real, shipped AI project using just two free tools, learned deeply.<\/p>\r\n <\/div>\r\n\r\n <!-- Card 3 -->\r\n <div class=\"promise-card\">\r\n <div class=\"card-icon-box icon-amber\"><\/div>\r\n <h3 class=\"card-title\">Leave with something real<\/h3>\r\n <p class=\"card-text\">Not a certificate of attendance - a working AI project built with your own hands, and the confidence to keep building.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Completely Isolated CSS (Zero conflict with other elements) -->\r\n<style>\r\n .promise-section-unique {\r\n background-color: #FBF7F0;\r\n color: #14201F;\r\n padding: 100px 0;\r\n overflow: hidden;\r\n }\r\n\r\n \/* --- Top Layout Grid --- *\/\r\n .promise-top-grid {\r\n display: grid;\r\n grid-template-columns: 0.95fr 1.05fr;\r\n gap: 64px;\r\n align-items: center;\r\n margin-bottom: 64px;\r\n }\r\n\r\n .promise-content-box {\r\n max-width: 540px;\r\n }\r\n\r\n .promise-eyebrow {\r\n font-family: 'Outfit', sans-serif;\r\n display: block;\r\n color: #0F6E70;\r\n margin-bottom: 16px;\r\n font-size: 0.68rem;\r\n font-weight: 700;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* FIXED: Forced absolute upright\/normal formatting to kill italic font overriding *\/\r\n .promise-heading {\r\n font-family: 'Fraunces', Georgia, serif !important;\r\n font-style: normal !important;\r\n font-synthesis: none !important;\r\n line-height: 1.25;\r\n color: #14201F;\r\n margin-bottom: 24px;\r\n font-size: 3rem;\r\n font-weight: 600;\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .promise-lead-text {\r\n font-family: 'Outfit', sans-serif;\r\n color: #5E6A66;\r\n line-height: 1.65;\r\n font-size: 0.92rem;\r\n font-weight: 400;\r\n }\r\n\r\n .promise-visual-box {\r\n display: flex;\r\n justify-content: flex-start;\r\n }\r\n\r\n .promise-image-container {\r\n width: 100%;\r\n max-width: 420px;\r\n height: 320px;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n box-shadow: 0 16px 40px -12px rgba(20, 32, 31, 0.1);\r\n }\r\n \r\n .promise-image-container img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.4s cubic-bezier(.2, .7, .2, 1);\r\n }\r\n\r\n .promise-image-container:hover img {\r\n transform: scale(1.04);\r\n }\r\n\r\n \/* --- Bulletproof 3-Cards Grid Layout --- *\/\r\n .promise-cards-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* Safe, forced visible card containers *\/\r\n .promise-section-unique .promise-card {\r\n background-color: #FFFFFF !important;\r\n border-radius: 20px !important;\r\n padding: 40px 32px !important;\r\n box-shadow: 0 4px 20px rgba(20, 32, 31, 0.015) !important;\r\n display: flex !important;\r\n flex-direction: column !important;\r\n align-items: flex-start !important;\r\n opacity: 1 !important;\r\n visibility: visible !important;\r\n transform: translateY(0) !important;\r\n border: none !important;\r\n transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), box-shadow 0.35s cubic-bezier(.2, .7, .2, 1) !important;\r\n }\r\n\r\n \/* Smooth Floating Hover Animation & Soft Shadow Display *\/\r\n .promise-section-unique .promise-card:hover {\r\n transform: translateY(-8px) !important; \r\n box-shadow: 0 24px 48px -12px rgba(15, 110, 112, 0.08) !important; \r\n }\r\n\r\n \/* Pastel Boxes Inside Cards *\/\r\n .card-icon-box {\r\n width: 52px !important;\r\n height: 52px !important;\r\n border-radius: 14px !important;\r\n margin-bottom: 24px !important;\r\n display: block !important;\r\n visibility: visible !important;\r\n transition: transform 0.3s cubic-bezier(.2, .7, .2, 1);\r\n }\r\n \r\n .promise-card:hover .card-icon-box {\r\n transform: scale(1.06) rotate(3deg);\r\n }\r\n \r\n .icon-teal { background-color: #E2F3F0 !important; }\r\n .icon-pink { background-color: #FCE8EC !important; }\r\n .icon-amber { background-color: #FBF0E3 !important; }\r\n\r\n \/* FIXED: Forced absolute upright\/normal formatting to kill italic font overriding on card titles *\/\r\n .promise-card .card-title {\r\n font-family: 'Fraunces', Georgia, serif !important;\r\n font-style: normal !important;\r\n font-synthesis: none !important;\r\n color: #14201F !important;\r\n display: block !important;\r\n visibility: visible !important;\r\n opacity: 1 !important;\r\n margin: 0 0 12px 0 !important;\r\n line-height: 1.3 !important;\r\n font-size: 1.15rem !important;\r\n font-weight: 600;\r\n }\r\n\r\n .promise-card .card-text {\r\n font-family: 'Outfit', sans-serif !important;\r\n color: #5E6A66 !important;\r\n display: block !important;\r\n visibility: visible !important;\r\n opacity: 1 !important;\r\n line-height: 1.6 !important;\r\n margin: 0 !important;\r\n font-size: 0.86rem !important;\r\n font-weight: 400 !important;\r\n }\r\n\r\n \/* Responsive adjustments *\/\r\n @media (max-width: 992px) {\r\n .promise-top-grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px;}\r\n .promise-cards-grid { grid-template-columns: 1fr; gap: 20px; }\r\n .promise-visual-box { justify-content: center; }\r\n .promise-image-container { max-width: 100%; height: 340px; }\r\n }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9c72e9d e-con-full e-flex e-con e-parent\" data-id=\"9c72e9d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ba0a63 elementor-widget elementor-widget-html\" data-id=\"6ba0a63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- The Timeline \/ Phases Section (Fully Updated & Fixed) -->\r\n<section class=\"phases-section\">\r\n <div class=\"wrap phases-grid\">\r\n \r\n <!-- Left Side: Interactive Graphic Card with Overlays -->\r\n <div class=\"phases-visual reveal-on-scroll\">\r\n <div class=\"phases-card-wrapper\">\r\n <img decoding=\"async\" src=\"https:\/\/inquizlabs.com\/wp-content\/uploads\/2026\/07\/download-9.jpeg\" alt=\"Proof you are ready\">\r\n <div class=\"phases-card-overlay\">\r\n <span class=\"card-eyebrow\">What you'll walk away with<\/span>\r\n <h3 class=\"card-heading\">Proof you're ready for what's next.<\/h3>\r\n <p class=\"card-desc\">By week eight, you'll have designed, built, and shipped a real AI agent - and presented it live. It's not just knowledge. It's tangible evidence that you (or your teen) can thrive in the age of AI.<\/p>\r\n <div class=\"card-dot\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Right Side: Five Phases Timeline List -->\r\n <div class=\"phases-content reveal-on-scroll\" style=\"animation-delay: 0.15s;\">\r\n <span class=\"phases-eyebrow\">A Clear Path, Five Phases<\/span>\r\n <h2 class=\"phases-main-heading\">From anxious to capable, one step at a time.<\/h2>\r\n \r\n <div class=\"timeline-list\">\r\n <!-- Step 1 -->\r\n <div class=\"timeline-item\">\r\n <div class=\"step-number\">1<\/div>\r\n <div class=\"step-details\">\r\n <h4 class=\"step-title\">Spark<\/h4>\r\n <p class=\"step-text\">Understand AI without the hype, set up your tools, and choose your project.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Step 2 -->\r\n <div class=\"timeline-item\">\r\n <div class=\"step-number\">2<\/div>\r\n <div class=\"step-details\">\r\n <h4 class=\"step-title\">Talk to AI<\/h4>\r\n <p class=\"step-text\">Master prompting - the single most valuable skill in all of AI.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Step 3 -->\r\n <div class=\"timeline-item\">\r\n <div class=\"step-number\">3<\/div>\r\n <div class=\"step-details\">\r\n <h4 class=\"step-title\">Make things<\/h4>\r\n <p class=\"step-text\">Create images, words, and media with AI as your creative partner.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Step 4 -->\r\n <div class=\"timeline-item\">\r\n <div class=\"step-number\">4<\/div>\r\n <div class=\"step-details\">\r\n <h4 class=\"step-title\">Build & ship<\/h4>\r\n <p class=\"step-text\">Design and build your AI agent, then test it and ship it for real.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Step 5 -->\r\n <div class=\"timeline-item\">\r\n <div class=\"step-number\">5<\/div>\r\n <div class=\"step-details\">\r\n <h4 class=\"step-title\">Launch yourself<\/h4>\r\n <p class=\"step-text\">Showcase the AI agent you shipped, and plan your next steps with confidence.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- Updated CSS with Row Hover BG Effect & Font Control Comments -->\r\n<style>\r\n .phases-section {\r\n background-color: #FBF7F0; \/* Cream background from image_c6e39e.jpg *\/\r\n color: #14201F;\r\n padding: 110px 0;\r\n }\r\n\r\n .phases-grid {\r\n display: grid;\r\n grid-template-columns: 0.9fr 1.1fr;\r\n gap: 80px;\r\n align-items: center;\r\n }\r\n\r\n \/* --- ANIMATION FLOW --- *\/\r\n @keyframes fadeInUpPhases {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(26px);\r\n animation: fadeInUpPhases 0.8s cubic-bezier(.2, .7, .2, 1) forwards;\r\n }\r\n\r\n \/* Left Side Card Layout *\/\r\n .phases-visual {\r\n display: flex;\r\n justify-content: flex-start;\r\n }\r\n\r\n .phases-card-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 440px;\r\n height: 480px;\r\n border-radius: 28px;\r\n overflow: hidden;\r\n box-shadow: 0 24px 64px -14px rgba(20, 32, 31, 0.15);\r\n transition: transform 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n\r\n .phases-card-wrapper:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 30px 70px -10px rgba(20, 32, 31, 0.2);\r\n }\r\n\r\n .phases-card-wrapper img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n \/* Text Overlay inside image container (Fixed White Colors) *\/\r\n .phases-card-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to top, rgba(15, 52, 58, 0.95) 20%, rgba(15, 52, 58, 0.75) 60%, rgba(0,0,0,0.2) 100%);\r\n padding: 40px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n }\r\n\r\n .phases-card-overlay .card-eyebrow {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n display: block;\r\n margin-bottom: 12px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.14em;\r\n color: #FFFFFF !important; \/* Fixed White Color *\/\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.65rem; \/* Size change karne ke liye *\/\r\n font-weight: 700; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n .phases-card-overlay .card-heading {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n line-height: 1.2;\r\n margin-bottom: 18px;\r\n color: #FFFFFF !important; \/* Fixed White Color *\/\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 1.85rem; \/* Size change karne ke liye *\/\r\n font-weight: 600; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n .phases-card-overlay .card-desc {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n line-height: 1.6;\r\n color: #FFFFFF !important; \/* Fixed White Color *\/\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.84rem; \/* Size change karne ke liye *\/\r\n font-weight: 400; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n .card-dot {\r\n position: absolute;\r\n bottom: 36px;\r\n right: 36px;\r\n width: 16px;\r\n height: 16px;\r\n background-color: #E8385A;\r\n border-radius: 50%;\r\n }\r\n\r\n \/* Right Side Typography Elements *\/\r\n .phases-eyebrow {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n display: block;\r\n color: #0F6E70;\r\n margin-bottom: 14px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.14em;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.68rem; \/* Size change karne ke liye *\/\r\n font-weight: 700; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n .phases-main-heading {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n color: #14201F;\r\n line-height: 1.25;\r\n margin-bottom: 40px;\r\n max-width: 24ch;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 2.15rem; \/* Size change karne ke liye *\/\r\n font-weight: 600; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n \/* Timeline List Layout *\/\r\n .timeline-list {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .timeline-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 24px;\r\n padding: 20px 0;\r\n border-bottom: 1px solid rgba(15, 110, 112, 0.12);\r\n transition: padding-left 0.3s cubic-bezier(.2, .7, .2, 1);\r\n }\r\n \r\n .timeline-item:hover {\r\n padding-left: 6px;\r\n }\r\n\r\n .timeline-item:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n \/* --- FIXED: ROW HOVER ON NUMBER BOX BACKGROUND --- *\/\r\n .step-number {\r\n background-color: #F1EAE0; \/* Default standard state background *\/\r\n color: #0F6E70;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n transition: background-color 0.25s ease, transform 0.25s ease;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.95rem; \/* Size change karne ke liye *\/\r\n font-weight: 600; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n \/* Jab poori row (.timeline-item) par hover hoga, tab is box ka bg badlega *\/\r\n .timeline-item:hover .step-number {\r\n background-color: #E2F3F0 !important; \/* Light pastel teal background match on hover *\/\r\n transform: scale(1.05);\r\n }\r\n\r\n .step-details {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n }\r\n\r\n .step-title {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n color: #14201F;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 1.05rem; \/* Size change karne ke liye *\/\r\n font-weight: 600; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n .step-text {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n color: #5E6A66;\r\n line-height: 1.5;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.86rem; \/* Size change karne ke liye *\/\r\n font-weight: 400; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n @media (max-width: 992px) {\r\n .phases-grid { grid-template-columns: 1fr; gap: 48px; }\r\n .phases-visual { justify-content: center; }\r\n .phases-card-wrapper { max-width: 100%; height: 440px; }\r\n }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-22bab18 e-con-full e-flex e-con e-parent\" data-id=\"22bab18\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b07c6f elementor-widget elementor-widget-html\" data-id=\"3b07c6f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- The Faces \/ Testimonials Section (Fixed Border & Shadow) -->\r\n<section class=\"faces-section\">\r\n <div class=\"wrap\">\r\n \r\n <!-- Center Headings Block -->\r\n <div class=\"faces-header reveal-on-scroll\">\r\n <span class=\"faces-eyebrow\">This is what future-proof looks like<\/span>\r\n <h2 class=\"faces-main-title\">The faces of getting ahead.<\/h2>\r\n <p class=\"faces-subtitle\">From nervous beginners to confident builders - the learners INQUIZ is built for.<\/p>\r\n <\/div>\r\n\r\n <!-- 3-Card Interactive Grid Layout -->\r\n <div class=\"faces-grid\">\r\n \r\n <!-- Card 1 -->\r\n <div class=\"face-card reveal-on-scroll\" style=\"animation-delay: 0.1s;\">\r\n <div class=\"face-image-holder\">\r\n <img decoding=\"async\" src=\"https:\/\/inquizlabs.com\/wp-content\/uploads\/2026\/07\/download-6.jpeg\" alt=\"Learner profile 1\">\r\n <\/div>\r\n <div class=\"face-card-body\">\r\n <!-- FIXED: Removed default italic formatting -->\r\n <blockquote class=\"face-quote\">\"I stopped fearing AI and started using it.\"<\/blockquote>\r\n <span class=\"face-author-tag\">The career-changer, staying ahead<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Card 2 -->\r\n <div class=\"face-card reveal-on-scroll\" style=\"animation-delay: 0.2s;\">\r\n <div class=\"face-image-holder\">\r\n <img decoding=\"async\" src=\"https:\/\/inquizlabs.com\/wp-content\/uploads\/2026\/07\/download-7.jpeg\" alt=\"Learner profile 2\">\r\n <\/div>\r\n <div class=\"face-card-body\">\r\n <!-- FIXED: Removed default italic formatting -->\r\n <blockquote class=\"face-quote\">\"My first AI project - and it actually works.\"<\/blockquote>\r\n <span class=\"face-author-tag\">The teen, future-proofing early<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Card 3 -->\r\n <div class=\"face-card reveal-on-scroll\" style=\"animation-delay: 0.3s;\">\r\n <div class=\"face-image-holder\">\r\n <img decoding=\"async\" src=\"https:\/\/inquizlabs.com\/wp-content\/uploads\/2026\/07\/download-8.jpeg\" alt=\"Learner profile 3\">\r\n <\/div>\r\n <div class=\"face-card-body\">\r\n <!-- FIXED: Removed default italic formatting -->\r\n <blockquote class=\"face-quote\">\"No code, no jargon. I finally get it.\"<\/blockquote>\r\n <span class=\"face-author-tag\">The parent, learning alongside<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CSS with Fixed Soft Shadow & Non-Italic Quotes -->\r\n<style>\r\n .faces-section {\r\n background-color: #f2ebdd; \/* Perfect soft cream background *\/\r\n color: #14201F;\r\n padding: 100px 0;\r\n }\r\n\r\n \/* --- SCROLL REVEAL ANIMATION ENGINE --- *\/\r\n @keyframes fadeInUpFaces {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: fadeInUpFaces 0.8s cubic-bezier(.2, .7, .2, 1) forwards;\r\n }\r\n\r\n \/* Top Centered Header Style *\/\r\n .faces-header {\r\n text-align: center;\r\n margin-bottom: 56px;\r\n }\r\n\r\n .faces-eyebrow {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n display: block;\r\n color: #0F6E70;\r\n margin-bottom: 16px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.14em;\r\n font-size: 0.68rem; \r\n font-weight: 700; \r\n }\r\n\r\n .faces-main-title {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n color: #14201F;\r\n line-height: 1.2;\r\n margin-bottom: 16px;\r\n font-size: 3.06rem; \r\n font-weight: 600; \r\n }\r\n\r\n .faces-subtitle {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n color: #5E6A66;\r\n font-size: 0.92rem; \r\n font-weight: 400; \r\n }\r\n\r\n \/* 3 Column Grid Setup *\/\r\n .faces-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n \/* Cards with Premium Soft Shadow *\/\r\n .face-card {\r\n background-color: #FFFFFF;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n border: none; \r\n box-shadow: 0 4px 20px rgba(20, 32, 31, 0.015);\r\n transition: transform 0.3s cubic-bezier(.2, .7, .2, 1), box-shadow 0.3s cubic-bezier(.2, .7, .2, 1);\r\n }\r\n\r\n .face-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: 0 20px 40px -10px rgba(15, 110, 112, 0.08); \r\n }\r\n\r\n \/* Image Holder constraints *\/\r\n .face-image-holder {\r\n width: 100%;\r\n height: 220px;\r\n overflow: hidden;\r\n }\r\n\r\n .face-image-holder img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .face-card:hover .face-image-holder img {\r\n transform: scale(1.03);\r\n }\r\n\r\n \/* Card Text Container padding *\/\r\n .face-card-body {\r\n padding: 22px 18px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n flex-grow: 1;\r\n }\r\n\r\n \/* FIXED: REMOVED ITALIC STYLE FROM CARD HEADING TEXT *\/\r\n .face-quote {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n color: #14201F;\r\n line-height: 1.5;\r\n margin: 0 0 0px 0;\r\n padding-left: 0; \r\n border-left: none !important; \r\n font-style: normal !important; \/* Forces the italic default to go away completely *\/\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 1.3rem; \r\n font-weight: 500; \r\n }\r\n\r\n .face-author-tag {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n color: #7A8884;\r\n display: block;\r\n font-size: 0.8rem; \r\n font-weight: 400; \r\n }\r\n\r\n \/* Responsive adjustments *\/\r\n @media (max-width: 992px) {\r\n .faces-grid { grid-template-columns: 1fr; gap: 24px; }\r\n .faces-main-title { font-size: 2rem; }\r\n }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2937304 e-con-full e-flex e-con e-parent\" data-id=\"2937304\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f55973 elementor-widget elementor-widget-html\" data-id=\"4f55973\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- The How You'll Learn Section -->\r\n<section class=\"learn-section\">\r\n <div class=\"wrap\">\r\n \r\n <!-- Center Headings Block (Reveals on scroll) -->\r\n <div class=\"learn-header reveal-on-scroll\">\r\n <span class=\"learn-eyebrow\">How you'll learn<\/span>\r\n <h2 class=\"learn-main-title\">You won't be doing this alone.<\/h2>\r\n <p class=\"learn-subtitle\">A rhythm that keeps you moving: learn on your own hours within an 8-week cohort, with experts and peers alongside you.<\/p>\r\n <\/div>\r\n\r\n <!-- 3-Card Interactive Dark Grid Layout -->\r\n <div class=\"learn-grid\">\r\n \r\n <!-- Card 1 -->\r\n <div class=\"learn-card reveal-on-scroll\" style=\"animation-delay: 0.1s;\">\r\n <div class=\"learn-card-body\">\r\n <h3 class=\"card-title\">Flexible-hours lessons<\/h3>\r\n <p class=\"card-text\">Rich, bite-sized lessons you work through on your own hours, within a structured 8-week cohort \u2013 with interactives, not walls of text.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Card 2 -->\r\n <div class=\"learn-card reveal-on-scroll\" style=\"animation-delay: 0.2s;\">\r\n <div class=\"learn-card-body\">\r\n <h3 class=\"card-title\">Real experts, on demand<\/h3>\r\n <p class=\"card-text\">Real AI experts on call throughout, reviewing your actual work and answering your questions, usually the same day during your build.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Card 3 -->\r\n <div class=\"learn-card reveal-on-scroll\" style=\"animation-delay: 0.3s;\">\r\n <div class=\"learn-card-body\">\r\n <h3 class=\"card-title\">A real community<\/h3>\r\n <p class=\"card-text\">Weekly peer check-ins, feedback, and a help desk \u2013 so you're supported every step of the way.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CSS with Animations, Dark Theme Layout, and explicit Font Controls -->\r\n<style>\r\n .learn-section {\r\n background-color: #111E1C; \/* Precise deep dark slate green match from image_c766e5.png *\/\r\n color: #FFFFFF;\r\n padding: 120px 0;\r\n }\r\n\r\n \/* --- SCROLL REVEAL ANIMATION ENGINE (SAME AS PREVIOUS) --- *\/\r\n @keyframes fadeInUpLearn {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: fadeInUpLearn 0.8s cubic-bezier(.2, .7, .2, 1) forwards;\r\n }\r\n\r\n \/* Top Centered Header Style *\/\r\n .learn-header {\r\n text-align: center;\r\n margin-bottom: 64px;\r\n }\r\n\r\n .learn-eyebrow {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n display: block;\r\n color: #5CE1CC; \/* Vibrantly crisp mint-teal accent text tint *\/\r\n margin-bottom: 18px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.16em;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.68rem; \/* Size change karne ke liye *\/\r\n font-weight: 700; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n .learn-main-title {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n color: #FFFFFF;\r\n line-height: 1.25;\r\n margin-bottom: 20px;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 3.06rem; \/* Size change karne ke liye *\/\r\n font-weight: 600; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n .learn-subtitle {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n color: rgba(255, 255, 255, 0.72); \/* Muted legible white description *\/\r\n max-width: 58ch;\r\n margin: 0 auto;\r\n line-height: 1.55;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.94rem; \/* Size change karne ke liye *\/\r\n font-weight: 400; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n \/* 3 Column Grid Setup *\/\r\n .learn-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Dark Themed Interactive Cards with Subtle Borders *\/\r\n .learn-card {\r\n background-color: rgba(255, 255, 255, 0.02); \/* Very soft dark translucent glass fill *\/\r\n border: 1px solid rgba(255, 255, 255, 0.08); \/* Clean dark card containment lines *\/\r\n border-radius: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n transition: transform 0.3s cubic-bezier(.2, .7, .2, 1), background-color 0.3s ease, border-color 0.3s ease;\r\n }\r\n\r\n \/* PREMIUM INTERACTIVE HOVER EFFECT (Slight glow & lift) *\/\r\n .learn-card:hover {\r\n transform: translateY(-5px);\r\n background-color: rgba(255, 255, 255, 0.04); \/* Subtle background pop *\/\r\n border-color: rgba(92, 225, 204, 0.25); \/* Muted mint-teal border reveal *\/\r\n }\r\n\r\n \/* Card Layout Internals *\/\r\n .learn-card-body {\r\n padding: 40px 32px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n min-height: 240px; \/* Uniform grid text scaling protection *\/\r\n }\r\n\r\n .card-title {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n color: #FFFFFF;\r\n line-height: 1.3;\r\n margin: 0;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 1.25rem; \/* Size change karne ke liye *\/\r\n font-weight: 600; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n .card-text {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n color: rgba(255, 255, 255, 0.65); \/* Elegant secondary reading shade *\/\r\n line-height: 1.6;\r\n margin: 0;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.86rem; \/* Size change karne ke liye *\/\r\n font-weight: 400; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n \/* Responsive adjustments *\/\r\n @media (max-width: 992px) {\r\n .learn-grid { grid-template-columns: 1fr; gap: 20px; }\r\n .learn-main-title { font-size: 2.1rem; }\r\n .learn-card-body { min-height: auto; padding: 32px 24px; }\r\n }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3f60f68 e-con-full e-flex e-con e-parent\" data-id=\"3f60f68\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9dc3537 elementor-widget elementor-widget-html\" data-id=\"9dc3537\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Our Flagship Program Section (Fully Updated) -->\r\n<section class=\"flagship-section\">\r\n <div class=\"wrap\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"flagship-header reveal-on-scroll\">\r\n <span class=\"flagship-eyebrow\">Now Enrolling<\/span>\r\n <h2 class=\"flagship-main-title\">Our flagship program<\/h2>\r\n <\/div>\r\n\r\n <!-- Main Flagship Showcase Card -->\r\n <div class=\"flagship-card reveal-on-scroll\" style=\"animation-delay: 0.1s;\">\r\n \r\n <!-- Left Side: Vibrant Gradient Banner Visual -->\r\n <div class=\"flagship-visual\">\r\n <span class=\"cohort-badge\">Summer Cohort<\/span>\r\n <div class=\"visual-center-text\">AI Mastery<\/div>\r\n \r\n <!-- Geometric Floating Elements -->\r\n <div class=\"geo-circle-top\"><\/div>\r\n <div class=\"geo-dot-bottom\"><\/div>\r\n <\/div>\r\n\r\n <!-- Right Side: Program Informational Details -->\r\n <div class=\"flagship-content\">\r\n <span class=\"content-tagline\">Certificate Program \u2022 Beginners Welcome<\/span>\r\n <h3 class=\"program-title\">AI Mastery Certificate<\/h3>\r\n <p class=\"program-description\">\r\n Go from curious - or worried - beginner to confident builder in eight weeks. \r\n Learn to prompt, create, and build, and ship your own AI agent. Perfect for \r\n teens and adults future-proofing together.\r\n <\/p>\r\n <a href=\"#\" class=\"explore-btn\">Explore AI Mastery<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- Bottom Footer: Upcoming Courses Row -->\r\n <div class=\"upcoming-courses-row reveal-on-scroll\" style=\"animation-delay: 0.2s;\">\r\n <span class=\"upcoming-label\">More courses coming to the academy<\/span>\r\n <div class=\"course-capsule\">Investing Fundamentals & Market Literacy<\/div>\r\n <div class=\"course-capsule\">Entrepreneurship & the AI Venture Studio<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CSS Layout with Interactive Shifts and Strict Font Controls -->\r\n<style>\r\n .flagship-section {\r\n background-color: #FBF7F0; \/* Clean soft cream page base *\/\r\n color: #14201F;\r\n padding: 100px 0 120px 0;\r\n }\r\n\r\n \/* --- SCROLL REVEAL ANIMATION ENGINE --- *\/\r\n @keyframes fadeInUpFlagship {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: fadeInUpFlagship 0.8s cubic-bezier(.2, .7, .2, 1) forwards;\r\n }\r\n\r\n \/* Centered Header Styles *\/\r\n .flagship-header {\r\n text-align: center;\r\n margin-bottom: 54px;\r\n }\r\n\r\n .flagship-eyebrow {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n display: block;\r\n color: #0F6E70;\r\n margin-bottom: 14px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.16em;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.68rem; \/* Size change karne ke liye *\/\r\n font-weight: 700; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n .flagship-main-title {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n color: #14201F;\r\n line-height: 1.2;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 3.06rem; \/* Size change karne ke liye *\/\r\n font-weight: 600; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n \/* Combined Showcase Card Layout Container *\/\r\n .flagship-card {\r\n background-color: #FFFFFF;\r\n max-width: 1060px;\r\n margin: 0 auto 56px auto;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n display: grid;\r\n grid-template-columns: 4.5fr 5.5fr; \/* Precise proportional split *\/\r\n \r\n \/* Premium custom ambient box-shadow matching standard styling *\/\r\n box-shadow: 0 10px 35px -5px rgba(20, 32, 31, 0.04), 0 25px 70px -10px rgba(20, 32, 31, 0.06);\r\n transition: transform 0.4s cubic-bezier(.2, .7, .2, 1), box-shadow 0.4s cubic-bezier(.2, .7, .2, 1);\r\n }\r\n\r\n .flagship-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 30px 80px -15px rgba(15, 110, 112, 0.12); \/* Soft branded glow lift *\/\r\n }\r\n\r\n \/* Left Side Gradient Container *\/\r\n .flagship-visual {\r\n background: linear-gradient(135deg, #E24C54 0%, #E8584A 45%, #E59A44 100%); \/* Gorgeous precise coral orange gradient match *\/\r\n position: relative;\r\n padding: 44px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n min-height: 360px;\r\n }\r\n\r\n \/* Floating Capsule Badge inside Visual block *\/\r\n .cohort-badge {\r\n position: absolute;\r\n top: 32px;\r\n left: 32px;\r\n background-color: #FFFFFF;\r\n color: #E24C54;\r\n padding: 8px 18px;\r\n border-radius: 20px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n z-index: 2;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.64rem;\r\n font-weight: 700;\r\n }\r\n\r\n \/* Center typography on gradient banner *\/\r\n .visual-center-text {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n color: #FFFFFF;\r\n letter-spacing: -0.01em;\r\n z-index: 2;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 2.1rem;\r\n font-weight: 600;\r\n }\r\n\r\n \/* Geometric Shapes Layering *\/\r\n .geo-circle-top {\r\n position: absolute;\r\n top: 36px;\r\n right: 36px;\r\n width: 60px;\r\n height: 60px;\r\n background-color: rgba(255, 255, 255, 0.22);\r\n border-radius: 50%;\r\n }\r\n .geo-circle-top::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 12px;\r\n left: -12px;\r\n width: 20px;\r\n height: 20px;\r\n background-color: #FFFFFF;\r\n border-radius: 50%;\r\n }\r\n\r\n .geo-dot-bottom {\r\n position: absolute;\r\n bottom: 36px;\r\n left: 36px;\r\n width: 34px;\r\n height: 34px;\r\n background-color: #0F938E; \/* Muted contrast solid deep teal circle dot *\/\r\n border-radius: 50%;\r\n }\r\n\r\n \/* Right Side Content Block Style definitions *\/\r\n .flagship-content {\r\n padding: 64px 54px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n }\r\n\r\n .content-tagline {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n color: #D63956; \/* Editorial sharp red branding tone label *\/\r\n text-transform: uppercase;\r\n letter-spacing: 0.12em;\r\n margin-bottom: 16px;\r\n display: block;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.68rem;\r\n font-weight: 700;\r\n }\r\n\r\n .program-title {\r\n font-family: var(--display, 'Fraunces', Georgia, serif);\r\n color: #14201F;\r\n margin-bottom: 18px;\r\n line-height: 1.2;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 2.05rem;\r\n font-weight: 600;\r\n }\r\n\r\n .program-description {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n color: #5E6A66;\r\n line-height: 1.6;\r\n margin: 0 0 32px 0;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.9rem;\r\n font-weight: 400;\r\n }\r\n\r\n \/* FIXED: High-end Red Button Pill with exact white text on hover *\/\r\n .explore-btn {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n background-color: #E63B60; \/* Coral Red button base *\/\r\n color: #FFFFFF !important; \/* Forces text color to stay white initially *\/\r\n text-decoration: none;\r\n padding: 14px 32px;\r\n border-radius: 30px;\r\n box-shadow: 0 10px 24px -6px rgba(230, 59, 96, 0.4);\r\n display: inline-block;\r\n transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.86rem;\r\n font-weight: 600;\r\n }\r\n\r\n .explore-btn:hover {\r\n background-color: #D32E52;\r\n color: #FFFFFF !important; \/* Strict fix: Ensures text stays crisp white on hover too *\/\r\n transform: translateY(-1px);\r\n box-shadow: 0 12px 28px -4px rgba(230, 59, 96, 0.55);\r\n }\r\n\r\n \/* Bottom Section Footer Elements (Dashed Capsules) *\/\r\n .upcoming-courses-row {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .upcoming-label {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n color: #7A8884;\r\n margin-right: 8px;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.84rem;\r\n font-weight: 400;\r\n }\r\n\r\n .course-capsule {\r\n font-family: var(--body, 'Outfit', sans-serif);\r\n color: #4C5855;\r\n border: 1px dashed rgba(20, 32, 31, 0.2); \/* Dashed loop layout boundary specs *\/\r\n padding: 10px 20px;\r\n border-radius: 30px;\r\n background-color: transparent;\r\n transition: border-color 0.3s ease, color 0.3s ease;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n }\r\n\r\n .course-capsule:hover {\r\n border-color: #0F6E70;\r\n color: #0F6E70;\r\n }\r\n\r\n \/* Responsive Configurations *\/\r\n @media (max-width: 992px) {\r\n .flagship-card { grid-template-columns: 1fr; }\r\n .flagship-visual { min-height: 280px; }\r\n .flagship-content { padding: 44px 32px; }\r\n .flagship-main-title { font-size: 2.1rem; }\r\n .upcoming-courses-row { flex-direction: column; text-align: center; gap: 12px; }\r\n }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9164dc2 e-con-full e-flex e-con e-parent\" data-id=\"9164dc2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51c0c5c elementor-widget elementor-widget-html\" data-id=\"51c0c5c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Include Fraunces with Italic styles in your head if not already present -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,600&family=Outfit:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- The Final CTA Section -->\r\n<section class=\"final-cta-section\">\r\n <div class=\"wrap final-cta-container reveal-on-scroll\">\r\n \r\n <!-- Top Triple Decorative Dots -->\r\n <div class=\"decorative-dots\">\r\n <span class=\"dot dot-teal\"><\/span>\r\n <span class=\"dot dot-pink\"><\/span>\r\n <span class=\"dot dot-orange\"><\/span>\r\n <\/div>\r\n\r\n <!-- Main Heading Block with Exact Script Style Accent from image_c776e2.png -->\r\n <h2 class=\"cta-main-heading\">\r\n The best time to get ahead of this was yesterday. <span class=\"accent-text\">The second best time is now.<\/span>\r\n <\/h2>\r\n\r\n <!-- Subtitle Description Text -->\r\n <p class=\"cta-subtitle\">\r\n Give yourself \u2013 or your teenager \u2013 the head start that turns AI from a worry into an advantage.\r\n <\/p>\r\n\r\n <!-- Final Safe Action Button (Hover Protected) -->\r\n <div class=\"cta-btn-wrapper\">\r\n <a href=\"#\" class=\"final-explore-btn\">Start with AI Mastery<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- CSS Styling with Precise Typography Override -->\r\n<style>\r\n .final-cta-section {\r\n background: radial-gradient(circle at center, #135B5B 0%, #0C3E3F 100%);\r\n color: #FFFFFF;\r\n padding: 120px 0;\r\n text-align: center;\r\n overflow: hidden;\r\n }\r\n\r\n .final-cta-container {\r\n max-width: 840px;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n \/* --- SCROLL REVEAL ENGINE --- *\/\r\n @keyframes fadeInUpCTA {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .reveal-on-scroll {\r\n opacity: 0;\r\n transform: translateY(24px);\r\n animation: fadeInUpCTA 0.8s cubic-bezier(.2, .7, .2, 1) forwards;\r\n }\r\n\r\n \/* Top Decorative Dots Grid Layout --> *\/\r\n .decorative-dots {\r\n display: flex;\r\n gap: 8px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .decorative-dots .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n }\r\n .dot-teal { background-color: #5CE1CC; }\r\n .dot-pink { background-color: #E63B60; }\r\n .dot-orange { background-color: #E59A44; }\r\n\r\n \/* Main Elegant Heading System *\/\r\n .cta-main-heading {\r\n font-family: 'Fraunces', Georgia, serif;\r\n font-variant-numeric: oldstyle-nums;\r\n color: #FFFFFF;\r\n line-height: 1.25;\r\n margin-bottom: 24px;\r\n max-width: 25ch;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 2.85rem; \/* Size change karne ke liye *\/\r\n font-weight: 600; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n \/* FIXED: EXACT SCRIPT SERIF MATCH FOR THE PINK TEXT *\/\r\n .cta-main-heading .accent-text {\r\n font-family: 'Fraunces', Georgia, serif;\r\n font-style: italic;\r\n font-weight: 400;\r\n color: #F78396; \/* Exact premium pinkish-coral shade from image_c776e2.png *\/\r\n letter-spacing: -0.01em;\r\n display: inline;\r\n }\r\n\r\n \/* Subtitle Styles *\/\r\n .cta-subtitle {\r\n font-family: 'Outfit', sans-serif;\r\n color: rgba(255, 255, 255, 0.8);\r\n max-width: 54ch;\r\n line-height: 1.6;\r\n margin: 0 0 40px 0;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.95rem; \/* Size change karne ke liye *\/\r\n font-weight: 400; \/* Weight change karne ke liye *\/\r\n }\r\n\r\n \/* Button Containment Box *\/\r\n .cta-btn-wrapper {\r\n display: inline-block;\r\n }\r\n\r\n \/* PROTECTED ACTION BUTTON STYLE *\/\r\n .final-explore-btn {\r\n font-family: 'Outfit', sans-serif;\r\n background-color: #E63B60;\r\n color: #FFFFFF !important;\r\n text-decoration: none;\r\n padding: 15px 36px;\r\n border-radius: 30px;\r\n display: inline-block;\r\n box-shadow: 0 10px 28px -6px rgba(230, 59, 96, 0.45);\r\n transition: transform 0.25s cubic-bezier(.2, .7, .2, 1), background-color 0.25s ease, box-shadow 0.25s ease;\r\n \r\n \/* --- FONT CONTROL --- *\/\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n }\r\n\r\n .final-explore-btn:hover {\r\n background-color: #D32E52;\r\n color: #FFFFFF !important; \/* Text remains pure white on hover *\/\r\n transform: translateY(-2px);\r\n box-shadow: 0 14px 32px -4px rgba(230, 59, 96, 0.6);\r\n }\r\n\r\n \/* Fluid Responsive adjustments *\/\r\n @media (max-width: 768px) {\r\n .final-cta-section { padding: 80px 20px; }\r\n .cta-main-heading { font-size: 2.1rem; }\r\n .cta-subtitle { font-size: 0.88rem; }\r\n }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hero Section Academy of Applied Intelligence The world is being rewritten by AI. Become one of its authors. The future […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-30","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/inquizlabs.com\/index.php\/wp-json\/wp\/v2\/pages\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inquizlabs.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/inquizlabs.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/inquizlabs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inquizlabs.com\/index.php\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":50,"href":"https:\/\/inquizlabs.com\/index.php\/wp-json\/wp\/v2\/pages\/30\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/inquizlabs.com\/index.php\/wp-json\/wp\/v2\/pages\/30\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/inquizlabs.com\/index.php\/wp-json\/wp\/v2\/media?parent=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}