<?php
/**
 * Template Name: Homepage Premium
 * @package Horsila
 */

get_header();

$featured    = horsila_get_featured_products(6);
$bestsellers = horsila_get_bestsellers(6);
$new_arrivals= horsila_get_new_arrivals(6);
$categories  = horsila_get_product_categories(5);
$stats       = horsila_get_stats();
$testimonials= horsila_get_testimonials();
?>

<style id="horsila-inline-css">
/* ========== HORSILA PREMIUM HOMEPAGE ========== */
:root{
  --gold:#FDD400;--gold-light:#FFE066;
  --navy:#1B3B59;--navy-dark:#0a0f14;--navy-light:#425E7B;
  --silver:#BDC3C7;--white:#fff;
  --radius:24px;--radius-sm:16px;
  --font-body:'Inter',-apple-system,sans-serif;
  --font-display:'Playfair Display',Georgia,serif
}
#horsila-premium-home{font-family:var(--font-body);color:var(--white);background:var(--navy-dark);overflow-x:hidden;line-height:1.6}
.hs-container{max-width:1200px;margin:0 auto;padding:0 2rem;position:relative;z-index:2}
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
[data-reveal].hs-revealed{opacity:1;transform:translateY(0)}

/* ── INLINE SVG ICONS ── */
.hs-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.hs-icon svg{display:block;fill:currentColor}

/* ── BUTTONS ── */
.hs-btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 2.2rem;border-radius:100px;font-weight:600;font-size:.95rem;text-decoration:none;transition:all .4s cubic-bezier(.4,0,.2,1);border:none;cursor:pointer;position:relative;overflow:hidden;letter-spacing:.02em}
.hs-btn svg{width:18px;height:18px;transition:transform .3s ease;flex-shrink:0}
.hs-btn:hover svg{transform:translateX(4px)}
.hs-btn--primary{background:var(--gold);color:var(--navy);box-shadow:0 4px 24px rgba(253,212,0,.35)}
.hs-btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(253,212,0,.55);background:var(--gold-light)}
.hs-btn--glass{background:rgba(255,255,255,.08);color:var(--white);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px)}
.hs-btn--glass:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.hs-btn--outline{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.3)}
.hs-btn--outline:hover{background:var(--white);color:var(--navy);border-color:var(--white)}

/* ── SECTION HEADER ── */
.hs-section-header{text-align:center;margin-bottom:4rem}
.hs-section-header__eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.hs-section-header__title{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,3.2rem);color:var(--white);margin-bottom:1.2rem}
.hs-section-header__line{width:60px;height:3px;background:var(--gold);margin:0 auto;border-radius:3px;box-shadow:0 0 20px rgba(253,212,0,.4)}

