/* ═══════════════════════════════════════════════════════════
   مصنع حلالة للبليسيه — Halala Pleating Factory
   Main Stylesheet | 2025
   ═══════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --g1:    #C9A84C;
  --g2:    #E8C97A;
  --g3:    #F5DFA0;
  --g4:    #A07830;
  --ink:   rgb(6,4,2);
  --ink2:  rgb(10,7,4);
  --ink3:  rgb(16,12,6);
  --paper: #F7F2E8;
  --muted: #8A7A5A;
  --dim:   #3A3020;
  --line:  rgba(201,168,76,0.15);
  --line2: rgba(201,168,76,0.08);
  --ff-h:  'Cormorant Garamond', Georgia, serif;
  --ff-b:  'Tajawal', sans-serif;
  --ff-d:  'Cinzel', serif;
  --ease:  cubic-bezier(0.22,1,0.36,1);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-b);
  overflow-x: hidden;
  line-height: 1.7;
}

/* Language Toggle Button */
.lang-btn {
  background: transparent;
  border: 1px solid var(--g1);
  color: var(--g1);
  font-family: var(--ff-d);
  font-size: 11px;
  letter-spacing: .2em;
  padding: 7px 16px;
  cursor: pointer;
  transition: all .3s var(--ease);
  border-radius: 2px;
  text-transform: uppercase;
}
.lang-btn:hover {
  background: var(--g1);
  color: var(--ink);
}


body::before {
  content:'';
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.02;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--ink2); }
::-webkit-scrollbar-thumb { background:var(--g1); border-radius:2px; }


/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
header {
  position:fixed; top:0; width:100%; z-index:1000;
  padding:0 5%; height:80px;
  display:flex; justify-content:space-between; align-items:center;
  transition:all .5s var(--ease);
  border-bottom:1px solid transparent;
}
header.scrolled {
  background:rgba(6,4,2,0.97);
  border-color:var(--line);
  height:64px;
  backdrop-filter:blur(20px);
}

.logo { display:flex; align-items:center; gap:14px; text-decoration:none; }
.logo img {
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--g1); object-fit:cover;
  transition:transform .5s var(--ease);
}
.logo:hover img { transform:rotate(8deg) scale(1.08); }
.logo-t { line-height:1.3; }
.logo-ar { color:var(--g2); font-family:var(--ff-b); font-size:15px; font-weight:700; letter-spacing:.03em; }
.logo-en { color:var(--muted); font-family:var(--ff-d); font-size:9px; letter-spacing:.28em; text-transform:uppercase; }

nav ul { list-style:none; display:flex; gap:32px; align-items:center; }
nav a {
  color:rgba(247,242,232,.6); font-size:12.5px; text-decoration:none;
  letter-spacing:.08em; position:relative; padding-bottom:3px;
  transition:color .3s; font-family:var(--ff-b); font-weight:400;
}
nav a::after {
  content:''; position:absolute; bottom:0; right:0;
  width:0; height:1px; background:var(--g1);
  transition:width .4s var(--ease);
}
nav a:hover { color:var(--g2); }
nav a:hover::after { width:100%; }

.nav-wa {
  border:1px solid var(--g1) !important;
  color:var(--g1) !important;
  padding:8px 22px;
  font-size:12px !important;
  letter-spacing:.1em !important;
  transition:all .35s var(--ease) !important;
  background:transparent;
}
.nav-wa::after { display:none !important; }
.nav-wa:hover { background:var(--g1) !important; color:var(--ink) !important; }

