/* ==========================================================================
   VESTUM Confecciones — Design Tokens
   ========================================================================== */
:root{
  --color-primary:#1C1917;
  --color-on-primary:#FFFFFF;
  --color-secondary:#44403C;
  --color-accent:#A16207;
  --color-accent-soft:#C98A1E;
  --color-background:#FAFAF9;
  --color-surface:#FFFFFF;
  --color-surface-2:#F2EFEC;
  --color-foreground:#0C0A09;
  --color-muted:#6b6560;
  --color-border:#E1DCD5;
  --color-destructive:#DC2626;
  --color-ring:#1C1917;

  --font-display:'Cormorant', serif;
  --font-body:'Montserrat', sans-serif;

  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px;
  --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px;

  --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-full:999px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:180ms; --dur-med:360ms; --dur-slow:600ms;

  --shadow-sm:0 2px 8px rgba(12,10,9,.06);
  --shadow-md:0 12px 32px rgba(12,10,9,.10);
  --shadow-lg:0 24px 64px rgba(12,10,9,.16);

  color-scheme: light;
}

:root[data-theme="dark"]{
  --color-primary:#EDE9E4;
  --color-on-primary:#0C0A09;
  --color-secondary:#C7C0B8;
  --color-accent:#D6A03A;
  --color-accent-soft:#E8B75A;
  --color-background:#0B0A09;
  --color-surface:#141210;
  --color-surface-2:#1B1815;
  --color-foreground:#F5F2EE;
  --color-muted:#A39C93;
  --color-border:#2A2622;
  --color-ring:#D6A03A;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:0 24px 64px rgba(0,0,0,.55);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-primary:#EDE9E4;
    --color-on-primary:#0C0A09;
    --color-secondary:#C7C0B8;
    --color-accent:#D6A03A;
    --color-accent-soft:#E8B75A;
    --color-background:#0B0A09;
    --color-surface:#141210;
    --color-surface-2:#1B1815;
    --color-foreground:#F5F2EE;
    --color-muted:#A39C93;
    --color-border:#2A2622;
    --color-ring:#D6A03A;
    color-scheme: dark;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--color-background);
  color:var(--color-foreground);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  transition:background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul{ list-style:none; }
.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 var(--space-4); }
:focus-visible{ outline:2px solid var(--color-ring); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-.01em; }
.eyebrow{
  font-family:var(--font-body); font-size:12.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--space-2);
}
.section-title{ font-size:clamp(2rem,4vw,3rem); color:var(--color-foreground); }
.section-note{ color:var(--color-muted); max-width:360px; font-size:.95rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:var(--radius-full); font-weight:600; font-size:.92rem;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--color-accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--color-accent-soft); box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; border-color:var(--color-border); color:var(--color-foreground); }
.btn-ghost:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.btn-ghost svg{ transition:transform var(--dur-fast) var(--ease-out); }
.btn-ghost:hover svg{ transform:translateX(3px); }
.btn-sm{ padding:10px 20px; font-size:.82rem; }
.btn-block{ width:100%; }

