/* =========================

   EBERN Light Theme Styles

   ========================= */

:root{

  --primary:#0B0B0B;

  --accent:#0B6B3A;

  --accent2:#E11B22;



  --text:#0F172A;

  --muted:#64748B;



  --bg:#F7F9FC;

  --surface:#FFFFFF;

  --border:#E6ECF5;

  --soft:#EFF6FF;



  --radius:18px;

  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

  --shadow2: 0 6px 18px rgba(15, 23, 42, 0.10);



  --max: 1120px;

}



*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{

  margin:0;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica;

  color:var(--text);

  background: radial-gradient(1200px 600px at 20% 0%, #ffffff 0%, var(--bg) 60%) fixed;

  line-height:1.55;

}



a{color:inherit; text-decoration:none}

img{max-width:100%; display:block}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}



.small{font-size:.92rem}

.muted{color:var(--muted)}

.badge{

  display:inline-flex; align-items:center; gap:8px;

  padding:8px 12px;

  border:1px solid var(--border);

  background:rgba(255,255,255,.75);

  border-radius:999px;

  backdrop-filter: blur(8px);

}

.dot{width:8px; height:8px; border-radius:999px; background:var(--accent2)}



.btn{

  display:inline-flex; align-items:center; justify-content:center; gap:10px;

  padding:12px 16px;

  border-radius:12px;

  font-weight:600;

  border:1px solid transparent;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;

  cursor:pointer;

  user-select:none;

}

.btn-primary{

  background: linear-gradient(135deg, var(--accent), #18A35A);

  color:#fff;

  box-shadow: 0 10px 24px rgba(11,107,58,.22);

}

.btn-primary:hover{transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11,107,58,.28)}

.btn-ghost{

  background: rgba(255,255,255,.7);

  border-color: var(--border);

  color: var(--primary);

}

.btn-ghost:hover{transform: translateY(-2px); box-shadow: var(--shadow)}



.card{

  background: var(--surface);

  border:1px solid var(--border);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}



/* Image helpers */

.img-cover{

  position:relative;

  overflow:hidden;

  border-radius: calc(var(--radius) + 6px);

  border:1px solid var(--border);

  box-shadow: var(--shadow2);

  background-size: cover;

  background-position:center;

}

.img-cover::after{

  content:"";

  position:absolute; inset:0;

  background: linear-gradient(135deg, rgba(11,42,74,.62), rgba(30,111,255,.20));

}

.img-cover .img-content{

  position:relative;

  z-index:1;

  padding:18px;

  color:#fff;

}

.img-cover .img-content p{color: rgba(255,255,255,.82)}



.thumb{

  height:150px;

  border-radius: 14px;

  border:1px solid var(--border);

  background-size: cover;

  background-position:center;

  box-shadow: 0 10px 24px rgba(15,23,42,.10);

}



.service-thumb{

  height:140px;

  border-radius: 14px;

  border:1px solid var(--border);

  background-size: cover;

  background-position:center;

  margin-bottom:12px;

}



.kpi{

  display:flex;

  gap:14px;

  flex-wrap:wrap;

  margin-top:12px;

}

.kpi .k{

  padding:10px 12px;

  border-radius: 14px;

  border:1px solid rgba(255,255,255,.22);

  background: rgba(255,255,255,.10);

  backdrop-filter: blur(10px);

}

.k strong{display:block; font-size:1.05rem}

.k span{display:block; opacity:.85; font-size:.9rem}



.header{

  position: sticky; top:0; z-index:50;

  background: rgba(246,249,255,.75);

  backdrop-filter: blur(10px);

  border-bottom:1px solid var(--border);

}

.topbar{

  border-bottom:1px solid var(--border);

  background: rgba(255,255,255,.55);

}

.topbar .row{

  display:flex; align-items:center; justify-content:space-between;

  padding:10px 0;

  gap:12px; flex-wrap:wrap;

}

.topbar .row a{

  color:var(--muted);

  padding:6px 10px;

  border-radius:999px;

  border:1px solid transparent;

}

.topbar .row a:hover{border-color:var(--border); background: rgba(255,255,255,.75)}



.nav{

  display:flex; align-items:center; justify-content:space-between;

  padding:14px 0;

  gap:14px;

}

.brand{

  display:flex; align-items:center; gap:12px;

  font-weight:800; letter-spacing:.2px;

}

.brand-logo{

  height:56px;

  width:auto;

  border-radius:14px;

  background:#fff;

  border:1px solid var(--border);

  padding:6px;

  box-shadow:0 10px 24px rgba(15,23,42,.10);

}



.logo{

  width:40px; height:40px; border-radius:14px;

  background: linear-gradient(135deg, var(--primary), var(--accent));

  box-shadow: 0 10px 24px rgba(11,42,74,.18);

}

.brand span{color:var(--primary)}

.menu{

  display:flex; align-items:center; gap:18px;

}

.menu a{

  padding:10px 10px;

  border-radius:12px;

  color:var(--muted);

  font-weight:600;

  border:1px solid transparent;

}