/* ══════════════════════════════════════════
   HERO — REDESIGNED (two-column layout)
══════════════════════════════════════════ */
.hs-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:6rem 2rem 4rem;
  margin-top:-80px;
}
.hs-hero__mesh{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(66,94,123,.55) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 20%,rgba(253,212,0,.14) 0%,transparent 50%),
    radial-gradient(ellipse at 60% 80%,rgba(27,59,89,.7) 0%,transparent 50%),
    linear-gradient(180deg,#0d1929 0%,var(--navy) 55%,var(--navy-dark) 100%);
  z-index:0
}
.hs-hero__noise{position:absolute;inset:0;opacity:.04;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hs-hero__particles{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hs-particle{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}

/* Two-column inner grid */
.hs-hero__inner{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
/* Left: text */
.hs-hero__content{text-align:left}
.hs-hero__eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.4rem;
  background:rgba(253,212,0,.12);border:1px solid rgba(253,212,0,.25);
  color:var(--gold);border-radius:100px;
  font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:2rem;backdrop-filter:blur(12px)
}
.hs-hero__eyebrow-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.hs-hero__title{
  font-family:var(--font-display);
  font-size:clamp(2.8rem,5.5vw,5rem);
  margin-bottom:1.5rem;line-height:1.05
}
.hs-line{display:block;background:linear-gradient(135deg,var(--white) 0%,var(--silver) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hs-line--gold{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hs-hero__subtitle{
  font-size:clamp(1rem,1.5vw,1.2rem);color:var(--silver);
  max-width:480px;margin-bottom:2.5rem;
  font-weight:300;line-height:1.7
}
.hs-hero__buttons{display:flex;gap:1rem;flex-wrap:wrap}

/* Hero stats row */
.hs-hero__stats-row{
  display:flex;gap:2rem;margin-top:2.5rem;
  padding-top:2.5rem;
  border-top:1px solid rgba(255,255,255,.08)
}
.hs-hero__stat-item{text-align:left}
.hs-hero__stat-number{
  font-family:var(--font-display);font-size:1.8rem;font-weight:700;
  color:var(--gold);line-height:1;margin-bottom:.25rem
}
.hs-hero__stat-label{font-size:.75rem;color:var(--silver);text-transform:uppercase;letter-spacing:.1em}

/* Right: image */
.hs-hero__visual{position:relative;display:flex;align-items:center;justify-content:center}
.hs-hero__img-frame{
  position:relative;
  width:100%;max-width:520px;
}
/* Decorative ring behind image */
.hs-hero__img-ring{
  position:absolute;
  inset:-24px;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(253,212,0,.25), transparent 40%, rgba(253,212,0,.15), transparent 80%);
  animation:ring-spin 12s linear infinite;
  filter:blur(2px);
}
@keyframes ring-spin{to{transform:rotate(360deg)}}
/* Gold blob glow */
.hs-hero__img-blob{
  position:absolute;
  inset:-40px;
  background:radial-gradient(circle at 60% 40%, rgba(253,212,0,.18) 0%, transparent 65%);
  filter:blur(40px);
  animation:glow-pulse 4s ease-in-out infinite;
  z-index:0
}
@keyframes glow-pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.hs-hero__img-card{
  position:relative;z-index:2;
  border-radius:40px;
  overflow:hidden;
  animation:float-hero 6s ease-in-out infinite;
  box-shadow:0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.hs-hero__img-card img{width:100%;height:auto;display:block}
@keyframes float-hero{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* Floating info badges */
.hs-float-badge{
  position:absolute;
  display:flex;align-items:center;gap:.9rem;
  padding:1rem 1.4rem;
  background:rgba(13,25,41,.75);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;z-index:4;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}
.hs-float-badge--a{top:12%;left:-10%;animation:fb-float-a 7s ease-in-out infinite}
.hs-float-badge--b{bottom:22%;right:-8%;animation:fb-float-b 8s ease-in-out infinite}
@keyframes fb-float-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes fb-float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.hs-float-badge__icon{
  width:40px;height:40px;border-radius:12px;
  background:rgba(253,212,0,.15);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);flex-shrink:0
}
.hs-float-badge__icon svg{width:20px;height:20px}
.hs-float-badge__label{font-size:.85rem;font-weight:700;color:var(--white);display:block;margin-bottom:.1rem}
.hs-float-badge__sub{font-size:.72rem;color:var(--silver)}

/* Scroll indicator */
.hs-scroll-ind{
  position:absolute;bottom:2.5rem;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  z-index:3;opacity:.6
}
.hs-scroll-ind__mouse{width:26px;height:40px;border:2px solid rgba(255,255,255,.4);border-radius:13px;position:relative}
.hs-scroll-ind__wheel{width:4px;height:8px;background:var(--gold);border-radius:2px;position:absolute;top:8px;left:50%;transform:translateX(-50%);animation:scroll-wheel 2s ease-in-out infinite}
.hs-scroll-ind span{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
@keyframes scroll-wheel{0%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(14px)}}

/* ── STATS SECTION ── */
.hs-stats{padding:5rem 0;background:linear-gradient(180deg,transparent 0%,rgba(27,59,89,.2) 100%)}
.hs-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.hs-stat{position:relative;padding:1.5rem}
.hs-stat__number{font-family:var(--font-display);font-size:3.2rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:.6rem;text-shadow:0 0 30px rgba(253,212,0,.25)}
.hs-stat__label{font-size:.85rem;color:var(--silver);text-transform:uppercase;letter-spacing:.1em}

/* ══════════════════════════════════════════
   CATEGORIES — REDESIGNED
══════════════════════════════════════════ */
.hs-categories{padding:7rem 0}

/* Hero category: first item spans 2 columns on left */
.hs-categories__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto;
  gap:1.5rem;
}
/* First card is tall and spans 2 rows */
.hs-cat-card--hero{
  grid-row:span 2;
}
.hs-cat-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  text-decoration:none;display:block;
  transition:all .45s cubic-bezier(.4,0,.2,1);
}
.hs-cat-card--hero{aspect-ratio:2/3}
.hs-cat-card--normal{aspect-ratio:4/3}

.hs-cat-card__bg{position:absolute;inset:0}
.hs-cat-card__bg img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.hs-cat-card:hover .hs-cat-card__bg img{transform:scale(1.07)}

.hs-cat-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,15,20,.15) 0%,rgba(10,15,20,.8) 55%,rgba(10,15,20,.95) 100%);
  transition:all .4s ease
}
.hs-cat-card:hover .hs-cat-card__overlay{background:linear-gradient(180deg,rgba(27,59,89,.2) 0%,rgba(10,15,20,.9) 50%,rgba(10,15,20,.98) 100%)}

/* Glow border on hover */
.hs-cat-card::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  border:1.5px solid rgba(253,212,0,0);
  transition:border-color .4s ease;
  pointer-events:none;z-index:4
}
.hs-cat-card:hover::after{border-color:rgba(253,212,0,.3)}

.hs-cat-card__content{
  position:absolute;bottom:0;left:0;right:0;
  padding:1.8rem;z-index:3;
  display:flex;flex-direction:column;gap:.5rem
}
.hs-cat-card__count{
  font-size:.72rem;color:var(--gold);
  text-transform:uppercase;letter-spacing:.12em;font-weight:600
}
.hs-cat-card__title{
  font-size:1.35rem;color:var(--white);
  font-family:var(--font-display);line-height:1.2;margin:0
}
.hs-cat-card--hero .hs-cat-card__title{font-size:1.7rem}
.hs-cat-card__cta{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--gold);font-size:.82rem;font-weight:600;
  opacity:0;transform:translateY(8px);
  transition:all .35s ease
}
.hs-cat-card__cta svg{width:14px;height:14px}
.hs-cat-card:hover .hs-cat-card__cta{opacity:1;transform:translateY(0)}

