/** * GCP PCA Test - Main Stylesheet * Modern,mobile-first design system */ /* =================================== CSS VARIABLES & ROOT =================================== */:root{--color-navy:#1E3A8A;--color-navy-dark:#0F172A;--color-teal:#0369A1;--color-teal-light:#0EA5E9;--color-green:#047857;--color-green-light:#10B981;--color-white:#FFFFFF;--color-gray-50:#F8FAFC;--color-gray-100:#F1F5F9;--color-gray-200:#E2E8F0;--color-gray-300:#CBD5E1;--color-gray-400:#94A3B8;--color-gray-500:#64748B;--color-gray-600:#475569;--color-gray-700:#334155;--color-gray-800:#1E293B;--color-gray-900:#0F172A;--color-success:#10B981;--color-warning:#F59E0B;--color-error:#EF4444;--color-info:#3B82F6;--gradient-primary:linear-gradient(135deg,var(--color-navy) 0%,var(--color-teal) 100%);--gradient-hero:linear-gradient(135deg,var(--color-navy-dark) 0%,var(--color-navy) 50%,var(--color-teal) 100%);--gradient-success:linear-gradient(135deg,var(--color-teal) 0%,var(--color-green) 100%);--gradient-card:linear-gradient(145deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%);--font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--font-size-6xl:3.75rem;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,0.25);--shadow-glow:0 0 40px rgba(14,165,233,0.3);--transition-fast:150ms ease;--transition-base:300ms ease;--transition-slow:500ms ease;--z-dropdown:100;--z-sticky:200;--z-fixed:300;--z-modal:400;--z-tooltip:500;--container-max:1280px;--header-height:72px;}/* =================================== BACK TO TOP BUTTON =================================== */ .back-to-top{position:fixed;bottom:var(--spacing-8);right:var(--spacing-8);width:50px;height:50px;background:var(--gradient-primary);color:var(--color-white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl);box-shadow:var(--shadow-lg);cursor:pointer;z-index:var(--z-fixed);opacity:0;visibility:hidden;transform:translateY(20px);transition:all var(--transition-base);border:none;outline:none;}.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}.back-to-top:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl);color:var(--color-white);}@media (max-width:768px){.back-to-top{bottom:var(--spacing-4);right:var(--spacing-4);width:44px;height:44px;font-size:var(--font-size-lg);}}[data-theme="dark"]{--color-bg:var(--color-gray-900);--color-surface:var(--color-gray-800);--color-text:var(--color-gray-100);--color-text-muted:var(--color-gray-400);}/* =================================== RESET & BASE =================================== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--color-gray-700);background-color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}img{max-width:100%;height:auto;display:block;}a{color:var(--color-teal);text-decoration:none;transition:color var(--transition-fast);}a:hover{color:var(--color-navy);}ul,ol{list-style:none;}button{font-family:inherit;cursor:pointer;border:none;background:none;}/* =================================== TYPOGRAPHY =================================== */ h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;color:var(--color-navy-dark);}h1{font-size:var(--font-size-4xl);}h2{font-size:var(--font-size-3xl);}h3{font-size:var(--font-size-2xl);}h4{font-size:var(--font-size-xl);}h5{font-size:var(--font-size-lg);}h6{font-size:var(--font-size-base);}@media (min-width:768px){h1{font-size:var(--font-size-5xl);}h2{font-size:var(--font-size-4xl);}h3{font-size:var(--font-size-3xl);}}@media (min-width:1024px){h1{font-size:var(--font-size-6xl);}}p{margin-bottom:var(--spacing-4);}.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}/* =================================== LAYOUT =================================== */ .container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--spacing-4);}@media (min-width:768px){.container{padding:0 var(--spacing-6);}}.main-content{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}.section{padding:var(--spacing-16) 0;}@media (min-width:768px){.section{padding:var(--spacing-20) 0;}}.section-header{text-align:center;max-width:800px;margin:0 auto var(--spacing-12);}.section-header h2{margin-bottom:var(--spacing-4);}.section-header p{font-size:var(--font-size-lg);color:var(--color-gray-600);}.grid{display:grid;gap:var(--spacing-6);}.grid-2{grid-template-columns:repeat(1,1fr);}.grid-3{grid-template-columns:repeat(1,1fr);}.grid-4{grid-template-columns:repeat(2,1fr);}@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}.grid-4{grid-template-columns:repeat(2,1fr);}}@media (min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr);}.grid-4{grid-template-columns:repeat(3,1fr);}}@media (min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr);}}/* =================================== HEADER & NAVIGATION =================================== */ .header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-gray-200);z-index:var(--z-sticky);transition:all var(--transition-base);padding-top:8px;padding-bottom:8px;}.header.scrolled{box-shadow:var(--shadow-md);}.nav{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--spacing-4);}.logo img{height:60px;width:auto;transition:height var(--transition-base);}@media (max-width:1024px){.logo img{height:55px;}}.mobile-menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:var(--spacing-2);}.hamburger{position:relative;width:24px;height:2px;background:var(--color-gray-700);transition:all var(--transition-fast);}.hamburger::before,.hamburger::after{content:'';position:absolute;left:0;width:100%;height:2px;background:var(--color-gray-700);transition:all var(--transition-fast);}.hamburger::before{top:-7px;}.hamburger::after{bottom:-7px;}.mobile-menu-toggle.active .hamburger{background:transparent;}.mobile-menu-toggle.active .hamburger::before{top:0;transform:rotate(45deg);}.mobile-menu-toggle.active .hamburger::after{bottom:0;transform:rotate(-45deg);}.nav-menu{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-2);margin:0;padding:0;list-style:none;}.nav-menu li{margin:0;}.nav-link{display:block;padding:var(--spacing-2) var(--spacing-3);color:var(--color-gray-700);font-weight:500;border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap;}.nav-link:hover,.nav-link.active{color:var(--color-teal);background:var(--color-gray-50);}.nav-cta{margin-left:var(--spacing-2);}.nav-cta .btn{padding:var(--spacing-2) var(--spacing-4);}@media (max-width:1023px){.mobile-menu-toggle{display:flex;}.nav-menu{display:none;flex-direction:column;position:absolute;top:var(--header-height);left:0;right:0;background:var(--color-white);padding:var(--spacing-4);border-bottom:1px solid var(--color-gray-200);box-shadow:var(--shadow-lg);}.nav-menu.active{display:flex;}.nav-menu li{margin:var(--spacing-2) 0;width:100%;}.nav-link{padding:var(--spacing-3) var(--spacing-4);}.nav-cta{margin:var(--spacing-4) 0 0 0;padding-top:var(--spacing-4);border-top:1px solid var(--color-gray-200);width:100%;}.nav-cta .btn{width:100%;}}/* =================================== BUTTONS =================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-base);font-weight:600;border-radius:var(--radius-lg);transition:all var(--transition-fast);text-align:center;white-space:nowrap;}.btn-sm{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-sm);}.btn-lg{padding:var(--spacing-4) var(--spacing-8);font-size:var(--font-size-lg);}.btn-primary{background:var(--gradient-primary);color:var(--color-white);box-shadow:var(--shadow-md);}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--color-white);}.btn-secondary{background:var(--color-white);color:var(--color-navy);border:2px solid var(--color-navy);}.btn-secondary:hover{background:var(--color-navy);color:var(--color-white);}.btn-success{background:var(--gradient-success);color:var(--color-white);}.btn-success:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}.btn-outline{background:transparent;color:var(--color-white);border:2px solid var(--color-white);}.btn-outline:hover{background:var(--color-white);color:var(--color-navy);}.btn-ghost{background:rgba(255,255,255,0.1);color:var(--color-white);backdrop-filter:blur(10px);}.btn-ghost:hover{background:rgba(255,255,255,0.2);color:var(--color-white);}/* =================================== HERO SECTION =================================== */ .hero{position:relative;background:var(--gradient-hero);color:var(--color-white);padding:var(--spacing-16) 0 var(--spacing-20);overflow:hidden;}.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:0.5;}.hero-content{position:relative;z-index:1;max-width:900px;margin:0 auto;text-align:center;}.hero h1{color:var(--color-white);margin-bottom:var(--spacing-6);font-weight:800;}.hero-subtitle{font-size:var(--font-size-lg);opacity:0.9;margin-bottom:var(--spacing-8);max-width:700px;margin-left:auto;margin-right:auto;}@media (min-width:768px){.hero{padding:var(--spacing-24) 0;}.hero-subtitle{font-size:var(--font-size-xl);}}.hero-cta{display:flex;flex-direction:column;gap:var(--spacing-4);align-items:center;}@media (min-width:640px){.hero-cta{flex-direction:row;justify-content:center;}}.hero-stats{display:flex;justify-content:center;gap:var(--spacing-8);margin-top:var(--spacing-12);padding-top:var(--spacing-8);border-top:1px solid rgba(255,255,255,0.2);}.stat-item{text-align:center;}.stat-number{display:block;font-size:var(--font-size-3xl);font-weight:800;color:var(--color-teal-light);}.stat-label{font-size:var(--font-size-sm);opacity:0.8;}.hero-float{position:absolute;border-radius:50%;background:rgba(255,255,255,0.1);animation:float 6s ease-in-out infinite;}@keyframes float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-20px) rotate(180deg);}}/* =================================== CARDS =================================== */ .card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-6);box-shadow:var(--shadow-md);transition:all var(--transition-base);border:1px solid var(--color-gray-100);}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);}.card-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--gradient-primary);border-radius:var(--radius-lg);margin-bottom:var(--spacing-4);font-size:var(--font-size-2xl);color:var(--color-white);}.card-title{font-size:var(--font-size-xl);margin-bottom:var(--spacing-2);color:var(--color-navy-dark);}.card-text{color:var(--color-gray-700);margin-bottom:var(--spacing-4);}.feature-card{text-align:center;padding:var(--spacing-8);}.feature-card .card-icon{margin:0 auto var(--spacing-6);width:80px;height:80px;font-size:var(--font-size-3xl);}.section-card{display:flex;flex-direction:column;height:100%;cursor:pointer;}.section-card:hover{border-color:var(--color-teal);}.section-card .card-icon{background:var(--color-gray-100);color:var(--color-teal);}.section-card:hover .card-icon{background:var(--gradient-primary);color:var(--color-white);}.section-card .btn{margin-top:auto;}.mock-card{position:relative;overflow:hidden;}.mock-card-badge{position:absolute;top:var(--spacing-4);right:var(--spacing-4);padding:var(--spacing-1) var(--spacing-3);background:var(--color-green);color:var(--color-white);font-size:var(--font-size-xs);font-weight:700;border-radius:var(--radius-full);text-transform:uppercase;}.mock-card-meta{display:flex;gap:var(--spacing-4);margin-top:var(--spacing-4);padding-top:var(--spacing-4);border-top:1px solid var(--color-gray-200);color:var(--color-gray-500);font-size:var(--font-size-sm);}.mock-card-meta span{display:flex;align-items:center;gap:var(--spacing-2);}/* =================================== FEATURES SECTION =================================== */ .features{background:var(--color-gray-50);}/* =================================== WHY CHOOSE US =================================== */ .why-us{background:var(--color-white);}.why-us-content{display:grid;gap:var(--spacing-8);}@media (min-width:1024px){.why-us-content{grid-template-columns:1fr 1fr;gap:var(--spacing-16);align-items:center;}}.why-us-text h2{color:var(--color-navy);font-size:var(--font-size-sm);font-weight:600;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--spacing-2);}.why-us-text h3{color:var(--color-navy-dark);margin-bottom:var(--spacing-4);}.why-us-list{margin-top:var(--spacing-6);}.why-us-list li{display:flex;align-items:flex-start;gap:var(--spacing-4);padding:var(--spacing-4) 0;border-bottom:1px solid var(--color-gray-200);}.why-us-list li:last-child{border-bottom:none;}.why-us-list .icon{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-green);color:var(--color-white);border-radius:50%;font-size:var(--font-size-xs);}.why-us-image{position:relative;}.why-us-image img{border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);}/* =================================== FAQ SECTION =================================== */ .faq{background:var(--color-gray-50);}.faq-list{max-width:800px;margin:0 auto;}.faq-item{background:var(--color-white);border-radius:var(--radius-lg);margin-bottom:var(--spacing-4);overflow:hidden;box-shadow:var(--shadow-sm);}.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-5) var(--spacing-6);text-align:left;font-weight:600;color:var(--color-navy-dark);background:var(--color-white);transition:all var(--transition-fast);}.faq-question:hover{background:var(--color-gray-50);}.faq-question i{transition:transform var(--transition-fast);color:var(--color-teal);}.faq-item.active .faq-question i{transform:rotate(180deg);}.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--transition-base);}.faq-item.active .faq-answer{max-height:500px;}.faq-answer-content{padding:0 var(--spacing-6) var(--spacing-6);color:var(--color-gray-600);}/* =================================== QUIZ UI =================================== */ .quiz-container{max-width:900px;margin:0 auto;}.quiz-header{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:space-between;align-items:center;padding:var(--spacing-4) var(--spacing-6);background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-6);}.quiz-timer{display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-xl);font-weight:700;color:var(--color-navy);}.quiz-timer.warning{color:var(--color-warning);animation:pulse 1s infinite;}.quiz-timer.danger{color:var(--color-error);}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}.quiz-progress{flex:1;min-width:200px;}.progress-bar{height:8px;background:var(--color-gray-200);border-radius:var(--radius-full);overflow:hidden;}.progress-fill{height:100%;background:var(--gradient-success);border-radius:var(--radius-full);transition:width var(--transition-base);}.progress-text{font-size:var(--font-size-sm);color:var(--color-gray-500);margin-top:var(--spacing-1);text-align:center;}.question-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-8);box-shadow:var(--shadow-lg);margin-bottom:var(--spacing-6);}.question-number{display:inline-block;padding:var(--spacing-2) var(--spacing-4);background:var(--color-gray-100);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:600;color:var(--color-gray-600);margin-bottom:var(--spacing-4);}.question-text{font-size:var(--font-size-lg);font-weight:500;color:var(--color-navy-dark);margin-bottom:var(--spacing-6);line-height:1.7;}.question-type{display:inline-block;padding:var(--spacing-1) var(--spacing-3);background:var(--color-teal);color:var(--color-white);font-size:var(--font-size-xs);font-weight:600;border-radius:var(--radius-sm);margin-left:var(--spacing-2);text-transform:uppercase;}.options-list{display:flex;flex-direction:column;gap:var(--spacing-3);}.option-item{position:relative;}.option-input{position:absolute;opacity:0;pointer-events:none;}.option-label{display:flex;align-items:flex-start;gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-5);background:var(--color-gray-50);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);}.option-label:hover{border-color:var(--color-teal);background:var(--color-white);}.option-input:checked + .option-label{border-color:var(--color-teal);background:rgba(14,165,233,0.1);}.option-input:checked + .option-label .option-marker{background:var(--color-teal);border-color:var(--color-teal);color:var(--color-white);}.option-marker{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:2px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;color:var(--color-gray-500);transition:all var(--transition-fast);}.option-text{flex:1;padding-top:var(--spacing-1);}.option-label.correct{border-color:var(--color-success);background:rgba(16,185,129,0.1);}.option-label.correct .option-marker{background:var(--color-success);border-color:var(--color-success);color:var(--color-white);}.option-label.incorrect{border-color:var(--color-error);background:rgba(239,68,68,0.1);}.option-label.incorrect .option-marker{background:var(--color-error);border-color:var(--color-error);color:var(--color-white);}.explanation-box{margin-top:var(--spacing-6);padding:var(--spacing-5);background:var(--color-gray-50);border-left:4px solid var(--color-teal);border-radius:0 var(--radius-lg) var(--radius-lg) 0;}.explanation-box h4{display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-base);color:var(--color-teal);margin-bottom:var(--spacing-3);}.explanation-box p{margin-bottom:var(--spacing-3);}.explanation-box a{font-size:var(--font-size-sm);}.quiz-nav{display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:space-between;align-items:center;padding:var(--spacing-4) var(--spacing-6);background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);}.quiz-nav-left,.quiz-nav-right{display:flex;gap:var(--spacing-3);}.btn-flag{background:var(--color-gray-100);color:var(--color-gray-600);}.btn-flag:hover,.btn-flag.flagged{background:var(--color-warning);color:var(--color-white);}.question-navigator{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-6);box-shadow:var(--shadow-md);}.question-navigator h4{margin-bottom:var(--spacing-4);font-size:var(--font-size-base);}.nav-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-2);}.nav-btn{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--color-gray-100);border:2px solid transparent;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;color:var(--color-gray-600);transition:all var(--transition-fast);}.nav-btn:hover{border-color:var(--color-teal);}.nav-btn.current{background:var(--color-teal);color:var(--color-white);}.nav-btn.answered{background:var(--color-green);color:var(--color-white);}.nav-btn.flagged{position:relative;}.nav-btn.flagged::after{content:'';position:absolute;top:2px;right:2px;width:8px;height:8px;background:var(--color-warning);border-radius:50%;}/* =================================== CASE STUDY =================================== */ .case-study-box{background:linear-gradient(145deg,var(--color-navy) 0%,var(--color-navy-dark) 100%);border-radius:var(--radius-xl);padding:var(--spacing-6);margin-bottom:var(--spacing-6);color:var(--color-white);}.case-study-header{display:flex;align-items:center;gap:var(--spacing-4);margin-bottom:var(--spacing-4);}.case-study-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);border-radius:var(--radius-lg);font-size:var(--font-size-xl);}.case-study-title{font-size:var(--font-size-xl);font-weight:700;color:var(--color-white);}.case-study-description{opacity:0.9;line-height:1.7;}.case-study-toggle{display:flex;align-items:center;gap:var(--spacing-2);margin-top:var(--spacing-4);color:var(--color-teal-light);font-weight:500;cursor:pointer;}.case-study-toggle:hover{color:var(--color-white);}/* =================================== RESULTS PAGE =================================== */ .results-header{text-align:center;padding:var(--spacing-8);background:var(--gradient-hero);border-radius:var(--radius-2xl);color:var(--color-white);margin-bottom:var(--spacing-8);}.score-circle{width:180px;height:180px;margin:0 auto var(--spacing-6);border-radius:50%;background:rgba(255,255,255,0.1);display:flex;flex-direction:column;align-items:center;justify-content:center;border:6px solid var(--color-white);}.score-value{font-size:var(--font-size-5xl);font-weight:800;}.score-label{font-size:var(--font-size-sm);opacity:0.8;}.results-status{font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--spacing-2);}.results-status.pass{color:var(--color-green-light);}.results-status.fail{color:var(--color-error);}.results-meta{display:flex;justify-content:center;gap:var(--spacing-8);margin-top:var(--spacing-6);padding-top:var(--spacing-6);border-top:1px solid rgba(255,255,255,0.2);}.results-breakdown{display:grid;gap:var(--spacing-6);}@media (min-width:768px){.results-breakdown{grid-template-columns:repeat(2,1fr);}}/* =================================== FOOTER =================================== */ .footer{background:var(--color-navy-dark);color:var(--color-gray-300);padding:var(--spacing-16) 0 var(--spacing-8);}.footer-grid{display:grid;gap:var(--spacing-8);}@media (min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;}}.footer-logo img{height:40px;margin-bottom:var(--spacing-4);}.footer-tagline{font-size:var(--font-size-sm);margin-bottom:var(--spacing-6);}.social-links{display:flex;gap:var(--spacing-3);}.social-links a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);border-radius:var(--radius-lg);color:var(--color-gray-300);transition:all var(--transition-fast);}.social-links a:hover{background:var(--color-teal);color:var(--color-white);}.footer-links h2{color:var(--color-white);font-size:var(--font-size-base);margin-bottom:var(--spacing-4);}.footer-links ul li{margin-bottom:var(--spacing-2);}.footer-links a{color:var(--color-gray-400);font-size:var(--font-size-sm);transition:color var(--transition-fast);}.footer-links a:hover{color:var(--color-teal-light);}.footer-disclaimer{margin-top:var(--spacing-8);padding:var(--spacing-6);background:rgba(255,255,255,0.05);border-radius:var(--radius-lg);font-size:var(--font-size-sm);}.footer-bottom{display:flex;flex-direction:column;gap:var(--spacing-4);align-items:center;margin-top:var(--spacing-8);padding-top:var(--spacing-8);border-top:1px solid rgba(255,255,255,0.1);font-size:var(--font-size-sm);}@media (min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between;}}.footer-legal{display:flex;gap:var(--spacing-6);}.footer-legal a{color:var(--color-gray-400);}.footer-legal a:hover{color:var(--color-white);}/* =================================== UTILITIES =================================== */ .text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}.mt-4{margin-top:var(--spacing-4);}.mt-6{margin-top:var(--spacing-6);}.mt-8{margin-top:var(--spacing-8);}.mb-4{margin-bottom:var(--spacing-4);}.mb-6{margin-bottom:var(--spacing-6);}.mb-8{margin-bottom:var(--spacing-8);}.hidden{display:none !important;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}/* =================================== ANIMATIONS =================================== */ @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes slideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}@keyframes slideIn{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}.animate-fadeIn{animation:fadeIn 0.5s ease;}.animate-slideUp{animation:slideUp 0.5s ease;}.animate-slideIn{animation:slideIn 0.5s ease;}.stagger > *:nth-child(1){animation-delay:0.1s;}.stagger > *:nth-child(2){animation-delay:0.2s;}.stagger > *:nth-child(3){animation-delay:0.3s;}.stagger > *:nth-child(4){animation-delay:0.4s;}.stagger > *:nth-child(5){animation-delay:0.5s;}.stagger > *:nth-child(6){animation-delay:0.6s;}.stagger > *:nth-child(7){animation-delay:0.7s;}.stagger > *:nth-child(8){animation-delay:0.8s;}/* =================================== PRINT STYLES =================================== */ @media print{.header,.footer,.quiz-nav,.btn{display:none !important;}body{font-size:12pt;color:#000;}.main-content{padding:0;}}/* =================================== MOBILE RESPONSIVENESS FIXES =================================== */ .option-text,.question-text,.card-text,.explanation-box p{word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;hyphens:auto;}.option-label{word-wrap:break-word;overflow-wrap:break-word;}@media (max-width:767px){.practice-intro,.pre-quiz-container{padding:var(--spacing-4) !important;}.pre-quiz-container .icon-circle,.practice-intro .icon-circle{width:60px !important;height:60px !important;font-size:var(--font-size-2xl) !important;}.pre-quiz-container h1,.practice-intro h1{font-size:var(--font-size-xl) !important;margin-bottom:var(--spacing-2) !important;}.pre-quiz-container p,.practice-intro p{font-size:var(--font-size-sm) !important;}.pre-quiz-stats{gap:var(--spacing-2) !important;}.pre-quiz-stats .stat-box{padding:var(--spacing-3) !important;}.pre-quiz-stats .stat-box i{font-size:var(--font-size-lg) !important;}.pre-quiz-stats .stat-value{font-size:var(--font-size-lg) !important;}.pre-quiz-stats .stat-label{font-size:var(--font-size-xs) !important;}.option-item{padding:var(--spacing-2);}.option-label{padding:var(--spacing-3);font-size:var(--font-size-sm);}.option-marker{min-width:28px;min-height:28px;width:28px;height:28px;font-size:var(--font-size-sm);flex-shrink:0;}.option-text{font-size:var(--font-size-sm);line-height:1.5;}.question-card{padding:var(--spacing-4);}.question-text{font-size:var(--font-size-base);line-height:1.6;}.quiz-nav{flex-wrap:wrap;gap:var(--spacing-2);padding:var(--spacing-3);}.quiz-nav .btn{font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-3);}.nav-grid{grid-template-columns:repeat(5,1fr);gap:var(--spacing-1);}.nav-btn{width:32px;height:32px;font-size:var(--font-size-xs);}.case-study-box{padding:var(--spacing-3);font-size:var(--font-size-sm);}.quiz-timer{font-size:var(--font-size-sm);padding:var(--spacing-2);}.results-header{padding:var(--spacing-4);}.score-circle{width:100px;height:100px;}.score-value{font-size:var(--font-size-2xl);}.results-meta{grid-template-columns:repeat(2,1fr);gap:var(--spacing-2);}.mock-card{padding:var(--spacing-3);}.mock-card h3{font-size:var(--font-size-base);}.mock-card .badge{font-size:var(--font-size-xs);}}@media (max-width:380px){.nav-grid{grid-template-columns:repeat(5,1fr);}.nav-btn{width:28px;height:28px;font-size:10px;}.option-marker{width:24px;height:24px;min-width:24px;min-height:24px;font-size:var(--font-size-xs);}}/* =================================== FOOTER STYLES =================================== */ footer.footer{background:var(--color-white);color:var(--color-gray-700);padding:var(--spacing-12) 0 var(--spacing-8);border-top:1px solid var(--color-gray-200);}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--spacing-8);margin-bottom:var(--spacing-8);}.footer-brand{max-width:320px;}.footer-logo img{height:60px;width:auto;object-fit:contain;transition:height var(--transition-base);}@media (max-width:1024px){.footer-logo img{height:55px;}}.footer-tagline{color:var(--color-gray-600);font-size:var(--font-size-sm);line-height:1.6;margin-top:var(--spacing-4);}.social-links{display:flex;gap:var(--spacing-3);margin-top:var(--spacing-4);}.social-links a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--color-gray-100);color:var(--color-gray-600);border-radius:50%;transition:all var(--transition-fast);}.social-links a:hover{background:var(--color-teal);color:var(--color-white);}.footer-links h4{color:var(--color-navy);font-size:var(--font-size-base);font-weight:600;margin-bottom:var(--spacing-4);}.footer-links ul{list-style:none;padding:0;margin:0;}.footer-links li{margin-bottom:var(--spacing-2);}.footer-links a{color:var(--color-gray-600);font-size:var(--font-size-sm);transition:color var(--transition-fast);}.footer-links a:hover{color:var(--color-teal);}.footer-disclaimer{padding:var(--spacing-4) 0;border-top:1px solid var(--color-gray-200);border-bottom:1px solid var(--color-gray-200);margin-bottom:var(--spacing-4);}.footer-disclaimer p{font-size:var(--font-size-xs);color:var(--color-gray-500);line-height:1.6;margin:0;}.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-4);}.footer-bottom p{font-size:var(--font-size-sm);color:var(--color-gray-500);margin:0;}.footer-legal{display:flex;gap:var(--spacing-4);}.footer-legal a{font-size:var(--font-size-sm);color:var(--color-gray-500);}.footer-legal a:hover{color:var(--color-teal);}/* =================================== HEADER LOGO FIXES =================================== */ /* =================================== MOBILE FOOTER & HEADER FIXES =================================== */ @media (max-width:768px){.logo img{height:50px;}.footer-grid{grid-template-columns:1fr;gap:var(--spacing-6);text-align:center;}.footer-brand{max-width:100%;}.footer-logo img{height:60px;margin:0 auto;}.social-links{justify-content:center;}.footer-links h4{margin-top:var(--spacing-2);}.footer-bottom{flex-direction:column;text-align:center;}.footer-legal{justify-content:center;}.hero{padding:var(--spacing-8) 0 var(--spacing-10);}.hero h1{font-size:var(--font-size-xl);line-height:1.3;}.hero-subtitle{font-size:var(--font-size-sm);margin-bottom:var(--spacing-4);}.hero-stats{gap:var(--spacing-2);margin-top:var(--spacing-4);}.hero-stats .stat-item{padding:var(--spacing-2);}.hero-stats .stat-number{font-size:var(--font-size-lg);}.hero-stats .stat-label{font-size:var(--font-size-xs);}.sectional-page .grid-4{grid-template-columns:repeat(2,1fr);gap:var(--spacing-3);}.section-card{padding:var(--spacing-3);}.section-card .card-icon{width:40px;height:40px;font-size:var(--font-size-base);}.section-card .card-title{font-size:var(--font-size-sm);line-height:1.3;}.section-card .card-text{font-size:var(--font-size-xs);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}.section-card .btn{font-size:var(--font-size-xs);padding:var(--spacing-2) var(--spacing-3);}.mock-grid{grid-template-columns:repeat(3,1fr) !important;gap:var(--spacing-2) !important;}.pre-quiz-stats.grid-4{grid-template-columns:repeat(2,1fr);gap:var(--spacing-2);}.pre-quiz-stats .stat-box{padding:var(--spacing-3) !important;}.pre-quiz-stats .stat-value{font-size:var(--font-size-lg) !important;}.pre-quiz-stats .stat-label{font-size:10px !important;}.pre-quiz-stats i{font-size:var(--font-size-base) !important;}}@media (max-width:480px){.hero{padding:var(--spacing-6) 0 var(--spacing-8);}.hero h1{font-size:var(--font-size-lg);}.hero-cta .btn{font-size:var(--font-size-sm);padding:var(--spacing-3) var(--spacing-4);}.sectional-page .grid-4{grid-template-columns:1fr 1fr;}.mock-grid{grid-template-columns:repeat(2,1fr) !important;}}@media (max-width:360px){.sectional-page .grid-4{grid-template-columns:1fr 1fr;gap:var(--spacing-2);}.section-card .card-title{font-size:11px;}.mock-grid{grid-template-columns:repeat(2,1fr) !important;}}/* =================================== BLOG FILTERING =================================== */ .filter-container{display:flex;justify-content:center;gap:var(--spacing-4);margin-bottom:var(--spacing-12);flex-wrap:wrap;}.filter-btn{padding:var(--spacing-2) var(--spacing-6);background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-full);color:var(--color-gray-600);font-weight:600;font-size:var(--font-size-sm);transition:all var(--transition-fast);}.filter-btn:hover{border-color:var(--color-teal);color:var(--color-teal);}.filter-btn.active{background:var(--color-navy);border-color:var(--color-navy);color:var(--color-white);}.blog-post-card{transition:all var(--transition-base);}.blog-post-card.hidden{display:none;}.tag{display:inline-block;padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;margin-bottom:var(--spacing-4);}.tag-technical{background:var(--color-info);color:white;}.tag-case-study{background:var(--color-teal);color:white;}.tag-career{background:var(--color-navy);color:white;}@media (max-width:640px){.filter-container{gap:var(--spacing-2);}.filter-btn{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-xs);}}