/* ==========================
       Design tokens (colors + type)
       ========================== */
 :root {
     /* Colors */
     --color-primary: #9cbc68;
     /* Primary Button */
     --color-primary-hover: #7ea84d;
     /* Hover */
     --textbox-border: #b8be91;
     /* Textbox Border */
     --logo-color: #BBC197;
     /* Logo Color */
     --header-bg: #5c654e;
     /* Header / Hero Background */
     --main-bg: #EFE7DA;
     /* Main Background */
     --text-color: #f7f6f5;
     /* Text Color */
     --headerbg-text-color: #ccc;
     /* Semantic */
     --muted: #6b6f5f;
     --card-bg: rgba(255, 255, 255, 0.04);

     /* Spacing / scale */
     --radius-md: 12px;
     --radius-sm: 8px;
     --gap: 16px;

     /* Fonts */
     --font-base: 'Inter', sans-serif;
     --font-heading: 'Lora', serif;
     --font-desc: 'Plus Jakarta Sans', sans-serif;
 }

 /* Reset + base */
 * {
     box-sizing: border-box
 }

 html,
 body {
     height: 100%
 }

 body {
     margin: 0;
     font-family: "Inter", system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
     background: var(--main-bg);
     color: #222;
     /* default content text (not hero) */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 a {
     color: inherit
 }

 .display-flex {
     display: flex;
     flex: 1;
 }

 /* Small utility */
 .max-width {
     max-width: 1100px;
     margin: auto;
 }

 .container {
     max-width: 1100px;
     margin: 0 auto
 }

 .row {
     display: flex;
     gap: var(--gap);
     flex-wrap: wrap
 }

 .col {
     flex: 1;
     min-width: 220px
 }

 .card {
     background: white;
     border-radius: var(--radius-md);
     padding: 18px;
     box-shadow: 0 6px 18px rgba(36, 44, 30, 0.06)
 }

 .text-center {
     text-align: center;
 }

 /* ==================
       Header / Hero
       ================== */
 .hero {
     background: linear-gradient(180deg, var(--header-bg) 0%, rgba(92, 101, 78, 0.88) 100%);
     color: var(--text-color);
     border-radius: 18px;
     padding: 40px;
     display: flex;
     align-items: center;
     gap: 24px;
     margin-bottom: 24px
 }

 .logo {
     height: 81px;
    width: 100%;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); */
     color: var(--logo-color);
     font-weight: 700;
     font-size: 18px;
     letter-spacing: 0.6px;
    padding-top: 4px;

 }
 .logo img{
    height: 92%;
 }
 .hero h1 {
     font-family: "Lora", serif;
     margin: 0;
     font-size: 28px
 }

 .hero p {
     margin: 6px 0 0;
     font-family: "Plus Jakarta Sans", sans-serif;
     opacity: 0.95
 }

 /* ==================
       Buttons
       ================== */
 .btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 16px;
     border-radius: 10px;
     border: 0;
     cursor: pointer;
     font-weight: 600;
     font-family: inherit
 }

 .btn-primary {
     background: var(--color-primary);
     color: #fff;
     box-shadow: 0 6px 14px rgba(156, 188, 104, 0.18);
     transition: transform .08s ease, background .12s
 }

 .btn-primary:hover,
 .btn-primary:focus {
     background: var(--color-primary-hover);
     transform: translateY(-1px)
 }

 .btn-ghost {
     background: transparent;
     border: 1px solid var(--textbox-border);
     color: #333
 }

 .btn-sm {
     padding: 6px 10px;
     font-size: 14px;
     border-radius: 8px
 }

 .btn-disabled {
     opacity: 0.48;
     cursor: not-allowed;
     transform: none
 }

 /* Icon helper */
 .icon {
     display: inline-flex;
     width: 18px;
     height: 18px;
     align-items: center;
     justify-content: center
 }

 /* ==================
       Forms / Inputs
       ================== */
 label {
     display: block;
     font-size: 13px;
     margin-bottom: 6px;
     color: var(--muted);
     font-weight: 600
 }

 .input {
     width: 100%;
     padding: 12px;
     border-radius: 10px;
     border: 1px solid var(--textbox-border);
     background: white;
     font-size: 15px
 }

 .input:focus {
     outline: none;
     box-shadow: 0 0 0 4px rgba(158, 188, 104, 0.12);
     border-color: var(--color-primary-hover)
 }

 /* ==================
       Components
       ================== */
 .swatches {
     display: flex;
     gap: 12px;
     align-items: center
 }

 .swatch {
     width: 84px;
     height: 84px;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 8px;
     color: #fff;
     font-weight: 700;
     font-size: 12px;
     box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06)
 }

 .swatch .hex {
     background: rgba(0, 0, 0, 0.18);
     padding: 6px;
     border-radius: 6px;
     font-size: 11px
 }

 .typography-samples {
     display: flex;
     flex-direction: column;
     gap: 10px
 }

 .h1 {
     font-family: "Lora", serif;
     font-size: 36px;
     margin: 0
 }

 .h2 {
     font-family: "Lora", serif;
     font-size: 22px;
     margin: 0
 }

 .lead {
     font-family: "Plus Jakarta Sans", sans-serif;
     font-size: 15px;
     color: var(--muted)
 }

 .card-ghost {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.9));
     border-radius: 14px;
     padding: 18px
 }

 .badge {
     display: inline-block;
     padding: 6px 10px;
     border-radius: 999px;
     font-weight: 600;
     font-size: 13px
 }

 .badge-soft {
     background: rgba(156, 188, 104, 0.12);
     color: var(--color-primary)
 }

 /* Table / list */
 .list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 8px
 }

 .list li {
     background: white;
     padding: 12px;
     border-radius: 10px
 }

 /* Accessibility: focus ring for keyboard users */
 :focus {
     outline: 3px solid rgba(15, 95, 15, 0.12);
     outline-offset: 2px
 }

 /* Responsive */
 @media (max-width:720px) {
     .hero {
         flex-direction: column;
         align-items: flex-start
     }

     .footer-content,
     .footer-right-flex {
         flex-direction: column;
     }

     .footer-right-flex {
         gap: 5px;
     }
 }