/**
 * VIFIS homepage page-specific styles.
 * Swiper base styles load from public/site/vendor/swiper/swiper-bundle.min.css
 * Shared layout/components remain in public/site/css/style.css
 */

/* ===== Design tokens (homepage) ===== */
:root{
  --hp-accent:#45a73d;
  --hp-accent-soft:rgba(69,167,61,.12);
  --hp-grad:linear-gradient(135deg,#0c7949 0%,#45a73d 100%);
  --hp-grad-dark:linear-gradient(135deg,#003d2b 0%,#00613c 55%,#0c7949 100%);
  --hp-radius:16px;
  --hp-radius-sm:12px;
  --hp-border:#e5eae5;
  --hp-border-hover:#c0d8bd;
  --hp-surface:#f6f9fc;
  --hp-shadow-rest:0 1px 2px rgba(0,61,43,.04),0 4px 14px rgba(0,61,43,.05);
  --hp-shadow-hover:0 2px 6px rgba(0,61,43,.05),0 18px 40px rgba(8,90,58,.14);
  --hp-ease:cubic-bezier(.22,.8,.24,1);
}

#main-content{background:#fff}

/* ===== Buttons ===== */
.hero .btn,.section-empty .btn{min-height:48px;padding:0 28px;border-radius:12px;font-weight:700;letter-spacing:.01em;gap:8px;transition:transform .25s var(--hp-ease),box-shadow .25s var(--hp-ease),background .25s ease,color .25s ease,border-color .25s ease}
.hero .btn-primary,.section-empty .btn-primary{position:relative;overflow:hidden;background:var(--hp-grad);border:0;box-shadow:0 8px 22px rgba(12,121,73,.32),inset 0 1px 0 rgba(255,255,255,.22)}
.hero .btn-primary::after,.section-empty .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s var(--hp-ease)}
.hero .btn-primary:hover,.section-empty .btn-primary:hover{background:var(--hp-grad);transform:translateY(-2px);box-shadow:0 14px 30px rgba(12,121,73,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.hero .btn-primary:hover::after,.section-empty .btn-primary:hover::after{left:120%}
.hero .btn-outline{border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.08);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero .btn-outline:hover{background:#fff;border-color:#fff;color:var(--navy-900);transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18)}

/* ===== Hero ===== */
.hero-overlay{background:
  linear-gradient(90deg,rgba(1,28,15,.97) 0%,rgba(1,41,24,.9) 34%,rgba(2,49,30,.55) 60%,rgba(1,37,21,.1) 88%)}
.hero-overlay::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 75%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 75%);pointer-events:none}
.hero-overlay::after{content:"";position:absolute;left:-10%;top:-30%;width:60%;height:120%;background:radial-gradient(closest-side,rgba(69,167,61,.22),transparent 70%);pointer-events:none}
.hero-swiper .swiper-slide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(69,167,61,.7),transparent);z-index:3}