/* ── PRODUCTS ── */
.hs-products{padding:6rem 0;background:linear-gradient(180deg,rgba(27,59,89,.12) 0%,transparent 50%)}
.hs-products__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.hs-product-card{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);overflow:hidden;
  transition:all .4s cubic-bezier(.4,0,.2,1);position:relative
}
.hs-product-card:hover{transform:translateY(-10px);border-color:rgba(253,212,0,.18);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.hs-product-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .4s;z-index:3}
.hs-product-card:hover::before{opacity:1}
.hs-product-card__visual{position:relative;overflow:hidden;aspect-ratio:1;background:linear-gradient(135deg,rgba(27,59,89,.6),rgba(66,94,123,.4))}
.hs-product-card__visual img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hs-product-card:hover .hs-product-card__visual img{transform:scale(1.05)}
.hs-product-card__badges{position:absolute;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:2}
.hs-badge{padding:.35rem .9rem;border-radius:100px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.hs-badge--bestseller{background:var(--gold);color:var(--navy)}
.hs-badge--new{background:var(--white);color:var(--navy)}
.hs-badge--sale{background:#ef4444;color:var(--white)}
.hs-product-card__actions{
  position:absolute;top:1rem;left:1rem;
  display:flex;gap:.5rem;
  opacity:0;transform:translateY(-10px);
  transition:all .4s cubic-bezier(.4,0,.2,1);z-index:2
}
.hs-product-card:hover .hs-product-card__actions{opacity:1;transform:translateY(0)}
.hs-product-card__action{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);border-radius:50%;
  color:var(--navy);transition:all .3s;border:none;cursor:pointer
}
.hs-product-card__action svg{width:18px;height:18px}
.hs-product-card__action:hover{background:var(--gold);transform:scale(1.1)}
.hs-product-card__info{padding:1.5rem}
.hs-product-card__cat{font-size:.72rem;color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:.5rem}
.hs-product-card__name{font-size:1.05rem;color:var(--white);margin-bottom:.8rem;font-weight:600;line-height:1.35}
.hs-product-card__meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.hs-product-card__price{font-size:1.1rem;font-weight:700;color:var(--gold)}
.hs-product-card__price del{color:var(--silver);font-weight:400;font-size:.9rem;margin-right:.5rem}
.hs-product-card__link{
  display:inline-flex;align-items:center;gap:.3rem;
  color:var(--gold);text-decoration:none;font-weight:600;font-size:.85rem;
  transition:gap .3s;white-space:nowrap
}
.hs-product-card__link svg{width:14px;height:14px;transition:transform .3s}
.hs-product-card__link:hover{gap:.6rem}
.hs-product-card__link:hover svg{transform:translateX(3px)}
.hs-products__footer{text-align:center;margin-top:3rem}

/* ── ABOUT ── */
.hs-about{position:relative;padding:8rem 0;overflow:hidden}
.hs-about__bg{position:absolute;inset:0;z-index:0}
.hs-about__gradient{position:absolute;inset:0;background:linear-gradient(135deg,rgba(66,94,123,.4) 0%,rgba(27,59,89,.6) 100%)}
.hs-about__pattern{position:absolute;inset:0;opacity:.03;background-image:radial-gradient(circle at 1px 1px,white 1px,transparent 0);background-size:40px 40px}
.hs-about__grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hs-about__content{position:relative;z-index:2}
.hs-about__title{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--white);margin-bottom:1.5rem}
.hs-about__text{color:var(--silver);font-size:1.05rem;line-height:1.7;margin-bottom:1.5rem}
.hs-about__list{list-style:none;margin-bottom:2rem;padding:0}
.hs-about__list li{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem;color:var(--white);font-size:1rem}
.hs-about__list-icon{width:32px;height:32px;border-radius:8px;background:rgba(253,212,0,.12);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.hs-about__list-icon svg{width:16px;height:16px}
.hs-about__visual{position:relative}
.hs-about__image-wrapper{position:relative}
.hs-about__image{border-radius:var(--radius);overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,.3)}
.hs-about__image img{width:100%;height:100%;object-fit:cover;display:block}
.hs-about__image--main{width:85%;aspect-ratio:4/5}
.hs-about__image--float{position:absolute;bottom:-2rem;right:0;width:50%;aspect-ratio:3/2;border:4px solid var(--navy-dark);animation:float-subtle 6s ease-in-out infinite}
@keyframes float-subtle{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ── TRUST ── */
.hs-trust{padding:4rem 0;background:rgba(27,59,89,.2);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.hs-trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.hs-trust__item{text-align:center;padding:1.5rem;transition:all .4s}
.hs-trust__item:hover{transform:translateY(-5px)}
.hs-trust__icon{width:56px;height:56px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;background:rgba(253,212,0,.1);border-radius:var(--radius-sm);color:var(--gold)}
.hs-trust__icon svg{width:26px;height:26px}
.hs-trust__title{font-size:1rem;color:var(--white);margin-bottom:.3rem;font-weight:600}
.hs-trust__desc{font-size:.85rem;color:var(--silver)}

/* ── TESTIMONIALS ── */
.hs-testimonials{padding:6rem 0}
.hs-testimonials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.hs-testi-card{background:rgba(66,94,123,.1);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:2.5rem;transition:all .4s;position:relative}
.hs-testi-card:hover{border-color:rgba(253,212,0,.12);transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,.2)}
.hs-testi-card::before{content:'"';position:absolute;top:1.5rem;right:2rem;font-family:var(--font-display);font-size:4rem;color:rgba(253,212,0,.15);line-height:1}
.hs-testi-card__stars{display:flex;gap:.25rem;margin-bottom:1.2rem}
.hs-testi-card__stars svg{width:16px;height:16px;fill:var(--gold)}
.hs-testi-card__text{font-size:1rem;color:var(--silver);line-height:1.7;margin-bottom:1.5rem;font-style:italic}
.hs-testi-card__author{display:flex;align-items:center;gap:1rem}
.hs-testi-card__avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.hs-testi-card__meta strong{display:block;color:var(--white);font-size:.95rem;margin-bottom:.15rem}
.hs-testi-card__meta span{font-size:.85rem;color:var(--silver)}

/* ── NEWSLETTER ── */
.hs-newsletter{position:relative;padding:6rem 0;overflow:hidden}
.hs-newsletter__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(253,212,0,.07) 0%,transparent 70%);pointer-events:none}
.hs-newsletter__content{position:relative;z-index:2;max-width:600px;margin:0 auto;text-align:center}
.hs-newsletter__title{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.5rem);color:var(--white);margin-bottom:1rem}
.hs-newsletter__text{color:var(--silver);font-size:1.05rem;margin-bottom:2rem;line-height:1.6}
.hs-newsletter__input-wrap{display:flex;gap:.75rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:.5rem;transition:all .4s}
.hs-newsletter__input-wrap:focus-within{border-color:rgba(253,212,0,.3);background:rgba(255,255,255,.08)}
.hs-newsletter__input{flex:1;background:transparent;border:none;padding:.8rem 1.2rem;color:var(--white);font-size:1rem;outline:none;font-family:var(--font-body)}
.hs-newsletter__input::placeholder{color:rgba(189,195,199,.6)}
.hs-newsletter__privacy{margin-top:1rem;font-size:.8rem;color:rgba(189,195,199,.5)}

