@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

:root {
  --green-deep:   #1A3C2E;
  --green-mid:    #2D5C45;
  --green-accent: #3DBE7A;
  --green-light:  #E8F5EE;
  --cream:        #F8F6F2;
  --cream-dark:   #EDE9E3;
  --charcoal:     #1C1C1A;
  --gray-mid:     #555550;
  --gray-light:   #888880;
  --white:        #FFFFFF;
  --dark-bg:      #0F2318;
  --shadow:       0 4px 24px rgba(26,60,46,.10);
  --shadow-lg:    0 12px 48px rgba(26,60,46,.16);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--charcoal);line-height:1.7;overflow-x:hidden;}
h1,h2,h3,h4{font-family:'DM Serif Display',serif;line-height:1.12;color:var(--charcoal);}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(248,246,242,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--cream-dark);transition:box-shadow .3s;}
nav.scrolled{box-shadow:0 2px 20px rgba(26,60,46,.08);}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 40px;height:104px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo img{height:92px;width:auto;}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;}
.nav-links a{font-size:16px;font-weight:400;color:var(--gray-mid);transition:color .2s;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1.5px;background:var(--green-accent);transform:scaleX(0);transition:transform .25s;}
.nav-links a:hover{color:var(--green-deep);}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
.nav-links a.active{color:var(--green-deep);font-weight:500;}
.nav-cta{background:var(--green-deep)!important;color:var(--white)!important;font-size:13px;font-weight:500;padding:10px 22px;border-radius:6px;transition:background .2s,transform .15s;}
.nav-cta:hover{background:var(--green-mid)!important;transform:translateY(-1px);}
.nav-cta::after{display:none!important;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;}
.hamburger span{display:block;width:24px;height:2px;background:var(--charcoal);border-radius:2px;transition:all .3s;}
@media(max-width:768px){
  .nav-links{display:none;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--cream);padding:20px 40px;gap:20px;border-bottom:1px solid var(--cream-dark);box-shadow:0 8px 24px rgba(0,0,0,.08);}
  .nav-links.open{display:flex;}
  .hamburger{display:flex;}
  .nav-inner{padding:0 24px;}
}

/* ── FOOTER ── */
footer{background:#0F2318;padding:72px 40px 32px;color:rgba(255,255,255,.6);}
.footer-inner{max-width:1280px;margin:0 auto;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:48px;margin-bottom:56px;}
.footer-logo img{height:104px;width:auto;margin-bottom:16px;}
.footer-desc{font-size:13px;line-height:1.8;color:rgba(255,255,255,.45);max-width:280px;}
.footer-col h4{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:18px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-col ul li a{font-size:13px;color:rgba(255,255,255,.5);transition:color .2s;}
.footer-col ul li a:hover{color:var(--green-accent);}
.footer-contact p{font-size:13px;line-height:1.9;color:rgba(255,255,255,.5);}
.footer-contact a{color:var(--green-accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-copy{font-size:12px;color:rgba(255,255,255,.25);}
.footer-socials{display:flex;gap:16px;}
.footer-socials a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);font-size:14px;transition:all .2s;}
.footer-socials a:hover{border-color:var(--green-accent);color:var(--green-accent);}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}footer{padding:48px 24px 28px;}}

/* ── COMMON ── */
.section-tag{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green-accent);margin-bottom:14px;}
.section-title{font-size:48px;color:var(--charcoal);margin-bottom:20px;}
.section-desc{font-size:18px;color:var(--gray-mid);line-height:1.8;}
.container{max-width:1280px;margin:0 auto;padding:0 40px;}
@media(max-width:768px){.container{padding:0 24px;}.section-title{font-size:34px;}}

/* ── BUTTONS ── */
.btn-primary{display:inline-block;background:var(--green-deep);color:var(--white);font-size:14px;font-weight:500;padding:13px 28px;border-radius:6px;transition:background .2s,transform .15s;font-family:'DM Sans',sans-serif;}
.btn-primary:hover{background:var(--green-mid);transform:translateY(-2px);}
.btn-outline{display:inline-block;border:1.5px solid var(--green-deep);color:var(--green-deep);font-size:14px;font-weight:500;padding:12px 28px;border-radius:6px;transition:all .2s;font-family:'DM Sans',sans-serif;}
.btn-outline:hover{background:var(--green-deep);color:var(--white);transform:translateY(-2px);}
.btn-outline-white{display:inline-block;border:1.5px solid rgba(255,255,255,.5);color:var(--white);font-size:14px;font-weight:500;padding:12px 28px;border-radius:6px;transition:all .2s;font-family:'DM Sans',sans-serif;}
.btn-outline-white:hover{border-color:var(--white);background:rgba(255,255,255,.1);}

