/* ============================================================
   BANNILU - brand site styles
   Gold accent from the service banner, charcoal from the product.
   ============================================================ */
:root{
  --ink:#141414;
  --ink-2:#2b2925;
  --accent:#b08a5e;      /* gold from service banner */
  --accent-2:#c9a273;
  --accent-dark:#8f6d45;
  --bg:#ffffff;
  --bg-soft:#f7f4ef;     /* warm off-white */
  --bg-dark:#141414;
  --line:#e9e2d6;
  --body:#57503f;
  --radius:14px;
  --shadow:0 10px 30px rgba(20,20,20,.08);
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--body);background:var(--bg);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.22;font-weight:600;letter-spacing:.2px}
h1{font-size:clamp(2rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.9rem}
h3{font-size:1.12rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.center{text-align:center}
.kicker{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:.55rem}
.center.kicker{display:block;text-align:center}
section{padding:64px 0}
.lead{font-size:1.08rem;max-width:46rem}

/* Buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;font-size:.95rem;padding:.85rem 1.9rem;border-radius:999px;border:2px solid var(--accent);transition:.2s;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);text-decoration:none;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.invert{background:#fff;color:var(--ink);border-color:#fff}
.btn.invert:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.big{padding:1rem 2.3rem;font-size:1rem}

/* Announcement bar */
.notice{background:var(--ink);color:#e8ddcd;text-align:center;font-size:.8rem;letter-spacing:.08em;padding:.55rem 1rem}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:66px}
.brand img{height:30px;width:auto}
.nav{display:flex;gap:1.8rem}
.nav a{color:var(--ink);font-weight:600;font-size:.92rem;letter-spacing:.03em;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.on{color:var(--accent-dark);border-bottom-color:var(--accent);text-decoration:none}
.navbtn{display:none}
.navbtn+label{display:none;width:38px;height:30px;cursor:pointer;position:relative}
.navbtn+label span,.navbtn+label span::before,.navbtn+label span::after{content:'';position:absolute;left:7px;right:7px;height:2px;background:var(--ink);transition:.2s}
.navbtn+label span{top:14px}
.navbtn+label span::before{top:-8px}.navbtn+label span::after{top:8px}

/* ---- Home hero slider (CSS-only radio) ---- */
.hero{padding:0;background:var(--bg-soft);position:relative;overflow:hidden}
.hero input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.hero-track{position:relative}
.hero-slide{display:none;animation:fadeIn .6s ease}
.hero-slide{padding:56px 0 64px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#hs1:checked~.hero-slide:nth-of-type(1),
#hs2:checked~.hero-slide:nth-of-type(2),
#hs3:checked~.hero-slide:nth-of-type(3){display:block}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-copy .kicker{margin-bottom:.8rem}
.hero-copy h1,.hero-copy h2{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:1rem}
.hero-copy .lead{margin-bottom:1.4rem}
.feat-row{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.8rem}
.feat-row span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.38rem 1rem;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-img img{border-radius:var(--radius);box-shadow:var(--shadow);max-height:560px;width:100%;object-fit:cover;object-position:top}
.hero-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:.55rem;z-index:5}
.hero-dots label{width:10px;height:10px;border-radius:50%;background:#cfc6b6;cursor:pointer;transition:.2s}
#hs1:checked~.hero-dots label:nth-of-type(1),
#hs2:checked~.hero-dots label:nth-of-type(2),
#hs3:checked~.hero-dots label:nth-of-type(3){background:var(--accent);transform:scale(1.25)}

/* Feature cards */
.four-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:2.2rem}
.four-cards figure{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s}
.four-cards figure:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.four-cards img{aspect-ratio:1/1;object-fit:cover;width:100%}
.four-cards figcaption{padding:1rem 1.1rem 1.3rem;font-size:.88rem;line-height:1.6;display:block}
.four-cards figcaption strong{display:block;font-family:var(--serif);color:var(--ink);font-size:1rem;margin-bottom:.3rem}

/* Stats band */
.results{background:var(--bg-soft)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:2rem}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.2rem;text-align:center}
.stat .num{display:block;font-family:var(--serif);font-size:2.6rem;color:var(--accent-dark);font-weight:700}
.stat .lab{font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}

/* Brand manifesto */
.manifesto{padding:0;background:var(--bg)}
.mani-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch}
.mani-img img{height:100%;width:100%;object-fit:cover}
.mani-copy{padding:70px 8px 70px 56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.mani-copy p{margin-bottom:1rem}
.mani-copy .btn{margin-top:.6rem}

/* Product cards */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:2.2rem}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:inherit;transition:.2s;display:block}
.prod-card:hover{text-decoration:none;transform:translateY(-4px);box-shadow:var(--shadow)}
.pc-img{background:var(--bg-soft);padding:1.4rem}
.pc-img img{aspect-ratio:4/5;object-fit:contain;width:100%}
.pc-body{padding:1.3rem 1.5rem 1.6rem}
.pc-cat{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dark)}
.pc-body h3{margin:.35rem 0 .15rem;font-size:1.35rem}
.pc-tag{font-size:.88rem;color:var(--accent-dark);font-weight:600}
.pc-price{font-family:var(--serif);font-size:1.3rem;color:var(--ink);font-weight:700;margin:.6rem 0 .8rem}
.pc-price span{font-family:var(--sans);font-size:.8rem;color:var(--body);font-weight:400}
.pc-link{font-weight:700;font-size:.9rem;color:var(--ink)}