/* Hamburger */
.burger {
  display:none; flex-direction:column; gap:5px;
  width:40px; height:40px; padding:8px 6px;
  background:none; border:none; cursor:pointer; z-index:1100;
}
.burger span {
  display:block; width:100%; height:1px; background:var(--g1);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.burger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* Mobile Nav */
.mnav {
  display:none; position:fixed; inset:0; z-index:1050;
  background:rgba(6,4,2,.98); backdrop-filter:blur(30px);
  flex-direction:column; align-items:center; justify-content:center; gap:40px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.mnav.open { opacity:1; pointer-events:all; }
.mnav a {
  color:var(--paper); font-size:22px; text-decoration:none;
  letter-spacing:.08em; font-family:var(--ff-b); font-weight:300;
  transition:color .3s;
}
.mnav a:hover { color:var(--g2); }
.mnav .nav-wa { border:1px solid var(--g1) !important; padding:12px 40px; font-size:14px !important; color:var(--g1) !important; }

@media (max-width:768px) {
  nav { display:none; }
  .burger { display:flex; }
  .mnav { display:flex; }
}


/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.hero {
  position:relative; height:100vh; min-height:700px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transform:scale(1.08);
  transition:transform 8s var(--ease);
  filter:brightness(0.35) saturate(0.7);
}
.hero:hover .hero-bg { transform:scale(1.04); }
.hero::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,4,2,.2) 0%,rgba(6,4,2,.5) 60%,var(--ink) 100%);
}
.hero-content {
  position:relative; z-index:2; text-align:center; padding:0 20px;
  animation:heroIn 1.4s var(--ease) both;
}

@keyframes heroIn {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:none; }
}

.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); padding:8px 24px; margin-bottom:32px;
  font-family:var(--ff-d); font-size:10px; letter-spacing:.35em; color:var(--g1);
  text-transform:uppercase;
  animation:heroIn 1.4s .2s var(--ease) both;
}
.hero-badge::before, .hero-badge::after { content:'◆'; font-size:6px; }

.hero h1 {
  font-family:var(--ff-h); font-size:clamp(3rem,8vw,7rem);
  font-weight:300; line-height:1.1; letter-spacing:.02em;
  color:var(--paper); margin-bottom:16px;
  animation:heroIn 1.4s .35s var(--ease) both;
}
.hero h1 em {
  font-style:italic; color:var(--g2); display:block; font-size:.9em;
}
.hero-sub {
  font-size:clamp(14px,2vw,17px); color:rgba(247,242,232,.55);
  font-weight:300; letter-spacing:.06em; max-width:520px; margin:0 auto 48px;
  animation:heroIn 1.4s .5s var(--ease) both;
}
.hero-ctas {
  display:flex; gap:20px; justify-content:center; flex-wrap:wrap;
  animation:heroIn 1.4s .65s var(--ease) both;
}

