/* =========================================================================
   HUTE IMPORT & EXPORT CC — GLOBAL STYLESHEET
   Brand fonts requested: Corbel Light (headers) / Century Gothic (body).
   These are proprietary system/Office fonts with no legal web-embed CDN.
   Stack below tries the real fonts first (for machines that have them
   installed), then falls back to Jost / Questrial, two geometric-sans
   Google Fonts that are the closest open-license match to that look.
   <!-- SWAP IN LICENSED WEB-FONT FILES (Corbel Light / Century Gothic) HERE IF AVAILABLE -->
   ========================================================================= */

:root{
  /* ---- Brand core ---- */
  --brand-green: #008000;
  --brand-green-rgb: 0,128,0;
  --brand-slate: #ADADAD;
  --brand-white: #FFFFFF;

  /* neon accent derived from brand green, used ONLY for dark-mode glow fx */
  --neon-green: #23f188;
  --neon-green-rgb: 35,241,136;

  /* ---- Light mode tokens (default palette values, overridden below) ---- */
  --bg: #FFFFFF;
  --bg-elevated: #F6F7F6;
  --bg-elevated-2: #EDEFED;
  --text-primary: #14171a;
  --text-secondary: #4b4f4e;
  --text-muted: #7a807e;
  --border-soft: rgba(20,23,26,0.08);
  --header-bg: rgba(255,255,255,0.7);
  --accent: var(--brand-green);
  --accent-glow: rgba(0,128,0,0.35);
  --card-shadow: 0 10px 30px rgba(20,23,26,0.06);

  --font-header: 'Corbel Light','Corbel','Jost',sans-serif;
  --font-body: 'Century Gothic','Questrial',sans-serif;

  --ease-snap: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

html.dark{
  --bg: #0d0f0e;
  --bg-elevated: #121212;
  --bg-elevated-2: #191b1a;
  --text-primary: #f2f5f3;
  --text-secondary: #c4cac7;
  --text-muted: #8b928f;
  --border-soft: rgba(255,255,255,0.08);
  --header-bg: rgba(13,15,14,0.55);
  --accent: var(--neon-green);
  --accent-glow: rgba(35,241,136,0.45);
  --card-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 20px 40px rgba(0,0,0,0.45);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft);
  overflow-x: hidden;
  position: relative;
}

h1,h2,h3,h4,h5,.font-header{
  font-family: var(--font-header);
  letter-spacing: -0.01em;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------
   PARTICLE / 3D CANVAS BACKGROUND
--------------------------------------------------------------------- */
#bg-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}
html:not(.dark) #bg-canvas{ opacity: .28; }

.page-content{ position: relative; z-index: 2; }

.bubble-layer{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.bubble-layer::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(45deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px, 176px 176px, 176px 176px;
  opacity: .25;
  mix-blend-mode: lighten;
}
.bubble-mesh-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.bubble{
  position: absolute;
  width: 0.6rem; /* ~9.6px */
  height: 0.6rem;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(35,241,136,0.98), rgba(35,241,136,0.45));
  border: 1px solid rgba(35,241,136,0.95);
  box-shadow: 0 0 8px rgba(35,241,136,0.45), 0 0 18px rgba(35,241,136,0.18) inset;
  animation: bubbleFloat 6.2s linear infinite;
  opacity: 1;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.bubble--small,
.bubble--medium,
.bubble--large{
  width: 0.6rem;
  height: 0.6rem;
}
.bubble--slow{ animation-duration: 6.2s; }
.bubble--reverse{ animation-direction: alternate-reverse; }
@keyframes bubbleFloat{
  0%{ transform: translate(0,0) scale(0.98); }
  25%{ transform: translate(6px,-8px) scale(1.04); }
  50%{ transform: translate(-6px,-14px) scale(1.08); }
  75%{ transform: translate(8px,-10px) scale(1.03); }
  100%{ transform: translate(0,0) scale(0.98); }
}

/* ---------------------------------------------------------------------
   GLASSMORPHISM HEADER
--------------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-soft);
  transition: background-color .5s var(--ease-soft), border-color .5s var(--ease-soft);
}

.nav-link{
  position: relative;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .3s var(--ease-snap);
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width .35s var(--ease-snap);
}
.nav-link:hover, .nav-link.active{ color: var(--text-primary); }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

/* Dark mode toggle switch */
.dm-toggle{
  width: 52px; height: 28px;
  border-radius: 999px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-soft);
  position: relative;
  cursor: pointer;
  transition: background-color .4s var(--ease-soft);
  flex-shrink: 0;
}
.dm-toggle .dm-knob{
  position: absolute;
  top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-green), var(--neon-green));
  box-shadow: 0 0 10px var(--accent-glow);
  transition: transform .4s var(--ease-snap);
  display:flex; align-items:center; justify-content:center;
  font-size: 11px;
}
html.dark .dm-toggle .dm-knob{ transform: translateX(24px); }