/* Service banner */
.service{padding:0;background:var(--bg-soft)}
.service img{width:100%}

/* CTA band */
.cta-band{background:var(--ink);color:#d8d0c2;text-align:center;padding:72px 0}
.cta-band.slim{padding:52px 0}
.cta-band h2{color:#fff}
.cta-band p{max-width:44rem;margin:0 auto 1.6rem}
.cta-band a{color:var(--accent-2)}
.cta-band .btn{margin:0 .4rem}
.cta-band.slim p{margin-bottom:0}

/* Page header */
.page-head{background:var(--bg-soft);padding:72px 0 60px;border-bottom:1px solid var(--line)}
.page-head h1{margin-bottom:.8rem}

/* Product detail */
.crumb{padding:18px 24px;font-size:.85rem;color:#8a8172}
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;padding:44px 24px 60px;align-items:start}
.gal-main{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.gal-main img{width:100%;aspect-ratio:4/5;object-fit:contain;padding:1.6rem;transition:opacity .2s}
.gal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.gal-thumbs button{background:var(--bg-soft);border:2px solid var(--line);border-radius:10px;padding:.5rem;cursor:pointer;transition:.15s}
.gal-thumbs button img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:6px}
.gal-thumbs button.on,.gal-thumbs button:hover{border-color:var(--accent)}
.pdp-info h1{font-size:clamp(1.7rem,3vw,2.4rem);margin:.4rem 0 .2rem}
.pdp-price{font-family:var(--serif);font-size:1.7rem;color:var(--ink);font-weight:700;margin:1.1rem 0 .8rem}
.pdp-price span{font-family:var(--sans);font-size:.85rem;color:var(--body);font-weight:400}
.pdp-short{margin-bottom:1.4rem}
.pdp-info .trust{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.4rem;font-size:.86rem;font-weight:600;color:var(--ink-2)}
.pdp-info .trust li::before{content:'✓';color:var(--accent-dark);margin-right:.4rem}
.pdp-bullets ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:1.6rem}
.pdp-bullets li{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem}
.pdp-bullets h3{margin-bottom:.35rem}
.pdp-bullets p{font-size:.93rem}
.pdp-specs table{width:100%;border-collapse:collapse;margin-top:1.4rem}
.pdp-specs th,.pdp-specs td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:.94rem}
.pdp-specs th{width:34%;font-family:var(--sans);font-weight:700;color:var(--ink)}
.pdp-specs tr:nth-child(odd){background:var(--bg-soft)}

