:root{
  --brand:#19A15F; --brand-600:#168A55; --brand-700:#0E6B41;
  --ink:#0E1720; --muted:#6B7A89; --line:#E6EEF3; --card:#fff; --dark:#0B1620;
  --bg-base:#F7FBF9; --bg-mint-200:#E7F9F2; --bg-mint-400:#C8F2DF;
  --soft-1: radial-gradient(1100px 600px at 70% 140px, rgba(200,242,223,.55) 0%, rgba(200,242,223,0) 56%);
  --soft-2: radial-gradient(900px 440px at 24% 60px, rgba(231,249,242,.92) 0%, rgba(231,249,242,0) 60%);
  --shadow-1:0 12px 36px rgba(16,38,28,.10),0 3px 14px rgba(16,38,28,.06);
  --shadow-2:0 22px 60px rgba(16,38,28,.16),0 6px 20px rgba(16,38,28,.10);
  --r-xl:22px; --r-lg:16px; --r-md:12px
}

/* Base */
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--soft-1),var(--soft-2),var(--bg-base)}
a{text-decoration:none}
.text-brand-600{color:var(--brand-600)}

/* Utilities */
.min-vh-80{min-height:80vh}
.round{border-radius:999px}
.rounded-4{border-radius:1rem!important}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)!important}
.lift{transition:transform .2s ease,box-shadow .2s ease}
.lift:hover{transform:translateY(-.15rem);box-shadow:0 .75rem 1.25rem rgba(0,0,0,.15)}
.hover-success{transition:.2s all ease;border-color:#94a3b8;color:#495057}
.hover-success:hover{border-color:#059669;color:#059669;background-color:#f0fdf4}
.tilt-2{transform:rotate(2deg);transition:transform .3s ease}
.hover-tilt-0:hover{transform:rotate(0)}
.scale-hover{transition:transform .3s ease}
.scale-hover:hover{transform:scale(1.03)}
.hover-bg:hover{background-color:#f8fafc}
.object-fit-cover{object-fit:cover}
.bg-emerald-gradient{background:linear-gradient(135deg,#f8fafc 0%,#ecfdf5 100%)}
.bg-white-blur{background:rgba(255,255,255,.9)!important;backdrop-filter:blur(8px)}
.bg-slate-900{background-color:#0f172a!important}
.text-slate-400{color:#94a3b8!important}

/* Buttons / Inputs */
.btn-outline{border:1px solid var(--line)!important}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-600);color:#fff}
.btn-outline-emerald{border-color:#059669;color:#059669}
.btn-outline-emerald:hover{background:#f0fdf4;border-color:#059669;color:#059669}
.btn svg{width:1.25em;height:1.25em;vertical-align:middle}
.form-icon{width:20px;height:20px;pointer-events:none}
.input-group-lg .input-group-text{padding:.625rem 1rem;border-right:0;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}
.input-group-lg .form-control{border-left:0;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}

/* Navbar */
.navbar{box-shadow:0 6px 24px rgba(9,30,66,.06);border-bottom:1px solid var(--line);background:#fff}
.navbar .nav-link{transition:color .2s ease}
.nav-link{color:#4D5C6A!important;font-weight:600}
.nav-link:hover{color:var(--brand)!important}
.nav-emerald{
  --bs-navbar-color:#475569;
  --bs-navbar-hover-color:#059669;
  --bs-navbar-active-color:#059669;
  --bs-navbar-brand-color:#111827;
  --bs-navbar-brand-hover-color:#059669
}
.brand-badge{
  width:40px;height:40px;display:grid;place-items:center;border-radius:.75rem;background:#059669;color:#fff;font-weight:800;margin-right:.5rem;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)
}
.brand-badge svg{width:22px;height:22px;display:block}
.navbar-toggler{border:0;padding:.35rem .5rem;background-color:rgba(15,23,42,.05)}
.navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(5,150,105,.25)}

/* Hero */
.hero{padding:96px 0 110px;background:var(--soft-1),var(--soft-2),var(--bg-base)}
.kicker{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border:1px solid #D3EFD9;border-radius:999px;background:#E9F6EF;color:#1A6D45;font-weight:700;font-size:.8rem}
.h1{font-weight:900;font-size:3.25rem;line-height:1.05;letter-spacing:-.9px}
.h1 .green{color:var(--brand)}
.lead{color:var(--muted);max-width:560px}
.metrics .num{font-weight:900}
.hero-card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-1);transform:rotate(2.4deg);transform-origin:70% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s;position:relative}
.hero-card::before{content:"";position:absolute;inset:-14px;border-radius:26px;background:radial-gradient(260px 160px at 70% 20%,rgba(31,156,100,.25),transparent 70%);filter:blur(18px);opacity:.8;z-index:-1}
.media-box{height:200px;border:1px dashed #DBE7EC;border-radius:14px;background:linear-gradient(0deg,rgba(255,255,255,.85),rgba(255,255,255,.85)),radial-gradient(320px 140px at 44% 30%,#F3FBF6,transparent 70%);display:grid;place-items:center;color:#97A8B4;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.hero-card:has(.media-box:hover){transform:rotate(0deg) translateY(-2px);box-shadow:var(--shadow-2)}
@supports not(selector(.hero-card:has(.media-box:hover))){.hero-card:hover{transform:rotate(0deg) translateY(-2px);box-shadow:var(--shadow-2)}}
.card-row{display:grid;grid-template-columns:120px 1fr;gap:.75rem;padding:.6rem 0;border-top:1px solid #EDF3F6;font-size:.9rem}
.badge-soft{background:#ECF7F0;border:1px solid #CFEAD9;color:#1B7D4C;border-radius:999px;padding:.25rem .6rem;font-weight:800;font-size:.8rem}

/* Sections */
.section{padding:120px 0}
.section-soft{background:var(--soft-1),var(--soft-2),var(--bg-base)}
.section-head .kicker{margin-bottom:.5rem}
.section-head h2{font-size:1.75rem;font-weight:900;letter-spacing:-.3px}
.section-head p{color:var(--muted);max-width:760px;margin-inline:auto}

/* How it works */
.card-step{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-1);transition:transform .25s,box-shadow .25s}
.card-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.step-num{width:26px;height:26px;border-radius:8px;background:#EFF5F2;color:#4A5B67;display:grid;place-items:center;font-weight:800}
.step-ico{width:26px;height:26px;border-radius:8px;background:#EAF6F0;color:#157147;display:grid;place-items:center}
.icon-blob{width:64px;height:64px;transition:transform .3s ease}
.step-hover:hover .icon-blob{transform:scale(1.1)}
.step-number{top:-8px;right:-8px;width:32px;height:32px;line-height:32px;border-radius:999px;background:#0f172a;color:#fff;font-weight:700;font-size:.875rem;display:flex;align-items:center;justify-content:center;position:absolute}
.step-card{transition:all .3s ease}
.step-hover:hover .step-card{background:#fff;box-shadow:0 1.25rem 2rem -.75rem rgba(0,0,0,.15);transform:translateY(-.25rem)}
.connector{margin-top:2.5rem;width:100%;height:2px;background:linear-gradient(90deg,#cbd5e1 0%,rgba(203,213,225,0) 100%);z-index:0;position:relative}
.connector::after{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid #cbd5e1}

/* Samples */
.list-box{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-1)}
.item{padding:.9rem 1rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.item:first-child{border-top:0}
.item.sel{background:#F6FCF8;border-left:3px solid var(--brand)}
.item .price{font-weight:800;color:#3A4B57}
.item.sel .price{color:var(--brand-700)}
.sample-card{border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-1);overflow:hidden}
.sample-media{height:210px;background-image:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,0)),url('https://images.unsplash.com/photo-1544473244-fb3a74f1f6d3?q=80&w=1400&auto=format&fit=crop');background-size:cover;background-position:center}
.meta{border:1px solid var(--line);border-radius:12px;background:#FCFEFE}
.rowb{border:1px dashed #DBE7EC;border-radius:12px;background:#F9FDFB}

/* Forms */
.form-card{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-1)}
.info-card{border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1)}

/* Footer */
.footer{background:var(--dark);color:#B9C6CF}
.footer a{color:#B9C6CF}
.footer a:hover{color:#E6F0F6}
.footer .border-top{border-color:#203242!important}
.footer-link{color:#94a3b8;text-decoration:none;transition:color .2s ease}
.footer-link:hover{color:#34d399}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:.5rem;background:#1f2937;color:#e5e7eb;transition:background-color .2s ease,color .2s ease}
.btn-icon:hover{background:#059669;color:#fff}

/* Micro animations */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}