/* === KETURA TECH – quick visual upgrade ================================== */
:root{
  --bg: #0b1114;
  --card: #0f181c;
  --text: #eaf4ef;
  --muted: #b7c5be;
  --brand: #26c281;       /* green accent */
  --brand-2:#19a36b;
  --ring: rgba(38,194,129,.35);
  --shadow: 0 8px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color: var(--text);
  background: radial-gradient(1400px 800px at 10% -10%, #0e1519, #06090b) fixed;
  line-height:1.55;
}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding: clamp(16px,2vw,28px)}
.section{padding: clamp(28px,6vw,72px) 0}

/* Header / Navbar */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(8,12,14,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav .inner{display:flex;gap:16px;align-items:center;justify-content:space-between}
.logo{
  display:flex;align-items:center;gap:10px;
  font-weight:700;letter-spacing:.2px;color:var(--text);text-decoration:none
}
.logo-badge{
  width:28px;height:28px;display:grid;place-items:center;
  background: linear-gradient(135deg,var(--brand),#36e19a);
  color:#002a17;border-radius:7px;font-weight:800;box-shadow: var(--shadow)
}
.nav a{color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--text)}

/* Hero */
.hero{
  position:relative;isolation:isolate;
  min-height: clamp(520px, 80vh, 760px);
  display:grid;align-items:center;
  background: center/cover no-repeat url('assets/hero.jpg'), #0b1114;
}
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(38,194,129,.20), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
}
.hero h1{
  font-size: clamp(34px,5vw,64px);
  line-height:1.05;margin:0 0 12px;
  letter-spacing:.2px;text-shadow: 0 6px 28px rgba(0,0,0,.55);
}
.hero p{
  color: var(--muted);
  font-size: clamp(16px,2.1vw,18px);
  max-width: 60ch;
}

/* Buttons */
.btn{display:inline-flex;gap:10px;align-items:center;
  padding:12px 18px;border-radius:12px;border:1px solid transparent;
  background: var(--brand); color:#052a1d; font-weight:800;
  box-shadow: 0 8px 22px rgba(38,194,129,.25); text-decoration:none}
.btn:hover{background: var(--brand-2)}
.btn.ghost{background:transparent;color:var(--text);border-color:rgba(255,255,255,.18)}
.btn.ghost:hover{border-color:rgba(255,255,255,.34)}

/* Feature grid */
.grid{
  display:grid;gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:18px;box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease
}
.card:hover{transform: translateY(-3px); border-color: var(--ring)}
.card h3{margin:6px 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

/* Section headers */
.kicker{color:var(--brand);text-transform:uppercase;letter-spacing:.18em;font-weight:800;font-size:12px}
.h2{font-size: clamp(26px,3.6vw,38px);margin:8px 0 16px}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted);font-size:14px
}
.footer a{color:var(--text);text-decoration:none}
.footer a:hover{color:var(--brand)}
/* --- Header layout --- */
.kt-header {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 30px;
  background: rgba(10, 10, 10, 0.95);
}

/* Left side (logo) */
.kt-left {
  display: flex;
  align-items: center;
}
.kt-logo {
  height: clamp(40px, 6vw, 60px);
  width: auto;
}

/* Center text */
.kt-center {
  flex: 1;
  text-align: center;
}
.kt-title {
  font-size: clamp(24px, 5vw, 40px);
  font-weight: 800;
  color: #00d4ff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}

/* Right side (button) */
.kt-right {
  display: flex;
  align-items: center;
}
.kt-login {
  background: #00d4ff;
  color: #001018;
  text-decoration: none;
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 18px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.kt-login:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}