<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MAWA — Вироби ручної роботи з місією</title>
<meta name="description" content="MAWA — соціальний крафт-бренд з Ужгорода. Натуральне мило, керамічні вироби, в'язані вироби ручної роботи. 100% прибутку — на програми фонду «Рука Допомоги».">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#F5EFE4;--beige:#EDE3D2;--beige-mid:#E0D4C0;
  --terra:#B85C38;--terra-dark:#8C3E22;--terra-light:#D9845F;
  --brown:#3E2210;--brown-mid:#7A4F35;
  --sand:#C4A882;--sand-light:#DDD0BC;
  --white:#FDFAF5;--text:#2E1A0E;--text-muted:#7A5C42;
  --font-d:'Cormorant Garamond',Georgia,serif;
  --font-b:'Jost',sans-serif;
  --clay:#C17F5A;
  --seaweed:#4A7C6F;
  --sea-salt:#E8B4B8;
  --charcoal:#3A3A3A;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--cream);color:var(--text);font-size:16px;line-height:1.7;font-weight:300;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:0 6%;background:rgba(245,239,228,0.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(196,168,130,0.2);display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{font-family:var(--font-d);font-size:28px;font-weight:600;color:var(--brown);letter-spacing:.14em;text-decoration:none;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{font-size:12px;font-weight:400;letter-spacing:.05em;color:var(--text-muted);text-decoration:none;padding:7px 12px;transition:color .2s;white-space:nowrap}
.nav-link:hover{color:var(--brown)}
.nav-cta{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--white);background:var(--terra);border:none;padding:10px 20px;cursor:pointer;text-decoration:none;transition:background .2s;margin-left:6px;white-space:nowrap}
.nav-cta:hover{background:var(--terra-dark)}

/* HERO */
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;padding-top:64px}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:7% 5% 7% 8%}
.hero-eyebrow{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);margin-bottom:20px}
.hero-title{font-family:var(--font-d);font-size:clamp(38px,4.8vw,70px);font-weight:500;line-height:1.1;color:var(--brown);margin-bottom:22px}
.hero-title em{font-style:italic;color:var(--terra)}
.hero-sub{font-size:15px;color:var(--text-muted);max-width:400px;line-height:1.8;margin-bottom:40px}
.seg-label{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.seg-tiles{display:flex;flex-direction:column;gap:8px;max-width:390px}
.seg-tile{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--white);border:1px solid var(--sand-light);text-decoration:none;color:var(--text);transition:border-color .2s,background .15s,transform .15s;cursor:pointer}
.seg-tile:hover{border-color:var(--terra);background:rgba(184,92,56,.04);transform:translateX(4px)}
.seg-tile.partner{border-color:var(--sand);background:rgba(196,168,130,.08)}
.seg-tile.partner:hover{border-color:var(--terra-dark);background:rgba(184,92,56,.06)}
.seg-icon{width:36px;height:36px;background:var(--beige);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--terra)}
.seg-tile.partner .seg-icon{background:rgba(62,34,16,.07)}
.seg-body{flex:1}
.seg-title{font-size:16px;font-weight:400;color:var(--brown);margin-bottom:0}
.seg-sub{display:none}
.seg-arr{color:var(--sand);transition:transform .2s,color .2s}
.seg-tile:hover .seg-arr{color:var(--terra);transform:translateX(3px)}

.hero-right{position:relative;overflow:hidden;background:var(--beige)}
.hero-img-ph{width:100%;height:100%;min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(145deg,#EDE3D2 0%,#D4C4A8 55%,#C4A882 100%);color:var(--brown-mid);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.hero-badge{position:absolute;bottom:28px;left:28px;background:var(--white);padding:16px 20px;max-width:200px;border-left:3px solid var(--terra)}
.hero-badge-num{font-family:var(--font-d);font-size:36px;font-weight:500;color:var(--terra);line-height:1;margin-bottom:4px}
.hero-badge-text{font-size:11px;color:var(--text-muted);line-height:1.45}

/* TRUST */
.trust{background:var(--brown);padding:16px 6%;display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap}
.trust-i{display:flex;align-items:center;gap:8px;color:var(--sand-light);font-size:12px;letter-spacing:.05em}
.trust-i svg{width:15px;height:15px;color:var(--terra-light);flex-shrink:0}

/* SECTIONS */
.sec{padding:84px 8%}
.sec-ey{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--terra);margin-bottom:12px}
.sec-title{font-family:var(--font-d);font-size:clamp(28px,3.5vw,50px);font-weight:500;line-height:1.2;color:var(--brown);margin-bottom:12px}
.sec-title em{font-style:italic}
.sec-lead{font-size:15px;color:var(--text-muted);max-width:520px;line-height:1.8}
.sec-header{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:48px}

/* BUTTONS */
.btn-p{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;background:var(--terra);color:var(--white);font-family:var(--font-b);font-size:13px;font-weight:500;letter-spacing:.08em;text-decoration:none;transition:background .2s,transform .15s;border:none;cursor:pointer}
.btn-p:hover{background:var(--terra-dark);transform:translateY(-1px)}
.btn-s{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:transparent;color:var(--brown);border:1px solid var(--sand);font-family:var(--font-b);font-size:13px;font-weight:400;text-decoration:none;transition:border-color .2s,color .2s;cursor:pointer}
.btn-s:hover{border-color:var(--terra);color:var(--terra)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:transparent;color:var(--text-muted);border:1px solid var(--sand-light);font-family:var(--font-b);font-size:13px;font-weight:300;text-decoration:none;transition:border-color .2s,color .2s;cursor:pointer}
.btn-ghost:hover{border-color:var(--sand);color:var(--brown)}

/* B2C */
#b2c{background:var(--white)}
.b2c-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.b2c-card{background:var(--cream);padding:32px 28px;border:1px solid var(--beige);transition:border-color .2s}
.b2c-card:hover{border-color:var(--sand)}
.b2c-icon{width:40px;height:40px;color:var(--terra);margin-bottom:16px}
.b2c-card-title{font-family:var(--font-d);font-size:20px;font-weight:500;color:var(--brown);margin-bottom:7px}
.b2c-card-text{font-size:14px;color:var(--text-muted);line-height:1.7}
.b2c-cta{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap}

/* B2B */
#b2b{background:var(--cream)}
.b2b-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:68px;align-items:start}
.b2b-steps{display:flex;flex-direction:column;margin-top:32px}
.b2b-step{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--beige)}
.b2b-step:last-child{border-bottom:none}
.b2b-step-n{font-family:var(--font-d);font-size:30px;font-weight:500;color:var(--terra);line-height:1;min-width:32px;padding-top:2px}
.b2b-step-title{font-family:var(--font-d);font-size:17px;font-weight:500;color:var(--brown);margin-bottom:4px}
.b2b-step-text{font-size:13px;color:var(--text-muted);line-height:1.65}
.b2b-card{background:var(--white);padding:32px;border:1px solid var(--beige);position:sticky;top:84px}
.b2b-card-title{font-family:var(--font-d);font-size:20px;font-weight:500;color:var(--brown);margin-bottom:18px}
.b2b-perks{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.b2b-perk{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-muted);line-height:1.5}
.b2b-perk svg{width:16px;height:16px;color:var(--terra);flex-shrink:0;margin-top:3px}