.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:7px 14px 7px 12px;margin-bottom:18px;border:1px solid rgba(151,209,144,.3);border-radius:999px;background:rgba(1,144,72,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#cae7c6;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.hero .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hp-accent);box-shadow:0 0 0 4px rgba(69,167,61,.22),0 0 12px rgba(69,167,61,.8);animation:hp-pulse 2.4s ease-in-out infinite}
.hero h1{font-size:clamp(28px,3.4vw,46px);line-height:1.14;letter-spacing:-.02em;font-weight:800;margin-bottom:20px;text-shadow:0 2px 24px rgba(0,21,10,.35)}
.hero p{font-size:17px;line-height:1.7;color:rgba(232,239,231,.9);max-width:560px;margin-bottom:32px}
.hero-actions{flex-wrap:wrap}

.hero-arrow{width:48px;height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .25s,visibility .25s,background .25s,border-color .25s,transform .25s var(--hp-ease)}
.hero-arrow:hover:not(:disabled):not(.is-disabled){background:rgba(12,121,73,.85);border-color:rgba(255,255,255,.5)}
.hero-swiper-bullet::after{width:8px;height:8px;background:rgba(255,255,255,.45);transition:width .35s var(--hp-ease),background .35s ease}
.hero-swiper-bullet{transition:width .35s var(--hp-ease)}
.hero-swiper-bullet.is-active{width:36px}
.hero-swiper-bullet.is-active::after{width:28px;border-radius:999px;background:linear-gradient(90deg,#fff,#b6e0b1)}

/* ===== Benefits ===== */
.benefits{background:linear-gradient(180deg,#f4f8fc 0%,#fff 100%);border-bottom:1px solid var(--hp-border)}
.benefit{transition:transform .3s var(--hp-ease)}
.benefit:not(:last-child)::after{background:linear-gradient(180deg,transparent,#dde2dc,transparent)}
.line-icon{width:54px;height:54px;flex:0 0 54px;padding:10px;border-radius:16px;background:linear-gradient(145deg,#fff,#eef3ee);border:1px solid #e1e9e0;box-shadow:0 6px 16px rgba(9,102,66,.1),inset 0 1px 0 #fff;transition:transform .3s var(--hp-ease),box-shadow .3s ease,border-color .3s ease}
.line-icon img{filter:hue-rotate(-75deg) saturate(1.15) brightness(.88)}
.benefit:hover .line-icon{transform:translateY(-3px) rotate(-3deg);border-color:var(--hp-border-hover);box-shadow:0 12px 24px rgba(9,102,66,.18),inset 0 1px 0 #fff}
.benefit-copy h3{font-size:15px;font-weight:750;color:var(--text);letter-spacing:-.005em}
.benefit-copy p{font-size:14px;color:var(--muted)}

/* ===== Section heading ===== */
#products{position:relative;background:
  radial-gradient(600px 300px at 100% 0%,rgba(69,167,61,.06),transparent 70%),
  radial-gradient(500px 280px at 0% 60%,rgba(12,121,73,.05),transparent 70%),#fff}
.section{padding:56px 0}
.section.compact{padding-bottom:28px}
.section-head{gap:16px;margin-bottom:28px}
.section-head h2{position:relative;display:inline-flex;align-items:center;gap:12px;font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.015em;color:var(--navy-900)}
.section-head h2::before{content:"";flex-shrink:0;align-self:flex-start;margin-top:.08em;width:5px;height:1.05em;border-radius:4px;background:var(--hp-grad);box-shadow:0 4px 10px rgba(12,121,73,.3)}
.section-head a{flex-shrink:0;white-space:nowrap;gap:6px;padding:6px 14px 6px 16px;border:1px solid var(--hp-border);border-radius:999px;background:#fff;font-size:14px;color:var(--blue-700);box-shadow:0 1px 2px rgba(0,61,43,.04);transition:border-color .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease}
.section-head a .arrow-icon{width:15px;height:15px;transition:transform .25s var(--hp-ease)}
.section-head a:hover{border-color:transparent;background:var(--hp-grad);color:#fff;box-shadow:0 8px 18px rgba(12,121,73,.25)}
.section-head a:hover .arrow-icon{transform:translateX(3px)}
.section-head.light h2{color:#fff}
.section-head.light a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.section-head.light a:hover{background:#fff;color:var(--navy-900)}
.products-title{margin-top:56px}

/* ===== Category cards ===== */
.category-grid{gap:18px}
.category-card{position:relative;display:flex;flex-direction:column;padding:10px 10px 16px;background:#fff;border:1px solid var(--hp-border);border-radius:var(--hp-radius);box-shadow:var(--hp-shadow-rest);transition:transform .35s var(--hp-ease),box-shadow .35s var(--hp-ease),border-color .35s ease}
.category-card::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:3px;border-radius:3px 3px 0 0;background:var(--hp-grad);transform:translateX(-50%);transition:width .35s var(--hp-ease)}
.category-card img,.category-card__placeholder{border-radius:var(--hp-radius-sm);background:radial-gradient(circle at 50% 40%,#fff 0%,#eef4fa 100%);padding:14px}
.category-card{background:linear-gradient(180deg,#eef4fa 0%,#f7fafd 58%,#fff 78%)}
.category-card img{background:transparent;mix-blend-mode:multiply;transition:transform .45s var(--hp-ease)}
.category-card strong{margin-top:14px;font-size:15px;font-weight:700;letter-spacing:-.005em;transition:color .25s ease}
.category-card:hover{transform:translateY(-6px);background:linear-gradient(180deg,#ebf1eb 0%,#f5f9fd 58%,#fff 78%);border-color:var(--hp-border-hover);box-shadow:var(--hp-shadow-hover)}
.category-card:hover::after{width:44%}
.category-card:hover img{transform:scale(1.06)}
.category-card:hover strong{color:var(--blue-700)}

/* ===== Solutions ===== */
.solutions{position:relative;overflow:hidden;padding:64px 0}
.solutions::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 30% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 30% 0%,#000 0%,transparent 70%);pointer-events:none}
.solutions::after{content:"";position:absolute;left:-10%;top:-40%;width:55%;height:120%;background:radial-gradient(closest-side,rgba(69,167,61,.18),transparent 70%);pointer-events:none}
.solutions>.container-xl{position:relative;z-index:1}
.solution-grid{gap:20px}
.solution-card{border:1px solid rgba(255,255,255,.14);border-radius:var(--hp-radius);background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,14,6,.25);transition:transform .35s var(--hp-ease),box-shadow .35s var(--hp-ease),border-color .35s ease,background .35s ease}
.solution-card img{height:170px;transition:transform .5s var(--hp-ease)}
.solution-card .solution-card__body,.solution-card div.solution-card__body{padding:18px 18px 20px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,24,12,.35))}
.solution-card__title{font-size:17px;font-weight:750;letter-spacing:-.005em}
.solution-card__desc{font-size:14px;color:rgba(222,231,220,.82)}
.solution-card__cta{align-self:flex-start;font-size:14px;color:#a9dba3;transition:color .25s ease,gap .25s var(--hp-ease)}
.solution-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.08);border-color:rgba(151,209,144,.45);box-shadow:0 22px 44px rgba(0,14,6,.35),0 0 0 1px rgba(69,167,61,.15)}
.solution-card:hover img{transform:scale(1.06)}
.solution-card:hover .solution-card__cta{color:#fff;gap:9px}

/* ===== Partners ===== */
.partners{padding-top:48px;padding-bottom:48px;background:linear-gradient(180deg,#fff 0%,#f6f9fc 100%)}
.partner-marquee{padding:6px 0}
.partner-marquee__group{gap:14px;padding-right:14px}
.partner-marquee__item{flex-basis:172px;width:172px}
.partner-logo{height:84px;padding:12px 16px;border:1px solid var(--hp-border);border-radius:var(--hp-radius-sm);background:#fff;box-shadow:var(--hp-shadow-rest);transition:transform .3s var(--hp-ease),box-shadow .3s ease,border-color .3s ease}
.partner-logo img{max-height:56px;filter:grayscale(1);opacity:.7;transition:filter .35s ease,opacity .35s ease}
.partner-logo:hover{transform:translateY(-3px);border-color:var(--hp-border-hover);box-shadow:var(--hp-shadow-hover)}
.partner-logo:hover img{filter:none;opacity:1}
.partner-marquee:hover .partner-marquee__track{animation-play-state:paused}

/* ===== Stats ===== */
.stats{position:relative;overflow:hidden;background:var(--hp-grad-dark);border:0}
.stats::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);pointer-events:none}
.stats-grid{position:relative;z-index:1;min-height:132px;padding:26px 0;gap:18px}
.stats-grid article{justify-content:flex-start;padding:18px 20px;border:1px solid rgba(255,255,255,.12);border-radius:var(--hp-radius);background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .3s var(--hp-ease),background .3s ease,border-color .3s ease}
.stats-grid article:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:rgba(151,209,144,.4)}
.stat-icon{width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:var(--hp-grad);color:#fff;box-shadow:0 8px 20px rgba(69,167,61,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.stats-grid b{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.02em;color:#fff;background:linear-gradient(180deg,#fff 30%,#bae1b5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stats-grid span{font-size:14px;color:rgba(222,231,220,.8)}

/* ===== Projects ===== */
.project-grid{gap:20px}
.project-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hp-border);border-radius:var(--hp-radius);box-shadow:var(--hp-shadow-rest);transition:transform .35s var(--hp-ease),box-shadow .35s var(--hp-ease),border-color .35s ease}
.project-card>a{position:relative;display:block;overflow:hidden}
.project-card>a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,61,43,.45));opacity:0;transition:opacity .35s ease}
.project-card img{height:170px;transition:transform .5s var(--hp-ease)}
.project-card>div{padding:14px 16px 16px}
.project-card h3{font-size:15px;font-weight:700;letter-spacing:-.005em}
.project-card h3 a{transition:color .25s ease}
.project-card p{font-size:13.5px}
.project-card:hover{transform:translateY(-6px);background:#fff;border-color:var(--hp-border-hover);box-shadow:var(--hp-shadow-hover)}
.project-card:hover img{transform:scale(1.06)}
.project-card:hover>a::after{opacity:1}
.project-card:hover h3 a{color:var(--blue-700)}

/* ===== News ===== */
.news-section{padding-top:48px;padding-bottom:64px;border-top:0;background:linear-gradient(180deg,#f6f9fc 0%,#fff 60%)}
.news-showcase{gap:22px}
.news-card{border:1px solid var(--hp-border);border-radius:var(--hp-radius);box-shadow:var(--hp-shadow-rest);transition:transform .35s var(--hp-ease),box-shadow .35s var(--hp-ease),border-color .35s ease}
.news-card:hover{transform:translateY(-6px);border-color:var(--hp-border-hover);box-shadow:var(--hp-shadow-hover)}
.news-card__media{margin:8px 8px 0;border-radius:var(--hp-radius-sm)}
.news-card__media img{transition:transform .5s var(--hp-ease)}
.news-card:hover .news-card__media img{transform:scale(1.06)}
.news-card__body{padding:16px 18px 18px}
.news-card__category{padding:3px 10px;border-radius:999px;background:var(--hp-accent-soft);color:#0c7949;font-size:11px;letter-spacing:.04em}
.news-card__title{font-size:17px;letter-spacing:-.01em}
.news-card__footer{border-top:1px dashed #e1e6e1}
.news-card__cta{padding:4px 12px;border-radius:999px;background:#f0f6fc;transition:background .25s ease,color .25s ease}
.news-card:hover .news-card__cta{background:var(--hp-grad);color:#fff}

/* ===== Empty state ===== */
.section-empty{padding:40px 24px;border:1px dashed #cdd6cc;border-radius:var(--hp-radius);background:radial-gradient(400px 160px at 50% 0%,rgba(69,167,61,.07),transparent 70%),#f8fbfd}

/* ===== Reveal motion ===== */
.reveal-item{transform:translateY(22px);transition:opacity .7s var(--hp-ease),transform .7s var(--hp-ease),box-shadow .35s var(--hp-ease),border-color .35s ease,background .35s ease}
.category-card.reveal-item.is-visible:hover,.product-card.reveal-item.is-visible:hover,.solution-card.reveal-item.is-visible:hover,.project-card.reveal-item.is-visible:hover,.news-card.reveal-item.is-visible:hover{transform:translateY(-6px)}
.stats-grid article.reveal-item.is-visible:hover,.partner-logo.reveal-item.is-visible:hover{transform:translateY(-3px)}

@keyframes hp-pulse{0%,100%{box-shadow:0 0 0 4px rgba(69,167,61,.22),0 0 12px rgba(69,167,61,.8)}50%{box-shadow:0 0 0 7px rgba(69,167,61,.08),0 0 18px rgba(69,167,61,.9)}}

/* ===== Responsive ===== */
@media (max-width:900px){
  .section{padding:44px 0}
  .products-title{margin-top:40px}
  .solutions{padding:48px 0}
  .benefit{border-radius:var(--hp-radius-sm);border-color:var(--hp-border);box-shadow:var(--hp-shadow-rest)}
  .benefit::before{background:var(--hp-grad)}
  .category-grid,.product-showcase,.solution-grid,.project-grid{gap:14px}
  .stats-grid{padding:22px 0;gap:12px}
  .stats-grid article{padding:14px}
  .partner-marquee__item{flex-basis:140px;width:140px}
  .partner-logo{height:72px}
}
@media (max-width:560px){
  .section{padding:34px 0}
  .section-head{margin-bottom:18px}
  .section-head a{padding:5px 10px 5px 12px;font-size:12.5px}
  .section-head h2{gap:9px}
  .section-head h2::before{width:4px}
  .hero .eyebrow{font-size:10.5px;letter-spacing:.08em;padding:5px 11px 5px 10px;margin-bottom:12px}
  .hero p{font-size:15px;margin-bottom:20px}
  .hero .btn{min-height:42px;padding:0 18px;border-radius:10px}
  .category-grid,.product-showcase,.project-grid{gap:10px}
  .category-card{padding:6px 6px 10px;border-radius:var(--hp-radius-sm)}
  .category-card img,.category-card__placeholder{padding:8px;border-radius:9px}
  .category-card strong{margin-top:8px}
  .product-showcase .product-card,.project-card,.news-card{border-radius:var(--hp-radius-sm)}
  .product-card__media-wrap,.news-card__media{margin:6px 6px 0;border-radius:9px}
  .solution-card img{height:100%}
  .solution-card .solution-card__body,.solution-card div.solution-card__body{padding:12px}
  .stat-icon{width:42px;height:42px;flex-basis:42px;border-radius:12px}
  .stats-grid article{gap:10px;padding:12px}
  .project-card img{height:110px}
  .project-card>div{padding:10px 12px 12px}
  .partner-marquee__item{flex-basis:128px;width:128px}
  .partner-logo{height:64px}
}

@media (hover:none){
  .partner-logo img{filter:none;opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .hero .eyebrow::before{animation:none}
  .category-card,.product-showcase .product-card,.solution-card,.project-card,.news-card,.partner-logo,.stats-grid article,.line-icon{transition:none}
  .category-card:hover,.product-showcase .product-card:hover,.solution-card:hover,.project-card:hover,.news-card:hover,.partner-logo:hover,.stats-grid article:hover,.benefit:hover .line-icon,
  .category-card.reveal-item.is-visible:hover,.product-card.reveal-item.is-visible:hover,.solution-card.reveal-item.is-visible:hover,.project-card.reveal-item.is-visible:hover,.news-card.reveal-item.is-visible:hover{transform:none}
}