/* ═══════════════════════════════════════════════
   KOOLING — Shared Stylesheet
   style.css
   ═══════════════════════════════════════════════ */

/* ── RESET & ROOT ── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0C0B09;
  --ivory:#F4F1EB;
  --ivory-dark:#EAE6DC;
  --sand:#C4AA87;
  --sand-light:#DDD0B8;
  --mist:#8A8479;
  --line:rgba(12,11,9,0.10);
  --line-strong:rgba(12,11,9,0.18);
}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Barlow',sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

/* ── LOGO ── */
.logo-mark{width:32px;height:32px}
.logo-full{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-wordmark{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;font-size:1.05rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink)
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 3.5rem;
  background:rgba(244,241,235,0.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nav-right{display:flex;align-items:center;gap:1.25rem;position:relative}
.burger-wrap{position:relative}
.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;cursor:pointer;padding:6px;
  border:1px solid transparent;transition:border-color 0.2s;
}
.burger:hover{border-color:var(--line)}
.burger span{display:block;height:1px;background:var(--ink)}
.burger span:nth-child(2){width:70%}
.dropdown{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--ivory);
  border:1px solid rgba(12,11,9,0.12);
  min-width:200px;
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity 0.2s ease,transform 0.2s ease;
  z-index:200;
}
.burger-wrap .dropdown.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.dropdown a{
  display:block;font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--mist);text-decoration:none;
  padding:0.9rem 1.25rem;border-bottom:1px solid var(--line);
  transition:color 0.2s,background 0.2s;
}
.dropdown a:last-child{border-bottom:none}
.dropdown a:hover{color:var(--ink);background:rgba(196,170,135,0.08)}
.nav-cta{
  font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;
  border:1px solid var(--ink);padding:0.5rem 1.4rem;
  text-decoration:none;color:var(--ink);
  transition:background 0.25s,color 0.25s;font-weight:400;
}
.nav-cta:hover{background:var(--ink);color:var(--ivory)}

/* ── BUTTONS ── */
.btn-primary-wrap{display:inline-block}
.btn-primary{
  background:var(--sand);color:var(--ink);
  font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;
  padding:0.75rem 2.5rem 0.75rem 1.5rem;text-decoration:none;
  transition:opacity 0.25s;font-weight:400;display:inline-block;
}
.btn-primary:hover{opacity:0.72}
.btn-text{
  font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--mist);text-decoration:none;
  border-bottom:1px solid var(--sand-light);padding-bottom:2px;
  transition:color 0.25s,border-color 0.25s;
}
.btn-text:hover{color:var(--ink);border-color:var(--ink)}

/* ── POPUP ── */
.popup-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(12,11,9,0.6);z-index:500;
  align-items:center;justify-content:center;
}
.popup-overlay.open{display:flex}
.popup{background:var(--ivory);padding:3rem;max-width:480px;width:90%;position:relative}
.popup-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.4rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:0.5rem;
}
.popup-sub{font-size:0.82rem;color:var(--mist);margin-bottom:2rem;line-height:1.7}
.popup-form{display:flex;flex-direction:column;gap:1rem}
.popup-input{
  font-family:'Barlow',sans-serif;font-size:0.85rem;font-weight:300;
  border:none;border-bottom:1px solid var(--line-strong);
  background:transparent;padding:0.6rem 0;color:var(--ink);outline:none;
  transition:border-color 0.2s;
}
.popup-input:focus{border-color:var(--sand)}
.popup-input::placeholder{color:var(--mist)}
.popup-textarea{resize:none;min-height:80px}
.popup-actions{display:flex;align-items:center;justify-content:space-between;margin-top:0.5rem}
.btn-send{
  font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;
  background:var(--ink);color:var(--ivory);
  padding:0.7rem 1.75rem;cursor:pointer;border:none;
  transition:opacity 0.2s;font-family:'Barlow',sans-serif;
}
.btn-send:hover{opacity:0.72}
.btn-close-popup{
  font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--mist);background:none;border:none;cursor:pointer;
  transition:color 0.2s;font-family:'Barlow',sans-serif;
}
.btn-close-popup:hover{color:var(--ink)}

/* ── FOOTER ── */
footer{
  padding:2rem 3.5rem;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line-strong);
}
.footer-right{display:flex;gap:2rem;align-items:center}
.footer-links{display:flex;gap:2rem}
.footer-links a{
  font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--mist);text-decoration:none;transition:color 0.2s;
}
.footer-links a:hover{color:var(--ink)}
.footer-copy{font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--sand-light)}

/* ── ANIMATIONS ── */
.fade-up{opacity:1;transform:none;transition:opacity 0.8s ease,transform 0.8s ease}
.fade-up.in{opacity:1;transform:none}
.fade-up.d1{transition-delay:0.1s}
.fade-up.d2{transition-delay:0.2s}
.fade-up.d3{transition-delay:0.3s}