.btn-gold {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 36px; background:var(--g1); color:var(--ink);
  font-family:var(--ff-b); font-size:13px; font-weight:700; letter-spacing:.1em;
  text-decoration:none; transition:all .35s var(--ease);
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
.btn-gold:hover { background:var(--g2); transform:translateY(-2px); box-shadow:0 12px 40px rgba(201,168,76,.25); }
.btn-gold-dark { background:var(--g4); }
.btn-gold-dark:hover { background:var(--g1); }

.btn-outline {
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 36px; border:1px solid var(--g1); color:var(--g1);
  font-family:var(--ff-b); font-size:13px; letter-spacing:.1em;
  text-decoration:none; transition:all .35s var(--ease);
}
.btn-outline:hover { background:rgba(201,168,76,.08); transform:translateY(-2px); }

.hero-scroll {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  animation:heroIn 1.4s .9s var(--ease) both;
}
.hero-scroll span { font-size:10px; letter-spacing:.25em; color:var(--muted); text-transform:uppercase; }
.scroll-line { width:1px; height:60px; background:linear-gradient(to bottom,var(--g1),transparent); animation:scrollPulse 2s infinite; }

@keyframes scrollPulse {
  0%,100% { opacity:.3; }
  50%      { opacity:1; }
}


/* ═══════════════════════════════════════════
   STATS STRIP
   ═══════════════════════════════════════════ */
.stats-strip {
  background:var(--ink3);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:60px 5%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
}
.stat { text-align:center; padding:30px 20px; border-left:1px solid var(--line); }
.stat:last-child { border-right:1px solid var(--line); }
.stat-n {
  font-family:var(--ff-h); font-size:clamp(2.5rem,5vw,4rem);
  color:var(--g2); font-weight:600; font-style:italic;
  display:block; line-height:1;
}
.stat-l { font-size:12px; letter-spacing:.15em; color:var(--muted); text-transform:uppercase; margin-top:10px; display:block; }

@media (max-width:768px) { .stats-strip { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .stats-strip { grid-template-columns:1fr 1fr; } }


/* ═══════════════════════════════════════════
   SCROLLING BELT
   ═══════════════════════════════════════════ */
.belt {
  background:var(--g1); padding:28px 0; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(0,0,0,.2);
}
.belt-track {
  display:flex; gap:60px; white-space:nowrap;
  animation:beltMove 20s linear infinite;
}
@keyframes beltMove {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.belt-item {
  font-family:var(--ff-d); font-size:11px; letter-spacing:.25em;
  color:var(--ink); text-transform:uppercase;
  display:flex; align-items:center; gap:20px;
}
.belt-item::after { content:'◆'; font-size:7px; }


/* ═══════════════════════════════════════════
   SECTION BASE
   ═══════════════════════════════════════════ */
section { padding:100px 5%; }

.sec-label {
  font-family:var(--ff-d); font-size:10px; letter-spacing:.4em;
  color:var(--g1); text-transform:uppercase; margin-bottom:16px;
  display:flex; align-items:center; gap:16px;
}
.sec-label::after { content:''; flex:1; height:1px; background:var(--line); max-width:80px; }

.sec-title {
  font-family:var(--ff-h); font-size:clamp(2rem,5vw,3.8rem);
  font-weight:400; line-height:1.15; color:var(--paper); margin-bottom:20px;
}
.sec-title em { font-style:italic; color:var(--g2); }

.sec-sub { color:rgba(247,242,232,.5); font-size:16px; font-weight:300; max-width:560px; line-height:1.8; }

.divider { height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }


/* ═══════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════ */
#services { background:var(--ink2); }

.services-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px; background:var(--line); margin-top:60px;
}
.srv-card {
  background:var(--ink2); padding:48px 36px;
  transition:background .4s var(--ease);
  position:relative; overflow:hidden;
}
.srv-card::before {
  content:''; position:absolute; top:0; right:0;
  width:3px; height:0; background:var(--g1);
  transition:height .5s var(--ease);
}
.srv-card:hover { background:var(--ink3); }
.srv-card:hover::before { height:100%; }

.srv-num { font-family:var(--ff-d); font-size:11px; letter-spacing:.3em; color:var(--g4); margin-bottom:32px; display:block; }
.srv-icon { font-size:36px; margin-bottom:20px; display:block; }
.srv-title { font-family:var(--ff-h); font-size:1.5rem; color:var(--g2); font-weight:400; margin-bottom:14px; line-height:1.3; }
.srv-desc { color:rgba(247,242,232,.45); font-size:14px; line-height:1.8; font-weight:300; }


/* ═══════════════════════════════════════════
   MACHINES — 3D CARDS
   ═══════════════════════════════════════════ */
#machines {
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink3) 50%,var(--ink) 100%);
  position:relative; overflow:hidden;
}
#machines::before {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:900px; height:900px;
  background:radial-gradient(ellipse,rgba(201,168,76,.04) 0%,transparent 70%);
  pointer-events:none;
}

.machines-header { text-align:center; margin-bottom:80px; }
.machines-header .sec-label { justify-content:center; }
.machines-header .sec-label::after { display:none; }
.machines-header .sec-label::before { content:''; flex:1; height:1px; background:var(--line); max-width:80px; }
.machines-header .sec-sub { margin:0 auto; text-align:center; }

