/* industrial-home.css — Daynil Fashion Industrial Theme */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500&display=swap');

/* ── TOKENS ─────────────────────────────────────────── */
:root{
  --ih-charcoal:#2b2d33;
  --ih-navy:#1a2744;
  --ih-navy-lt:#243460;
  --ih-white:#ffffff;
  --ih-off:#f4f5f7;
  --ih-orange:#ff6b2b;
  --ih-orange-dk:#e55a1c;
  --ih-blue:#1e6fd9;
  --ih-blue-dk:#155bbf;
  --ih-border:#dde1ea;
  --ih-text:#3a3d47;
  --ih-muted:#6b7280;
  --ih-font:'Montserrat',sans-serif;
  --ih-body:'Roboto',sans-serif;
  --ih-radius:4px;
}

/* ── BASE ────────────────────────────────────────────── */
.ih-page{font-family:var(--ih-body);color:var(--ih-text);background:var(--ih-white)}
.ih-page *{box-sizing:border-box}
.ih-page img{display:block;max-width:100%}

/* ── TYPOGRAPHY HELPERS ──────────────────────────────── */
.ih-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ih-font);font-size:.68rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ih-orange);
  margin-bottom:12px;
}
.ih-eyebrow::before{content:'';width:20px;height:2px;background:var(--ih-orange);flex-shrink:0}

.ih-h1{font-family:var(--ih-font);/*font-size:clamp(2.2rem,5vw,4rem);font-weight:900;*/line-height:1.08;letter-spacing:-.02em;color:var(--ih-white)}
.ih-h2{font-family:var(--ih-font);/*font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;*/line-height:1.15;color:var(--ih-charcoal)}
.ih-h2--white{color:var(--ih-white)}
.ih-lead{font-size:1rem;line-height:1.75;color:rgba(255,255,255,.72)}
.ih-sub{font-size:.92rem;line-height:1.7;color:var(--ih-muted)}

/* ── BUTTONS ─────────────────────────────────────────── */
.ih-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ih-font);font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:14px 32px;border-radius:var(--ih-radius);border:2px solid transparent;
  cursor:pointer;transition:all .25s;white-space:nowrap;
}
.ih-btn--orange{background:var(--ih-orange);color:#fff;border-color:var(--ih-orange)}
.ih-btn--orange:hover{background:var(--ih-orange-dk);border-color:var(--ih-orange-dk);color:#fff;text-decoration:none;transform:translateY(-1px)}
.ih-btn--blue{background:var(--ih-blue);color:#fff;border-color:var(--ih-blue)}
.ih-btn--blue:hover{background:var(--ih-blue-dk);border-color:var(--ih-blue-dk);color:#fff;text-decoration:none;transform:translateY(-1px)}
.ih-btn--outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.ih-btn--outline-white:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff;text-decoration:none}
.ih-btn--outline-navy{background:transparent;color:var(--ih-navy);border-color:var(--ih-navy)}
.ih-btn--outline-navy:hover{background:var(--ih-navy);color:#fff;text-decoration:none}
.ih-btn--lg{padding:18px 44px;font-size:.82rem}
.ih-btn svg{width:16px;height:16px;flex-shrink:0}

/* ── SECTION WRAPPER ─────────────────────────────────── */
.ih-section{padding:88px 0}
.ih-section--sm{padding:56px 0}
.ih-section--navy{background:var(--ih-navy)}
.ih-section--charcoal{background:var(--ih-charcoal)}
.ih-section--off{background:var(--ih-off)}

/* ── HERO ────────────────────────────────────────────── */
.ih-hero{
  position:relative;min-height:94vh;display:flex;align-items:center;
  background:var(--ih-navy);overflow:hidden;
}
.ih-hero__bg{
  position:absolute;inset:0;
  background:linear-gradient(120deg,#0d1526 0%,#1a2744 55%,#1e3a6e 100%);
}
/* diagonal stripe texture */
.ih-hero__texture{
  position:absolute;inset:0;opacity:.04;
  background-image:repeating-linear-gradient(
    -45deg,#fff 0,#fff 1px,transparent 0,transparent 50%);
  background-size:12px 12px;
}
.ih-hero__glow{
  position:absolute;right:-10%;top:-10%;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,111,217,.25) 0%,transparent 65%);
  pointer-events:none;
}
.ih-hero__inner{position:relative;z-index:2;width:100%}

.ih-hero__badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,107,43,.15);border:1px solid rgba(255,107,43,.35);
  color:var(--ih-orange);font-family:var(--ih-font);font-size:.68rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 16px;border-radius:2px;margin-bottom:24px;
}
.ih-hero__badge-dot{width:6px;height:6px;border-radius:50%;background:var(--ih-orange);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.ih-hero__title{margin-bottom:24px}
.ih-hero__title span{color:var(--ih-orange)}

.ih-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:56px}

.ih-hero__trust{
  display:flex;flex-wrap:wrap;gap:28px;
  padding-top:32px;border-top:1px solid rgba(255,255,255,.1);
}
.ih-hero__trust-item{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ih-font);font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.ih-hero__trust-item svg{width:18px;height:18px;color:var(--ih-orange);flex-shrink:0}

/* hero right panel */
.ih-hero__panel{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--ih-radius);padding:32px;
}
.ih-hero__panel-title{
  font-family:var(--ih-font);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ih-orange);
  margin-bottom:20px;
}
.ih-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.08);border-radius:var(--ih-radius);overflow:hidden;margin-bottom:24px}
.ih-stat{background:rgba(255,255,255,.04);padding:20px 16px;text-align:center}
.ih-stat__num{font-family:var(--ih-font);font-size:1.9rem;font-weight:900;color:#fff;line-height:1}
.ih-stat__num span{color:var(--ih-orange)}
.ih-stat__label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:4px}

