/* =========================
   CORELANCE — Brand System
   Palette (as requested):
   03045e | 023e8a | 0077b6 | 0096c7 | 00b4d8 | 48cae4 | 90e0ef | ade8f4 | caf0f8
   ========================= */
:root{
  --c1:#03045e; --c2:#023e8a; --c3:#0077b6; --c4:#0096c7; --c5:#00b4d8;
  --c6:#48cae4; --c7:#90e0ef; --c8:#ade8f4; --c9:#caf0f8;
  --bg:#f8fbff; --ink:#0b1020; --muted:#65708a;
  --radius:24px; --radius-sm:14px; --shadow:0 10px 30px rgba(3,4,94,0.18);
}

/* Reset-ish */
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:linear-gradient(180deg,var(--c9),#fff);
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}
h1,h2,h3{font-family:Outfit,Inter,sans-serif; margin:0 0 .5rem}
h1{font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.12; letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.3rem)}
p{margin:.5rem 0 1rem; color:var(--muted)}

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

/* Header / Nav */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
  border-bottom:1px solid rgba(3,4,94,.08);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 4px}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.brand-mark{
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--c1),var(--c3));
  color:#fff; font-weight:700; font-family:Outfit; box-shadow:var(--shadow)
}
brand{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.brand-logo{
  height:50px; width:auto; display:block; object-fit:contain;
}

.main-nav{display:flex; gap:18px; align-items:center}
.main-nav a{
  color:var(--c2); text-decoration:none; font-weight:600; padding:8px 12px;
  border-radius:12px; transition:all .25s ease
}
.main-nav a:hover{background:var(--c9); color:var(--c1); transform:translateY(-1px)}
.main-nav .cta{background:var(--c1); color:#fff}
.main-nav .cta:hover{background:var(--c2)}

/* Hero */
.hero{
  padding:72px 0 40px; background:
  radial-gradient(1200px 600px at 10% -10%, var(--c8), transparent 70%),
  radial-gradient(900px 420px at 100% 0%, var(--c9), transparent 60%),
  #ffffff;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero-copy p{font-size:1.1rem}
.hero-cta{display:flex; gap:14px; margin:22px 0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:12px 18px; border-radius:16px; text-decoration:none; font-weight:700;
  box-shadow: var(--shadow); transform:translateZ(0); transition:all .25s ease
}
.btn-primary{background:linear-gradient(135deg,var(--c3),var(--c4)); color:#fff}
.btn-primary:hover{transform:translateY(-2px); filter:saturate(1.1)}
.btn-ghost{background:var(--c9); color:var(--c1); border:1px solid var(--c7)}
.btn-ghost:hover{background:#fff}

.hero-points{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; padding:0; list-style:none; margin:18px 0 0}
.hero-points li{
  position:relative; padding-left:28px; color:var(--c2)
}
.hero-points li::before{
  content:""; position:absolute; left:0; top:.4rem;
  width:16px; height:16px; border-radius:50%;
  background:linear-gradient(135deg,var(--c5),var(--c6)); box-shadow:0 0 0 3px var(--c9)
}

.hero-media{
  position:relative; border-radius:var(--radius); overflow:hidden; background:var(--c8);
  box-shadow: var(--shadow)
}
.hero-media img{width:100%; display:block; mix-blend:multiply}
.glow{
  position:absolute; inset:auto -20% -20% -20%; height:40%;
  background:radial-gradient(60% 120% at 50% 0%, rgba(0,180,216,.45), transparent 70%);
  filter:blur(38px)
}

/* Sections */
.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg,#fff,var(--c9))}
.section-head{text-align:center; margin-bottom:28px}
.section-head p{max-width:780px; margin-inline:auto}

/* Cards */
.grid{display:grid; gap:24px}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  background:#fff; border:1px solid var(--c8); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease
}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(2,62,138,.2)}
.card-img{width:100%; height:220px; object-fit:cover}
.card-body{padding:18px}
.bullets{list-style:none; padding:0; margin:10px 0 0}
.bullets li{color:var(--c2); padding-left:22px; position:relative}
.bullets li::before{content:"▸"; position:absolute; left:0; color:var(--c4)}

.mt-24{margin-top:24px}

/* Industry */
.chips{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:10px 0 22px}
.chip{
  background:linear-gradient(135deg,var(--c8),var(--c9));
  border:1px solid var(--c7); color:var(--c1); padding:8px 12px; border-radius:999px; font-weight:600
}
.industry-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.industry-card{
  border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow);
  border:1px solid var(--c8)
}
.industry-card img{display:block; width:100%; height:220px; object-fit:cover}
.industry-card figcaption{padding:12px 14px; color:var(--c2)}

/* Features */
.features{grid-template-columns:repeat(4,minmax(0,1fr))}
.feature{
  background:#fff; border:1px solid var(--c8); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow)
}
.icon{width:38px; height:38px; border-radius:12px; margin-bottom:10px;
  background:linear-gradient(135deg,var(--c1),var(--c3))}
.i-lock::after, .i-spark::after, .i-leaf::after, .i-gear::after{
  content:""; display:block; width:100%; height:100%;
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  background:linear-gradient(135deg,#fff,var(--c7))
}
.i-lock::after{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="%23000" d="M34 20h-1v-5a9 9 0 10-18 0v5h-1a4 4 0 00-4 4v12a4 4 0 004 4h20a4 4 0 004-4V24a4 4 0 00-4-4zm-15-5a5 5 0 1110 0v5H19v-5z"/></svg>');}
.i-spark::after{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="%23000" d="M24 4l4 10 10 4-10 4-4 10-4-10-10-4 10-4z"/></svg>');}
.i-leaf::after{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="%23000" d="M8 28c8-16 24-16 32 0-8 8-24 8-32 0z"/></svg>');}
.i-gear::after{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="%23000" d="M19 6l2-2h6l2 2 3-1 4 4-1 3 2 2v6l-2 2 1 3-4 4-3-1-2 2h-6l-2-2-3 1-4-4 1-3-2-2v-6l2-2-1-3 4-4zM24 18a6 6 0 100 12 6 6 0 000-12z"/></svg>');}

/* How it works */
.steps{
  display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr));
  counter-reset:step
}
.steps li{
  list-style:none; background:#fff; border:1px solid var(--c8); border-radius:var(--radius);
  padding:18px; color:var(--c2); box-shadow:var(--shadow); font-weight:600
}
.steps li span{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px;
  margin-right:10px; background:linear-gradient(135deg,var(--c3),var(--c5)); color:#fff; font-weight:800
}

/* Case studies */
.case{
  padding:18px; border-radius:var(--radius); background:linear-gradient(180deg,#fff,var(--c9));
  border:1px solid var(--c8); box-shadow:var(--shadow)
}
.case .tag{
  display:inline-block; background:linear-gradient(135deg,var(--c6),var(--c8));
  color:var(--c1); font-weight:700; padding:6px 10px; border-radius:999px; margin-bottom:8px
}
/* Trust bar */
.client-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  justify-content: center;
  margin-top: 1rem;
}
.client-logos img {
  height: 150px;
  filter: grayscale(100%);
  transition: filter 0.3s;
}
.client-logos img:hover {
  filter: grayscale(0%);
}
/* Pricing */
.price-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.price-card{
  border-radius:var(--radius); border:1px solid var(--c8); background:#fff; padding:20px; box-shadow:var(--shadow)
}
.price-card .price{font-size:2rem; color:var(--c1); margin:4px 0 10px}
.price-card .price span{font-size:.9rem; color:var(--muted)}
.price-card.featured{
  background:linear-gradient(180deg,var(--c9),#fff); border:2px solid var(--c5);
  transform:scale(1.02)
}

/* Testimonials */
.testimonials{grid-template-columns:repeat(3,minmax(0,1fr))}
.t-card{
  background:#fff; border:1px solid var(--c8); border-radius:var(--radius);
  padding:18px; color:var(--c2); box-shadow:var(--shadow); font-style:italic
}
.t-card cite{display:block; margin-top:10px; font-style:normal; color:var(--c1); font-weight:700}

/* FAQ */
.faq-grid{display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr))}
.faq{
  background:#fff; border:1px solid var(--c8); border-radius:var(--radius); padding:14px 16px
}
.faq summary{cursor:pointer; font-weight:700; color:var(--c1)}
.faq p{margin:.6rem 0 0}

/* Contact */
.contact{background:
  radial-gradient(600px 280px at 90% 10%, var(--c8), transparent 70%),
  linear-gradient(180deg,#fff,var(--c9))}
.contact-grid{grid-template-columns:1.1fr .9fr}
.contact-form{
  background:#fff; border:1px solid var(--c8); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow); display:grid; gap:12px
}
.contact-form label{display:grid; gap:6px; font-weight:600; color:var(--c2)}
.contact-form input, .contact-form select, .contact-form textarea{
  border:1px solid var(--c7); border-radius:12px; padding:12px; font:inherit; outline:none
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  border-color:var(--c4); box-shadow:0 0 0 4px rgba(0,150,199,.15)
}
.contact-side{display:grid; gap:14px}
.contact-card{
  background:#fff; border:1px solid var(--c8); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow)
}

/* Footer */
.site-footer{background:linear-gradient(180deg,var(--c1),var(--c2)); color:#e9f6ff; margin-top:40px}
.foot-grid{
  display:grid; gap:24px; grid-template-columns:2fr 1fr 1fr 1fr; padding:28px 0
}
.brand-foot .brand-mark{box-shadow:none}
.site-footer a{color:var(--c7); text-decoration:none}
.site-footer a:hover{color:#fff; text-decoration:underline}
.subfoot{
  text-align:center; padding:12px; background:rgba(0,0,0,.2);
  color:#dbeeff; font-size:.9rem
}
.foot-note{color:#e1effa}

/* Tints for images to keep palette consistent when you replace them later */
.tint-brand{filter:saturate(1.2) hue-rotate(-10deg) brightness(1.02)}
.tint-soft{filter:saturate(1.05) hue-rotate(-6deg)}

/* Animations — elegant & subtle */
.reveal{opacity:0; transform:translateY(16px); animation:reveal .8s ease forwards}
.reveal.delay-1{animation-delay:.12s}
.reveal.delay-2{animation-delay:.24s}
.reveal.delay-3{animation-delay:.36s}

@keyframes reveal{to{opacity:1; transform:translateY(0)}}

.card-float{animation:float 6s ease-in-out infinite}
@keyframes float{
  0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)}
}

/* Responsive */
@media (max-width: 1000px){
  .hero-grid, .contact-grid{grid-template-columns:1fr}
  .cards-3, .industry-grid, .features, .price-grid, .testimonials{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width: 620px){
  .main-nav{display:none} /* keeps header elegant on small screens */
  .cards-3, .industry-grid, .features, .price-grid, .testimonials{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .hero{padding-top:48px}
}

/* Utility */
.hidden{display:none}