/* Badges بيع / استيراد / تصدير */
.mach-badges {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:36px;
}
.mach-badge {
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); padding:10px 22px;
  font-size:12px; letter-spacing:.1em; color:var(--g1);
  font-family:var(--ff-d); text-transform:uppercase;
  transition:all .35s var(--ease);
}
.mach-badge:hover { border-color:var(--g1); background:rgba(201,168,76,.07); }
.mach-badge svg {
  width:14px; height:14px; fill:none;
  stroke:var(--g1); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}

.machines-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:32px; max-width:1100px; margin:0 auto;
}

/* Machine Card */
.mcard { perspective:1200px; cursor:pointer; padding-top:0; }
.mcard-inner {
  position:relative; background:rgba(16,12,6,.8);
  border:1px solid var(--line); border-radius:4px;
  overflow:visible;
  transform-style:preserve-3d;
  transition:transform .1s linear, box-shadow .4s var(--ease), border-color .4s;
  will-change:transform;
}
/* clip only the info section, not the image */
.mcard-info { overflow:hidden; }
.mcard-inner-clip {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  border-radius:4px; overflow:hidden;
}
.mcard:hover .mcard-inner {
  border-color:rgba(201,168,76,.4);
  box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(201,168,76,.1), inset 0 1px 0 rgba(201,168,76,.1);
}

/* Image area */
.mcard-img-wrap {
  position:relative;
  background:radial-gradient(ellipse at center,rgba(30,24,16,.9) 0%,rgba(6,4,2,1) 100%);
  padding:20px 20px 30px;
  display:flex; align-items:center; justify-content:center;
  min-height:340px; overflow:visible;
  border-radius:4px 4px 0 0;
  z-index:2;
}
.mcard-img-wrap::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(201,168,76,.12) 0%,transparent 60%);
  border-radius:4px 4px 0 0;
}

.mcard-glow {
  position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
  width:200px; height:60px;
  background:radial-gradient(ellipse,rgba(201,168,76,.2) 0%,transparent 70%);
  filter:blur(20px);
}
.mcard-shadow {
  position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:60%; height:20px;
  background:radial-gradient(ellipse,rgba(0,0,0,.8) 0%,transparent 70%);
  filter:blur(12px);
  z-index:1;
}
.mcard img {
  width:100%; max-width:420px; height:460px; object-fit:contain;
  position:relative; z-index:3;
  transform:translateY(0) translateZ(60px);
  transition:transform .5s var(--ease), filter .5s;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(201,168,76,.1));
  transform-style:preserve-3d;
}
.mcard:hover img {
  transform:translateY(-20px) translateZ(100px) scale(1.06);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.8)) drop-shadow(0 0 50px rgba(201,168,76,.25));
}
.mcard-reflect {
  position:absolute; bottom:0; left:0; right:0; height:80px;
  background:linear-gradient(to top,rgba(201,168,76,.04),transparent);
  pointer-events:none;
  border-radius:0 0 4px 4px;
}

/* Info area */
.mcard-info { padding:28px 32px 32px; border-top:1px solid var(--line2); }
.mcard-model { font-family:var(--ff-d); font-size:10px; letter-spacing:.35em; color:var(--g4); margin-bottom:10px; }
.mcard-name { font-family:var(--ff-h); font-size:1.4rem; color:var(--g2); font-weight:600; margin-bottom:10px; line-height:1.3; }
.mcard-tagline { font-size:13px; color:rgba(247,242,232,.4); font-weight:300; margin-bottom:20px; line-height:1.7; }

.mcard-features { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.mcard-features li {
  font-size:12.5px; color:rgba(247,242,232,.55);
  display:flex; align-items:flex-start; gap:8px; line-height:1.5;
}
.mcard-features li::before { content:'◆'; color:var(--g4); font-size:6px; margin-top:5px; flex-shrink:0; }

.mcard-use {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.12em; color:var(--g1);
  border:1px solid var(--line); padding:10px 20px;
  transition:all .35s var(--ease); text-transform:uppercase; font-family:var(--ff-d);
}
.mcard:hover .mcard-use { border-color:var(--g1); background:rgba(201,168,76,.06); }

.mcard-highlight {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--g1),transparent);
  opacity:0; transition:opacity .4s;
}
.mcard:hover .mcard-highlight { opacity:1; }