/* ── ANIMATIONS ── */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease;}
.fade-up.visible{opacity:1;transform:translateY(0);}
.fade-up:nth-child(2){transition-delay:.1s;}.fade-up:nth-child(3){transition-delay:.2s;}.fade-up:nth-child(4){transition-delay:.3s;}

/* ── PAGE HERO ── */
.page-hero{padding:140px 40px 80px;background:var(--green-deep);text-align:center;position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;inset:0;background:url('images/iqf-products-flatlay.jpg') center/cover no-repeat;opacity:.08;}
.page-hero .section-tag{color:var(--green-accent);}
.page-hero h1{color:var(--white);font-size:72px;margin-bottom:18px;position:relative;}
.page-hero p{color:rgba(255,255,255,.7);font-size:20px;max-width:560px;margin:0 auto;position:relative;}
@media(max-width:768px){.page-hero h1{font-size:46px;}.page-hero{padding:120px 24px 60px;}}


/* ── FROZEN HOVER EFFECT ── */
.prod-img,
.product-card-img {
  position: relative;
  overflow: hidden;
}

/* Hover image swap support */
.prod-img img.hover-img,
.product-card-img img.hover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.prod-card:hover .prod-img img.hover-img,
.product-card:hover .product-card-img img.hover-img {
  opacity: 1;
}
.prod-img img.main-img,
.product-card-img img.main-img {
  transition: transform 0.5s ease, filter 0.45s ease;
}

/* Realistic ice: slight brightness up + cool white wash, NO hue-rotate */
.prod-card:hover .prod-img img,
.product-card:hover .product-card-img img {
  transform: scale(1.05);
  filter: brightness(1.08) saturate(0.82) contrast(0.95) !important;
  transition: transform 0.5s ease, filter 0.45s ease !important;
}

/* White frost veil — like ice crystals forming on surface */
.prod-img .frost-overlay,
.product-card-img .frost-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 3;
  background:
    /* fine grain noise texture for ice crystal feel */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") center/150px 150px repeat,
    /* soft white glow from edges inward */
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.28) 0%, transparent 65%),
    radial-gradient(ellipse at 0% 50%, rgba(255,255,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 50%, rgba(255,255,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.22) 0%, transparent 60%);
}

/* Ice crystal sparkle dots — white, not blue */
.prod-img .frost-crystals,
.product-card-img .frost-crystals {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease 0.12s;
  pointer-events: none;
  z-index: 4;
  background-image:
    radial-gradient(circle 2.5px at 12% 18%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 28% 8%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(circle 3px   at 48% 22%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 68% 12%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(circle 2px   at 82% 30%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 92% 8%,  rgba(255,255,255,0.88) 0%, transparent 100%),
    radial-gradient(circle 2px   at 6%  45%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(circle 3px   at 22% 55%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 38% 68%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(circle 2px   at 55% 48%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 72% 62%, rgba(255,255,255,0.90) 0%, transparent 100%),
    radial-gradient(circle 2.5px at 88% 52%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 15% 78%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(circle 2px   at 32% 88%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(circle 3px   at 52% 82%, rgba(255,255,255,0.70) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 75% 90%, rgba(255,255,255,0.88) 0%, transparent 100%),
    radial-gradient(circle 2px   at 90% 78%, rgba(255,255,255,0.80) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 42% 38%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(circle 2px   at 60% 28%, rgba(255,255,255,0.72) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 78% 42%, rgba(255,255,255,0.78) 0%, transparent 100%);
}

.prod-card:hover .prod-img .frost-overlay,
.product-card:hover .product-card-img .frost-overlay,
.prod-card:hover .prod-img .frost-crystals,
.product-card:hover .product-card-img .frost-crystals {
  opacity: 1;
}