/* ── PARALLAX BREAK ── */
.hs-parallax-break{position:relative;height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-attachment:fixed;background-size:cover;background-position:center}
.hs-parallax-break__overlay{position:absolute;inset:0;background:rgba(27,59,89,.75)}
.hs-parallax-break__content{position:relative;z-index:2;text-align:center;padding:0 2rem}
.hs-parallax-break__title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.5rem);color:var(--white);font-weight:600;line-height:1.2;margin-bottom:1rem}
.hs-parallax-break__subtitle{font-size:1.1rem;color:var(--gold);font-style:italic}

/* ── TOAST ── */
.hs-toast{position:fixed;bottom:2rem;right:2rem;background:var(--navy);color:var(--white);padding:1rem 1.5rem;border-radius:12px;display:flex;align-items:center;gap:.75rem;font-size:.95rem;font-weight:500;box-shadow:0 10px 40px rgba(0,0,0,.3);border:1px solid rgba(253,212,0,.2);transform:translateX(150%);transition:transform .5s cubic-bezier(.4,0,.2,1);z-index:99999}
.hs-toast.show{transform:translateX(0)}
.hs-toast svg{color:var(--gold);width:20px;height:20px;fill:var(--gold)}

/* ── PRELOADER ── */
#hs-preloader{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;background:var(--navy-dark);transition:opacity .5s,visibility .5s}
#hs-preloader.done{opacity:0;visibility:hidden}
.hs-preloader__inner{text-align:center}
.hs-preloader__logo{font-family:var(--font-display);font-size:3rem;color:var(--gold);margin-bottom:1.5rem}
.hs-preloader__bar{width:200px;height:3px;background:rgba(255,255,255,.1);border-radius:3px;margin:0 auto 1rem;overflow:hidden}
.hs-preloader__fill{width:0%;height:100%;background:var(--gold);border-radius:3px;transition:width .2s}
.hs-preloader__pct{font-family:var(--font-display);font-size:1.5rem;color:var(--gold)}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .hs-hero__inner{gap:2.5rem}
  .hs-float-badge--a{left:-2%}
  .hs-float-badge--b{right:-2%}
}
@media(max-width:1024px){
  .hs-categories__grid{grid-template-columns:repeat(2,1fr)}
  .hs-cat-card--hero{grid-row:span 1;aspect-ratio:4/3}
  .hs-stats__grid{grid-template-columns:repeat(2,1fr)}
  .hs-products__grid,.hs-testimonials__grid{grid-template-columns:repeat(2,1fr)}
  .hs-trust__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .hs-hero{padding-top:5rem;padding-bottom:3rem;margin-top:0}
  .hs-hero__inner{grid-template-columns:1fr;text-align:center;gap:3rem}
  .hs-hero__content{text-align:center}
  .hs-hero__subtitle{margin-left:auto;margin-right:auto}
  .hs-hero__buttons{justify-content:center}
  .hs-hero__stats-row{justify-content:center}
  .hs-float-badge{display:none}
  .hs-categories__grid{grid-template-columns:1fr}
  .hs-cat-card--hero{aspect-ratio:4/3}
  .hs-products__grid,.hs-testimonials__grid,.hs-trust__grid,.hs-about__grid{grid-template-columns:1fr}
  .hs-about__image--float{display:none}
  .hs-about__image--main{width:100%}
  .hs-newsletter__input-wrap{flex-direction:column;border-radius:var(--radius-sm)}
  .hs-newsletter__input-wrap .hs-btn{width:100%;justify-content:center}
  .hs-container{padding:0 1.25rem}
  .hs-section-header{margin-bottom:2.5rem}
  .hs-stats__grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .hs-stat__number{font-size:2.5rem}
}
@media(max-width:480px){
  .hs-hero__buttons{flex-direction:column;width:100%}
  .hs-btn{width:100%;justify-content:center}
  .hs-stats__grid{grid-template-columns:1fr}
  .hs-hero__stats-row{flex-wrap:wrap;gap:1.5rem}
}
</style>