@media (max-width:900px) { .machines-grid { grid-template-columns:1fr; max-width:520px; } }

/* Machine card import/export actions */
.mcard-actions {
  display:flex; gap:8px; margin-top:16px; padding-top:16px;
  border-top:1px solid var(--line2);
}
.mcard-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 14px; font-size:11px; letter-spacing:.1em; font-family:var(--ff-d);
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:rgba(247,242,232,.5);
  transition:all .3s var(--ease); border-radius:2px;
}
.mcard-btn:hover { border-color:var(--g1); color:var(--g1); background:rgba(201,168,76,.06); }
.mcard-btn svg { width:13px; height:13px; fill:currentColor; flex-shrink:0; }
.mcard-btn.btn-export { color:var(--g4); border-color:rgba(201,168,76,.3); }
.mcard-btn.btn-export:hover { color:var(--g2); border-color:var(--g2); background:rgba(201,168,76,.08); }

/* Machines section top actions */
.machines-actions {
  display:flex; gap:12px; justify-content:center; margin-bottom:50px; flex-wrap:wrap;
}
.machines-action-btn {
  display:flex; align-items:center; gap:8px;
  padding:11px 28px; font-size:11.5px; letter-spacing:.15em; font-family:var(--ff-d);
  text-transform:uppercase; cursor:pointer; text-decoration:none;
  border:1px solid var(--line); background:transparent; color:rgba(247,242,232,.5);
  transition:all .35s var(--ease); border-radius:2px;
}
.machines-action-btn:hover { border-color:var(--g1); color:var(--g1); background:rgba(201,168,76,.06); }
.machines-action-btn svg { width:14px; height:14px; fill:currentColor; }
.machines-action-btn.primary { border-color:var(--g1); color:var(--g1); }
.machines-action-btn.primary:hover { background:var(--g1); color:var(--ink); }

/* Toast */
.toast {
  position:fixed; bottom:120px; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(16,12,6,.95); border:1px solid var(--g1); color:var(--g2);
  padding:12px 28px; font-size:12px; letter-spacing:.1em; font-family:var(--ff-d);
  z-index:9999; opacity:0; transition:all .4s var(--ease); pointer-events:none;
  white-space:nowrap; border-radius:2px;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }


/* ═══════════════════════════════════════════
   GALLERY
   ═══════════════════════════════════════════ */
#gallery { background:var(--ink2); }

.gallery-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:4px; margin-top:60px;
}
.gal-item { overflow:hidden; position:relative; }
.gal-item.big { grid-row:span 2; }
.gal-item img {
  width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform .7s var(--ease), filter .5s;
  filter:brightness(.85) saturate(.8);
}
.gal-item.big img { aspect-ratio:auto; height:100%; }
.gal-item:hover img { transform:scale(1.06); filter:brightness(1) saturate(1.1); }
.gal-item::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(6,4,2,.4),transparent 50%);
  pointer-events:none;
}

@media (max-width:768px) {
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .gal-item.big { grid-row:span 1; }
}


/* ═══════════════════════════════════════════
   BRANCHES
   ═══════════════════════════════════════════ */
#branches { background:var(--ink3); }

.branches-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:2px; background:var(--line); margin-top:60px;
}
.branch-card {
  background:var(--ink3); padding:52px 44px;
  position:relative; overflow:hidden;
  transition:background .4s;
}
.branch-card::after {
  content:''; position:absolute; bottom:0; right:0; left:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--g1),transparent);
  transform:scaleX(0); transition:transform .5s var(--ease); transform-origin:center;
}
.branch-card:hover { background:rgb(12,9,5); }
.branch-card:hover::after { transform:scaleX(1); }