/* FAQ accordion */
.faq-item{border:1px solid var(--line);border-radius:12px;margin-top:.8rem;overflow:hidden;background:#fff}
.faq-item input{display:none}
.faq-item label{display:block;padding:1rem 1.3rem;font-weight:700;color:var(--ink);cursor:pointer;position:relative}
.faq-item label::after{content:'+';position:absolute;right:1.2rem;color:var(--accent-dark);font-size:1.2rem;transition:.2s}
.faq-item input:checked~label::after{content:'–'}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-item input:checked~.faq-a{max-height:400px}
.faq-a p{padding:0 1.3rem 1.2rem;font-size:.94rem}

/* About */
.about-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:70px 24px}
.about-split img{border-radius:var(--radius);box-shadow:var(--shadow)}
.about-copy p{margin-bottom:1rem}
.values{background:var(--bg-soft)}
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:2.2rem}
.val-grid figure{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.3rem;text-align:center}
.val-grid img{width:64px;margin:0 auto 1rem;mix-blend-mode:multiply}
.val-grid figcaption{font-size:.9rem;line-height:1.6}
.val-grid figcaption strong{display:block;font-family:var(--serif);color:var(--ink);font-size:1.02rem;margin-bottom:.3rem}

/* Forms */
.form-wrap{max-width:760px;padding:50px 24px 70px}
.wform{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem;box-shadow:var(--shadow)}
.wform label{display:block;font-weight:600;font-size:.9rem;color:var(--ink);margin-bottom:1.1rem}
.wform em{color:#c0392b;font-style:normal}
.wform input[type=text],.wform input[type=email],.wform input[type=date],.wform select{width:100%;margin-top:.35rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:10px;font-size:.95rem;font-family:var(--sans);background:var(--bg-soft)}
.wform input:focus,.wform select:focus{outline:2px solid var(--accent-2);background:#fff}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.f-check{display:flex!important;gap:.6rem;align-items:flex-start;font-weight:400!important;font-size:.88rem}
.f-check input{margin-top:.3rem}
.f-note{font-size:.83rem;color:#8a8172;margin-top:1rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:56px 24px 30px}
.c-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
.c-card p{margin:.4rem 0 1.2rem}

/* Legal */
.legal{max-width:840px;padding:50px 24px 70px}
.legal p{margin-bottom:1.1rem}

/* Footer */
.ftr{background:var(--bg-dark);color:#b7ae9d;margin-top:0}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:56px 24px 40px}
.ftr-logo{height:26px;margin-bottom:1rem}
.ftr h3{color:#fff;font-family:var(--sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.ftr a{display:block;color:#b7ae9d;font-size:.9rem;padding:.22rem 0}
.ftr a:hover{color:var(--accent-2);text-decoration:none}
.ftr-bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid #2c2a26;padding:1.2rem 24px;font-size:.8rem}

/* Responsive */
@media(max-width:1000px){
  .four-cards{grid-template-columns:repeat(2,1fr)}
  .val-grid{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .pdp-bullets ul{grid-template-columns:1fr}
}
@media(max-width:820px){
  .hero-grid,.mani-grid,.about-split,.pdp,.contact-grid{grid-template-columns:1fr}
  .mani-copy{padding:44px 0 56px}
  .hero-img{order:-1}
  .hero-img img{max-height:420px}
  .stat-row{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .navbtn+label{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:.6rem 24px 1rem}
  .nav a{padding:.65rem 0;border-bottom:none}
  .navbtn:checked~.nav{display:flex}
  .f-row{grid-template-columns:1fr}
  .wform{padding:1.4rem}
}
@media(max-width:560px){
  .four-cards,.val-grid,.ftr-grid{grid-template-columns:1fr}
  section{padding:48px 0}
}