<div id="horsila-premium-home">

<!-- PRELOADER -->
<div id="hs-preloader">
  <div class="hs-preloader__inner">
    <div class="hs-preloader__logo">Horsila</div>
    <div class="hs-preloader__bar"><div class="hs-preloader__fill" id="preloaderFill"></div></div>
    <div class="hs-preloader__pct" id="preloaderPct">0%</div>
  </div>
</div>

<!-- TOAST -->
<div class="hs-toast" id="hsToast">
  <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
  <span id="hsToastMsg">Erfolgreich!</span>
</div>

<!-- ══════════ HERO ══════════ -->
<section class="hs-hero" id="hero">
  <div class="hs-hero__mesh"></div>
  <div class="hs-hero__noise"></div>
  <div class="hs-hero__particles" id="heroParticles"></div>

  <div class="hs-hero__inner">

    <!-- LEFT: Text -->
    <div class="hs-hero__content">
      <div class="hs-hero__eyebrow" data-reveal>
        <span class="hs-hero__eyebrow-dot"></span>
        <span>Neu eingetroffen</span>
      </div>

      <h1 class="hs-hero__title" data-reveal>
        <span class="hs-line">Premium</span>
        <span class="hs-line">Pflege für</span>
        <span class="hs-line hs-line--gold">Ihr Pferd</span>
      </h1>

      <p class="hs-hero__subtitle" data-reveal>
        Entdecken Sie die exklusive Kollektion hochwertiger Pflegeprodukte, entwickelt für die besonderen Bedürfnisse Ihres Pferdes.
      </p>

      <div class="hs-hero__buttons" data-reveal>
        <a href="#produkte" class="hs-btn hs-btn--primary">
          Jetzt entdecken
          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
        <a href="#ueber" class="hs-btn hs-btn--glass">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          Mehr erfahren
        </a>
      </div>

      <!-- Mini stats row -->
      <div class="hs-hero__stats-row" data-reveal>
        <div class="hs-hero__stat-item">
          <div class="hs-hero__stat-number">10+</div>
          <div class="hs-hero__stat-label">Jahre Erfahrung</div>
        </div>
        <div class="hs-hero__stat-item">
          <div class="hs-hero__stat-number">500+</div>
          <div class="hs-hero__stat-label">Produkte</div>
        </div>
        <div class="hs-hero__stat-item">
          <div class="hs-hero__stat-number">98%</div>
          <div class="hs-hero__stat-label">Empfehlungsrate</div>
        </div>
      </div>
    </div><!-- /LEFT -->

    <!-- RIGHT: Image -->
    <div class="hs-hero__visual" data-reveal>
      <div class="hs-hero__img-frame">
        <div class="hs-hero__img-blob"></div>
        <div class="hs-hero__img-ring"></div>
        <div class="hs-hero__img-card">
          <img
            src="https://horsila.at/wp-content/uploads/2026/06/ad063ec9-ee15-42be-9ae0-f5266d0e38be.png"
            alt="Horsila Premium Pferdepflege"
          >
        </div>

        <!-- Floating badge A -->
        <div class="hs-float-badge hs-float-badge--a">
          <div class="hs-float-badge__icon">
            <svg viewBox="0 0 24 24" fill="currentColor"><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>
          <div>
            <span class="hs-float-badge__label">Bestseller</span>
            <span class="hs-float-badge__sub">Meistverkauftes Produkt</span>
          </div>
        </div>

        <!-- Floating badge B -->
        <div class="hs-float-badge hs-float-badge--b">
          <div class="hs-float-badge__icon">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 8C8 10 5.9 16.17 3.82 19.29L5.71 21l1-1C7 19.24 7.94 18 9 18c2 0 2 2 4 2s2-2 4-2 2 2 4 2l2-2C20.59 15.23 18.14 6 17 8z"/></svg>
          </div>
          <div>
            <span class="hs-float-badge__label">100% Natürlich</span>
            <span class="hs-float-badge__sub">Ohne Zusatzstoffe</span>
          </div>
        </div>
      </div>
    </div><!-- /RIGHT -->

  </div><!-- /.hs-hero__inner -->

  <div class="hs-scroll-ind">
    <div class="hs-scroll-ind__mouse"><div class="hs-scroll-ind__wheel"></div></div>
    <span>Scrollen</span>
  </div>
</section>

<!-- ══════════ TRUST BADGES ══════════ -->
<section class="hs-trust">
  <div class="hs-container">
    <div class="hs-trust__grid">
      <div class="hs-trust__item" data-reveal>
        <div class="hs-trust__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13" rx="2"/><path d="M16 8h4l3 5v3h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
        </div>
        <div class="hs-trust__title">Kostenloser Versand</div>
        <div class="hs-trust__desc">Ab €50 Bestellwert</div>
      </div>
      <div class="hs-trust__item" data-reveal>
        <div class="hs-trust__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        </div>
        <div class="hs-trust__title">Sichere Zahlung</div>
        <div class="hs-trust__desc">SSL verschlüsselt</div>
      </div>
      <div class="hs-trust__item" data-reveal>
        <div class="hs-trust__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.5"/></svg>
        </div>
        <div class="hs-trust__title">30 Tage Rückgabe</div>
        <div class="hs-trust__desc">Geld-zurück-Garantie</div>
      </div>
      <div class="hs-trust__item" data-reveal>
        <div class="hs-trust__icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 5.89 5.89l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 17z"/></svg>
        </div>
        <div class="hs-trust__title">24/7 Support</div>
        <div class="hs-trust__desc">Immer für Sie da</div>
      </div>
    </div>
  </div>