/* FAMILY */
#family{background:var(--beige)}
.family-layout{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center}
.family-occ{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:28px}
.fam-occ{background:var(--white);padding:20px 18px;border:1px solid var(--sand-light)}
.fam-occ-num{font-family:var(--font-d);font-size:26px;color:var(--terra);margin-bottom:6px}
.fam-occ-title{font-size:13px;font-weight:500;color:var(--brown);margin-bottom:3px}
.fam-occ-text{font-size:12px;color:var(--text-muted);line-height:1.5}
.fam-img-ph{width:100%;aspect-ratio:4/5;background:linear-gradient(160deg,#DDD0BC,#C4A882);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--brown-mid);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.fam-quote{background:var(--white);padding:20px 22px;margin-top:3px;border-left:3px solid var(--terra)}
.fam-quote-text{font-family:var(--font-d);font-size:16px;font-style:italic;color:var(--brown);line-height:1.5;margin-bottom:7px}
.fam-quote-sub{font-size:11px;color:var(--text-muted)}

/* PARTNERSHIP */
#partnership{background:var(--brown);color:var(--white)}
#partnership .sec-title{color:var(--sand-light)}
#partnership .sec-ey{color:var(--terra-light)}
#partnership .sec-lead{color:rgba(237,220,188,.65);max-width:100%}

.partner-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:52px}

.partner-types{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-bottom:52px}
.partner-card{background:rgba(255,255,255,.06);padding:26px 20px;border:1px solid rgba(196,168,130,.15);transition:background .2s,border-color .2s;cursor:default}
.partner-card:hover{background:rgba(255,255,255,.1);border-color:rgba(196,168,130,.35)}
.partner-card-icon{width:36px;height:36px;color:var(--terra-light);margin-bottom:16px}
.partner-card-title{font-family:var(--font-d);font-size:17px;font-weight:500;color:var(--sand-light);margin-bottom:8px;line-height:1.3}
.partner-card-text{font-size:12px;color:rgba(196,168,130,.65);line-height:1.6}
.partner-card-tag{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--terra-light);border:1px solid rgba(184,92,56,.4);padding:3px 8px;margin-top:12px}

.partner-cta-block{background:rgba(255,255,255,.04);border:1px solid rgba(196,168,130,.15);padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.partner-cta-title{font-family:var(--font-d);font-size:26px;font-weight:500;color:var(--sand-light);margin-bottom:10px}
.partner-cta-text{font-size:14px;color:rgba(196,168,130,.6);line-height:1.75}
.partner-cta-actions{display:flex;flex-direction:column;gap:10px}
.partner-cta-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(196,168,130,.4);margin-bottom:4px}

.btn-partner-p{display:flex;align-items:center;gap:10px;padding:15px 22px;background:var(--terra);color:var(--white);font-family:var(--font-b);font-size:13px;font-weight:500;letter-spacing:.07em;text-decoration:none;transition:background .2s;border:none;cursor:pointer;width:100%;justify-content:center}
.btn-partner-p:hover{background:var(--terra-dark)}
.btn-partner-s{display:flex;align-items:center;gap:10px;padding:14px 22px;background:transparent;color:var(--sand-light);border:1px solid rgba(196,168,130,.35);font-family:var(--font-b);font-size:13px;font-weight:300;text-decoration:none;transition:border-color .2s,color .2s;cursor:pointer;width:100%;justify-content:center}
.btn-partner-s:hover{border-color:var(--sand);color:var(--white)}
.btn-partner-g{display:flex;align-items:center;gap:10px;padding:14px 22px;background:transparent;color:rgba(196,168,130,.5);border:1px solid rgba(196,168,130,.15);font-family:var(--font-b);font-size:13px;font-weight:300;text-decoration:none;transition:border-color .2s,color .2s;cursor:pointer;width:100%;justify-content:center}
.btn-partner-g:hover{border-color:rgba(196,168,130,.3);color:rgba(196,168,130,.8)}
.cta-hint{font-size:11px;color:rgba(196,168,130,.35);text-align:center;margin-top:6px}

