/* =========================================================
   Brilliance – Kitchen Equipment Landing Page
   ========================================================= */
:root{
  --dark:#211F20;
  --blue:#237EC1;
  --red:#B91226;
  --red-dark:#9D0F20;
  --text:#5B6168;
  --muted:#8A9097;
  --border:#E6E9ED;
  --light:#F5F8FB;
  --light-blue:#EEF5FB;
  --font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}



*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{ font-family:var(--font); color:var(--text); font-size:15px; line-height:1.6; background:#fff; }
img{ max-width:100%; }
a{ text-decoration:none; }
section{ padding:60px 0; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }


/* ---------- Common ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--blue); font-size:13px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; margin-bottom:10px;
}
.eyebrow::before{ content:""; width:36px; height:1px; background:currentColor; }
.eyebrow-light{ color:#fff; }

.sec-title{
  color:var(--dark); font-size:40px; font-weight:700;
  line-height:1.2; letter-spacing:-.5px; margin-bottom:36px;
}
.sec-text{ font-size:16px; max-width:620px; margin:-22px 0 36px; }

.btn-red{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--red); color:#fff; border:0; border-radius:4px;
  padding:13px 24px; font-size:12px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; transition:background .2s;
}
.btn-red:hover{ background:var(--red-dark); color:#fff; }
.btn-red:disabled{ opacity:.75; cursor:not-allowed; }

.btn-dark-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(20,20,20,.65); color:#fff;
  border:1px solid rgba(255,255,255,.15); border-radius:4px;
  padding:13px 24px; font-size:12px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; transition:background .2s;
}
.btn-dark-ghost:hover{ background:rgba(20,20,20,.9); color:#fff; }

/* ---------- Header ---------- */
#site-header{
  position:sticky; top:0; z-index:1030; background:#fff;
  box-shadow:0 1px 0 var(--border);
}
#site-header .navbar{ padding:14px 0; }
#site-header .nav-link{
  color:var(--dark); font-size:14px; font-weight:500; padding:8px 14px !important;
}
#site-header .nav-link:hover,
#site-header .nav-link.active{ color:var(--blue); }
#site-header .dropdown-menu{ border:1px solid var(--border); border-radius:6px; font-size:14px; }
#site-header .dropdown-item:active{ background:var(--blue); }
.navbar-toggler{ border:0; font-size:28px; color:var(--dark); box-shadow:none !important; }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.btn-search{
  width:38px; height:38px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--border); border-radius:4px; color:var(--dark);
}
.btn-sm-red{ padding:10px 20px; text-transform:none; letter-spacing:0; font-size:13px; }

/* ---------- Hero ---------- */
#hero{
  position:relative; padding:120px 0 110px; color:#fff;
  background:
    url('./img/br.webp') center/cover no-repeat;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:50px; padding:6px 16px;
  font-size:13px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
}
.hero-tag .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); }
.hero-title{
  font-size:54px; font-weight:800; line-height:1.18;
  letter-spacing:-1px; margin:22px 0 22px;
}
.hero-text{ font-size:17px; color:rgba(255,255,255,.75); max-width:600px; margin-bottom:32px; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:14px; }


/* ---------- Feature strip ---------- */
#feature-strip{ padding:0; background:var(--blue); }
.fs-list{
  display:flex; justify-content:space-between; margin:0; padding:0; list-style:none;
}
.fs-list li{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
  color:#fff; font-size:13px; font-weight:500; padding:13px 10px; white-space:nowrap;
}
.fs-list li:not(:last-child)::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:18px; background:rgba(255,255,255,.35);
}
.fs-list i{ font-size:15px; }