</section>

<!-- ══════════ STATS ══════════ -->
<section class="hs-stats" id="stats">
  <div class="hs-container">
    <div class="hs-stats__grid">
      <div class="hs-stat" data-reveal data-counter>
        <div class="hs-stat__number" data-target="<?php echo esc_attr($stats['customers']); ?>">0</div>
        <div class="hs-stat__label">Zufriedene Kunden</div>
      </div>
      <div class="hs-stat" data-reveal data-counter>
        <div class="hs-stat__number" data-target="<?php echo esc_attr($stats['products']); ?>">0</div>
        <div class="hs-stat__label">Produkte</div>
      </div>
      <div class="hs-stat" data-reveal data-counter>
        <div class="hs-stat__number" data-target="98">0</div><span class="hs-stat__suffix" style="font-family:var(--font-display);font-size:2rem;color:var(--gold)">%</span>
        <div class="hs-stat__label">Empfehlungsrate</div>
      </div>
      <div class="hs-stat" data-reveal data-counter>
        <div class="hs-stat__number" data-target="<?php echo esc_attr($stats['years']); ?>">0</div>
        <div class="hs-stat__label">Jahre Erfahrung</div>
      </div>
    </div>
  </div>
</section>

<!-- ══════════ CATEGORIES — REDESIGNED ══════════ -->
<section class="hs-categories" id="kategorien">
  <div class="hs-container">
    <div class="hs-section-header" data-reveal>
      <span class="hs-section-header__eyebrow">Unser Sortiment</span>
      <h2 class="hs-section-header__title">Kategorien</h2>
      <div class="hs-section-header__line"></div>
    </div>
    <div class="hs-categories__grid">
      <?php
      $cat_count = count($categories);
      foreach ($categories as $idx => $cat):
        $is_hero = ($idx === 0);
      ?>
      <a
        href="<?php echo esc_url($cat['link']); ?>"
        class="hs-cat-card<?php echo $is_hero ? ' hs-cat-card--hero' : ' hs-cat-card--normal'; ?>"
        data-reveal
      >
        <div class="hs-cat-card__bg">
          <img src="<?php echo esc_url($cat['image']); ?>" alt="<?php echo esc_attr($cat['name']); ?>" loading="lazy">
        </div>
        <div class="hs-cat-card__overlay"></div>
        <div class="hs-cat-card__content">
          <span class="hs-cat-card__count"><?php echo intval($cat['count']); ?> Produkte</span>
          <h3 class="hs-cat-card__title"><?php echo esc_html($cat['name']); ?></h3>
          <span class="hs-cat-card__cta">
            Alle ansehen
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </span>
        </div>
      </a>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- ══════════ PRODUCTS ══════════ -->
<section class="hs-products" id="produkte">
  <div class="hs-container">
    <div class="hs-section-header" data-reveal>
      <span class="hs-section-header__eyebrow">Bestseller</span>
      <h2 class="hs-section-header__title">Beliebte Produkte</h2>
      <div class="hs-section-header__line"></div>
    </div>
    <div class="hs-products__grid">
      <?php
      // Show up to 6 products so grid stays balanced (3×2)
      $display_products = !empty($featured) ? $featured : $bestsellers;
      $display_products = array_slice($display_products, 0, 6);
      foreach ($display_products as $product):
      ?>
      <article class="hs-product-card" data-reveal data-tilt>
        <div class="hs-product-card__visual">
          <?php if ($product['image']): ?>
            <img src="<?php echo esc_url($product['image']); ?>" alt="<?php echo esc_attr($product['name']); ?>" loading="lazy">
          <?php else: ?>
            <div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
              <svg style="width:48px;height:48px;opacity:.2" viewBox="0 0 24 24" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
            </div>
          <?php endif; ?>

          <?php if (!empty($product['badge'])): ?>
          <div class="hs-product-card__badges">
            <span class="hs-badge hs-badge--<?php echo esc_attr($product['badge']); ?>"><?php echo esc_html(ucfirst($product['badge'])); ?></span>
          </div>
          <?php endif; ?>

          <div class="hs-product-card__actions">
            <button class="hs-product-card__action" onclick="addToCart(<?php echo intval($product['id']); ?>)" aria-label="Warenkorb">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
            </button>
            <a href="<?php echo esc_url($product['permalink']); ?>" class="hs-product-card__action" aria-label="Ansehen">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
            </a>
          </div>
        </div>

        <div class="hs-product-card__info">
          <div class="hs-product-card__cat"><?php echo esc_html($product['category']); ?></div>
          <h3 class="hs-product-card__name"><?php echo esc_html($product['name']); ?></h3>
          <div class="hs-product-card__meta">
            <span class="hs-product-card__price"><?php echo $product['price']; ?></span>
            <a href="<?php echo esc_url($product['permalink']); ?>" class="hs-product-card__link">
              Details
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
          </div>
        </div>
      </article>
      <?php endforeach; ?>
    </div>
    <div class="hs-products__footer" data-reveal>
      <a href="<?php echo esc_url(get_permalink(wc_get_page_id('shop'))); ?>" class="hs-btn hs-btn--outline">
        Alle Produkte ansehen
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>
  </div>
