/* ===== ALPINE.JS CLOAK ===== */
 [x-cloak] {
     display: none !important;
 }

 /* ===== RESET ===== */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: Arial, Helvetica, sans-serif;
     background: #f6f7f9;
     color: #1f2937;
     line-height: 1.6;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 /* ===== HEADER ===== */
 .header {
     background: #0f172a;
     color: #ffffff;
     padding: 16px 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .logo {
     font-size: 22px;
     font-weight: bold;
 }

 .nav {
     display: flex;
     gap: 20px;
 }

 .nav a {
     color: #cbd5e1;
     font-size: 15px;
     transition: color 0.3s;
 }

 .nav a:hover {
     color: #ffffff;
 }

 /* ===== WELCOME COMPONENT ===== */
 .welcome {
     background: linear-gradient(135deg, #2563eb, #1e40af);
     color: #ffffff;
     padding: 80px 24px;
     text-align: center;
 }

 .welcome h1 {
     font-size: 40px;
     margin-bottom: 16px;
 }

 .welcome p {
     max-width: 600px;
     margin: 0 auto 24px;
     font-size: 18px;
     color: #e5e7eb;
 }

 .welcome button {
     background: #ffffff;
     color: #1e40af;
     border: none;
     padding: 14px 28px;
     font-size: 16px;
     border-radius: 8px;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .welcome button:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }

 /* ===== CONTENT PLACEHOLDER ===== */
 .content {
     padding: 60px 24px;
     max-width: 1100px;
     margin: auto;
 }

 .card {
     background: #ffffff;
     border-radius: 12px;
     padding: 24px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
 }

 /* ===== FOOTER ===== */
 .footer {
     background: #020617;
     color: #94a3b8;
     padding: 32px 24px;
     margin-top: 60px;
 }

 .footer-container {
     max-width: 1100px;
     margin: auto;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 20px;
 }

 .footer h4 {
     color: #ffffff;
     margin-bottom: 12px;
 }

 .footer a {
     display: block;
     margin-bottom: 8px;
     font-size: 14px;
     color: #94a3b8;
 }

 .footer a:hover {
     color: #ffffff;
 }

 .footer-bottom {
     text-align: center;
     margin-top: 24px;
     font-size: 13px;
     color: #64748b;
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 768px) {
     .header {
         flex-direction: column;
         gap: 12px;
     }

     .welcome h1 {
         font-size: 30px;
     }
 }



 /* ===== WIDGETS ===== */
 .widgets {
     margin: 60px 24px;
     margin-top: 40px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 20px;
 }

 .widget {
     background: #ffffff;
     padding: 24px;
     border-radius: 14px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .widget h3 {
     margin-bottom: 10px;
     font-size: 18px;
     color: #0f172a;
 }

 .widget p {
     font-size: 14px;
     color: #475569;
 }

 .widget:hover {
     transform: translateY(-4px);
     box-shadow: 0 18px 35px rgba(0, 0, 0, 0.1);
 }