/* ---------- Products ---------- */
.prod-card{
  display:block; height:100%; overflow:hidden;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  transition:border-color .2s;
}
.prod-card img{
  display:block; width:100%; height:260px; object-fit:cover;
  background:linear-gradient(180deg,#f7f8fa,#eceef1);
}
.prod-body{ padding:18px 24px 22px; }
.prod-body h3{ color:var(--dark); font-size:17px; font-weight:700; margin:0 0 4px; }
.learn{ color:var(--red); font-size:12px; font-weight:600; display:inline-flex; gap:4px; align-items:center; }
.learn i{ transition:transform .2s; }
.prod-card:hover{ border-color:var(--blue); }
.prod-card:hover .learn i{ transform:translateX(3px); }

/* ---------- How It Works ---------- */
.hiw-head{ position:sticky; top:110px; }
.hiw-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:30px; }
.hiw-step{
  display:grid; grid-template-columns:44px 1fr; gap:22px; cursor:pointer;
}
.hiw-num{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--blue); color:#fff; font-size:14px; font-weight:700;
  border:1px solid var(--blue);
  box-shadow:0 0 0 6px rgba(35,126,193,.12);
  transition:all .25s;
}
.hiw-card{
  background:#fff; border:1px solid #EEF0F3; border-radius:8px;
  padding:24px 26px; margin-top:22px;
  box-shadow:0 10px 28px rgba(17,24,39,.06); transition:border-color .25s;
}
.hiw-label{
  display:block; color:var(--blue); font-size:10px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; margin-bottom:6px;
}
.hiw-card h3{ color:var(--dark); font-size:16px; font-weight:700; margin-bottom:6px; }
.hiw-card p{ font-size:13.5px; margin:0; }
.hiw-step.is-active .hiw-num{ background:#fff; color:var(--blue); }
.hiw-step.is-active .hiw-card{ border-color:var(--blue); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--border); border-left:3px solid transparent; transition:border-color .2s; }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:none; border:0; text-align:left;
  padding:20px 22px 20px 28px; color:var(--dark); font-size:15px; font-weight:600; font-family:var(--font);
}
.faq-q i{ color:var(--red); font-size:15px; transition:transform .25s; flex-shrink:0; }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq-a > p{ overflow:hidden; margin:0; padding:0 28px; font-size:14px; }
.faq-item.is-open{ border:1px solid var(--border); border-left:3px solid var(--red); }
.faq-item.is-open .faq-q{ color:var(--red); }
.faq-item.is-open .faq-q i{ transform:rotate(45deg); }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-item.is-open .faq-a > p{ padding-bottom:22px; }
.faq-img{ max-width:420px; width:100%; }

/* ---------- Quality ---------- */
#quality{ background:var(--light-blue); }
.qa-card{
  display:flex; align-items:center; gap:16px; height:100%;
  background:#fff; border-radius:8px; padding:22px 24px;
}
.qa-icon{
  width:28px; height:28px; flex-shrink:0; border-radius:50%;
  display:grid; place-items:center; background:var(--red); color:#fff; font-size:15px;
}
.qa-card h3{ color:var(--dark); font-size:15px; font-weight:700; margin:0; }
.qa-card p{ font-size:12.5px; color:var(--muted); margin:0; }