.branch-icon { font-size:40px; margin-bottom:28px; display:block; }
.branch-title { font-family:var(--ff-h); font-size:1.6rem; color:var(--g2); font-weight:400; margin-bottom:20px; }

.branch-details { display:flex; flex-direction:column; gap:12px; }
.branch-detail { display:flex; align-items:flex-start; gap:14px; }
.branch-detail-icon { color:var(--g1); font-size:14px; margin-top:3px; flex-shrink:0; }
.branch-detail-text { color:rgba(247,242,232,.55); font-size:14px; font-weight:300; line-height:1.7; }

@media (max-width:768px) { .branches-grid { grid-template-columns:1fr; } }


/* ═══════════════════════════════════════════
   CONTACT CTA
   ═══════════════════════════════════════════ */
#contact {
  background:var(--ink); text-align:center; padding:120px 5%;
  position:relative; overflow:hidden;
}
#contact::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--g1),transparent);
}
.contact-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:800px; height:400px;
  background:radial-gradient(ellipse,rgba(201,168,76,.05) 0%,transparent 65%);
  pointer-events:none;
}
#contact .sec-title { font-size:clamp(2.5rem,6vw,5rem); }

.contact-btns { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:60px; }

.phones {
  display:flex; gap:40px; justify-content:center; flex-wrap:wrap;
  margin-top:48px; padding-top:48px;
  border-top:1px solid var(--line);
}
.phone-item { text-align:center; }
.phone-label { font-size:10px; letter-spacing:.25em; color:var(--muted); text-transform:uppercase; margin-bottom:8px; display:block; font-family:var(--ff-d); }
.phone-num { font-family:var(--ff-h); font-size:1.4rem; color:var(--g2); font-weight:600; text-decoration:none; transition:color .3s; direction:ltr; display:block; }
.phone-num:hover { color:var(--g3); }


/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
footer {
  background:var(--ink2); border-top:1px solid var(--line);
  padding:40px 5%;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.footer-logo { display:flex; align-items:center; gap:12px; }
.footer-logo img { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); object-fit:cover; }
.footer-name { color:var(--g2); font-size:13px; font-weight:700; }
.footer-sub { color:var(--muted); font-size:11px; }
.footer-copy { font-size:12px; color:var(--muted); letter-spacing:.06em; }
.footer-links { display:flex; gap:24px; }
.footer-links a { font-size:12px; color:var(--muted); text-decoration:none; letter-spacing:.06em; transition:color .3s; }
.footer-links a:hover { color:var(--g1); }


/* ═══════════════════════════════════════════
   WHATSAPP FLOAT
   ═══════════════════════════════════════════ */
.wa-float {
  position:fixed; bottom:36px; left:36px; z-index:999;
  width:58px; height:58px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 30px rgba(37,211,102,.35);
  transition:transform .35s var(--ease), box-shadow .35s;
  text-decoration:none;
  animation:waPop .6s 2s var(--ease) both;
}
@keyframes waPop {
  from { opacity:0; transform:scale(.5); }
  to   { opacity:1; transform:scale(1); }
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 6px 40px rgba(37,211,102,.5); }
.wa-float svg { width:28px; height:28px; fill:white; }


/* ═══════════════════════════════════════════
   REVEAL ANIMATIONS
   ═══════════════════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(30px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.on { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }


/* ═══════════════════════════════════════════
   CATALOG SECTION
   ═══════════════════════════════════════════ */
#catalog {
  background:var(--ink2);
}
.catalog-header { text-align:center; margin-bottom:60px; }
.catalog-header .sec-label::after { display:none; }
.catalog-header .sec-label::before { content:''; flex:1; height:1px; background:var(--line); max-width:80px; }

.catalog-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px; background:var(--line);
  max-width:1100px; margin:0 auto;
}

