:root {
   --bg: #222f2a;
   --panel: #56410b;
   --text: #e8eaf6;
   --muted: #b7bfd1;
   --accent: #0467a1;
 }

 * {
   box-sizing: border-box;
 }

 html,
 body {
   height: 100%;
 }

 body {
   margin: 0;
   font-family: "Chivo", sans-serif;
   background: var(--bg);
   color: var(--text);
   line-height: 1.6;
   font-optical-sizing: auto;
 }

 .card p a {
   text-decoration: underline;
   color: var(--muted);
 }

 /* Layout */
 .split {
   display: flex;
   min-height: 100dvh;
   /* dynamic viewport height to avoid mobile URL bar issues */
   isolation: isolate;
 }

 /* Left: full-height image */
 .left {
   position: relative;
   flex: 1 1 30%;
   min-height: 70vh;
   /* helps when stacked on mobile */
   overflow: hidden;
 }

 .left img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: contrast(1.02) saturate(1.05);
   transform: scale(1.02);
 }


 /* Right: content */
 .right {
   flex: 1 1 50%;
   display: grid;
   place-items: center;
   padding: clamp(1rem, 3vw, 3rem);
 }

 .card {
   width: 80%;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 20px;
   padding: clamp(1.25rem, 2.8vw, 2rem);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
   backdrop-filter: blur(6px);
 }

 h1 {
   margin: 0 0 .35rem 0;
   font-weight: 800;
   font-size: clamp(1.75rem, 3.5vw, 2.6rem);
   letter-spacing: 0.35rem;
   text-transform: uppercase;
 }

 .subtitle {
   margin: 0 0 1rem 0;
   color: var(--muted);
   font-weight: 600;
   font-size: clamp(1.75rem, 3.5vw, 2.6rem);
 }

 p {
   margin: 0 0 1rem 0;
   font-size: clamp(1rem, 1.4vw, 1.1rem);
 }

 .cta {
   display: flex;
   flex-wrap: wrap;
   gap: .75rem;
   margin-top: 1.25rem;
 }

 .btn {
   appearance: none;
   border: 0;
   border-radius: 999px;
   padding: .75rem 1.1rem;
   font-weight: 600;
   cursor: pointer;
   text-decoration: none;
   transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
 }

 .btn.primary {
   background: var(--accent);
   color: #ffffff;
 }

 .btn.secondary {
   background: var(--panel);
   color: #ffffff;
 }

 .btn.ghost {
   background: rgba(255, 255, 255, 0.06);
   color: var(--text);
   border: 1px solid rgba(255, 255, 255, 0.16);
 }

 .btn:hover {
   transform: translateY(1px);
 }

 .meta {
   display: flex;
   align-items: center;
   gap: .65rem;
   color: var(--muted);
   font-size: .75rem;
   margin-top: 1.75rem;
 }

 /* Mobile stacking */
 @media (max-width: 880px) {
   .split {
     flex-direction: column;
   }

   .left {
     height: 52vh;
   }

   .left::after {
     display: none;
   }

   .right {
     padding-top: 1.25rem;
   }
 }

 /* Reduced-motion users */
 @media (prefers-reduced-motion: reduce) {
   .btn {
     transition: none;
   }
 }