/* ---------- CTA Banner ---------- */
#cta-banner{
  padding:80px 0;
  background:url('./img/downbg.webp') center/cover no-repeat;
}
#cta-banner .sec-title{ margin-bottom:16px; }
.cta-text{ color:rgba(255,255,255,.75); font-size:17px; max-width:520px; margin-bottom:26px; }
.cta-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.btn-pill{
  display:inline-flex; align-items:center; gap:8px; color:#fff;
  border-radius:50px; padding:11px 22px; font-size:13px; font-weight:600; transition:filter .2s;
}
.btn-pill:hover{ color:#fff; filter:brightness(.92); }
.btn-wa{ background:#25D366; }
.btn-call{ background:var(--red); }

/* ---------- Contact ---------- */
#contact{ background:var(--light); }
.contact-info{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:22px; }
.contact-info li{ display:flex; gap:18px; align-items:flex-start; }
.ci-icon{
  width:46px; height:46px; flex-shrink:0; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(35,126,193,.1); border:1px solid rgba(35,126,193,.18);
  color:var(--blue); font-size:18px;
}
.contact-info small{
  display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted);
}
.contact-info a,
.contact-info span{ color:var(--dark); font-size:15px; font-weight:500; line-height:1.5; }
.contact-info a:hover{ color:var(--blue); }

.enq-card{
  background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:40px; box-shadow:0 14px 40px rgba(17,24,39,.06);
}
.enq-card h3{ color:var(--dark); font-size:24px; font-weight:700; margin-bottom:6px; }
.enq-card > p{ font-size:13px; color:var(--muted); margin-bottom:26px; }
.enq-card input,
.enq-card select,
.enq-card textarea{
  width:100%; background:#fff; color:var(--dark);
  border:1px solid #DFE3E8; border-radius:4px;
  padding:12px 14px; font-size:13px; font-family:var(--font);
}
.enq-card textarea{ resize:vertical; min-height:100px; }
.enq-card select{
  appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%235B6168' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.enq-card input::placeholder,
.enq-card textarea::placeholder{ color:var(--muted); }
.enq-card input:focus,
.enq-card select:focus,
.enq-card textarea:focus{ outline:none; border-color:var(--blue); }
.btn-enq{ padding:16px; font-size:14px; margin-top:6px; }

/* ---------- Responsive ---------- */
@media (max-width:1199.98px){
  .hero-title{ font-size:46px; }
  .fs-list{ overflow-x:auto; justify-content:flex-start; }
  .fs-list li{ flex:0 0 auto; padding:13px 26px; }
}
@media (max-width:991.98px){
  section{ padding:70px 0; }
  #hero{ padding:80px 0; }
  .hero-title{ font-size:40px; }
  .sec-title{ font-size:32px; }
  .hiw-head{ position:static; }
  .nav-actions{ padding:10px 0 6px; }
  #site-header .nav-link{ padding:8px 0 !important; }
  #cta-banner{
    padding:90px 0;
    background:
      linear-gradient(rgba(12,13,15,.8), rgba(12,13,15,.8)),
      url('../imgs/cta-chef-kitchen.webp') center/cover no-repeat, #211F20;
  }
  .faq-img{ max-width:300px; }
}
@media (max-width:575.98px){
  section{ padding:56px 0; }
  .hero-title{ font-size:32px; }
  .hero-title br{ display:none; }
  .sec-title{ font-size:27px; margin-bottom:28px; }
  .sec-text{ margin-top:-16px; }
  .hero-form-card, .enq-card{ padding:26px 20px; }
  .prod-card img{ height:220px; }
  .hiw-step{ grid-template-columns:36px 1fr; gap:14px; }
  .hiw-num{ width:34px; height:34px; font-size:13px; }
  .hiw-card{ padding:20px; }
  .faq-q{ padding:18px 16px 18px 18px; font-size:14px; }
  .faq-a > p{ padding:0 18px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}


.hero-header{
  position:sticky; top:0; z-index:1030;
  background:#fff;
  padding:14px 0;
  box-shadow:0 1px 0 var(--border);
}
.hero-header .logo{ height:44px; width:auto; display:block; }

.call-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--red); color:#fff;
  border-radius:4px; padding:10px 20px;
  font-size:14px; font-weight:600;
  transition:background .2s;
}
.call-btn:hover{ background:var(--red-dark); color:#fff; }
.call-btn i{ font-size:14px; }

@media (max-width:575.98px){
  .hero-header{ padding:10px 0; }
  .hero-header .logo{ height:36px; }
  .call-btn{ padding:8px 14px; font-size:13px; }
}
/* ===== Hero form ===== */
.hero-form{
  border-radius:20px;
  border:1px solid rgba(199, 164, 107, 0.25);
  background:rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  padding:32px 30px;
}

.hero-form .form-label{
  display:block;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(255, 255, 255, 0.7);
  margin-bottom:8px;
}

.hero-form .form-control{
  background:rgba(255, 255, 255, 0.06);
  color:#fff;
  border:1px solid rgba(255, 255, 255, 0.12);
  border-radius:4px;
  padding:11px 14px;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:13px;
  box-shadow:none;
}
.hero-form .form-control::placeholder{
  color:rgba(255, 255, 255, 0.5);
  opacity:1;
}
.hero-form .form-control:focus{
  background:rgba(255, 255, 255, 0.1);
  color:#fff;
  border-color:rgba(255, 255, 255, 0.4);
  box-shadow:none;
  outline:none;
}
.hero-form textarea.form-control{
  resize:vertical;
  min-height:90px;
}

.hero-form .btn-quote{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#B91226;
  color:#fff;
  border:0;
  border-radius:4px;
  padding:14px;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.6px;
  transition:background 0.2s;
}
.hero-form .btn-quote:hover,
.hero-form .btn-quote:focus,
.hero-form .btn-quote:active{
  background:#9D0F20 !important;
  color:#fff !important;
}

@media (max-width:575.98px){
  .hero-form{ padding:26px 20px; }
}
#site-footer{
  display:flow-root;
  background:#0E1626 url('./img/footer-gears.webp') center/cover no-repeat;
  font-family:'Plus Jakarta Sans', sans-serif;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:22px 0;
  margin:0;
  align-items:center;
}
.footer-bottom > [class*="col-"]{ padding:0; }
.footer-bottom p{ margin:0; font-size:12.5px; color:rgba(255,255,255,.7); }
.f-legal{ list-style:none; padding:0; margin:0; display:flex; justify-content:flex-end; gap:24px; }
.f-legal a{ color:rgba(255,255,255,.7); text-decoration:none; font-size:12.5px; }
.f-legal a:hover{ color:#fff; }

@media (max-width:767.98px){
  .footer-bottom{ text-align:center; row-gap:10px; }
  .f-legal{ justify-content:center; }
}
/* ===== How It Works ===== */
.hiw-sticky-left{ position:sticky; top:110px; }

.hiw-timeline{ position:relative; }

.hiw-step{
  position:relative;
  display:grid; grid-template-columns:40px 1fr; gap:24px;
  margin-bottom:28px; cursor:pointer;
}
.hiw-step:last-child{ margin-bottom:0; }

/* connecting line: dot centre → next dot */
.hiw-step:not(:last-child)::before{
  content:"";
  position:absolute;
  left:19.5px; top:20px; bottom:-48px;
  width:1px;
  background:#CFE3F2;
}

.hiw-dot{
  position:relative; z-index:1;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:#237EC1; border:1px solid #237EC1;
  color:#fff; font-size:14px; font-weight:700;
  box-shadow:0 0 0 6px rgba(35,126,193,.1);
  transition:background .25s, color .25s;
}

.hiw-card{
  background:#fff;
  border:1px solid transparent;
  border-radius:8px;
  padding:24px 26px;
  box-shadow:0 10px 30px rgba(17,24,39,.07);
  transition:border-color .25s, box-shadow .25s;
}

.hiw-step-label{
  display:block; color:#237EC1; font-size:10px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; margin-bottom:6px;
}
.hiw-step-title{ color:#211F20; font-size:16px; font-weight:700; margin-bottom:6px; }
.hiw-step-desc{ font-size:13.5px; color:#5B6168; margin:0; }

/* active = step 6 look */
.hiw-step.active .hiw-dot{
  background:#fff;
  color:#237EC1;
}
.hiw-step.active .hiw-card{
  border-color:#BFDCF1;
  box-shadow:0 10px 30px rgba(35,126,193,.08);
}

@media (max-width:991.98px){
  .hiw-sticky-left{ position:static; margin-bottom:40px; }
}
@media (max-width:575.98px){
  .hiw-step{ grid-template-columns:34px 1fr; gap:14px; }
  .hiw-step:not(:last-child)::before{ left:16.5px; top:17px; }
  .hiw-dot{ width:34px; height:34px; font-size:13px; }
  .hiw-card{ padding:20px; }
}
@media (prefers-reduced-motion:reduce){
  .hiw-dot, .hiw-card{ transition:none; }
}

/* ===== Clients ===== */
/* ===== Clients ===== */
.client-card{
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 22px;
  border:1px solid #EEF0F3;
  border-radius:8px;
}
.client-card img{
  max-width:100%;
  max-height:56px;
  width:auto;
  object-fit:contain;
}

@media (max-width:575.98px){
  .client-card{ height:90px; padding:14px; }
  .client-card img{ max-height:44px; }
}
/* ===== USP list ===== */
.usp-list{
  list-style:none;
  padding:0;
  margin:0 0 32px;
  font-family:'Poppins', sans-serif;
}
.usp-list li{
  position:relative;
  padding-left:44px;
  margin-bottom:18px;
  font-size:22px;
  font-weight:500;
  line-height:1.4;
  color:#fff;
}
.usp-list li:last-child{ margin-bottom:0; }

.usp-list li::before{
    
    
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234BB3EE'/%3E%3Cstop offset='1' stop-color='%231E7FC6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='13' cy='13.8' r='12' fill='%23C62828'/%3E%3Ccircle cx='13' cy='12.6' r='12' fill='url(%23g)'/%3E%3Cpath d='M7.6 12.9l3.6 3.6 7.2-7.4' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

@media (max-width:575.98px){
  .usp-list li{ font-size:17px; padding-left:36px; margin-bottom:14px; }
  .usp-list li::before{ width:24px; height:24px; }
}



.usp-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234BB3EE'/%3E%3Cstop offset='1' stop-color='%231E7FC6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='13' cy='12.6' r='12' fill='url(%23g)'/%3E%3Cpath d='M7.6 12.9l3.6 3.6 7.2-7.4' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ===== Brand logos ===== */
.brand-box{
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-box img{
  display:block;
  width:100%;
  max-width:220px;
  height:auto;
}

@media (max-width:575.98px){
  .brand-box img{ max-width:100%; }
}