/* ===== Art Desing Reklam — premium landing ===== */
:root{
  --dark:#0d0d0d; --dark-2:#161412; --gold:#c8a04d; --gold-l:#e7c56b;
  --cream:#f6f2ea; --ink:#1a1a1a; --muted:#6f6a62; --white:#fff;
  --pink:#e7468f; --shadow:0 18px 50px rgba(0,0,0,.12);
  --serif:"Playfair Display",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:800;line-height:1.12;letter-spacing:-.01em}
em{font-style:italic;color:var(--gold);font-weight:700}
.eyebrow{font-family:var(--sans);font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:var(--gold);margin-bottom:14px}
.eyebrow--gold{color:var(--gold-l)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:.95rem;padding:14px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.25s;white-space:nowrap}
.btn--gold{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:#1a1303;box-shadow:0 10px 26px rgba(200,160,77,.35)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(200,160,77,.45)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12)}

/* Marquee */
.marquee{background:linear-gradient(90deg,var(--gold),var(--gold-l) 50%,var(--gold));color:#1a1303;overflow:hidden;white-space:nowrap;font-size:.74rem;font-weight:700;letter-spacing:.14em;padding:9px 0}
.marquee__track{display:inline-flex;animation:scroll 28s linear infinite}
.marquee__track span{padding-right:30px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid #eee}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:46px;height:46px;border-radius:50%;object-fit:cover}
.brand__name{font-family:var(--serif);font-weight:900;font-size:1.15rem;letter-spacing:.04em;line-height:1;display:flex;flex-direction:column}
.brand__name small{font-family:var(--sans);font-weight:600;font-size:.6rem;letter-spacing:.4em;color:var(--gold)}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-weight:500;font-size:.95rem;color:#2a2a2a;transition:.2s}
.nav a:hover{color:var(--gold)}
.nav__cta{color:#1a1303!important}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{width:24px;height:2px;background:#1a1a1a;transition:.3s}

/* Hero */
.hero{position:relative;height:88vh;min-height:560px;overflow:hidden;background:#000}
.hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;display:flex;align-items:center;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.hero__slide.is-active{opacity:1;pointer-events:auto}
.hero__slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.62) 38%,rgba(8,8,8,.12) 70%,rgba(8,8,8,0) 100%)}
.hero__content{position:relative;color:#fff;max-width:620px}
.hero__eyebrow{font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.74rem;color:var(--gold-l);margin-bottom:18px}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.3rem);font-weight:800;margin-bottom:18px}
.hero__sub{font-size:clamp(1rem,1.5vw,1.2rem);color:#e9e4da;max-width:520px;margin-bottom:30px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.8rem;line-height:1;cursor:pointer;transition:.2s}
.hero__arrow:hover{background:var(--gold);color:#1a1303;border-color:var(--gold)}
.hero__arrow--prev{left:22px}.hero__arrow--next{right:22px}
.hero__dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:6}
.hero__dots button{width:11px;height:11px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:.2s}
.hero__dots button.is-active{background:var(--gold-l);width:30px;border-radius:999px}

/* Trust */
.trust{background:var(--dark);color:#fff;padding:46px 0}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.trust__item{text-align:center}
.trust__item span{font-size:1.7rem;color:var(--gold-l);display:block;margin-bottom:10px}
.trust__item h3{font-size:1.05rem;margin-bottom:6px}
.trust__item p{font-size:.85rem;color:#b8b2a7}

/* Sections */
.section{padding:92px 0}
.section--dark{background:var(--dark);color:#fff}
.section--cream{background:var(--cream)}
.section__head{text-align:center;max-width:640px;margin:0 auto 54px}
.section__head h2{font-size:clamp(2rem,4vw,3rem)}
.section__lead{color:var(--muted);margin-top:14px}
.section--dark .section__lead{color:#b8b2a7}

/* Products */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.product{background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:.3s;border:1px solid #f0ece3}
.product:hover{transform:translateY(-7px);box-shadow:0 26px 60px rgba(0,0,0,.18)}
.product__img{height:230px;background-size:cover;background-position:center}
.product__body{padding:22px 24px 26px}
.product__body h3{font-size:1.3rem;margin-bottom:7px}
.product__body p{color:var(--muted);font-size:.92rem}

/* About */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about__img{height:480px;border-radius:20px;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.about__text h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:6px 0 18px}
.about__text p{color:#3a362f;margin-bottom:18px}
.about__list{list-style:none;margin:0 0 26px;display:grid;gap:12px}
.about__list li{padding-left:30px;position:relative;color:#2a2a2a}
.about__list li::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:.9rem;top:2px}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery__item{height:280px;border-radius:14px;background-size:cover;background-position:center;transition:.4s;filter:saturate(1.02)}
.gallery__item:hover{transform:scale(1.02)}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.review{background:var(--cream);border-radius:18px;padding:30px;border:1px solid #ece6db}
.review__stars{color:var(--gold);letter-spacing:3px;margin-bottom:14px}
.review blockquote{font-family:var(--serif);font-style:italic;font-size:1.12rem;line-height:1.5;color:#2a2620;margin-bottom:16px}
.review figcaption{font-weight:600;font-size:.88rem;color:var(--muted)}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post{background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:.3s;display:block}
.post:hover{transform:translateY(-6px)}
.post__img{height:190px;background-size:cover;background-position:center}
.post__body{padding:22px 24px 26px}
.post__tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:#f6efdf;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.post__body h3{font-size:1.18rem;line-height:1.25;margin-bottom:9px}
.post__body p{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.post__more{font-weight:600;font-size:.86rem;color:var(--ink)}

/* Newsletter */
.newsletter{background:linear-gradient(135deg,#161412,#221d16);color:#fff;padding:64px 0}
.newsletter__inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.newsletter h2{font-size:1.9rem;margin-bottom:8px}
.newsletter p{color:#c7c0b4}
.newsletter__form{display:flex;gap:12px;flex-wrap:wrap}
.newsletter__form input{padding:14px 20px;border-radius:999px;border:1px solid #3a342b;background:#0f0d0a;color:#fff;min-width:260px;font-family:var(--sans)}
.newsletter__form input::placeholder{color:#8a8377}

/* Footer */
.footer{background:#0a0a0a;color:#cfc9bf;padding:64px 0 0}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px}
.footer__logo{width:64px;border-radius:50%;margin-bottom:16px}
.footer__brand p{font-size:.9rem;color:#9b948a;margin-bottom:14px;max-width:300px}
.footer__ig{color:var(--gold-l);font-weight:600;font-size:.9rem}
.footer__col h4{font-family:var(--sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer__col a{display:block;font-size:.9rem;color:#9b948a;margin-bottom:9px;transition:.2s}
.footer__col a:hover{color:var(--gold-l)}
.footer__addr{font-size:.9rem;color:#9b948a;margin-bottom:14px}
.footer__map{width:100%;height:140px;border:0;border-radius:10px;filter:grayscale(.3) contrast(1.05)}
.footer__bar{border-top:1px solid #1d1b17;margin-top:48px;padding:22px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#6f6a62;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.footer__credit{color:var(--gold)}

/* WhatsApp float */
.wa-float{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(37,211,102,.5);z-index:80;transition:.25s;animation:wa-pulse 2.4s infinite}
.wa-float:hover{transform:scale(1.08)}
@keyframes wa-pulse{0%{box-shadow:0 10px 28px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 10px 28px rgba(37,211,102,.5),0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 10px 28px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,0)}}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media(max-width:900px){
  .products,.gallery,.reviews,.posts{grid-template-columns:repeat(2,1fr)}
  .trust__grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .about__grid{grid-template-columns:1fr;gap:34px}.about__img{height:340px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .nav{position:fixed;inset:74px 0 auto 0;background:#fff;flex-direction:column;gap:0;padding:10px 0;border-bottom:1px solid #eee;transform:translateY(-130%);transition:.35s;box-shadow:var(--shadow)}
  .nav.open{transform:none}
  .nav a{padding:14px 24px;width:100%;border-bottom:1px solid #f3f3f3}
  .nav__cta{margin:10px 24px;text-align:center}
  .nav__toggle{display:flex}
}
@media(max-width:560px){
  .products,.gallery,.reviews,.posts,.trust__grid,.footer__grid{grid-template-columns:1fr}
  .hero{height:90vh}
  .newsletter__inner{flex-direction:column;align-items:flex-start}
  .newsletter__form input{min-width:0;width:100%}
}

/* Blog article + FAQ */
.breadcrumb{max-width:840px;margin:0 auto;padding:22px 24px 0;font-size:.82rem;color:var(--muted)}
.breadcrumb a:hover{color:var(--gold)}
.article{max-width:840px;margin:0 auto;padding:18px 24px 70px}
.article__tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:#f6efdf;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.article h1{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:10px}
.article__date{color:var(--muted);font-size:.85rem;margin-bottom:22px}
.article__lead{font-size:1.12rem;color:#2a2620;background:var(--cream);border-left:4px solid var(--gold);padding:18px 22px;border-radius:0 14px 14px 0;margin:0 0 26px}
.article h2{font-size:1.5rem;margin:36px 0 12px}
.article h3{font-size:1.15rem;margin:24px 0 8px}
.article p,.article li{color:#39342d;line-height:1.85;margin-bottom:14px;font-size:1.02rem}
.article ul,.article ol{padding-left:24px;margin-bottom:16px}
.article table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.95rem}
.article th,.article td{border:1px solid #e6ddcd;padding:11px 13px;text-align:left;vertical-align:top}
.article th{background:var(--cream);font-family:var(--sans)}
.article__cta{background:var(--dark);color:#fff;border-radius:20px;padding:34px;text-align:center;margin:44px 0 10px}
.article__cta h3{color:#fff;font-size:1.4rem;margin-bottom:12px}
.article__cta p{color:#c7c0b4;margin-bottom:20px}
.related{max-width:840px;margin:30px auto 0;padding:0 24px 10px}
.related h4{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.related a{color:#9a7a2f;font-weight:600;display:inline-block;margin:0 18px 8px 0}
.faq{max-width:840px;margin:0 auto;padding:0 24px}
.faq__q{border:1px solid #e6ddcd;border-radius:14px;padding:2px 20px;margin-bottom:12px;background:#fff}
.faq__q summary{font-family:var(--serif);font-weight:700;font-size:1.05rem;cursor:pointer;padding:16px 0;list-style:none}
.faq__q summary::-webkit-details-marker{display:none}
.faq__q summary::after{content:"+";float:right;color:var(--gold);font-weight:700}
.faq__q[open] summary::after{content:"–"}
.faq__q p{padding:0 0 16px;color:#39342d;line-height:1.8;margin:0}