/* ==========================================================================
   Loader
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:9999; background:var(--color-background);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  transition:opacity .6s var(--ease-out), visibility .6s;
}
.loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-thread{
  width:64px; height:64px; border-radius:50%;
  border:2px solid var(--color-border); border-top-color:var(--color-accent);
  animation:spin 1s linear infinite;
}
.loader-label{ font-family:var(--font-display); letter-spacing:.3em; font-size:.85rem; color:var(--color-muted); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:22px 0; transition:padding var(--dur-med) var(--ease-out), background var(--dur-med), backdrop-filter var(--dur-med), border-color var(--dur-med);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  padding:14px 0; background:color-mix(in srgb, var(--color-background) 78%, transparent);
  backdrop-filter:blur(16px) saturate(160%); border-bottom-color:var(--color-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; letter-spacing:.02em; color:#F5F2EE; transition:color var(--dur-med); }
.logo span{ color:var(--color-accent-soft); }
.main-nav{ display:flex; gap:32px; }
.nav-link{
  font-size:.86rem; font-weight:500; color:rgba(245,242,238,.75); position:relative; padding:4px 0;
  transition:color var(--dur-fast);
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--color-accent-soft);
  transition:width var(--dur-med) var(--ease-out);
}
.nav-link:hover{ color:#fff; }
.nav-link:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:14px; }

/* Header adopts theme colors only once it has an opaque backdrop (scrolled past the hero) */
.site-header.scrolled .logo{ color:var(--color-foreground); }
.site-header.scrolled .logo span{ color:var(--color-accent); }
.site-header.scrolled .nav-link{ color:var(--color-muted); }
.site-header.scrolled .nav-link::after{ background:var(--color-accent); }
.site-header.scrolled .nav-link:hover{ color:var(--color-foreground); }

