/* ============================================================
   TECHNOWOLVES — Global Stylesheet v3 (Final Polish)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

:root {
  /* ── Palette ── */
  --clr-white:       #ffffff;
  --clr-off-white:   #f5f7fb;
  --clr-light:       #eef0f7;
  --clr-border:      #e3e7f0;
  --clr-border-dk:   #c8cfe8;
  --clr-muted:       #6b7494;
  --clr-body:        #3d4460;
  --clr-heading:     #0d1135;
  --clr-accent:      #2563eb;
  --clr-accent-lt:   #3b82f6;
  --clr-accent-dk:   #1d4ed8;
  --clr-accent-bg:   #eff6ff;
  --clr-accent-bg2:  #dbeafe;
  --clr-dark:        #0d1135;
  --clr-dark-2:      #141836;
  --clr-dark-3:      #1e2347;
  --clr-dark-4:      #252b5a;
  --clr-green:       #22c55e;
  --clr-wa:          #25d366;
  --clr-wa-dk:       #1da851;
  --clr-gold:        #f59e0b;

  /* ── Typography ── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  /* ── Radii ── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-3xl: 40px;

  /* ── Shadows ── */
  --sh-xs:   0 1px 3px rgba(13,17,53,.05);
  --sh-sm:   0 2px 12px rgba(13,17,53,.07);
  --sh-md:   0 8px 32px rgba(13,17,53,.10);
  --sh-lg:   0 20px 60px rgba(13,17,53,.13);
  --sh-xl:   0 32px 80px rgba(13,17,53,.16);
  --sh-blue: 0 8px 32px rgba(37,99,235,.25);
  --sh-wa:   0 8px 28px rgba(37,211,102,.35);

  /* ── Layout ── */
  --container:  1180px;
  --gap:        clamp(1rem, 2.5vw, 1.75rem);
  --section-py: clamp(5rem, 9vw, 8rem);
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:16px;line-height:1.65;color:var(--clr-body);background:var(--clr-white);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}

/* ── Typography ── */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--clr-heading);line-height:1.14;font-weight:700;letter-spacing:-.025em}
h1{font-size:clamp(2.4rem,5.5vw,4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.05rem,1.8vw,1.3rem)}
p{max-width:66ch}

/* ── Container ── */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2.5rem)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.5rem;border-radius:var(--r-sm);font-family:var(--font-body);font-size:.875rem;font-weight:600;letter-spacing:.01em;transition:all var(--transition);white-space:nowrap;cursor:pointer}
.btn-primary{background:var(--clr-accent);color:#fff;box-shadow:var(--sh-blue)}
.btn-primary:hover{background:var(--clr-accent-dk);transform:translateY(-2px);box-shadow:0 12px 40px rgba(37,99,235,.35)}
.btn-dark{background:var(--clr-dark);color:#fff}
.btn-dark:hover{background:var(--clr-dark-3);transform:translateY(-2px);box-shadow:0 8px 28px rgba(13,17,53,.3)}
.btn-outline{border:1.5px solid var(--clr-border-dk);color:var(--clr-heading);background:transparent}
.btn-outline:hover{border-color:var(--clr-accent);color:var(--clr-accent);background:var(--clr-accent-bg)}
.btn-outline-white{border:1.5px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06)}
.btn-outline-white:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.btn-lg{padding:.9rem 1.9rem;font-size:.95rem}
.btn-sm{padding:.48rem 1.1rem;font-size:.8rem}
.btn-wa{background:var(--clr-wa);color:#fff}
.btn-wa:hover{background:var(--clr-wa-dk);transform:translateY(-2px);box-shadow:var(--sh-wa)}
.btn-wa-outline{border:1.5px solid var(--clr-wa);color:var(--clr-wa);background:rgba(37,211,102,.06)}
.btn-wa-outline:hover{background:var(--clr-wa);color:#fff}
/* WA icon before */
.icon-wa::before{content:'';display:inline-block;width:16px;height:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;flex-shrink:0}
.btn-wa-outline.icon-wa::before,.btn-wa-outline:hover.icon-wa::before{filter:none}

/* ── Section utilities ── */
.section{padding:var(--section-py) 0}
.section-label{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clr-accent);background:var(--clr-accent-bg);border:1px solid rgba(37,99,235,.15);padding:.3rem .9rem;border-radius:50px;margin-bottom:1rem}
.section-label::before{content:'◆';font-size:.48rem;opacity:.7}
.section-title{margin-bottom:.75rem}
.section-sub{font-size:1.05rem;color:var(--clr-muted);max-width:54ch;line-height:1.7}
.text-center{text-align:center}
.text-center p,.text-center .section-sub{margin-inline:auto}
.section-intro{margin-bottom:3.5rem}

/* ── Card ── */
.card{background:var(--clr-white);border:1px solid var(--clr-border);border-radius:var(--r-lg);padding:1.75rem;transition:all var(--transition)}
.card:hover{border-color:rgba(37,99,235,.2);box-shadow:var(--sh-lg);transform:translateY(-4px)}

/* ── Badge ── */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .8rem;border-radius:50px;font-size:.75rem;font-weight:600;background:var(--clr-accent-bg);color:var(--clr-accent);border:1px solid rgba(37,99,235,.15)}

/* ── Breadcrumb ── */
.breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:rgba(255,255,255,.45);margin-bottom:1.75rem}
.breadcrumb a{color:rgba(255,255,255,.7);transition:color var(--transition)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{opacity:.35}
.breadcrumb .current{color:rgba(255,255,255,.9);font-weight:500}

/* ── Float buttons ── */
#waFloat{position:fixed;bottom:1.5rem;right:1.5rem;width:54px;height:54px;background:var(--clr-wa);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.5);z-index:9000;transition:transform var(--transition),box-shadow var(--transition)}
#waFloat:hover{transform:scale(1.12);box-shadow:0 8px 36px rgba(37,211,102,.6)}
#waFloat img{width:28px}
#scrollTop{position:fixed;bottom:6.5rem;right:1.5rem;width:40px;height:40px;background:var(--clr-dark);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:var(--sh-md);opacity:0;pointer-events:none;transition:opacity var(--transition),transform var(--transition);z-index:8999}
#scrollTop.visible{opacity:1;pointer-events:auto}
#scrollTop:hover{background:var(--clr-accent);transform:translateY(-3px)}

/* ── Observe animation ── */
.observe{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.observe.in-view{opacity:1;transform:translateY(0)}
[data-delay="1"]{transition-delay:.07s}
[data-delay="2"]{transition-delay:.14s}
[data-delay="3"]{transition-delay:.21s}
[data-delay="4"]{transition-delay:.28s}
[data-delay="5"]{transition-delay:.35s}
[data-delay="6"]{transition-delay:.42s}

/* ── Input / form base ── */
.input{padding:.75rem 1rem;border:1.5px solid var(--clr-border);border-radius:var(--r-sm);font:inherit;font-size:.875rem;color:var(--clr-body);background:var(--clr-white);outline:none;transition:border-color var(--transition),box-shadow var(--transition);width:100%}
.input:focus{border-color:var(--clr-accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}

/* ── Responsive helpers ── */
@media(max-width:768px){.hide-mobile{display:none!important}}
@media(max-width:640px){.section-sub{font-size:.95rem}}

/* ── Wolf icon image replacements ── */
.wolf-icon-inline {
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}
.bc-wolf-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.bc-wolf {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wvc-wolf-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 12px;
}
.wvc-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}