/* Kaci Construction - simple modern one-page */
/* You can tweak colors quickly here */
:root{
  --bg:#0b1220;
  --panel: rgba(16, 28, 50, .72);
  --panel2: rgba(9, 15, 28, .72);
  --text:#eaf1ff;
  --muted: rgba(234,241,255,.76);
  --gold:#ffcc7a;
  --gold2:#ffb74d;
  --line: rgba(255,255,255,.14);
  --shadow: 0 24px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --max: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.9}

.container{
  width:min(var(--max), 92vw);
  margin-inline:auto;
}

.hero{
  position:relative;
  min-height: 92vh;
  padding: 38px 0 56px;
  overflow:hidden;
}

.hero__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(11,18,32,.55) 0%, rgba(11,18,32,.72) 55%, rgba(11,18,32,.92) 100%),
    url("assets/hero.jpg") center/cover no-repeat;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

.hero__content{
  position:relative;
  z-index:1;
}

.brand{
  display:flex;
  align-items:center;
  gap:18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(12, 20, 36, .55);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.brand__logo{
  width: 170px;
  height:auto;
  display:block;
}

.brand__tag{
  margin:0;
  font-size: 14px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: var(--gold);
}

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

.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  margin-top: 22px;
}

.hero__left{
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.hero__left h1{
  margin: 4px 0 10px;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing:-.02em;
}

.lead{
  margin: 0 0 18px;
  color: var(--muted);
  line-height:1.55;
  font-size: 16px;
}

.cta{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin: 14px 0 14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(10,16,28,.45);
  backdrop-filter: blur(10px);
}

.btn__icon{
  width: 22px;
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.95;
}
.btn__icon img{width:22px; height:22px; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));}

.btn--primary{
  border-color: rgba(255,200,120,.35);
  background: linear-gradient(180deg, rgba(255,204,122,.22), rgba(255,183,77,.10));
}

.btn--ghost{
  background: rgba(16, 28, 50, .35);
}

.deal{
  margin: 4px 0 0;
  color: var(--muted);
}

.pill{
  display:inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(255,200,120,.35);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(255,204,122,.10);
}

.hero__right{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.card{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel2);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

.card__title{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 650;
  letter-spacing:.02em;
}

.card__icon{
  width: 22px;
  height: 22px;
  opacity:.95;
}

.list, .checks{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.55;
}

.checks{
  list-style:none;
  padding-left:0;
}
.checks li{
  position:relative;
  padding-left: 26px;
  margin: 8px 0;
  color: var(--muted);
}
.checks li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color: var(--gold);
  font-weight:800;
}

.card--accent{
  border-color: rgba(255,200,120,.30);
  background: linear-gradient(180deg, rgba(255,204,122,.12), rgba(12,20,36,.62));
}

.section{
  padding: 56px 0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,204,122,.12), transparent 55%),
    radial-gradient(800px 500px at 90% 10%, rgba(120,180,255,.12), transparent 52%),
    #0b1220;
}

.section__head{
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    url("assets/sand.png");
  background-size: 420px auto;
  box-shadow: var(--shadow);
}

.section__head h2{
  margin: 0 0 8px;
  font-size: 26px;
}
.section__head p{
  margin:0;
  color: var(--muted);
  line-height:1.55;
}

.tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.tile{
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(12,20,36,.72);
  box-shadow: var(--shadow);
}
.tile h3{margin:0 0 8px}
.tile p{margin:0; color: var(--muted); line-height:1.55}

.footer{
  border-top: 1px solid var(--line);
  background: #070c16;
  padding: 22px 0;
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
}

.footer__brand{
  font-weight: 750;
  letter-spacing:.02em;
}
.footer__muted{color: var(--muted); margin-top: 4px; font-size: 14px;}
.footer__links{color: var(--muted);}
.dot{margin: 0 10px; opacity:.55}

/* Responsive */
@media (max-width: 860px){
  .hero__grid{grid-template-columns: 1fr;}
  .brand__logo{width: 150px}
  .tiles{grid-template-columns: 1fr;}
}