.cat-card {
  background:var(--ink2);
  padding:44px 36px;
  cursor:pointer;
  position:relative; overflow:hidden;
  transition:background .4s var(--ease);
  display:flex; flex-direction:column; gap:14px;
}
.cat-card::after {
  content:''; position:absolute; bottom:0; right:0; left:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--g1),transparent);
  transform:scaleX(0); transition:transform .5s var(--ease); transform-origin:center;
}
.cat-card:hover { background:var(--ink3); }
.cat-card:hover::after { transform:scaleX(1); }

.cat-card.cat-import { border:1px dashed rgba(201,168,76,.2); background:rgba(201,168,76,.02); }
.cat-card.cat-import:hover { border-color:var(--g1); background:rgba(201,168,76,.06); }

.cat-icon {
  width:44px; height:44px;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:6px;
  transition:border-color .3s, background .3s;
}
.cat-card:hover .cat-icon { border-color:var(--g1); background:rgba(201,168,76,.08); }
.cat-icon svg { width:20px; height:20px; fill:none; stroke:var(--g1); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.cat-title {
  font-family:var(--ff-h); font-size:1.1rem; color:var(--g2); font-weight:600; line-height:1.3;
}
.cat-desc {
  font-size:13px; color:rgba(247,242,232,.4); font-weight:300; line-height:1.7; flex:1;
}
.cat-btn {
  display:inline-flex; align-items:center; gap:8px;
  font-size:10px; letter-spacing:.18em; color:var(--g1);
  font-family:var(--ff-d); text-transform:uppercase;
  border:1px solid var(--line); padding:9px 18px;
  transition:all .35s var(--ease); align-self:flex-start;
}
.cat-card:hover .cat-btn { border-color:var(--g1); background:rgba(201,168,76,.06); }

/* first card (export all) spans full width */
.cat-card:first-child {
  grid-column:1 / -1;
  flex-direction:row; align-items:center; gap:32px; padding:36px 44px;
}
.cat-card:first-child .cat-icon { flex-shrink:0; width:56px; height:56px; }
.cat-card:first-child .cat-icon svg { width:24px; height:24px; }
.cat-card:first-child .cat-desc { margin-bottom:0; }

@media (max-width:900px) {
  .catalog-grid { grid-template-columns:1fr 1fr; }
  .cat-card:first-child { flex-direction:column; gap:14px; }
}
@media (max-width:600px) {
  .catalog-grid { grid-template-columns:1fr; }
}




/* ═══════════════════════════════════════════
   DEVELOPER CREDIT
   ═══════════════════════════════════════════ */
.dev-credit {
  background: rgb(3,2,1);
  border-top: 1px solid rgba(201,168,76,.1);
  padding: 28px 5%;
  text-align: center;
}
.dev-credit-inner {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 900px; margin: 0 auto;
}
.dev-line {
  font-family: var(--ff-b);
  font-size: 12.5px;
  color: rgba(247,242,232,.35);
  line-height: 1.8;
  letter-spacing: .03em;
}
.dev-main {
  font-size: 13px;
  color: rgba(247,242,232,.5);
}
.dev-company {
  color: var(--g1);
  font-weight: 700;
}
.dev-link {
  color: var(--g1);
  text-decoration: none;
  transition: color .3s;
  font-family: var(--ff-d);
  letter-spacing: .08em;
  font-size: 11px;
}
.dev-link:hover { color: var(--g3); }
.dev-tag {
  font-family: var(--ff-d);
  font-size: 10px;
  letter-spacing: .15em;
  color: rgba(201,168,76,.5);
  border: 1px solid rgba(201,168,76,.2);
  padding: 1px 8px;
  border-radius: 1px;
  margin: 0 2px;
}
.dev-muted { color: rgba(247,242,232,.25); font-size: 12px; }
.dev-phone { font-size: 12px; }
.dev-phone-link {
  color: var(--g1);
  text-decoration: none;
  font-family: var(--ff-d);
  letter-spacing: .1em;
  font-size: 13px;
  transition: color .3s;
  direction: ltr;
  display: inline-block;
}
.dev-phone-link:hover { color: var(--g3); }