/* =========================================================
   BenTreder.com Light Premium Comfort Theme
   Calm, professional, customer-friendly service-business look
   ========================================================= */

:root{
  --bg:#f6f8f5;
  --bg2:#eef3ed;
  --bg3:#e6eee7;

  --panel:rgba(255,255,255,.78);
  --panel2:rgba(255,255,255,.92);
  --panel3:rgba(21,42,35,.045);

  --ink:#17211d;
  --muted:#53635c;
  --muted2:#718179;

  --line:rgba(21,42,35,.11);
  --line2:rgba(21,42,35,.18);

  --cyan:89,168,126;
  --iceblue:181,218,198;
  --blue:95,139,120;
  --gold:199,159,89;
  --green:85,174,123;
  --danger:195,81,81;

  --shadow:0 18px 48px rgba(34,55,45,.13);
  --shadow2:0 10px 26px rgba(34,55,45,.10);

  --radius:28px;
  --radius2:24px;
  --radius-sm:18px;
}

/* Light page background */
html,
body{
  background:#f6f8f5 !important;
}

body{
  color:var(--ink) !important;
  background:
    radial-gradient(900px 620px at 8% -8%, rgba(89,168,126,.18), transparent 58%),
    radial-gradient(760px 560px at 100% 0%, rgba(199,159,89,.12), transparent 56%),
    radial-gradient(900px 760px at 50% 100%, rgba(181,218,198,.22), transparent 60%),
    linear-gradient(180deg, #fbfcf8 0%, #f3f7f1 42%, #edf3ee 100%) !important;
}

p,
main li{
  color:var(--muted) !important;
}

strong{
  color:var(--ink) !important;
}

/* Premium light glass cards */
.glass,
.section,
.card,
.subCard,
.app,
.proofCard,
.ctaBox,
.statusCard,
.quickPanel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(239,246,241,.88)) !important;
  border:1px solid rgba(21,42,35,.11) !important;
  box-shadow:0 18px 48px rgba(34,55,45,.13) !important;
  color:var(--ink) !important;
}

.glass::before,
.section::before,
.card::before,
.subCard::before,
.app::before,
.proofCard::before,
.ctaBox::before,
.statusCard::before,
.quickPanel::before{
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(89,168,126,.13), transparent 58%),
    radial-gradient(420px 160px at 100% 0%, rgba(199,159,89,.08), transparent 60%) !important;
}

/* Header */
.topbar{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(21,42,35,.12) !important;
  box-shadow:0 14px 36px rgba(34,55,45,.12) !important;
}

.brand h1,
.brand .brandTitle,
.mobileDrawerTitle{
  color:var(--ink) !important;
}

.brand .sub,
.brand .brandSub,
.mobileDrawerSub{
  color:var(--muted2) !important;
}

/* Logo */
.logo{
  background:
    linear-gradient(135deg, rgba(85,174,123,.96), rgba(181,218,198,.90) 48%, rgba(232,205,151,.84) 100%) !important;
  box-shadow:
    0 14px 26px rgba(34,55,45,.16),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

.logo::before{
  color:#13211a !important;
}

/* Top nav, tags, proof chips */
.pill,
.menuToggle,
.btn,
.tag,
.proof,
.mobileDrawerMini,
.dock a{
  border-color:rgba(21,42,35,.12) !important;
  box-shadow:0 8px 22px rgba(34,55,45,.08) !important;
}

.pill,
.menuToggle,
.tag,
.proof,
.dock a{
  background:rgba(255,255,255,.72) !important;
  color:#24352e !important;
}

.btn{
  background:rgba(255,255,255,.76) !important;
  color:#20332b !important;
}

/* Primary CTA */
.pill.cta,
.btn.primary,
.dock a.quote{
  background:
    linear-gradient(135deg, rgba(85,174,123,.96), rgba(153,209,178,.90)) !important;
  color:#ffffff !important;
  border-color:rgba(69,150,105,.72) !important;
  box-shadow:
    0 14px 30px rgba(69,150,105,.22),
    0 0 0 1px rgba(255,255,255,.28) inset !important;
}

.btn.secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(244,248,244,.84)) !important;
  color:#20332b !important;
}

/* Hero text */
.heroTitle,
main h1,
main h2,
main h3,
.sectionHead h2,
.app h3,
.subCard h3,
.proofCard h3,
.miniCard strong{
  color:var(--ink) !important;
}