/* ── TICKER ──────────────────────────────────────────── */
.ih-ticker{background:var(--ih-orange);padding:11px 0;overflow:hidden;white-space:nowrap}
.ih-ticker__track{display:inline-flex;animation:ticker 30s linear infinite}
.ih-ticker__item{
  display:inline-flex;align-items:center;gap:16px;padding:0 28px;
  font-family:var(--ih-font);font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
}
.ih-ticker__sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5);flex-shrink:0}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── CATEGORIES ──────────────────────────────────────── */
.ih-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ih-cat-card{
  position:relative;background:var(--ih-white);
  border:1px solid var(--ih-border);border-radius:var(--ih-radius);
  padding:36px 28px;text-decoration:none;color:inherit;
  overflow:hidden;transition:all .3s;display:flex;flex-direction:column;gap:14px;
}
.ih-cat-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--ih-orange);transform:scaleY(0);transform-origin:bottom;
  transition:transform .3s;
}
.ih-cat-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.1);transform:translateY(-3px);text-decoration:none;color:inherit}
.ih-cat-card:hover::before{transform:scaleY(1)}

.ih-cat-card__icon{
  width:56px;height:56px;background:var(--ih-off);border-radius:var(--ih-radius);
  display:flex;align-items:center;justify-content:center;transition:background .3s;
}
.ih-cat-card:hover .ih-cat-card__icon{background:rgba(255,107,43,.1)}
.ih-cat-card__icon svg{width:26px;height:26px;color:var(--ih-navy)}
.ih-cat-card:hover .ih-cat-card__icon svg{color:var(--ih-orange)}

.ih-cat-card__name{font-family:var(--ih-font);font-size:1rem;font-weight:700;color:var(--ih-charcoal);margin:0}
.ih-cat-card__desc{font-size:.83rem;color:var(--ih-muted);line-height:1.6;margin:0;flex:1}
.ih-cat-card__tags{display:flex;flex-wrap:wrap;gap:6px}
.ih-cat-card__tag{
  font-family:var(--ih-font);font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 10px;background:var(--ih-off);border-radius:2px;color:var(--ih-muted);
}
.ih-cat-card__link{
  font-family:var(--ih-font);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ih-orange);
  display:flex;align-items:center;gap:6px;margin-top:4px;
}

/* ── PRODUCT GRID ────────────────────────────────────── */
.ih-prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ih-prod-card{
  background:var(--ih-white);border:1px solid var(--ih-border);
  border-radius:var(--ih-radius);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s;
}
.ih-prod-card:hover{box-shadow:0 10px 36px rgba(0,0,0,.1);transform:translateY(-4px)}