</section>

<!-- ══════════ ABOUT ══════════ -->
<section class="hs-about" id="ueber">
  <div class="hs-about__bg">
    <div class="hs-about__gradient"></div>
    <div class="hs-about__pattern"></div>
  </div>
  <div class="hs-container hs-about__grid">
    <div class="hs-about__visual" data-reveal>
      <div class="hs-about__image-wrapper">
        <div class="hs-about__image hs-about__image--main">
          <img src="https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?w=700&h=900&fit=crop" alt="Horsila Qualität">
        </div>
        <div class="hs-about__image hs-about__image--float">
          <img src="https://images.unsplash.com/photo-1598974357801-cbca100e65d3?w=300&h=300&fit=crop" alt="Detail">
        </div>
      </div>
    </div>
    <div class="hs-about__content" data-reveal>
      <span class="hs-section-header__eyebrow">Über Horsila</span>
      <h2 class="hs-about__title">Leidenschaft für <span style="color:var(--gold)">Pferdegesundheit</span></h2>
      <p class="hs-about__text">Seit über einem Jahrzehnt entwickeln wir bei Horsila Premium-Produkte für die tägliche Pflege und Gesundheit Ihres Pferdes. Jedes Produkt durchläuft strenge Qualitätskontrollen.</p>
      <p class="hs-about__text">Unser Team aus Tierärzten und Pferdeexperten arbeitet kontinuierlich daran, innovative Lösungen zu entwickeln, die den höchsten Standards gerecht werden.</p>
      <ul class="hs-about__list">
        <li>
          <span class="hs-about__list-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/></svg>
          </span>
          Wissenschaftlich entwickelt
        </li>
        <li>
          <span class="hs-about__list-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 0 1 10 10c0 5.52-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm0 0v10m0 0l-3-3m3 3l3-3"/></svg>
          </span>
          100% Natürlich
        </li>
        <li>
          <span class="hs-about__list-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><polyline points="23 20 23 14 17 14"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/></svg>
          </span>
          Nachhaltige Verpackung
        </li>
      </ul>
      <a href="#" class="hs-btn hs-btn--primary">
        Mehr über uns
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </a>
    </div>
  </div>
</section>

<!-- ══════════ PARALLAX BREAK ══════════ -->
<section class="hs-parallax-break" style="background-image:url('https://images.unsplash.com/photo-1558618666-fcd25c85f82e?w=1920&h=800&fit=crop')">
  <div class="hs-parallax-break__overlay"></div>
  <div class="hs-parallax-break__content">
    <h2 class="hs-parallax-break__title" data-reveal>„Die beste Pflege<br>die Ihr Pferd verdient"</h2>
    <p class="hs-parallax-break__subtitle" data-reveal>— Dr. Markus Weber, Leitender Tierarzt</p>
  </div>
</section>

<!-- ══════════ TESTIMONIALS ══════════ -->
<section class="hs-testimonials" id="bewertungen">
  <div class="hs-container">
    <div class="hs-section-header" data-reveal>
      <span class="hs-section-header__eyebrow">Kundenstimmen</span>
      <h2 class="hs-section-header__title">Was unsere Kunden sagen</h2>
      <div class="hs-section-header__line"></div>
    </div>
    <div class="hs-testimonials__grid">
      <?php foreach ($testimonials as $t): ?>
      <div class="hs-testi-card" data-reveal>
        <div class="hs-testi-card__stars">
          <?php for($i=0;$i<5;$i++): ?>
          <svg viewBox="0 0 24 24"><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>
          <?php endfor; ?>
        </div>
        <p class="hs-testi-card__text"><?php echo esc_html($t['text']); ?></p>
        <div class="hs-testi-card__author">
          <div class="hs-testi-card__avatar"><?php echo esc_html($t['avatar']); ?></div>
          <div class="hs-testi-card__meta">
            <strong><?php echo esc_html($t['name']); ?></strong>
            <span><?php echo esc_html($t['role']); ?></span>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- ══════════ NEWSLETTER ══════════ -->
<section class="hs-newsletter" id="kontakt">
  <div class="hs-newsletter__glow"></div>
  <div class="hs-newsletter__content">
    <span class="hs-section-header__eyebrow" data-reveal>Newsletter</span>
    <h2 class="hs-newsletter__title" data-reveal>Bleiben Sie informiert</h2>
    <p class="hs-newsletter__text" data-reveal>Erhalten Sie exklusive Angebote, Pflegetipps und Neuigkeiten direkt in Ihr Postfach.</p>
    <form class="hs-newsletter__form" id="newsletterForm" data-reveal>
      <div class="hs-newsletter__input-wrap">
        <input type="email" class="hs-newsletter__input" placeholder="Ihre E-Mail-Adresse" required>
        <button type="submit" class="hs-btn hs-btn--primary">
          Anmelden
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
        </button>
      </div>
    </form>
    <p class="hs-newsletter__privacy" data-reveal>Kein Spam. Jederzeit abmeldbar.</p>
  </div>
</section>

</div><!-- /#horsila-premium-home -->