.heroTitle .shine{
  background:
    linear-gradient(135deg, #15211c 0%, #243930 36%, #4b9b6c 70%, #b58a3f 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

.heroLead,
.sectionHead p,
.app p,
.subCard p,
.proofCard p,
.faq p{
  color:var(--muted) !important;
}

/* Kicker */
.kicker{
  border-color:rgba(85,174,123,.24) !important;
  background:rgba(255,255,255,.74) !important;
  color:#254238 !important;
  box-shadow:0 10px 24px rgba(34,55,45,.08) !important;
}

.dot{
  background:rgb(85,174,123) !important;
  box-shadow:
    0 0 0 6px rgba(85,174,123,.12),
    0 0 20px rgba(85,174,123,.28) !important;
}

/* Interior cards */
.app,
.subCard,
.proofCard,
.miniCard{
  background:
    radial-gradient(360px 160px at 0% 0%, rgba(89,168,126,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,250,246,.82)) !important;
  border-color:rgba(21,42,35,.11) !important;
  box-shadow:0 14px 30px rgba(34,55,45,.10) !important;
}

.icon{
  background:
    linear-gradient(135deg, rgba(85,174,123,.16), rgba(199,159,89,.10)) !important;
  border-color:rgba(85,174,123,.18) !important;
  color:#20352b !important;
}

.miniCard .eyebrow{
  color:var(--muted2) !important;
}

.miniCard span{
  color:var(--muted) !important;
}

.miniTag{
  background:rgba(255,255,255,.76) !important;
  border-color:rgba(21,42,35,.10) !important;
  color:#33443d !important;
}

/* FAQs, tables, blockquotes */
.faq details,
main table,
main blockquote{
  background:rgba(255,255,255,.70) !important;
  border-color:rgba(21,42,35,.10) !important;
  color:var(--ink) !important;
}

.faq summary,
main th{
  color:var(--ink) !important;
}

main td{
  color:var(--muted) !important;
}

main blockquote{
  border-left-color:rgba(85,174,123,.72) !important;
  color:var(--muted) !important;
}

/* Breadcrumbs */
.breadcrumbs,
.breadcrumbs a{
  color:var(--muted2) !important;
}

/* Hero image/media panels */
.portrait,
.heroImage,
.hero-image,
.heroMedia,
.hero-media,
.pageHeroMedia,
.page-hero-media,
.portrait-landscape,
.hero-landscape-wrap{
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(89,168,126,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(235,243,237,.90)) !important;
  border-color:rgba(21,42,35,.11) !important;
  box-shadow:0 16px 38px rgba(34,55,45,.12) !important;
}

/* Mobile drawer */
.mobileDrawerBackdrop{
  background:rgba(18,28,24,.24) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

.mobileDrawerPanel{
  background:
    radial-gradient(600px 300px at 12% 0%, rgba(89,168,126,.16), transparent 60%),
    radial-gradient(520px 260px at 92% 20%, rgba(199,159,89,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(241,247,242,.98)) !important;
  border-left-color:rgba(21,42,35,.14) !important;
  box-shadow:
    -20px 0 60px rgba(34,55,45,.20),
    inset 1px 0 0 rgba(255,255,255,.60) !important;
}

.mobileDrawerClose{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(21,42,35,.13) !important;
  color:#20352b !important;
}

.mobileDrawerLink{
  border-color:rgba(21,42,35,.12) !important;
  background:
    radial-gradient(260px 120px at 18% 0%, rgba(89,168,126,.11), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,250,246,.82)) !important;
  color:#20352b !important;
  box-shadow:0 10px 24px rgba(34,55,45,.09) !important;
}

.mobileDrawerLink.primary{
  border-color:rgba(85,174,123,.42) !important;
  background:
    radial-gradient(280px 140px at 18% 0%, rgba(85,174,123,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(237,247,241,.86)) !important;
}

.mobileDrawerLink.active{
  border-color:rgba(199,159,89,.40) !important;
  background:
    radial-gradient(280px 140px at 18% 0%, rgba(199,159,89,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(249,244,233,.84)) !important;
}

.mobileDrawerArrow{
  color:var(--muted2) !important;
}

.mobileDrawerMini{
  background:rgba(255,255,255,.78) !important;
  color:#20352b !important;
}

/* Bottom dock */
.dock{
  background:rgba(255,255,255,.84) !important;
  border-color:rgba(21,42,35,.12) !important;
  box-shadow:0 18px 44px rgba(34,55,45,.16) !important;
}

/* Services page */
.services-jump a,
.services-chip-link,
.services-chip{
  background:rgba(255,255,255,.74) !important;
  border-color:rgba(21,42,35,.11) !important;
  color:#263a31 !important;
}

.services-jump a.primary{
  background:
    linear-gradient(135deg, rgba(85,174,123,.96), rgba(153,209,178,.90)) !important;
  color:#ffffff !important;
  border-color:rgba(69,150,105,.72) !important;
}

.services-kpi-row{
  background:rgba(255,255,255,.68) !important;
  border-color:rgba(21,42,35,.09) !important;
  color:var(--muted) !important;
}

.services-kpi-row strong{
  color:var(--ink) !important;
}

/* Footer */
footer{
  color:var(--muted2) !important;
}

footer a{
  color:#365348 !important;
}

/* Hover */
.pill:hover,
.menuToggle:hover,
.btn:hover,
.tag:hover,
.proof:hover,
.app:hover,
.subCard:hover,
.proofCard:hover,
.card:hover{
  filter:brightness(1.015) !important;
  border-color:rgba(85,174,123,.24) !important;
}

/* Selection */
::selection{
  background:rgba(85,174,123,.28);
  color:#122018;
}

/* ===== Projects / Networks hero action text contrast fix ===== */
.projects-actions a,
.hero-links a,
.network-actions a{
  color:#183126 !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(21,42,35,.14) !important;
  text-shadow:none !important;
}

.projects-actions a:hover,
.hero-links a:hover,
.network-actions a:hover{
  color:#13271f !important;
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(85,174,123,.26) !important;
}

/* keep primary CTA readable */
.projects-actions a.primary,
.network-actions a.primary{
  color:#ffffff !important;
  background:linear-gradient(135deg, rgba(85,174,123,.96), rgba(153,209,178,.90)) !important;
  border-color:rgba(69,150,105,.72) !important;
}

/* keep gold button readable too */
.projects-actions a.gold,
.network-actions a.gold{
  color:#183126 !important;
  background:linear-gradient(180deg, rgba(255,251,243,.96), rgba(244,236,214,.92)) !important;
  border-color:rgba(199,159,89,.38) !important;
}

/* ===== Premium color + font polish ===== */

/* Slightly calmer page background */
body{
  background:
    radial-gradient(900px 620px at 8% -8%, rgba(89,168,126,.14), transparent 58%),
    radial-gradient(760px 560px at 100% 0%, rgba(199,159,89,.08), transparent 56%),
    radial-gradient(900px 760px at 50% 100%, rgba(181,218,198,.18), transparent 60%),
    linear-gradient(180deg, #fcfdf9 0%, #f4f8f3 42%, #edf3ee 100%) !important;
}

/* Slightly stronger readable muted text */
p,
main li,
.heroLead,
.sectionHead p,
.app p,
.subCard p,
.proofCard p,
.faq p,
.ctaBox p{
  color:#51625a !important;
}

/* Softer cards */
.glass,
.section,
.card,
.subCard,
.app,
.proofCard,
.ctaBox,
.statusCard,
.quickPanel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82)),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,247,242,.90)) !important;
  border:1px solid rgba(21,42,35,.09) !important;
  box-shadow:0 14px 38px rgba(34,55,45,.10) !important;
}

/* Slightly cleaner inner cards */
.app,
.subCard,
.proofCard,
.miniCard{
  background:
    radial-gradient(360px 160px at 0% 0%, rgba(89,168,126,.09), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(247,250,247,.86)) !important;
  box-shadow:0 12px 26px rgba(34,55,45,.08) !important;
}

/* Better nav/readability */
.pill,
.menuToggle,
.tag,
.proof,
.dock a{
  background:rgba(255,255,255,.82) !important;
  color:#23342d !important;
}

/* Keep CTA green premium but a little softer */
.pill.cta,
.btn.primary,
.dock a.quote{
  background:
    linear-gradient(135deg, rgba(104,185,137,.94), rgba(163,214,185,.90)) !important;
  border-color:rgba(83,160,115,.54) !important;
  box-shadow:
    0 12px 24px rgba(69,150,105,.16),
    0 0 0 1px rgba(255,255,255,.30) inset !important;
}

/* Headings a touch crisper */
.heroTitle,
main h1,
main h2,
main h3,
.sectionHead h2,
.app h3,
.subCard h3,
.proofCard h3,
.miniCard strong,
.project-name,
.network-name{
  letter-spacing:-.03em !important;
}

/* Slightly calmer buttons */
.btn{
  background:rgba(255,255,255,.84) !important;
  color:#20332b !important;
  box-shadow:0 8px 18px rgba(34,55,45,.08) !important;
}