.menu a:hover{color:var(--primary); border-color:var(--border); background: rgba(255,255,255,.6)}

.menu a.active{

  color:var(--primary);

  background: rgba(255,255,255,.75);

  border-color: var(--border);

}



.hero{

  padding:48px 0 18px;

}

.hero-grid{

  display:grid;

  grid-template-columns: 1.2fr .8fr;

  gap:22px;

  align-items:stretch;

}

.hero h1{

  margin:14px 0 10px;

  font-size: clamp(2rem, 3.6vw, 3.2rem);

  line-height:1.1;

  letter-spacing:-.6px;

}

.hero p{margin:0 0 18px; color:var(--muted); font-size:1.05rem}

.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}



.hero-media{

  overflow:hidden;

  position:relative;

  min-height: 360px;

  border-radius: calc(var(--radius) + 6px);

  border:1px solid var(--border);

  box-shadow: var(--shadow2);

  background:

    linear-gradient(135deg, rgba(11,11,11,.72), rgba(11,107,58,.45)),

    url("https://images.unsplash.com/photo-1504274066651-8d31a536b11a?auto=format&fit=crop&w=1400&q=80");

  background-size: cover;

  background-position:center;

}

.hero-media::after{

  content:"";

  position:absolute; inset:-30%;

  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.26), transparent 55%);

  transform: rotate(12deg);

  animation: floatGlow 7s ease-in-out infinite;

}

@keyframes floatGlow{

  0%,100%{transform: translateY(-6px) rotate(12deg)}

  50%{transform: translateY(10px) rotate(12deg)}

}



.section{padding:40px 0}

.section-title{

  display:flex; align-items:flex-end; justify-content:space-between;

  gap:16px; flex-wrap:wrap;

  margin-bottom:18px;

}

.section-title h2{

  margin:0;

  font-size: clamp(1.35rem, 2.2vw, 2rem);

}

.section-title p{margin:0; color:var(--muted)}



.grid-3{

  display:grid;

  grid-template-columns: repeat(3, 1fr);

  gap:16px;

}

.grid-2{

  display:grid;

  grid-template-columns: repeat(2, 1fr);

  gap:16px;

}



.feature, .service{

  padding:18px;

  transition: transform .18s ease, box-shadow .18s ease;

}

.feature:hover, .service:hover{transform: translateY(-4px); box-shadow: var(--shadow2)}

.icon{

  width:44px; height:44px; border-radius:14px;

  background: linear-gradient(135deg, var(--soft), #ffffff);

  border:1px solid var(--border);

  display:grid; place-items:center;

  color: var(--accent);

  font-weight:900;

}

.feature h3, .service h3{margin:12px 0 6px}

.feature p, .service p{margin:0; color:var(--muted)}



.split{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap:16px;

  align-items:stretch;

}

.panel{padding:20px}

.panel h3{margin:0 0 8px}

.panel ul{margin:10px 0 0; padding-left:18px; color:var(--muted)}

.panel li{margin:8px 0}



.cta{

  padding:26px;

  background: linear-gradient(135deg, rgba(11,107,58,.10), rgba(225,27,34,.06));

  border:1px solid var(--border);

  border-radius: calc(var(--radius) + 6px);

  box-shadow: var(--shadow);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:16px;

  flex-wrap:wrap;

}

.cta h3{margin:0}

.cta p{margin:6px 0 0; color:var(--muted)}



.form{

  display:grid;

  gap:12px;

}

.input{

  padding:12px 14px;

  border-radius:12px;

  border:1px solid var(--border);

  background: rgba(255,255,255,.9);

  outline:none;

  transition: border-color .18s ease, box-shadow .18s ease;

}

.input:focus{

  border-color: rgba(30,111,255,.55);

  box-shadow: 0 0 0 4px rgba(30,111,255,.12);

}

textarea.input{min-height:120px; resize:vertical}



.footer{

  margin-top:40px;

  padding:28px 0;

  border-top:1px solid var(--border);

  background: rgba(255,255,255,.55);

}

.footer-grid{

  display:grid;

  grid-template-columns: 1.2fr .8fr .8fr;

  gap:18px;

}

.footer a{color:var(--muted)}

.footer a:hover{color:var(--primary)}

.footer h4{margin:0 0 10px}

hr.sep{border:none; border-top:1px solid var(--border); margin:18px 0}



/* Scroll reveal animation */

.reveal{

  opacity:0;

  transform: translateY(18px);

  transition: opacity .6s ease, transform .6s ease;

}

.reveal.show{

  opacity:1;

  transform: translateY(0);

}



/* Responsive */

@media (max-width: 980px){

  .hero-grid{grid-template-columns: 1fr}

  .hero-media{min-height: 280px}

  .grid-3{grid-template-columns: 1fr}

  .grid-2{grid-template-columns: 1fr}

  .split{grid-template-columns: 1fr}

  .footer-grid{grid-template-columns: 1fr}

  .menu{gap:10px; flex-wrap:wrap; justify-content:flex-end}

}