<script>
(function(){
"use strict";

/* ── PRELOADER ── */
const preloader = document.getElementById('hs-preloader');
const fill = document.getElementById('preloaderFill');
const pct  = document.getElementById('preloaderPct');
let progress = 0;
const loadInt = setInterval(() => {
  progress += Math.random() * 15 + 5;
  if (progress >= 100) progress = 100;
  fill.style.width = progress + '%';
  pct.textContent = Math.floor(progress) + '%';
  if (progress === 100) {
    clearInterval(loadInt);
    setTimeout(() => {
      preloader.classList.add('done');
      setTimeout(() => preloader.style.display = 'none', 500);
    }, 400);
  }
}, 100);

/* ── SCROLL REVEAL ── */
const revealEls = document.querySelectorAll('[data-reveal]');
const revealObs = new IntersectionObserver((entries) => {
  entries.forEach((entry, i) => {
    if (entry.isIntersecting) {
      setTimeout(() => entry.target.classList.add('hs-revealed'), i * 80);
      revealObs.unobserve(entry.target);
    }
  });
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
revealEls.forEach(el => revealObs.observe(el));

/* ── COUNTER ANIMATION ── */
document.querySelectorAll('[data-counter]').forEach(counter => {
  const targetEl = counter.querySelector('[data-target]');
  if (!targetEl) return;
  const target = parseInt(targetEl.dataset.target, 10);
  const dur = 2200;
  let started = false;
  const obs = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && !started) {
        started = true;
        const start = performance.now();
        function update(now) {
          const elapsed = now - start;
          const p = Math.min(elapsed / dur, 1);
          const eased = 1 - Math.pow(1 - p, 3);
          targetEl.textContent = Math.floor(eased * target).toLocaleString('de-DE');
          if (p < 1) requestAnimationFrame(update);
        }
        requestAnimationFrame(update);
        obs.unobserve(entry.target);
      }
    });
  }, { threshold: 0.4 });
  obs.observe(counter);
});

/* ── PARTICLES ── */
const pc = document.getElementById('heroParticles');
if (pc) {
  const count = window.matchMedia('(pointer:coarse)').matches ? 15 : 28;
  for (let i = 0; i < count; i++) {
    const p = document.createElement('div');
    p.className = 'hs-particle';
    const size = Math.random() * 4 + 2;
    p.style.cssText = `
      width:${size}px;height:${size}px;
      left:${Math.random()*100}%;top:${Math.random()*100}%;
      background:rgba(253,212,0,${Math.random()*.35+.08});
      animation:float-particle ${Math.random()*8+6}s ease-in-out ${Math.random()*5}s infinite;
    `;
    pc.appendChild(p);
  }
}

/* ── 3D TILT ── */
if (!window.matchMedia('(pointer:coarse)').matches) {
  document.querySelectorAll('[data-tilt]').forEach(card => {
    card.addEventListener('mousemove', e => {
      const r = card.getBoundingClientRect();
      const rx = ((e.clientY - r.top  - r.height/2) / (r.height/2)) * -7;
      const ry = ((e.clientX - r.left - r.width/2)  / (r.width/2))  *  7;
      card.style.transform = `perspective(1000px) rotateX(${rx}deg) rotateY(${ry}deg) scale3d(1.02,1.02,1.02)`;
      card.style.transition = 'none';
    });
    card.addEventListener('mouseleave', () => {
      card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1,1,1)';
      card.style.transition = 'transform .5s ease';
    });
  });
}

/* ── SMOOTH SCROLL ── */
document.querySelectorAll('a[href^="#"]').forEach(a => {
  a.addEventListener('click', function(e) {
    const href = this.getAttribute('href');
    if (href === '#') return;
    const target = document.querySelector(href);
    if (target) { e.preventDefault(); target.scrollIntoView({behavior:'smooth',block:'start'}); }
  });
});

/* ── NEWSLETTER ── */
const nlForm = document.getElementById('newsletterForm');
if (nlForm) {
  nlForm.addEventListener('submit', e => {
    e.preventDefault();
    showToast('Vielen Dank für Ihre Anmeldung!');
    nlForm.reset();
  });
}

/* ── TOAST ── */
const toast    = document.getElementById('hsToast');
const toastMsg = document.getElementById('hsToastMsg');
function showToast(msg) {
  toastMsg.textContent = msg;
  toast.classList.add('show');
  setTimeout(() => toast.classList.remove('show'), 4000);
}

/* ── AJAX ADD TO CART ── */
function addToCart(productId) {
  if (typeof horsila_ajax === 'undefined') return;
  const fd = new FormData();
  fd.append('action', 'horsila_add_to_cart');
  fd.append('product_id', productId);
  fd.append('quantity', 1);
  fd.append('nonce', horsila_ajax.nonce);
  fetch(horsila_ajax.ajax_url, {method:'POST',body:fd})
    .then(r => r.json())
    .then(data => {
      showToast(data.success ? data.data.message : (data.data.message || 'Fehler'));
      if (data.success) {
        document.querySelectorAll('.hs-cart-badge').forEach(b => b.textContent = data.data.cart_count);
      }
    })
    .catch(() => showToast('Fehler beim Hinzufügen'));
}
window.addToCart = addToCart;

/* ── PARTICLE KEYFRAMES ── */
const s = document.createElement('style');
s.textContent = `@keyframes float-particle{0%,100%{transform:translateY(0) translateX(0);opacity:.25}25%{transform:translateY(-28px) translateX(8px);opacity:.55}50%{transform:translateY(-14px) translateX(-8px);opacity:.35}75%{transform:translateY(-38px) translateX(4px);opacity:.45}}`;
document.head.appendChild(s);

})();
</script>

<?php get_footer(); ?>