/* ---------------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background: var(--brand-green);
  color:#fff;
  font-weight:700;
  padding: .85rem 1.75rem;
  border-radius: .75rem;
  transition: transform .35s var(--ease-snap), box-shadow .35s var(--ease-snap), background-color .35s var(--ease-snap);
  box-shadow: 0 6px 20px rgba(var(--brand-green-rgb),.25);
}
.btn-primary:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 34px rgba(var(--neon-green-rgb),.45), 0 0 24px rgba(var(--neon-green-rgb),.35);
  background: #009c11;
}
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border: 1.5px solid var(--brand-slate);
  color: var(--text-primary);
  font-weight:600;
  padding: .8rem 1.65rem;
  border-radius: .75rem;
  transition: all .35s var(--ease-snap);
}
.btn-outline:hover{
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
  transform: translateY(-2px);
}

/* Catalog download button — bounce + neon flash */
.catalog-btn{
  position: relative;
  display:inline-flex; align-items:center; gap:.6rem;
  background: linear-gradient(135deg, var(--brand-green), #00c853);
  color:#fff; font-weight:800;
  padding:1.1rem 2.2rem;
  border-radius:1rem;
  animation: catalogBounce 2.4s ease-in-out infinite, catalogFlash 2.4s ease-in-out infinite;
  will-change: transform;
}
.catalog-btn:hover{ animation-play-state: running; filter: brightness(1.12); }
@keyframes catalogBounce{
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(-10px); }
  30% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
}
@keyframes catalogFlash{
  0%, 100% { box-shadow: 0 0 0px rgba(35,241,136,0); }
  50% { box-shadow: 0 0 35px 8px rgba(35,241,136,.75); }
}

/* ---------------------------------------------------------------------
   CARDS + MICRO-INTERACTIONS
--------------------------------------------------------------------- */
.card{
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  transition: transform .45s var(--ease-snap), box-shadow .45s var(--ease-snap), border-color .45s var(--ease-snap);
}
.card:hover{
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(var(--neon-green-rgb),.5);
  box-shadow: 0 25px 60px -15px rgba(var(--neon-green-rgb),.35), var(--card-shadow);
}

.img-placeholder{
  background: repeating-linear-gradient(135deg, var(--bg-elevated-2), var(--bg-elevated-2) 10px, var(--bg) 10px, var(--bg) 20px);
  border: 1.5px dashed var(--brand-slate);
  color: var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-size: .8rem;
}
.uniform-img{
  width: 100%;
  display: block;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 1.5rem;
  border: 1px solid rgba(var(--brand-green-rgb), .08);
  box-shadow: 0 24px 55px rgba(var(--brand-green-rgb), .08);
}

.infographic-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
@media (max-width: 1024px){ .infographic-grid{ grid-template-columns: 1fr; } }

.stat-card{
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 16px 40px rgba(var(--brand-green-rgb), .06);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
.stat-card:hover{ transform: translateY(-4px); box-shadow: 0 24px 56px rgba(var(--brand-green-rgb), .12); }

.stat-card .label{ text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; color: var(--accent); margin-bottom: .75rem; display: inline-block; }
.counter-value{
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: .6rem;
}
.graph-bar{
  position: relative;
  width: 100%;
  height: .95rem;
  background: rgba(var(--brand-green-rgb), .12);
  border-radius: 999px;
  overflow: hidden;
}
.graph-bar-fill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-green), var(--neon-green));
  border-radius: 999px;
  transition: width 1.8s cubic-bezier(.16,1,.3,1);
}
.graph-bar-fill::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%);
  animation: loadingSweep 1.8s linear infinite;
}
@keyframes loadingSweep{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}