/* PRODUCTS */
#products{background:var(--white)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:48px}
.prod-card{background:var(--white);overflow:hidden;transition:transform .2s;border:1px solid var(--beige)}
.prod-card:hover{transform:translateY(-3px)}
.prod-img{width:100%;aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brown-mid);opacity:.6}
.prod-body{padding:18px 20px 24px}
.prod-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);font-weight:500;margin-bottom:4px}
.prod-name{font-family:var(--font-d);font-size:21px;color:var(--brown);font-weight:500;margin-bottom:3px}
.prod-desc{font-size:13px;color:var(--text-muted);line-height:1.6}

/* MISSION */
#mission{background:var(--brown);color:var(--white)}
#mission .sec-title{color:var(--sand-light)}
#mission .sec-ey{color:var(--terra-light)}
.mission-layout{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.m-stats{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:36px}
.m-stat{background:rgba(255,255,255,.06);padding:24px 20px;border:1px solid rgba(196,168,130,.18)}
.m-stat-n{font-family:var(--font-d);font-size:38px;font-weight:500;color:var(--terra-light);line-height:1;margin-bottom:4px}
.m-stat-l{font-size:12px;color:rgba(196,168,130,.55);line-height:1.4}
.m-quote{padding:30px;border-left:3px solid var(--terra);background:rgba(255,255,255,.04)}
.m-quote-text{font-family:var(--font-d);font-size:20px;font-style:italic;color:var(--sand-light);line-height:1.55;margin-bottom:14px}
.m-quote-auth{font-size:12px;color:rgba(196,168,130,.55);letter-spacing:.06em}
.m-body{font-size:14px;color:rgba(237,220,188,.5);line-height:1.8;margin-top:18px}
.m-body strong{color:var(--terra-light);font-weight:400}

/* CONTACT */
#contact{background:var(--cream)}
.contact-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}
.contact-info{position:sticky;top:84px}
.contact-opts{display:flex;flex-direction:column;gap:8px;margin-top:32px}
.c-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--white);border:1px solid var(--beige);text-decoration:none;color:var(--text);transition:border-color .2s}
.c-opt:hover{border-color:var(--terra)}
.c-opt-icon{width:34px;height:34px;background:var(--beige);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--terra)}
.c-opt-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:1px}
.c-opt-val{font-size:14px;color:var(--brown)}
.c-opt-arr{color:var(--sand);margin-left:auto;transition:transform .2s,color .2s}
.c-opt:hover .c-opt-arr{color:var(--terra);transform:translateX(3px)}

.form-wrap{background:var(--white);padding:36px;border:1px solid var(--beige)}
.form-title{font-family:var(--font-d);font-size:24px;font-weight:500;color:var(--brown);margin-bottom:4px}
.form-sub{font-size:13px;color:var(--text-muted);margin-bottom:24px}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;padding:11px 14px;background:var(--cream);border:1px solid var(--sand-light);color:var(--text);font-family:var(--font-b);font-size:14px;font-weight:300;outline:none;transition:border-color .2s;border-radius:0;appearance:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--terra)}
.fg textarea{min-height:80px;resize:vertical}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f-submit{width:100%;padding:16px;background:var(--terra);color:var(--white);font-family:var(--font-b);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border:none;cursor:pointer;transition:background .2s;margin-top:4px}
.f-submit:hover{background:var(--terra-dark)}
.f-note{font-size:11px;color:var(--text-muted);text-align:center;margin-top:8px;opacity:.6}
.f-success{display:none;text-align:center;padding:40px 16px}
.f-success.on{display:block}
.f-suc-ic{width:48px;height:48px;border-radius:50%;background:rgba(184,92,56,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--terra)}
.f-suc-title{font-family:var(--font-d);font-size:22px;color:var(--brown);margin-bottom:8px}
.f-suc-text{font-size:13px;color:var(--text-muted);line-height:1.7}