.theme-toggle{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--color-border);
  background:var(--color-surface); display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; transition:border-color var(--dur-fast), transform var(--dur-fast);
}
.theme-toggle:hover{ border-color:var(--color-accent); transform:rotate(-8deg); }
.theme-toggle svg{ position:absolute; transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.icon-moon{ opacity:0; transform:rotate(-90deg) scale(.5); }
.icon-sun{ opacity:1; transform:rotate(0) scale(1); }
[data-theme="dark"] .icon-sun{ opacity:0; transform:rotate(90deg) scale(.5); }
[data-theme="dark"] .icon-moon{ opacity:1; transform:rotate(0) scale(1); }

.menu-toggle{ display:none; width:40px; height:40px; border:none; background:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.menu-toggle span{ width:22px; height:2px; background:var(--color-foreground); transition:transform var(--dur-fast), opacity var(--dur-fast); }
.menu-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; min-height:100dvh; display:flex; align-items:center; overflow:hidden;
  background:var(--color-primary);
}
.hero-photo{
  position:absolute; inset:0; background-size:cover; background-position:center 30%;
  filter:grayscale(.25) sepia(.18) brightness(.55) contrast(1.08); opacity:.6;
}
.hero-canvas, .particle-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.particle-canvas{ mix-blend-mode:screen; opacity:.7; }
.hero-gradient{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(161,98,7,.28), transparent 60%),
    linear-gradient(180deg, rgba(12,10,9,.15) 0%, rgba(12,10,9,.55) 55%, rgba(12,10,9,.92) 100%);
  pointer-events:none;
}
.hero-noise{
  position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{ position:relative; z-index:2; padding-top:120px; padding-bottom:80px; color:#F5F2EE; }
.hero .eyebrow{ color:var(--color-accent-soft); }
.hero-title{
  font-size:clamp(2.6rem,7vw,5.4rem); color:#fff; margin-bottom:var(--space-4); max-width:900px;
}
.hero-title em{ font-style:italic; color:var(--color-accent-soft); }
.reveal-line{ display:block; overflow:hidden; }
.reveal-inner{ display:inline-block; will-change:transform; }
.hero-sub{
  max-width:520px; font-size:1.05rem; color:rgba(245,242,238,.78); margin-bottom:var(--space-5);
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:var(--space-7); }
.hero .btn-ghost{ border-color:rgba(245,242,238,.3); color:#fff; }
.hero .btn-ghost:hover{ border-color:var(--color-accent-soft); color:var(--color-accent-soft); }

.hero-stats{ display:flex; gap:var(--space-7); flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat-num{ font-family:var(--font-display); font-size:2.4rem; font-weight:700; color:#fff; }
.stat-num::after{ content:'+'; color:var(--color-accent-soft); }
.stat-label{ font-size:.78rem; color:rgba(245,242,238,.6); text-transform:uppercase; letter-spacing:.08em; }

.scroll-cue{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(245,242,238,.55); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.scroll-cue-line{ width:1px; height:36px; background:rgba(245,242,238,.2); overflow:hidden; }
.scroll-cue-line i{ display:block; width:100%; height:12px; background:var(--color-accent-soft); animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ transform:translateY(-14px);} 60%,100%{ transform:translateY(36px);} }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee-strip{
  background:var(--color-surface-2); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);
  overflow:hidden; padding:16px 0;
}
.marquee-track{
  display:inline-flex; gap:28px; white-space:nowrap; font-family:var(--font-display); font-size:1.1rem;
  color:var(--color-muted); animation:marquee 32s linear infinite;
}
.marquee-track span:nth-child(2n){ color:var(--color-accent); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   Sections generic
   ========================================================================== */
.section{ padding:var(--space-8) 0; position:relative; }
.section-head{ margin-bottom:var(--space-6); max-width:640px; }
.section-head.split{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; max-width:none; flex-wrap:wrap; }
.section-head.center{ max-width:600px; margin-left:auto; margin-right:auto; text-align:center; }

/* ==========================================================================
   Categories
   ========================================================================== */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
.cat-card{
  position:relative; overflow:hidden;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-4); transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
  transform-style:preserve-3d; perspective:800px;
  min-height:280px; display:flex; flex-direction:column; justify-content:flex-end;
}
.cat-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--color-accent); transform:translateY(-6px); }
.cat-photo{
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  filter:grayscale(.35) sepia(.15) brightness(.5) contrast(1.05);
  transition:transform 900ms var(--ease-out), filter var(--dur-med) var(--ease-out);
  transform:scale(1.06);
}
.cat-card::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(12,10,9,.08) 0%, rgba(12,10,9,.85) 85%);
}
.cat-card:hover .cat-photo{ transform:scale(1.14); filter:grayscale(.1) sepia(.1) brightness(.6) contrast(1.08); }
.cat-icon{
  position:relative; z-index:2;
  width:52px; height:52px; border-radius:var(--radius-md); background:rgba(255,255,255,.1);
  backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; color:var(--color-accent-soft); margin-bottom:var(--space-4);
}
.cat-card h3{ position:relative; z-index:2; font-size:1.3rem; margin-bottom:8px; color:#fff; }
.cat-card p{ position:relative; z-index:2; color:rgba(245,242,238,.72); font-size:.9rem; margin-bottom:var(--space-3); }
.cat-link{ position:relative; z-index:2; font-size:.82rem; font-weight:600; color:var(--color-accent-soft); display:inline-flex; gap:6px; }
.cat-link i{ transition:transform var(--dur-fast) var(--ease-out); font-style:normal; }
.cat-card:hover .cat-link i{ transform:translateX(4px); }

/* ==========================================================================
   Product grid
   ========================================================================== */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.product-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  overflow:hidden; transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.product-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.product-media{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(160deg, var(--color-surface-2), var(--color-border));
}
.product-media::before{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px);
}
.product-glow{
  position:absolute; inset:0; opacity:0; transition:opacity var(--dur-med) var(--ease-out);
  background:radial-gradient(circle at 50% 30%, rgba(161,98,7,.35), transparent 65%);
}
.product-card:hover .product-glow{ opacity:1; }
.product-media--jacket{ background:linear-gradient(160deg,#6b4226,#3a2313); }
.product-media--pants{ background:linear-gradient(160deg,#d9c6a3,#a9926b); }
.product-media--bomber{ background:linear-gradient(160deg,#28324a,#141b28); }
.product-media--blazer-dama{ background:linear-gradient(160deg,#7a1f2b,#3a0f16); }
.product-media--chino{ background:linear-gradient(160deg,#2b2b2b,#111); }
.product-media--coat{ background:linear-gradient(160deg,#3a3226,#1c1811); }
.tag{ position:absolute; top:14px; left:14px; z-index:2; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 12px; border-radius:var(--radius-full); }
.tag--new{ background:var(--color-accent); color:#fff; }
.product-body{ padding:var(--space-4); }
.product-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.product-top h3{ font-size:1.15rem; }
.ref{ font-size:.72rem; color:var(--color-muted); font-family:var(--font-body); }
.product-desc{ font-size:.85rem; color:var(--color-muted); margin:6px 0 14px; }
.product-meta{ display:flex; justify-content:space-between; align-items:center; }
.swatches{ display:flex; gap:6px; }
.swatches i{ width:16px; height:16px; border-radius:50%; background:var(--sw); border:1px solid rgba(0,0,0,.15); display:block; }
.sizes{ font-size:.72rem; color:var(--color-muted); letter-spacing:.02em; }
.collection-cta{ text-align:center; margin-top:var(--space-6); }

/* ==========================================================================
   Craft / About parallax
   ========================================================================== */
.craft{ background:var(--color-surface-2); overflow:hidden; }
.craft-parallax{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; }
.parallax-layer{ position:absolute; border-radius:50%; filter:blur(60px); }
.layer-1{ width:420px; height:420px; background:var(--color-accent); opacity:.18; top:-120px; left:-100px; }
.layer-2{ width:320px; height:320px; background:var(--color-secondary); opacity:.14; bottom:-80px; right:-60px; }
.layer-3{ width:220px; height:220px; background:var(--color-accent); opacity:.1; top:40%; right:20%; }

.craft-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:var(--space-7); align-items:center; }
.craft-text p{ color:var(--color-muted); max-width:520px; margin-bottom:var(--space-5); }
.craft-list{ display:flex; flex-direction:column; gap:var(--space-4); }
.craft-list li{ display:flex; gap:var(--space-3); align-items:flex-start; }
.craft-list i{ font-style:normal; font-family:var(--font-display); font-size:1.3rem; color:var(--color-accent); min-width:36px; }
.craft-list h4{ font-size:1.02rem; margin-bottom:2px; }
.craft-list p{ color:var(--color-muted); font-size:.88rem; margin:0; max-width:none; }

.craft-visual{ display:flex; justify-content:center; }
.craft-photo{
  position:relative; width:100%; max-width:460px; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:4/5;
}
.craft-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2) sepia(.12) contrast(1.05); }
.craft-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(12,10,9,.05) 30%, rgba(12,10,9,.65) 100%);
}
.craft-photo .thread-spool{
  position:absolute; right:-18px; bottom:-18px; width:130px; z-index:2;
  filter:drop-shadow(var(--shadow-lg));
}
.thread-spool{ aspect-ratio:1; filter:drop-shadow(var(--shadow-md)); }

/* ==========================================================================
   Gallery (workshop photos)
   ========================================================================== */
.gallery-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:160px; gap:var(--space-3);
}
.gallery-item{
  position:relative; overflow:hidden; border-radius:var(--radius-md); grid-column:span 2;
  box-shadow:var(--shadow-sm);
}
.gallery-item.span-2{ grid-column:span 3; grid-row:span 2; }
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.3) sepia(.12) brightness(.75) contrast(1.08);
  transition:transform 700ms var(--ease-out), filter var(--dur-med) var(--ease-out);
  transform:scale(1.02);
}
.gallery-item:hover img{ transform:scale(1.1); filter:grayscale(.05) sepia(.08) brightness(.85) contrast(1.1); }
.gallery-item::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(12,10,9,.82) 100%);
}
.gallery-item figcaption{
  position:absolute; left:14px; bottom:12px; z-index:2; color:#fff; font-size:.82rem; font-weight:600;
  letter-spacing:.03em;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.testi-card{
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4);
  transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.testi-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.testi-card p{ font-family:var(--font-display); font-size:1.15rem; font-style:italic; color:var(--color-foreground); }
.testi-card footer{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.avatar{ width:42px; height:42px; border-radius:50%; background:var(--color-surface-2); color:var(--color-accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.testi-card footer strong{ display:block; font-size:.88rem; }
.testi-card footer small{ color:var(--color-muted); font-size:.76rem; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ background:var(--color-primary); color:var(--color-on-primary); overflow:hidden; }
.contact-bg{
  position:absolute; inset:0; opacity:.5;
  background:radial-gradient(ellipse 60% 60% at 80% 20%, rgba(161,98,7,.25), transparent 60%);
}
.contact-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); }
.contact-text p{ color:rgba(255,255,255,.7); max-width:440px; margin:14px 0 var(--space-5); }
:root[data-theme="light"] .contact-text p, .contact-text p{ color:rgba(255,255,255,.72); }
.contact-info{ display:flex; flex-direction:column; gap:14px; }
.contact-info div{ display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:10px; max-width:400px; }
.contact-info strong{ font-size:.85rem; }
.contact-info span{ color:rgba(255,255,255,.6); font-size:.85rem; }

.contact-form{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);
  padding:var(--space-5); backdrop-filter:blur(12px); display:flex; flex-direction:column; gap:var(--space-3);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:.8rem; color:rgba(255,255,255,.75); }
.contact-form input, .contact-form select, .contact-form textarea{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-sm);
  padding:12px 14px; color:#fff; font-size:.92rem; transition:border-color var(--dur-fast);
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:rgba(255,255,255,.35); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ border-color:var(--color-accent-soft); outline:none; }
.contact-form select option{ color:#111; }
.form-note{ font-size:.8rem; color:var(--color-accent-soft); min-height:18px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--color-surface-2); border-top:1px solid var(--color-border); padding:var(--space-7) 0 var(--space-4); }
.footer-inner{ display:flex; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; margin-bottom:var(--space-6); }
.footer-brand p{ color:var(--color-muted); max-width:280px; margin-top:10px; font-size:.88rem; }
.footer-cols{ display:flex; gap:var(--space-7); flex-wrap:wrap; }
.footer-cols h5{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--color-muted); margin-bottom:14px; }
.footer-cols a{ display:block; font-size:.88rem; color:var(--color-foreground); margin-bottom:10px; opacity:.85; transition:opacity var(--dur-fast); }
.footer-cols a:hover{ opacity:1; color:var(--color-accent); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:var(--space-4); border-top:1px solid var(--color-border); font-size:.78rem; color:var(--color-muted); }

/* ==========================================================================
   Scroll reveal base state
   ========================================================================== */
.reveal-up{ opacity:0; transform:translateY(28px); }
.reveal-inner{ transform:translateY(110%); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .craft-inner{ grid-template-columns:1fr; }
  .craft-visual{ order:-1; }
  .testi-grid{ grid-template-columns:1fr; }
  .contact-inner{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(4, 1fr); grid-auto-rows:140px; }
  .gallery-item.span-2{ grid-column:span 2; }
}

@media (max-width:768px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; top:0; right:0; height:100dvh; width:min(320px,80vw);
    background:var(--color-surface); flex-direction:column; padding:100px var(--space-5) var(--space-5);
    gap:var(--space-4); transform:translateX(100%); transition:transform var(--dur-med) var(--ease-out);
    box-shadow:var(--shadow-lg); z-index:400;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav .nav-link{ font-size:1.1rem; color:var(--color-foreground); }
  .main-nav .nav-link:hover{ color:var(--color-accent); }
  .menu-toggle{ display:flex; }
  .btn-sm{ display:none; }
  .cat-grid{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:var(--space-5); }
  .stat-num{ font-size:1.8rem; }
  .form-row{ grid-template-columns:1fr; }
  .section-head.split{ flex-direction:column; align-items:flex-start; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px; }
  .gallery-item.span-2{ grid-column:span 2; grid-row:span 1; }
  .cat-card{ min-height:240px; }
}

@media (max-width:480px){
  .hero-title{ font-size:2.4rem; }
  .hero-inner{ padding-top:100px; }
}