.voice-trigger{
  position: relative;
}
.voice-trigger.voice-highlight{
  box-shadow: 0 0 0 2px rgba(var(--neon-green-rgb), .24);
  animation: voicePulse 2.4s ease-in-out;
}
@keyframes voicePulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.003); }
}
/* hide scrollbars for overflow-x containers used for horizontal sections */
.no-scrollbar{ -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar{ display: none; }
/* ---------------------------------------------------------------------
   SECTION / GLOW HELPERS
--------------------------------------------------------------------- */
.text-gradient-green{
  background: linear-gradient(90deg, var(--brand-green), var(--neon-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.divider-glow{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.5;
}
.section-eyebrow{
  color: var(--accent);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.75rem;
}

/* hero kinetic type wrapper */
#hero-title{
  transform-style: preserve-3d;
  transition: transform .15s var(--ease-soft);
  will-change: transform;
}

/* AI greeting widget */
.ai-widget{
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  border-radius: 1rem;
  position: relative;
  overflow:hidden;
}
.ai-widget::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 15% 20%, rgba(var(--neon-green-rgb),.18), transparent 60%);
  pointer-events:none;
}
.ai-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--neon-green);
  box-shadow: 0 0 10px var(--neon-green);
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

/* form inputs */
.form-input{
  width:100%;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-soft);
  border-radius: .75rem;
  padding: .85rem 1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: border-color .3s var(--ease-snap), box-shadow .3s var(--ease-snap);
}
.form-input:focus{
  outline:none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--neon-green-rgb),.15);
}
.form-input::placeholder{ color: var(--text-muted); }

/* social icons */
.social-icon{
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  transition: all .3s var(--ease-snap);
}
.social-icon:hover{
  color:#fff;
  background: var(--brand-green);
  border-color: var(--brand-green);
  transform: translateY(-4px) rotate(-6deg);
  box-shadow: 0 8px 22px rgba(var(--neon-green-rgb),.45);
}
.social-icon svg{ width:17px; height:17px; }

/* scroll reveal */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* mobile nav */
.mobile-nav{
  max-height:0;
  overflow:hidden;
  transition: max-height .45s var(--ease-soft);
}
.mobile-nav.open{ max-height: 480px; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--brand-slate); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--brand-green); }

/* ---------------------------------------------------------------------
   CONTACT FORM — SMS opt-in checkbox
--------------------------------------------------------------------- */
.sms-checkbox{
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   CONTACT TOAST — animated success / failure popup
--------------------------------------------------------------------- */
.contact-toast{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-soft);
}
.contact-toast.is-visible{
  opacity: 1;
  pointer-events: auto;
}
.contact-toast__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.contact-toast__card{
  position: relative;
  z-index: 1;
  width: min(100%, 22rem);
  padding: 2rem 1.75rem 1.5rem;
  border-radius: 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  box-shadow: var(--card-shadow), 0 24px 60px rgba(0,0,0,.25);
  text-align: center;
  transform: scale(.85) translateY(20px);
  transition: transform .45s var(--ease-snap);
}
.contact-toast.is-visible .contact-toast__card{
  transform: scale(1) translateY(0);
}
.contact-toast__icon{
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.25rem;
}
.contact-toast__title{
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--text-primary);
}
.contact-toast__message{
  font-size: .9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}
.contact-toast__btn{
  width: 100%;
}
.contact-toast[data-type="success"] .contact-toast__title{ color: var(--accent); }
.contact-toast[data-type="error"] .contact-toast__title{ color: #ef4444; }

/* Bouncing icon wrapper */
.toast-bounce{
  animation: toastBounce .7s var(--ease-snap);
}
@keyframes toastBounce{
  0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
  45%  { transform: scale(1.18) rotate(4deg); opacity: 1; }
  65%  { transform: scale(.92) rotate(-2deg); }
  85%  { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}

/* SVG icon draw animations */
.toast-icon-svg{ width: 100%; height: 100%; }
.toast-icon-circle{
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: toastCircleDraw .5s var(--ease-snap) forwards;
}
.toast-icon-circle--error{ stroke: #ef4444; }
.toast-icon-check{
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: toastCheckDraw .35s .45s var(--ease-snap) forwards;
}
.toast-icon-x{
  stroke: #ef4444;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: toastCheckDraw .35s .45s var(--ease-snap) forwards;
}
.toast-icon-svg--error .toast-icon-circle{
  animation: toastCircleDraw .5s var(--ease-snap) forwards, toastShake .5s .7s ease;
}
@keyframes toastCircleDraw{
  to { stroke-dashoffset: 0; }
}
@keyframes toastCheckDraw{
  to { stroke-dashoffset: 0; }
}
@keyframes toastShake{
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

/* utility for logo placeholder box */
.logo-box{
  width:44px; height:44px;
  border-radius:.6rem;
  border:1.5px dashed var(--brand-slate);
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; text-align:center; color: var(--text-muted);
  line-height:1;
}