/* style.css — Shangilia (Clean Corporate, Muted Sand Beige cards) */
/* Palette:
   -- main-bg:  #F5EFE3
   -- card-bg:  #E8DFC9 (chosen)
   -- text:     #0C1A2A
   -- btn:      #3E7F63
   -- btn-hover:#1F4A39
*/

:root{
  --main-bg: #F5EFE3;
  --card-bg: #E8DFC9;
  --text: #0C1A2A;
  --btn: #3E7F63;
  --btn-hover: #1F4A39;
  --muted: #6B6F74;
  --border: rgba(12,26,42,0.06);
  --container: 1200px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-subtle: 0 6px 18px rgba(12,26,42,0.04);
  --shadow-soft: 0 10px 30px rgba(12,26,42,0.06);
  --transition: 180ms ease;
  --max-read-width: 1000px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;-webkit-font-smoothing:antialiased}
body{
  background: var(--main-bg);
  color: var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout container */
.container{max-width:var(--container);margin:0 auto;padding:28px}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background: rgba(255,255,255,0.94);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(4px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand img{height:44px;width:auto;display:block}
.brand strong{font-weight:700;color:var(--text);font-size:16px}
.muted.small{color:var(--muted);font-size:13px}

/* Navigation */
nav{display:flex;align-items:center;gap:12px}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:12px;align-items:center}
.nav-list a{
  padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--text);
  font-weight:600;font-size:15px;display:inline-block;
}
.nav-list a:hover{color:var(--btn);transform:translateY(-1px)}
.nav-list a.active{
  color:var(--btn);
  box-shadow: inset 0 -3px 0 var(--btn);
  background:transparent;
}
.nav-toggle{display:none;background:transparent;border:0;font-size:20px;cursor:pointer;color:var(--text)}

/* Hero / Intro */
.hero, .intro{
  border-radius:var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.95));
  box-shadow:var(--shadow-soft);
  padding:28px;
  margin:22px 0;
  max-width:var(--max-read-width);
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.hero > div{flex:1}
.hero h1, .intro h1{
  font-size:clamp(22px, 4vw, 40px);
  margin:0 0 12px;color:var(--text);line-height:1.06;font-weight:800;
}
.hero p, .intro p{color:var(--muted);margin:0 0 12px;font-size:15px}

/* Quick facts aside */
.quick-facts{width:320px;min-width:240px}
.quick-facts h3{margin:0 0 10px;color:var(--text);font-size:16px}
.quick-facts ul{list-style:none;padding:0;margin:0;display:block;gap:8px}
.quick-facts li{margin-bottom:10px;color:var(--muted);font-size:14px}

/* Buttons */
.btn-primary{
  display:inline-block;
  background:var(--btn);
  color:#ffffff;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 8px 22px rgba(62,127,99,0.14);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  border:0;
}
.btn-primary:hover{
  background:var(--btn-hover);
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(31,74,57,0.18);
}
.btn-ghost{
  display:inline-block;border:1px solid var(--border);padding:9px 14px;border-radius:8px;text-decoration:none;color:var(--text);font-weight:600;background:transparent;
}

/* Cards & sections (muted sand beige) */
.card{
  background:var(--card-bg);
  color:var(--text);
  padding:20px;border-radius:var(--radius);
  border:1px solid rgba(12,26,42,0.03);
  box-shadow:var(--shadow-subtle);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card h2, .card h3, .card h4{color:var(--text);margin:0 0 8px}
.card p{color:var(--text);opacity:0.95}

/* Grids & layout */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-grid, .product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.portfolio{display:flex;flex-direction:column;gap:12px}
.project{display:flex;gap:12px;align-items:center}
.project img{width:160px;height:120px;object-fit:cover;border-radius:8px;border:1px solid rgba(12,26,42,0.04)}

/* Pills & stats */
.pill{background:transparent;padding:8px 12px;border-radius:8px;border:1px solid rgba(62,127,99,0.08);font-weight:600;color:var(--text);display:inline-block}
.stat{flex:1;text-align:center;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));border:1px solid rgba(12,26,42,0.03)}
.stat h4{margin:0;font-size:20px;color:var(--text)}
.timeline{margin-top:12px;border-left:2px solid rgba(12,26,42,0.04);padding-left:14px}

/* Icon boxes */
.icon-box{height:64px;width:64px;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:32px;color:var(--btn);border:1px solid rgba(62,127,99,0.06)}