.ih-prod-card__img{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(145deg,#eef0f5,#e4e8f0);
}
.ih-prod-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ih-prod-card:hover .ih-prod-card__img img{transform:scale(1.05)}
.ih-prod-card__placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
.ih-prod-card__placeholder svg{width:52px;height:52px;color:#c5cad8;opacity:.6}

.ih-prod-card__badge{
  position:absolute;top:12px;left:12px;
  font-family:var(--ih-font);font-size:.6rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:2px;
}
.ih-prod-card__badge--orange{background:var(--ih-orange);color:#fff}
.ih-prod-card__badge--navy{background:var(--ih-navy);color:#fff}

.ih-prod-card__body{padding:20px;flex:1;display:flex;flex-direction:column;gap:8px}
.ih-prod-card__cat{font-family:var(--ih-font);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ih-blue)}
.ih-prod-card__name{font-family:var(--ih-font);font-size:.98rem;font-weight:700;color:var(--ih-charcoal);margin:0;line-height:1.3}
.ih-prod-card__desc{font-size:.82rem;color:var(--ih-muted);line-height:1.6;margin:0;flex:1}

/* specs table */
.ih-specs{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--ih-border);border:1px solid var(--ih-border);
  border-radius:var(--ih-radius);overflow:hidden;margin-top:4px;
}
.ih-spec{background:var(--ih-off);padding:8px 12px}
.ih-spec__key{font-family:var(--ih-font);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ih-muted);margin-bottom:2px}
.ih-spec__val{font-family:var(--ih-font);font-size:.78rem;font-weight:600;color:var(--ih-charcoal)}

.ih-prod-card__footer{
  padding:0 20px 20px;display:flex;gap:10px;
}
.ih-btn--card-primary{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;background:var(--ih-navy);color:#fff;
  font-family:var(--ih-font);font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border-radius:var(--ih-radius);transition:background .25s;
}
.ih-btn--card-primary:hover{background:var(--ih-navy-lt);color:#fff;text-decoration:none}
.ih-btn--card-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 14px;background:transparent;color:var(--ih-orange);
  font-family:var(--ih-font);font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ih-orange);border-radius:var(--ih-radius);
  transition:all .25s;white-space:nowrap;
}
.ih-btn--card-secondary:hover{background:var(--ih-orange);color:#fff;text-decoration:none}

/* ── CUSTOM BRANDING ─────────────────────────────────── */
.ih-brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--ih-radius);overflow:hidden}
.ih-brand-left{background:var(--ih-navy);padding:64px 56px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.ih-brand-right{background:var(--ih-charcoal);padding:64px 56px;display:flex;flex-direction:column;justify-content:center;gap:20px}

.ih-brand-steps{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.ih-brand-step{display:flex;align-items:flex-start;gap:16px}
.ih-brand-step__num{
  width:32px;height:32px;border-radius:50%;background:var(--ih-orange);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--ih-font);font-size:.75rem;font-weight:800;color:#fff;
}
.ih-brand-step__text h5{font-family:var(--ih-font);font-size:.85rem;font-weight:700;color:#fff;margin:0 0 4px}
.ih-brand-step__text p{font-size:.8rem;color:rgba(255,255,255,.55);margin:0;line-height:1.5}

.ih-brand-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ih-brand-option{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--ih-radius);padding:16px;
  display:flex;flex-direction:column;gap:6px;
}
.ih-brand-option svg{width:20px;height:20px;color:var(--ih-orange)}
.ih-brand-option h6{font-family:var(--ih-font);font-size:.78rem;font-weight:700;color:#fff;margin:0}
.ih-brand-option p{font-size:.75rem;color:rgba(255,255,255,.5);margin:0;line-height:1.4}

/* ── WHOLESALE FORM ──────────────────────────────────── */
.ih-form-wrap{
  background:var(--ih-white);border-radius:var(--ih-radius);
  box-shadow:0 20px 60px rgba(0,0,0,.15);padding:48px;
}
.ih-form-title{font-family:var(--ih-font);font-size:1.4rem;font-weight:800;color:var(--ih-charcoal);margin-bottom:4px}
.ih-form-sub{font-size:.85rem;color:var(--ih-muted);margin-bottom:32px;line-height:1.6}
.ih-field{margin-bottom:20px}
.ih-label{
  display:block;font-family:var(--ih-font);font-size:.65rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ih-charcoal);margin-bottom:7px;
}
.ih-input{
  width:100%;padding:13px 16px;border:1.5px solid var(--ih-border);
  border-radius:var(--ih-radius);font-family:var(--ih-body);font-size:.9rem;
  color:var(--ih-text);background:#fff;transition:border-color .2s;
}
.ih-input:focus{outline:none;border-color:var(--ih-blue)}
textarea.ih-input{resize:vertical;min-height:110px}
select.ih-input{cursor:pointer}

.ih-form-note{font-size:.75rem;color:var(--ih-muted);margin-top:12px;line-height:1.5}
.ih-form-note svg{width:14px;height:14px;vertical-align:middle;color:var(--ih-orange)}

/* ── WHY US ──────────────────────────────────────────── */
.ih-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.ih-why-item{display:flex;flex-direction:column;gap:14px}
.ih-why-icon{
  width:52px;height:52px;background:rgba(30,111,217,.08);
  border-radius:var(--ih-radius);display:flex;align-items:center;justify-content:center;
}
.ih-why-icon svg{width:24px;height:24px;color:var(--ih-blue)}
.ih-why-item h4{font-family:var(--ih-font);font-size:.9rem;font-weight:700;color:var(--ih-charcoal);margin:0}
.ih-why-item p{font-size:.82rem;color:var(--ih-muted);line-height:1.65;margin:0}

/* ── TRUST BAR ───────────────────────────────────────── */
.ih-trust-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:40px;padding:40px 0;border-top:1px solid var(--ih-border);border-bottom:1px solid var(--ih-border);
}
.ih-trust-item{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ih-font);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ih-muted);
}
.ih-trust-item svg{width:20px;height:20px;color:var(--ih-orange)}