/* ── SOLUTION PAGE SHARED (F-sections) ── */
.f1{
  background:var(--ink);color:var(--ivory);
  padding:8rem 3.5rem 4rem;
  min-height:55vh;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
  border-bottom:1px solid rgba(244,241,235,0.08);
}
.f1-content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:3rem}
.f1-top{display:flex;justify-content:space-between;align-items:flex-start}
.f1-back{font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(244,241,235,0.35);text-decoration:none;transition:color 0.2s}
.f1-back:hover{color:var(--sand)}
.f1-num{font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--sand);font-weight:500}
.f1-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(2.5rem,4vw,4.5rem);
  font-weight:700;line-height:1.05;letter-spacing:-0.03em;
  color:var(--ivory);margin-bottom:1.5rem;
}
.tags{display:flex;flex-wrap:wrap;gap:0.5rem}
.tag{
  font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;
  border:1px solid rgba(244,241,235,0.18);padding:0.3rem 0.85rem;
  color:rgba(244,241,235,0.5);transition:border-color 0.2s,color 0.2s;
}
.tag:hover{border-color:var(--sand);color:var(--sand)}

.f2{
  padding:4rem 3.5rem;
  display:grid;grid-template-columns:200px 1fr;
  gap:4rem;align-items:start;
  border-bottom:1px solid var(--line);
}
.f2-label{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--mist);padding-top:0.3rem}
.f2-body{font-size:1.05rem;line-height:1.95;color:var(--mist);font-weight:300;max-width:64ch}

.f3{
  background:var(--ink);
  min-height:380px;position:relative;overflow:hidden;
  border-top:1px solid rgba(244,241,235,0.06);
  border-bottom:1px solid rgba(244,241,235,0.06);
}

.f4{background:var(--ivory-dark);border-bottom:1px solid var(--line)}
.f4-header{padding:1.25rem 3.5rem;border-bottom:1px solid var(--line);font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--mist)}
.f4-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.f4-item{padding:2.5rem 3.5rem;border-right:1px solid var(--line)}
.f4-item:last-child{border-right:none}
.f4-dot{width:5px;height:5px;border-radius:50%;background:var(--sand);margin-bottom:1rem}
.f4-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.95rem;font-weight:700;color:var(--ink);margin-bottom:0.6rem;letter-spacing:-0.01em}
.f4-text{font-size:0.82rem;line-height:1.8;color:var(--mist)}

.f5{
  background:var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  padding:2.5rem 3.5rem;
  border-bottom:1px solid rgba(244,241,235,0.08);
}
.f5-text{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.1rem;font-weight:700;color:var(--ivory);letter-spacing:-0.01em}
.f5-btn{
  font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;
  background:var(--ivory);color:var(--ink);
  padding:0.8rem 2rem;border:none;cursor:pointer;
  font-family:'Barlow',sans-serif;font-weight:400;transition:opacity 0.2s;
}
.f5-btn:hover{opacity:0.8}

/* ═══════════════════════════════════════════════
   MOBILE — @media max-width: 768px
   ═══════════════════════════════════════════════ */
@media(max-width:768px){

  /* NAV */
  nav{padding:1rem 1.25rem}
  .nav-cta{display:none}

  /* FOOTER */
  footer{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
    padding:1.5rem 1.25rem;
  }
  .footer-right{flex-direction:column;align-items:flex-start;gap:0.75rem}
  .footer-links{flex-wrap:wrap;gap:1rem}

  /* POPUP */
  .popup{padding:2rem 1.25rem}

  /* HERO (homepage) */
  .hero{
    grid-template-columns:1fr;
    min-height:100svh;
  }
  .hero-left{
    padding:7rem 1.25rem 4rem;
  }
  .hero-title{
    font-size:clamp(2.4rem,10vw,3.5rem);
  }
  .hero-body{max-width:100%}
  .hero-kpis{margin-top:2rem}

  /* SOLUTIONS CARDS */
  .solutions{grid-template-columns:1fr !important}
  .sol-card{border-right:none;border-bottom:1px solid var(--line-strong)}
  .sol-card:last-child{border-bottom:none}

  /* ENTERPRISE SECTION */
  .ent-row1,.ent-row2{grid-template-columns:1fr}
  .ent-title-cell{padding:2.5rem 1.25rem 1rem}
  .ent-body-cell{padding:1.5rem 1.25rem 2.5rem}
  .ent-visual{display:none}

  /* CITIES SECTION */
  .cities-row1,.cities-row2{grid-template-columns:1fr}
  .cities-title-cell{padding:2.5rem 1.25rem 1rem}
  .cities-body-cell{padding:1.5rem 1.25rem 2.5rem}
  .cities-visual{display:none}

  /* ABOUT SECTION (homepage) */
  .about-header{padding:3rem 1.25rem 2rem}
  .about-boxes{grid-template-columns:1fr}
  .about-box{border-right:none;border-bottom:1px solid var(--line)}
  .about-box:last-child{border-bottom:none}

  /* SOLUTION PAGES */
  .f1{padding:6rem 1.25rem 3rem}
  .f1-title{font-size:clamp(2rem,8vw,3rem)}

  .f2{
    grid-template-columns:1fr;
    gap:1rem;
    padding:2.5rem 1.25rem;
  }
  .f2-body{font-size:0.95rem}

  .f3{min-height:auto;padding:2rem 1.25rem !important;overflow-x:auto}
  .f3 svg{min-width:600px}

  .f4-grid{grid-template-columns:1fr}
  .f4-item{border-right:none;border-bottom:1px solid var(--line);padding:2rem 1.25rem}
  .f4-item:last-child{border-bottom:none}
  .f4-header{padding:1rem 1.25rem}

  .f5{
    flex-direction:column;
    align-items:flex-start;
    gap:1.5rem;
    padding:2rem 1.25rem;
  }

  /* SECTION DIVIDER */
  .section-divider{padding:0 1.25rem}
}