/* Forms */
label{display:block;margin-bottom:6px;font-weight:700;color:var(--text)}
input[type="text"], input[type="email"], input[type="tel"], textarea, select{
  width:100%;padding:10px;border-radius:8px;border:1px solid var(--border);background:#fff;font-size:14px;color:var(--text);
}
textarea{resize:vertical;min-height:120px}
.hint{font-size:13px;color:var(--muted)}
.status--error{color:#b00020}
.status--success{color:#0a6a0a}

/* CTA Banner */
.cta-banner{
  margin:18px 0;padding:18px;border-radius:10px;background:linear-gradient(90deg,var(--btn),var(--btn-hover));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;transition:transform var(--transition);
}
.cta-banner a{background:#fff;color:var(--text);padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700}
.cta-banner:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}

/* Footer */
.site-footer{padding:20px 0;margin-top:28px;border-top:1px solid rgba(12,26,42,0.04);background:transparent}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.palette-ref{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}

/* Accessibility helpers */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
a:focus,button:focus{outline:3px solid rgba(62,127,99,0.18);outline-offset:3px}

/* Hover polish */
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}

/* Responsive */
@media (max-width:980px){
  .hero{flex-direction:column}
  .grid{grid-template-columns:1fr 1fr}
  .service-grid, .product-grid{grid-template-columns:1fr}
  nav .nav-list{display:none}
  .nav-toggle{display:inline-flex}
  .quick-facts{width:auto}
}
@media (max-width:560px){
  .brand img{height:40px}
  .hero h1{font-size:20px}
  .grid{grid-template-columns:1fr}
  .project img{width:120px;height:90px}
}

/* Mobile nav */
.mobile-nav{
  display:none;position:absolute;top:68px;right:24px;background:var(--card-bg);border-radius:12px;box-shadow:0 10px 30px rgba(12,26,42,0.08);padding:10px;min-width:180px;
}
.mobile-nav.open{display:block}

/* ---------- Product dropdowns / sub-product gallery (add to style.css) ---------- */

/* style for details/summary accordion */
.product-details {
  border-top: 1px dashed rgba(12,26,42,0.04);
  margin-top: 12px;
  padding-top: 12px;
}
.product-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--btn);
  font-weight:700;
  background: transparent;
  border: 1px solid rgba(62,127,99,0.04);
  width: fit-content;
}
.product-details summary::-webkit-details-marker { display: none; } /* remove default arrow */
.product-details summary::after{
  content: "▾";
  margin-left:8px;
  transform-origin: center;
  transition: transform var(--transition);
  color: var(--text);
  font-size:12px;
  opacity:0.9;
}
.product-details[open] summary::after{ transform: rotate(180deg); }

/* container for sub-products */
.sub-products {
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  align-items:start;
}

/* each sub-product card */
.sub-product {
  background: #fff; /* keep thumbnails on white for clarity */
  border-radius:8px;
  padding:8px;
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid rgba(12,26,42,0.04);
}
.sub-product img{
  width:96px;
  height:64px;
  object-fit:cover;
  border-radius:6px;
  flex-shrink:0;
  border:1px solid rgba(12,26,42,0.03);
}
.sub-product .meta{font-size:14px;color:var(--text)}
.sub-product .meta .label{font-weight:700;margin-bottom:4px;display:block}
.sub-product .meta .desc{color:var(--muted);font-size:13px;opacity:0.95}

/* small responsive tweak */
@media (max-width:720px){
  .sub-product img{width:88px;height:56px}
  .sub-products{grid-template-columns:repeat(2,1fr)}
}

/* Enhanced HERO Section */
.enhanced-hero {
  background: linear-gradient(135deg, #f7f5f0 0%, #ffffff 60%);
  padding: 60px 28px;
  border-radius: 18px;
  margin-top: 28px;
  position: relative;
  overflow: hidden;
  animation: heroFade 0.6s ease-out forwards;
}

@keyframes heroFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-content {
  max-width: 780px;
  position: relative;
  z-index: 3;
}

.hero-kicker {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.5px;
  display: inline-block;
  margin-bottom: 8px;
}

.hero-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  color: #0c1a2a;
}

.hero-text {
  font-size: 18px;
  line-height: 1.6;
  color: #4d5566;
}

/* Accent bar */
.hero-accent {
  position: absolute;
  left: 0;
  top: 30px;
  bottom: 30px;
  width: 6px;
  background: linear-gradient(180deg, #ddeb9d, #a0c878, #27667b);
  border-radius: 4px;
}