/* FAQ */
#faq{background:var(--beige)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:40px}
.faq-item{padding:24px 26px;background:var(--white);border:1px solid var(--sand-light)}
.sec-clay{background:#F2E6DC}
.sec-seaweed{background:#EBF0EE}
.sec-seasalt{background:#FAF0F1}
.sec-charcoal{background:#F4F2F0}
.faq-q{font-family:var(--font-d);font-size:17px;font-weight:500;color:var(--brown);margin-bottom:7px;line-height:1.35}
.faq-a{font-size:13px;color:var(--text-muted);line-height:1.7}

/* FOOTER */
footer{background:var(--brown);padding:40px 8%;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.f-logo{font-family:var(--font-d);font-size:28px;font-weight:600;color:var(--sand-light);letter-spacing:.14em;text-transform:uppercase}
.f-tag{font-size:11px;color:rgba(196,168,130,.5);margin-top:3px}
.f-links{display:flex;gap:20px;flex-wrap:wrap}
.f-links a{font-size:12px;color:rgba(196,168,130,.5);text-decoration:none;transition:color .2s}
.f-links a:hover{color:var(--sand-light)}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero-eyebrow{animation:fadeUp .5s ease both}
.hero-title{animation:fadeUp .5s .08s ease both}
.hero-sub{animation:fadeUp .5s .16s ease both}
.seg-label{animation:fadeUp .5s .22s ease both}
.seg-tiles{animation:fadeUp .5s .28s ease both}

/* RESPONSIVE */
@media(max-width:1100px){
  .partner-types{grid-template-columns:repeat(3,1fr)}
  .nav-link{display:none}
}
@media(max-width:960px){
  .hero{grid-template-columns:1fr}.hero-right{display:none}
  .b2b-layout,.family-layout,.mission-layout,.contact-layout,.partner-intro{grid-template-columns:1fr;gap:40px}
  .b2b-card,.contact-info{position:static}
  .prod-grid{grid-template-columns:1fr 1fr}
  .sec-header{grid-template-columns:1fr;gap:14px}
  .partner-cta-block{grid-template-columns:1fr;gap:28px}
}
@media(max-width:640px){
  .sec{padding:56px 5%}
  .b2c-grid,.family-occ,.m-stats,.faq-grid,.partner-types{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .fg-row{grid-template-columns:1fr}
  .form-wrap{padding:22px 16px}
  footer{flex-direction:column;align-items:flex-start}
  .trust{gap:18px}
  nav{padding:0 4%}
}

/* MAWA product image carousels added from Nastya instructions */
.prod-carousel{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--sand-light)}
.prod-carousel-track{height:100%;display:flex;transition:transform .35s ease}
.prod-slide{min-width:100%;height:100%;margin:0;padding:0;position:relative;background:var(--sand-light)}
.prod-slide img{width:100%;height:100%;display:block;object-fit:cover}
.prod-slide img.contain{object-fit:contain;padding:14px;background:#E8DFD0}
.prod-carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border:1px solid rgba(253,250,245,.65);background:rgba(62,34,16,.45);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s;z-index:2}
.prod-carousel-btn:hover,.prod-carousel-btn:focus{background:rgba(184,92,56,.85);border-color:rgba(253,250,245,.95);outline:none}
.prod-carousel-btn.prev{left:10px}.prod-carousel-btn.next{right:10px}
.prod-carousel-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:6px;justify-content:center;z-index:2}
.prod-carousel-dot{width:7px;height:7px;border-radius:50%;border:1px solid rgba(253,250,245,.9);background:rgba(62,34,16,.25);padding:0;cursor:pointer}
.prod-carousel-dot.active{background:var(--white)}
.prod-carousel.single .prod-carousel-btn,.prod-carousel.single .prod-carousel-dots{display:none}
@media(max-width:640px){.prod-carousel-btn{width:38px;height:38px}.prod-carousel-dot{width:8px;height:8px}}

</style>
</head>
<body>

<!-- NAV -->
<nav>
  <a class="nav-logo" href="#">MAWA</a>
  <div class="nav-links">
    <a class="nav-link" href="#b2c">Для себе</a>
    <a class="nav-link" href="#b2b">Бізнесу</a>
    <a class="nav-link" href="#family">Родині</a>
    <a class="nav-link" href="#partnership">Партнерство</a>
    <a class="nav-link" href="#products">Продукція</a>
    <a class="nav-link" href="#mission">Місія</a>
    <a class="nav-cta" href="#contact">Замовити</a>
  </div>
</nav>

<!-- HERO -->
<section class="hero">
  <div class="hero-left">
    <p class="hero-eyebrow">Ручна робота · Соціальний бренд · Ужгород</p>
    <h1 class="hero-title">Вироби,<br>зроблені<br><em>з серцем</em></h1>
    <p class="hero-sub">Натуральне мило, керамічні вироби та в'язані вироби від майстринь Закарпаття.<br><span style="display:inline-block;margin-top:10px;padding:8px 14px;background:rgba(184,92,56,.1);border-left:3px solid var(--terra);font-size:14px;color:var(--terra-dark);font-weight:400;letter-spacing:.02em;">Кожна покупка — реальна підтримка людей поруч.</span></p>

    <p class="seg-label">Я тут, бо шукаю…</p>
    <div class="seg-tiles">
      <a href="#b2c" class="seg-tile">
        <div class="seg-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div>
        <div class="seg-body"><div class="seg-title">Для себе або в подарунок</div><div class="seg-sub">Красиве, натуральне, зі смислом</div></div>
        <svg class="seg-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      </a>
      <a href="#b2b" class="seg-tile">
        <div class="seg-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><line x1="12" y1="12" x2="12" y2="12"/><path d="M2 12h20"/></svg></div>
        <div class="seg-body"><div class="seg-title">Корпоративні замовлення</div><div class="seg-sub">Від 20 наборів, брендування, з місією</div></div>
        <svg class="seg-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      </a>
      <a href="#family" class="seg-tile">
        <div class="seg-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div>
        <div class="seg-body"><div class="seg-title">Для родини та близьких</div><div class="seg-sub">Вчителям, вихователям, рідним</div></div>
        <svg class="seg-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      </a>
      <a href="#partnership" class="seg-tile partner">
        <div class="seg-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
        <div class="seg-body"><div class="seg-title">Партнерство та колаборації</div><div class="seg-sub">Кобрендинг, роздріб, інвестиції</div></div>
        <svg class="seg-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      </a>
    </div>
  </div>
  <div class="hero-right">
    <div class="hero-img-ph">
      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
      <span>Фото продукції</span>
    </div>
    <div class="hero-badge">
      <div class="hero-badge-num">100%</div>
      <div class="hero-badge-text">прибутку — на програми фонду «Рука Допомоги»</div>
    </div>
  </div>
</section>

<!-- TRUST -->
<div class="trust">
  <div class="trust-i"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>Ручна робота</div>
  <div class="trust-i"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>Українське виробництво</div>
  <div class="trust-i"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Виготовлення від 10 днів</div>
  <div class="trust-i"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Відкриті до партнерства</div>
</div>

<!-- B2C -->
<section class="sec" id="b2c">
  <div class="sec-header">
    <div><p class="sec-ey">Для себе або в подарунок</p><h2 class="sec-title">Купуй <em>красиве.</em><br>Роби добро непомітно.</h2></div>
    <p class="sec-lead">Кожен виріб MAWA — це маленька історія про майстринь, які вклали в неї час і досвід. І про тебе — людину, чий вибір має значення.</p>
  </div>
  <div class="b2c-grid">
    <div class="b2c-card"><svg class="b2c-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M8 12s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg><div class="b2c-card-title">Виріб, про який говорять</div><div class="b2c-card-text">Крафтове пакування, сургучна печатка, натуральний склад і глибока історія за цим. Такий виріб запам'ятовують.</div></div>
    <div class="b2c-card"><svg class="b2c-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg><div class="b2c-card-title">Вибір із сенсом</div><div class="b2c-card-text">Купуючи MAWA, ти підтримуєш майстринь і фінансуєш реальні соціальні програми — просто обираючи якісне.</div></div>
    <div class="b2c-card"><svg class="b2c-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg><div class="b2c-card-title">Натуральне і якісне</div><div class="b2c-card-text">Мило без хімії, свічки з натурального воску, кераміка з власної майстерні. Кожен виріб унікальний — бо зроблений вручну.</div></div>
    <div class="b2c-card"><svg class="b2c-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><rect x="1" y="3" width="15" height="13" rx="2"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg><div class="b2c-card-title">Доставка по Україні</div><div class="b2c-card-text">Відправляємо Новою Поштою. Подарунковий набір або окремі вироби — пакуємо з турботою.</div></div>
  </div>
  <div class="b2c-cta">
    <a href="#products" class="btn-p">Переглянути продукцію →</a>
    <a href="https://instagram.com/mawa.uzh" target="_blank" class="btn-s">Instagram @mawa.uzh</a>
  </div>
</section>

<!-- B2B -->
<section class="sec sec-clay" id="b2b">
  <div class="b2b-layout">
    <div>
      <p class="sec-ey">Для бізнесу</p>
      <h2 class="sec-title">Корпоративні набори,<br>що <em>говорять</em> про вас</h2>
      <p class="sec-lead">Набори MAWA — це спосіб показати партнерам і команді, що ваша компанія цінує українське, ручну майстерність і людей за нею.</p>
      <div class="b2b-steps">
        <div class="b2b-step"><div class="b2b-step-n">1</div><div><div class="b2b-step-title">Обговорюємо деталі</div><div class="b2b-step-text">Кількість, бюджет, склад набору, терміни і побажання щодо брендування.</div></div></div>
        <div class="b2b-step"><div class="b2b-step-n">2</div><div><div class="b2b-step-title">Виготовляємо вручну</div><div class="b2b-step-text">Кожен виріб окремо, з увагою. Розробляємо кобрендингове пакування з вашим логотипом і фірмовими елементами.</div></div></div>
        <div class="b2b-step"><div class="b2b-step-n">3</div><div><div class="b2b-step-title">Доставляємо і звітуємо</div><div class="b2b-step-text">Доставляємо замовлення у зручний спосіб. Надаємо підтвердження від фонду «Рука Допомоги» — на які саме програми були спрямовані кошти з вашого замовлення.</div></div></div>
      </div>
    </div>
    <div class="b2b-card">
      <div class="b2b-card-title">Що ви отримуєте</div>
      <div class="b2b-perks">
        <div class="b2b-perk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Від 10 одиниць — корпоративні замовлення будь-якого масштабу</div>
        <div class="b2b-perk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Кобрендингове пакування під ваш запит — листівка, бірка, мішечок, стрічка, наклейка та інше</div>
        <div class="b2b-perk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Виготовлення від 2 днів залежно від обсягу та типу виробів</div>
        <div class="b2b-perk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Звіт від фонду «Рука Допомоги» — зарплати майстриням, продуктові набори літнім людям, закуп матеріалів</div>
        <div class="b2b-perk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>Безкоштовна доставка Новою Поштою від 3 000 грн або самовивіз в Ужгороді</div>
      </div>
      <a href="#contact" class="btn-p" style="width:100%;justify-content:center">Обговорити замовлення →</a>
    </div>
  </div>
</section>

<!-- FAMILY -->
<section class="sec sec-seaweed" id="family">
  <div class="family-layout">
    <div>
      <p class="sec-ey">Сімейні подарунки</p>
      <h2 class="sec-title">Вироби,<br>що вчать <em>добру</em></h2>
      <p class="sec-lead">MAWA — для тих, хто хоче подарувати щось справжнє. Виріб ручної роботи з історією — до будь-якого приводу або без нього.</p>
      <div class="family-occ">
        <div class="fam-occ"><div class="fam-occ-num">①</div><div class="fam-occ-title">День вчителя / 1 вересня</div><div class="fam-occ-text">Виріб, який виділяється і несе важливу історію</div></div>
        <div class="fam-occ"><div class="fam-occ-num">②</div><div class="fam-occ-title">Новий рік і свята</div><div class="fam-occ-text">Теплий натуральний набір для близьких — з душею</div></div>
        <div class="fam-occ"><div class="fam-occ-num">③</div><div class="fam-occ-title">День народження</div><div class="fam-occ-text">Унікальний виріб ручної роботи — не як усі</div></div>
        <div class="fam-occ"><div class="fam-occ-num">④</div><div class="fam-occ-title">Просто так</div><div class="fam-occ-text">Бо іноді хочеться подарувати щось справжнє</div></div>
      </div>
      <div style="margin-top:28px;display:flex;gap:12px;flex-wrap:wrap">
        <a href="#contact" class="btn-p">Зробити замовлення →</a>
        <a href="#products" class="btn-s">Переглянути продукцію</a>
      </div>
    </div>
    <div>
      <div class="fam-img-ph">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
        <span>Фото майстринь</span>
      </div>
      <div class="fam-quote">
        <div class="fam-quote-text">"Добро починається вдома — і в подарунку, який ти обираєш."</div>
        <div class="fam-quote-sub">Про що MAWA</div>
      </div>
    </div>
  </div>
</section>

<!-- PARTNERSHIP -->
<section class="sec" id="partnership">
  <div class="partner-intro">
    <div>
      <p class="sec-ey">Партнерство і колаборації</p>
      <h2 class="sec-title">Будуємо<br><em>разом</em></h2>
    </div>
    <p class="sec-lead">MAWA відкрита до різних форматів співпраці — від розміщення вашого логотипу на продукті до спільних лімітованих серій і роздрібних угод. Якщо ваші цінності резонують з нашими — давайте говорити.</p>
  </div>

  <div class="partner-types">
    <div class="partner-card">
      <svg class="partner-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"/></svg>
      <div class="partner-card-title">Кобрендинг</div>
      <div class="partner-card-text">Ваш логотип на продукті MAWA. Спільна комунікація, спільна аудиторія.</div>
      <div class="partner-card-tag">Бренд × MAWA</div>
    </div>
    <div class="partner-card">
      <svg class="partner-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><path d="M2 12h20"/></svg>
      <div class="partner-card-title">Корпоративні подарунки</div>
      <div class="partner-card-text">Набори з брендуванням для вашої команди і партнерів. Від 20 штук.</div>
      <div class="partner-card-tag">Регулярно</div>
    </div>
    <div class="partner-card">
      <svg class="partner-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
      <div class="partner-card-title">Колаборація</div>
      <div class="partner-card-text">Спільний лімітований продукт або серія. Ваша концепція + наші руки.</div>
      <div class="partner-card-tag">Лімітована серія</div>
    </div>
    <div class="partner-card">
      <svg class="partner-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
      <div class="partner-card-title">Інвестиції</div>
      <div class="partner-card-text">Фінансовий партнер для масштабування виробництва і B2B-напряму.</div>
      <div class="partner-card-tag">Стратегічно</div>
    </div>
    <div class="partner-card">
      <svg class="partner-card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
      <div class="partner-card-title">Роздрібні партнери</div>
      <div class="partner-card-text">Магазини, концепт-стори, кафе — продаєте MAWA у своїй точці.</div>
      <div class="partner-card-tag">Оптова ціна</div>
    </div>
  </div>

  <div class="partner-cta-block">
    <div>
      <div class="partner-cta-title">Є ідея або запитання?</div>
      <div class="partner-cta-text">Не обов'язково знати точно який формат вам підходить. Напишіть — разом розберемося що може вийти і чи є сенс рухатись далі.</div>
    </div>
    <div class="partner-cta-actions">
      <p class="partner-cta-label">Готовий говорити</p>
      <a href="https://t.me/mawa_uzh" target="_blank" class="btn-partner-p">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        Записатися на дзвінок у Telegram
      </a>
      <p class="partner-cta-label" style="margin-top:8px">Є конкретний інтерес</p>
      <a href="#contact" class="btn-partner-s">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
        Написати через форму
      </a>
      <p class="partner-cta-label" style="margin-top:8px">Хочу дізнатися більше</p>
      <a href="#" class="btn-partner-g" onclick="alert('PDF-презентація незабаром буде доступна для завантаження.');return false;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Завантажити презентацію MAWA
      </a>
      <p class="cta-hint">Оберіть зручний спосіб — відповідаємо протягом дня</p>
    </div>
  </div>
</section>

<!-- PRODUCTS -->
<section class="sec sec-seasalt" id="products">
  <div class="sec-header">
    <div><p class="sec-ey">Продукція</p><h2 class="sec-title">Три лінійки — <em>одна місія</em></h2></div>
    <p class="sec-lead">Усе виробляється в Ужгороді. Формуємо набори під будь-який запит і бюджет.</p>
  </div>
  <div class="prod-grid">
    <div class="prod-card">
      <div class="prod-carousel" data-carousel="soap">
        <div class="prod-carousel-track">
          <figure class="prod-slide"><img src="/assets/img/mawa-products/soap-01.webp" alt="Натуральне мило MAWA у теплому коричневому кольорі з крафтовим пакуванням і сургучною печаткою" loading="lazy"></figure><figure class="prod-slide"><img src="/assets/img/mawa-products/soap-02.webp" alt="Натуральне мило MAWA у зеленому кольорі з крафтовим пакуванням і сургучною печаткою" loading="lazy"></figure><figure class="prod-slide"><img src="/assets/img/mawa-products/soap-03.webp" alt="Натуральне мило MAWA у світлому кремовому кольорі з крафтовим пакуванням і сургучною печаткою" loading="lazy"></figure><figure class="prod-slide"><img src="/assets/img/mawa-products/soap-04.webp" alt="Натуральне мило MAWA у темному кольорі з крафтовим пакуванням і сургучною печаткою" loading="lazy"></figure><figure class="prod-slide"><img src="/assets/img/mawa-products/soap-05.webp" alt="Натуральне мило MAWA у рожевому кольорі з крафтовим пакуванням і сургучною печаткою" loading="lazy"></figure>
        </div>
        <button class="prod-carousel-btn prev" type="button" aria-label="Попереднє фото">‹</button>
        <button class="prod-carousel-btn next" type="button" aria-label="Наступне фото">›</button>
        <div class="prod-carousel-dots" aria-label="Навігація фото">
          <button class="prod-carousel-dot active" type="button" aria-label="Показати фото 1"></button><button class="prod-carousel-dot" type="button" aria-label="Показати фото 2"></button><button class="prod-carousel-dot" type="button" aria-label="Показати фото 3"></button><button class="prod-carousel-dot" type="button" aria-label="Показати фото 4"></button><button class="prod-carousel-dot" type="button" aria-label="Показати фото 5"></button>
        </div>
      </div>
      <div class="prod-body"><div class="prod-name">Натуральне мило</div><div class="prod-desc">Обгортання та перев'язування вручну, сургучна печатка. Кожен шматочок — окремий процес.</div></div>
    </div>
    <div class="prod-card">
      <div class="prod-carousel single" data-carousel="ceramic">
        <div class="prod-carousel-track">
          <figure class="prod-slide"><img src="/assets/img/mawa-products/ceramic-01.webp" alt="Керамічні миски ручної роботи MAWA з натуральною фактурою глини" loading="lazy"></figure>
        </div>
        <button class="prod-carousel-btn prev" type="button" aria-label="Попереднє фото">‹</button>
        <button class="prod-carousel-btn next" type="button" aria-label="Наступне фото">›</button>
        <div class="prod-carousel-dots" aria-label="Навігація фото">
          <button class="prod-carousel-dot active" type="button" aria-label="Показати фото 1"></button>
        </div>
      </div>
      <div class="prod-body"><div class="prod-name">Керамічні вироби</div><div class="prod-desc">Кожен виріб ліплять майстрині у власній керамічній майстерні. Унікальна форма, ручна робота, жодного повторення.</div></div>
    </div>
    <div class="prod-card">
      <div class="prod-carousel single" data-carousel="knit">
        <div class="prod-carousel-track">
          <figure class="prod-slide"><img src="/assets/img/mawa-products/knit-01.webp" alt="В’язані вироби MAWA у пастельних кольорах, розкладені на траві" loading="lazy" class="contain"></figure>
        </div>
        <button class="prod-carousel-btn prev" type="button" aria-label="Попереднє фото">‹</button>
        <button class="prod-carousel-btn next" type="button" aria-label="Наступне фото">›</button>
        <div class="prod-carousel-dots" aria-label="Навігація фото">
          <button class="prod-carousel-dot active" type="button" aria-label="Показати фото 1"></button>
        </div>
      </div>
      <div class="prod-body"><div class="prod-name">В'язані вироби</div><div class="prod-desc">В'язані вироби вручну. Сучасний дизайн та тепло у кожному стібку — і як складова корпоративного набору.</div></div>
    </div>
  </div>
</section>

<!-- MISSION -->
<section class="sec" id="mission">
  <div class="mission-layout">
    <div>
      <p class="sec-ey">Наша місія</p>
      <h2 class="sec-title">Бізнес,<br>що <em>заробляє</em><br>на добро</h2>
      <p class="sec-lead" style="color:rgba(237,220,188,.65)">Ми не збираємо донати. Ми побудували механізм, який сам заробляє гроші для соціальних програм.</p>
      <div class="m-stats">
        <div class="m-stat"><div class="m-stat-n">100%</div><div class="m-stat-l">прибутку — фонду «Рука Допомоги»</div></div>
        <div class="m-stat"><div class="m-stat-n">3</div><div class="m-stat-l">продуктові лінійки ручної роботи</div></div>
        <div class="m-stat"><div class="m-stat-n">УЖ</div><div class="m-stat-l">виробництво в Ужгороді</div></div>
        <div class="m-stat"><div class="m-stat-n">≠</div><div class="m-stat-l">не благодійність — повноцінний бізнес</div></div>
      </div>
    </div>
    <div>
      <div class="m-quote">
        <div class="m-quote-text">"MAWA народилась із бажання створити щось більше, ніж продукт. Це спосіб об'єднати людей навколо турботи — тих, хто створює, і тих, хто підтримує."</div>
        <div class="m-quote-auth">— Діана Федорка, засновниця</div>
      </div>
      <p class="m-body" style="margin-bottom:14px"><a href="https://rukadopomogy.org.ua" target="_blank" style="color:var(--terra-light);text-decoration:none;border-bottom:1px solid rgba(184,92,56,.4);font-size:13px;letter-spacing:.04em">→ Сайт фонду «Рука Допомоги»</a></p>
      <p class="m-body">Наш благодійний фонд допомагає пенсіонерам, сім'ям у складних обставинах і безхатченкам. MAWA — це модель, де <strong>люди можуть працювати, бути потрібними й отримувати дохід</strong>. А кожна ваша покупка фінансує це напряму.</p>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section class="sec sec-charcoal" id="contact">
  <div class="contact-layout">
    <div class="contact-info">
      <p class="sec-ey">Зв'язатися</p>
      <h2 class="sec-title">Оберіть<br><em>зручний</em><br>спосіб</h2>
      <p class="sec-lead">Відповідаємо протягом кількох годин у робочий час.</p>
      <div class="contact-opts">
        <a href="https://t.me/mawa_uzh" target="_blank" class="c-opt">
          <div class="c-opt-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
          <div><div class="c-opt-lbl">Telegram</div><div class="c-opt-val">@mawa_uzh</div></div>
          <svg class="c-opt-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
        <a href="tel:+380508664226" class="c-opt">
          <div class="c-opt-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.1a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.24h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.09 6.09l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg></div>
          <div><div class="c-opt-lbl">Телефон</div><div class="c-opt-val">Анастасія: +38 (050) 866-42-26<br>Діана: +38 (050) 843-12-19</div></div>
          <svg class="c-opt-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
        <a href="https://instagram.com/mawa.uzh" target="_blank" class="c-opt">
          <div class="c-opt-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg></div>
          <div><div class="c-opt-lbl">Instagram</div><div class="c-opt-val">@mawa.uzh</div></div>
          <svg class="c-opt-arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
      </div>
    </div>
    <div class="form-wrap">
      <div id="form-content">
        <div class="form-title">Залишити заявку</div>
        <div class="form-sub">Заповніть — зв'яжемося протягом кількох годин</div>
        <div class="fg"><label>Ваше ім'я *</label><input type="text" id="f-name" placeholder="Ім'я"></div>
        <div class="fg-row">
          <div class="fg"><label>Тип запиту</label>
            <select id="f-type">
              <option value="">Оберіть</option>
              <option>Для себе / в подарунок</option>
              <option>Корпоративне замовлення</option>
              <option>Подарунок від сім'ї</option>
              <option>Кобрендинг</option>
              <option>Колаборація</option>
              <option>Роздрібне партнерство</option>
              <option>Інвестиції / партнерство</option>
            </select>
          </div>
          <div class="fg"><label>Кількість / деталі</label><input type="text" id="f-qty" placeholder="Напр. 50 наборів"></div>
        </div>
        <div class="fg"><label>Телефон або Telegram *</label><input type="text" id="f-contact" placeholder="+380 або @нікнейм"></div>
        <div class="fg"><label>Побажання</label><textarea id="f-msg" placeholder="Бюджет, терміни, ідея — що важливо знати"></textarea></div>
        <button class="f-submit" onclick="submitForm()">Надіслати заявку →</button>
        <p class="f-note">Відповідаємо у робочий час · Без спаму</p>
      </div>
      <div class="f-success" id="f-success">
        <div class="f-suc-ic"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg></div>
        <div class="f-suc-title">Заявку отримано</div>
        <div class="f-suc-text">Ми зв'яжемося з вами незабаром.<br>Дякуємо, що обираєте MAWA.</div>
      </div>
    </div>
  </div>
</section>

<!-- FAQ -->
<section class="sec" id="faq" style="background:#E8DFD0">
  <p class="sec-ey">Питання та відповіді</p>
  <h2 class="sec-title">Часті запитання</h2>
  <div class="faq-grid">
    <div class="faq-item"><div class="faq-q">Яке мінімальне замовлення?</div><div class="faq-a">Мінімального обмеження немає — беремось за будь-яку кількість. Пишіть, обговоримо деталі.</div></div>
    <div class="faq-item"><div class="faq-q">Скільки часу займає виготовлення?</div><div class="faq-a">Залежить від кількості та типу продукту. Невеликі замовлення — 2–3 дні плюс доставка. Точні терміни узгоджуємо індивідуально.</div></div>
    <div class="faq-item"><div class="faq-q">Чи можна додати логотип або фірмові елементи?</div><div class="faq-a">Так, розробляємо кобрендингове пакування під ваш запит — листівка, бірка, пакування та інше. Все обговорюється індивідуально.</div></div>
    <div class="faq-item"><div class="faq-q">Як підтверджується соціальний внесок?</div><div class="faq-a">Після виконання замовлення надаємо звіт від фонду «Рука Допомоги» — з інформацією про те, на які саме програми були спрямовані кошти.</div></div>
    <div class="faq-item"><div class="faq-q">Як відбувається оплата?</div><div class="faq-a">При великих замовленнях вноситься завдаток за виготовлення. При невеликому обсязі — часткова передоплата на покриття доставки у разі відмови від замовлення.</div></div>
    <div class="faq-item"><div class="faq-q">Чи є доставка по Україні?</div><div class="faq-a">Так, відправляємо Новою Поштою по всій Україні. Також можливий самовивіз в Ужгороді — у нас є власні точки продажу.</div></div>
    <div class="faq-item"><div class="faq-q">Чи можна замовити пробний зразок?</div><div class="faq-a">Так, пробник безкоштовний. Доставка сплачується отримувачем.</div></div>
    <div class="faq-item"><div class="faq-q">Як стати роздрібним партнером?</div><div class="faq-a">Продаємо за оптовою ціною — чим більша кількість, тим нижча ціна. Напишіть нам, надішлемо умови.</div></div>
  </div>
</section>

<footer>
  <div>
    <div class="f-logo">MAWA</div>
    <div class="f-tag">Соціальний бренд ручної роботи · Ужгород · Фонд «Рука Допомоги»</div>
  </div>
  <div class="f-links">
    <a href="https://instagram.com/mawa.uzh" target="_blank">Instagram</a>
    <a href="https://t.me/mawa_uzh" target="_blank">Telegram</a>
    <a href="#b2c">Для себе</a>
    <a href="#b2b">Бізнесу</a>
    <a href="#partnership">Партнерство</a>
    <a href="#contact">Замовити</a>
  </div>
</footer>

<script>
function submitForm(){
  const n=document.getElementById('f-name').value.trim();
  const c=document.getElementById('f-contact').value.trim();
  if(!n||!c){alert('Будь ласка, вкажіть ім'я та контакт.');return;}
  document.getElementById('form-content').style.display='none';
  document.getElementById('f-success').classList.add('on');
}
document.querySelectorAll('a[href^="#"]').forEach(a=>{
  a.addEventListener('click',function(e){
    const t=document.querySelector(this.getAttribute('href'));
    if(t){e.preventDefault();t.scrollIntoView({behavior:'smooth',block:'start'});}
  });
});

function initMawaProductCarousels(){
  document.querySelectorAll('.prod-carousel').forEach(carousel=>{
    const track=carousel.querySelector('.prod-carousel-track');
    const slides=[...carousel.querySelectorAll('.prod-slide')];
    const prev=carousel.querySelector('.prod-carousel-btn.prev');
    const next=carousel.querySelector('.prod-carousel-btn.next');
    const dots=[...carousel.querySelectorAll('.prod-carousel-dot')];
    let index=0;
    function show(i){
      if(!slides.length) return;
      index=(i+slides.length)%slides.length;
      track.style.transform=`translateX(${-index*100}%)`;
      dots.forEach((dot,n)=>dot.classList.toggle('active',n===index));
    }
    if(slides.length<=1){carousel.classList.add('single');return;}
    prev.addEventListener('click',()=>show(index-1));
    next.addEventListener('click',()=>show(index+1));
    dots.forEach((dot,n)=>dot.addEventListener('click',()=>show(n)));
    carousel.addEventListener('keydown',e=>{
      if(e.key==='ArrowLeft') show(index-1);
      if(e.key==='ArrowRight') show(index+1);
    });
    show(0);
  });
}
initMawaProductCarousels();

</script>
</body>
</html>
