/* --- Dark Theme (black base) with colorful accents --- */
:root{
  --bg: #0b1220;           /* near-black base */
  --bg-elev: #0f172a;      /* elevated surfaces */
  --bg-soft: #111826;      /* section bands/cards */
  --text: #e5e7eb;         /* light text */
  --text-muted: #94a3b8;   /* muted text */
  --border: #1f2937;       /* subtle borders */
  --brand: #0ea5e9;        /* sky-500 for headings/links */
  --brand-2: #14b8a6;      /* teal-500 accents */
  --cta: #f97316;          /* orange-500 for CTA */
  --cta-hover: #ea580c;    /* orange-600 */
}

html, body{height:100%}
body{
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a{ color: var(--brand); text-decoration: none; }
a:hover{ color: #38bdf8; text-decoration: underline; } /* sky-400 */

.container{ max-width:1100px; margin:0 auto; padding:0 16px; }
section{ padding:56px 0; background: none; color: var(--text); }
hr{ border:0; border-top:1px solid var(--border); margin:24px 0; }

/* Nav */
nav.container.nav{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-top: 12px; padding-bottom: 12px;
}
.brand img{ display:block; height:80px; width:auto; }

/* Cards/boxes */
.card, .panel, .feature, .cta, .band, .inverse{
  background: #1f2937;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  color: var(--text);
}
.card:hover, .panel:hover, .feature:hover{
  box-shadow: 0 6px 22px rgba(14,165,233,0.08);
  border-color: #1e293b;
}

/* Headings with color pop */
section h2, .section-title{ color: var(--brand); }
section h3{ color: var(--brand-2); }
.muted, .subtle, .text-muted{ color: var(--text-muted) !important; }

/* Buttons */
.button, .btn{
  display:inline-block;
  background: var(--brand-2);
  color: #001014;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #115e59;
}
.button:hover, .btn:hover{
  filter:none;
  background: #0ea5a1;
  border-color: #0ea5a1;
}

/* Accent CTA button */
.btn-accent{
  background: var(--cta) !important;
  border-color: var(--cta) !important;
  color: #fff !important;
}
.btn-accent:hover{
  background: var(--cta-hover) !important;
  border-color: var(--cta-hover) !important;
}

/* Forms (inputs on dark) */
input[type="text"], input[type="email"], textarea{
  background: #0f172a;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
input::placeholder, textarea::placeholder{ color: #64748b; }

/* Submit button readable on dark */
input[type="submit"], button[type="submit"]{
  background: var(--cta);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}
input[type="submit"]:hover, button[type="submit"]:hover{
  background: var(--cta-hover);
}

/* Footer */
.site-footer{
  background: var(--bg);
  color: var(--text-muted);
  padding: 20px 0;
  margin-top: 48px;
  border-top: 1px solid var(--border);
}
.site-footer .container{ text-align:center; font-size:0.95rem; letter-spacing:0.2px; }


/* --- Light Theme Reset --- */
:root{
  --bg: #ffffff;
  --bg-soft: #f8fafc;        /* very light gray for sections/cards */
  --text: #ffffff;           /* slate-900 */
  --text-muted: #475569;     /* slate-600 */
  --border: #e2e8f0;         /* slate-200 */
  --brand: #ffffff;          /* nav/logo color */
  --link: #0ea5e9;           /* sky-500 */
  --link-hover: #0284c7;     /* sky-600 */
  --btn: #ffffff;
  --btn-text: #ffffff;
}

*{box-sizing:border-box}
html, 

a{color: var(--link); text-decoration: none;}
a:hover{color: var(--link-hover); text-decoration: underline;}

.container{max-width: 1100px; margin: 0 auto; padding: 0 16px;}
section{padding: 56px 0; background: var(--bg); color: var(--text);}
hr{border:0; border-top:1px solid var(--border); margin:24px 0}

/* Nav */
nav.container.nav{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-top: 12px; padding-bottom: 12px;
}
.brand img{display:block; height:80px; width:auto}

/* Cards/boxes */
.card, .panel, .feature, .cta{
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  color: var(--text);
}

/* Buttons */
.button, .btn{
  display:inline-block;
  background: var(--btn);
  color: var(--btn-text);
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--btn);
}
.button:hover, .btn:hover{filter:brightness(0.95)}

/* Footer */
.site-footer{
  background: var(--bg);
  color: var(--text-muted);
  padding: 20px 0;
  margin-top: 48px;
  border-top: 1px solid var(--border);
}
.site-footer .container{ text-align:center; font-size:0.95rem; letter-spacing:0.2px; }


:root{--bg:#0b0b0c;--panel:#121214;--text:#f3f4f6;--muted:#b3b7c2;--brand:#ff4747;--ok:#3fb950;--card:#18181b;--border:#27272a;--link:#e5e7eb;}
*{box-sizing:border-box}html,
a{color:var(--link);text-decoration:none} a:hover{opacity:.9}
a.button{display:inline-block;padding:.85rem 1.1rem;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,#1e1e20,#161618);}
a.button.primary{background:linear-gradient(180deg,#ff5a5a,#b32121);border-color:#c83232;color:white;font-weight:600}
a.button.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}

.brand .name{font-weight:700;letter-spacing:.2px}
.badge{display:inline-block;padding:.25rem .6rem;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.8rem}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding:40px 0}
.hero h1{font-size:2.6rem;line-height:1.1;margin:.4rem 0}
.hero p{color:var(--muted);font-size:1.05rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:18px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.section{padding:28px 0}
.kicker{color:var(--brand);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:700}
.footer{color:var(--muted);font-size:.95rem;border-top:1px solid var(--border);padding:24px 0;margin-top:28px}
label{display:block;color:var(--muted);font-size:.9rem;margin:8px 0 6px}
input,textarea,select{width:100%;padding:.8rem;border-radius:12px;border:1px solid var(--border);background:#0f0f12;color:var(--text)}
small.helper{color:var(--muted)}
ul{margin:0;padding-left:18px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}
.hero .card ul{margin:0}
.note{font-size:.95rem;color:var(--muted)}


nav.container.nav { display:flex; align-items:center; justify-content:space-between; }



.brand img {
  display: block;
  height: 80px;   /* increased from 40px */
  width: auto;
}

@media (max-width: 600px) {
  .brand img {
    height: 50px;  /* shrink on mobile */
  }
}

nav.container.nav ul { display:flex; align-items:center; gap:1rem; }

.brand img{background:transparent !important;}


/* --- Standardized footer --- */
.site-footer{
  background:#ffffff;
  color:#cbd5e1;
  padding:20px 0;
  margin-top:48px;
}
.site-footer .container{
  text-align:center;
  font-size:0.95rem;
  letter-spacing:0.2px;
}





/* --- Standardized footer --- */
.site-footer {
  background: #ffffff;
  color: #334155; /* dark gray */
  padding: 20px 0;
  margin-top: 48px;
  border-top: 1px solid #e2e8f0; /* subtle divider */
}
.site-footer .container {
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}


.section-dark, .alt, .inverse, .band {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

h1,h2,h3,h4{color: var(--text); margin: 0 0 12px;}
.muted, .subtle, .text-muted{color: var(--text-muted) !important;}


/* Small nav button style */
.btn-small {
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 6px;
}


/* --- Submission Button Styling --- */
input[type="submit"], button[type="submit"] {
  background: #0f172a;   /* brand dark */
  color: #ffffff;        /* white text */
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}
input[type="submit"]:hover, button[type="submit"]:hover {
  background: #1e293b;   /* slightly lighter on hover */
}



/* --- Colorful Theme Additions --- */
:root{
  --brand: #0e7490;        /* teal 700 (matches logo vibe) */
  --brand-2: #14b8a6;      /* teal 500 */
  --cta: #f97316;          /* orange 500 */
  --cta-hover: #ea580c;    /* orange 600 */
  --link: #0ea5e9;         /* sky 500 */
  --link-hover: #0284c7;   /* sky 600 */
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --text: #0f172a;
  --text-muted: #475569;
  --border: #e2e8f0;
}

/* Links */
a{ color: var(--link); }
a:hover{ color: var(--link-hover); }

/* Accent headings */
section h2, .section-title{ color: var(--brand); }
section h3{ color: var(--brand-2); }

/* Cards/feature blocks get subtle brand accent */
.card, .panel, .feature{
  border-left: 4px solid var(--brand);
}
.card:hover, .panel:hover, .feature:hover{
  border-color: var(--brand-2);
  box-shadow: 0 4px 16px rgba(2,132,199,0.08);
}

/* Buttons */
.button, .btn{
  background: var(--brand);
  border-color: var(--brand);
}
.button:hover, .btn:hover{
  filter: none;
  background: #0c627a;
  border-color: #0c627a;
}

/* Accent CTA button (e.g., Get a Sample) */
.btn-accent{
  background: var(--cta) !important;
  border-color: var(--cta) !important;
  color: #fff !important;
}
.btn-accent:hover{
  background: var(--cta-hover) !important;
  border-color: var(--cta-hover) !important;
}

/* Subtle colored badges (if used) */
.badge{
  display:inline-block; padding: 2px 8px; border-radius: 999px;
  background: rgba(20,184,166,0.12); color: var(--brand-2); border: 1px solid rgba(20,184,166,0.22);
  font-size: 0.8rem;
}

/* Readability in info boxes */
.card, .panel, .feature, .cta, .band, .inverse { color: var(--text); }
.card *, .panel *, .feature * { color: var(--text); }
.card a, .panel a, .feature a { color: #38bdf8; } /* sky-400 */
.card p, .panel p, .feature p { color: var(--text); }

.card, .panel, .feature{
  border: 1px solid #334155; /* slate-700 */
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
}


/* --- Force info boxes to white background for readability --- */
.card, .panel, .feature, .cta, .band, .inverse {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
}
.card h1, .card h2, .card h3, .card h4,
.panel h1, .panel h2, .panel h3, .panel h4,
.feature h1, .feature h2, .feature h3, .feature h4 {
  color: #0f172a !important;
}
.card p, .panel p, .feature p {
  color: #334155 !important; /* slate-700 for body text */
}


/* --- Drop shadow for white info boxes on dark background --- */
.card, .panel, .feature, .cta, .band, .inverse {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}


/* --- Light grey background for info boxes --- */
.card, .panel, .feature, .cta, .band, .inverse {
  background: #f8fafc !important;  /* slate-50 */
  color: #0f172a !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.card h1, .card h2, .card h3, .card h4,
.panel h1, .panel h2, .panel h3, .panel h4,
.feature h1, .feature h2, .feature h3, .feature h4 {
  color: #0f172a !important;
}
.card p, .panel p, .feature p {
  color: #334155 !important; /* slate-700 for body text */
}


/* --- Red/Green Accent Scheme --- */

/* Headings */
section h2, .section-title { color: #ef4444 !important; }    /* red-500 */
section h3 { color: #22c55e !important; }                    /* green-500 */

/* Links */
a { color: #ef4444; }
a:hover { color: #22c55e; }

/* Info boxes */
.card, .panel, .feature, .cta, .band, .inverse {
  background: #f8fafc !important;          /* light grey */
  color: #0f172a !important;                /* dark text */
  border: 2px solid #22c55e !important;     /* green outline */
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.20);
}
.card:hover, .panel:hover, .feature:hover, .cta:hover {
  border-color: #ef4444 !important;         /* red on hover */
}

/* Buttons */
.button, .btn {
  background: #22c55e !important;           /* green */
  border-color: #22c55e !important;
  color: #ffffff !important;
}
.button:hover, .btn:hover {
  background: #16a34a !important;           /* green-600 */
  border-color: #16a34a !important;
}

/* Accent CTA (e.g., Get a Sample) */
.btn-accent {
  background: #ef4444 !important;           /* red CTA */
  border-color: #ef4444 !important;
  color: #ffffff !important;
}
.btn-accent:hover {
  background: #dc2626 !important;           /* red-600 */
  border-color: #dc2626 !important;
}

/* Submit button as CTA red */
input[type="submit"], button[type="submit"]{
  background: #ef4444 !important;
  color: #fff !important;
  border: 1px solid #ef4444 !important;
}
input[type="submit"]:hover, button[type="submit"]:hover{
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}


/* --- Section Accent Borders --- */

/* Hero section accent border */
.hero, .hero-section {
  border-top: 4px solid #ef4444; /* red-500 */
}

/* Other sections alternate with green */
section:not(.hero):not(.hero-section) {
  border-top: 4px solid #22c55e; /* green-500 */
  padding-top: 56px;
}


/* --- Force form inputs to white background for readability --- */
input[type="text"], 
input[type="email"], 
textarea {
  background: #ffffff !important;  /* white */
  color: #0f172a !important;       /* dark text */
  border: 1px solid #e2e8f0 !important;  /* light grey border */
  border-radius: 6px;
  padding: 10px 12px;
}

input::placeholder, 
textarea::placeholder {
  color: #64748b !important; /* muted grey */
}


    /* --- Fix for Preferred Delivery select box --- */
    select, 
    input[type="select"], 
    option {
      background: #ffffff !important;  /* white background */
      color: #0f172a !important;       /* dark text */
      border: 1px solid #e2e8f0 !important;
    }
    

/* --- Mobile layout fixes (added) --- */
@media (max-width: 768px) {
  .hero { 
    display: grid;
    grid-template-columns: 1fr; 
    gap: 20px;
  }
  .nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .nav .brand img { height: 50px; }
}