/* ── STICKY WHATSAPP ─────────────────────────────────── */
.ih-wa-btn{
  position:fixed;bottom:28px;right:28px;z-index:1000;
  display:flex;align-items:center;gap:10px;
  padding:13px 24px;background:#25d366;color:#fff;
  font-family:var(--ih-font);font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  border-radius:50px;box-shadow:0 6px 28px rgba(37,211,102,.45);
  transition:all .3s;animation:waPulse 2.5s ease-in-out infinite;
}
.ih-wa-btn:hover{background:#1ebe5d;color:#fff;text-decoration:none;animation:none;box-shadow:0 8px 36px rgba(37,211,102,.6)}
.ih-wa-btn svg{width:18px;height:18px;flex-shrink:0}
@keyframes waPulse{0%,100%{box-shadow:0 6px 28px rgba(37,211,102,.45)}50%{box-shadow:0 6px 44px rgba(37,211,102,.7)}}

/* ── EMPTY STATE ─────────────────────────────────────── */
.ih-empty{grid-column:1/-1;text-align:center;padding:72px 20px;color:var(--ih-muted)}
.ih-empty svg{width:52px;height:52px;color:var(--ih-border);margin-bottom:14px}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:1100px){
  .ih-why-grid{grid-template-columns:repeat(2,1fr)}
  .ih-brand-left,.ih-brand-right{padding:48px 36px}
}
@media(max-width:900px){
  .ih-cat-grid{grid-template-columns:repeat(2,1fr)}
  .ih-prod-grid{grid-template-columns:repeat(2,1fr)}
  .ih-brand-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .ih-section{padding:60px 0}
  .ih-hero{min-height:auto;padding:80px 0 60px}
  .ih-hero__actions{flex-direction:column}
  .ih-btn--lg{width:100%;justify-content:center}
  .ih-form-wrap{padding:32px 24px}
  .ih-brand-options{grid-template-columns:1fr}
}
@media(max-width:576px){
  .ih-cat-grid{grid-template-columns:1fr}
  .ih-prod-grid{grid-template-columns:1fr}
  .ih-why-grid{grid-template-columns:1fr}
  .ih-wa-btn span{display:none}
  .ih-wa-btn{padding:14px;border-radius:50%}
}
