@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&family=Inter:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&Barlow:wght@400;500;600;700;800&display=swap');

/* =========================================================
   Win Win Industrial — Machine Tools Theme
   Brand: Blue #1860D8 / Signal Yellow #F0C018 / Ink #04080F
   ========================================================= */
:root{
  /* ---- brand core ---- */
  --ww-blue-900:#061B4A;
  --ww-blue-800:#0A2A6E;
  --ww-blue-700:#123FA8;
  --ww-blue-600:#1860D8;
  --ww-blue-500:#2B7CF0;
  --ww-blue-400:#5AA0F5;
  --ww-blue-300:#8FC0F9;
  --ww-blue-200:#C3DDFC;
  --ww-yellow-600:#C99700;
  --ww-yellow-500:#F0C018;
  --ww-yellow-400:#F7D44C;
  --ww-cyan-400:#2FC4DE;

  /* ---- neutrals ---- */
  --ink-900:#0C1117;
  --ink-700:#26303C;
  --ink-500:#5A6675;
  --ink-400:#7C8797;
  --ink-300:#A8B2BF;
  --ink-200:#D2D8E0;
  --ink-050:#F4F6F9;

  /* ---- hero surface ---- */
  --hero-base:#04080F;
  --hero-deep:#020509;
  --hero-tint:6,27,74;

  /* ---- type ---- */
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","Helvetica Neue",Arial,"PingFang SC","Noto Sans SC",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* ---- layout ---- */
  --navh:78px;
  --pad:clamp(24px,3.7vw,58px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.45,.05,.55,.95);

  /* pointer position */
  --mx:50%;
  --my:42%;

  /* ---- Heynds 兼容映射 ---- */
  --color-ember-orange:   var(--ww-yellow-500);
  --color-pale-peach:     #FFF7D6;
  --color-midnight-charcoal: var(--ink-900);
  --color-canvas-white:   #FFFFFF;
  --color-border-fog:     var(--ink-200);
  --color-muted-ash:      var(--ink-400);
  --color-divider-gray:   var(--ink-300);

  /* ---- 字体 ---- */
  --font-geist:   "Inter","Archivo","Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --f-display:    "Archivo","Inter","Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --f-text:       "Inter","Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-mono:       "IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --f-hero:       "Manrope","Barlow",Arial,sans-serif;

  /* ---- 字号/行距 ---- */
  --text-caption:   12px;
  --leading-caption:1.4;
  --text-body:      14px;
  --leading-body:   1.65;
  --text-body-lg:   16px;
  --leading-body-lg:1.7;
  --text-subheading:20px;
  --leading-subheading:1.25;
  --text-heading-sm:24px;
  --leading-heading-sm:1.25;
  --text-heading:   32px;
  --leading-heading:1.11;
  --text-heading-lg:40px;
  --leading-heading-lg:1.11;
  --text-display:   48px;
  --leading-display:1.04;
  --text-display-lg:64px;
  --leading-display-lg:1;

  /* ---- 间距/圆角/阴影 ---- */
  --spacing-8: 8px;   --spacing-16:16px; --spacing-24:24px;
  --spacing-32:32px;  --spacing-40:40px; --spacing-48:48px;
  --spacing-64:64px;  --spacing-80:80px; --spacing-112:112px;
  --radius-md:4px;    --radius-lg:8px;   --radius-xl:12px;
  --radius-full:9999px;
  --r-s:2px; --r-m:4px; --r-l:8px;
  --shadow-subtle:    0 1px 2px rgba(12,17,23,.06);
  --shadow-2:         0 4px 12px rgba(12,17,23,.10);
  --shadow-3:         0 12px 32px rgba(12,17,23,.16);
  --line:             #E3E1DD;
  --line-strong:      #CFCCC6;

  /* ---- 语义 ---- */
  --ink:              var(--ink-900);
  --ink-2:            var(--ink-700);
  --ink-3:            var(--ink-500);
  --paper:            #FFFFFF;
  --accent:           var(--ww-blue-600);
  --accent-hover:     var(--ww-blue-500);
  --warning:          var(--ww-yellow-500);
  --success:          #1F7A5C;
  --danger:           #D93A2B;
}

/* =========================================================
   1.  Base / Reset
   ========================================================= */
html,body{height:100%;}

body.heynds-body{
  background:var(--color-canvas-white);
  color:var(--color-midnight-charcoal);
  font-family:var(--font-geist);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.heynds-body .container{max-width:1200px;}

a{color:inherit;}
body.heynds-body a{text-decoration:none;}
body.heynds-body a:hover,body.heynds-body a:focus{color:var(--color-midnight-charcoal);text-decoration:none;}

.heynds-accent{color:var(--ww-blue-600);}

/* =========================================================
   2.  Heynds Core Components (Tokens)
   ========================================================= */
.heynds-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  border:1px solid var(--color-border-fog);
  border-radius:var(--radius-full);
  font-size:var(--text-caption);
  line-height:var(--leading-caption);
  color:var(--color-midnight-charcoal);
  background:rgba(255,255,255,.9);
}

.heynds-link{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ww-blue-600);font-weight:600;
}
.heynds-link:hover{color:var(--ww-blue-500);}

.heynds-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 34px;
  border-radius:var(--radius-md);
  font-weight:600;
  border:1px solid transparent;
  transition:transform .12s ease,background .12s ease,border-color .12s ease,color .12s ease;
  user-select:none;white-space:nowrap;cursor:pointer;font-family:inherit;font-size:inherit;
}
.heynds-btn-sm{padding:8px 14px;font-size:14px;border-radius:5px;}
.heynds-btn:active{transform:translateY(1px);}
.heynds-btn-primary{
  background:var(--ww-yellow-500);
  color:var(--ink-900);
  border-color:var(--ww-yellow-500);
  box-shadow:0 6px 14px -8px rgba(240,192,24,.55),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.12);
}
.heynds-btn-primary:hover{background:var(--ww-yellow-400);border-color:var(--ww-yellow-400);transform:translateY(-1px);}
.heynds-btn-ghost{
  background:transparent;color:var(--ink-900);border-color:var(--ink-200);
}
.heynds-btn-ghost:hover{border-color:var(--ww-blue-400);color:var(--ww-blue-600);background:rgba(43,124,240,.05);}

/* Dropdowns in nav */
.heynds-nav-actions .dropdown:hover > .dropdown-menu,
.heynds-nav-actions .dropdown.show > .dropdown-menu{display:block;}
.heynds-nav-actions .dropdown-menu{left:auto;right:0;min-width:160px;max-width:240px;border-radius:6px;padding:6px 0;box-shadow:var(--shadow-3);border-color:var(--ink-200);}
.heynds-nav-actions .dropdown-menu > li > a,
.heynds-nav-actions .dropdown-menu > a.dropdown-item{padding:8px 16px;font-size:13px;display:block;color:var(--ink-700);}
.heynds-nav-actions .dropdown-menu > li.active > a,
.heynds-nav-actions .dropdown-menu > li.active > a:hover,
.heynds-nav-actions .dropdown-menu > a.dropdown-item.active{background:rgba(24,96,216,.08);color:var(--ww-blue-600);font-weight:600;}
.heynds-nav-actions .dropdown-menu > li > a:hover,
.heynds-nav-actions .dropdown-menu > a.dropdown-item:hover{background:rgba(24,96,216,.05);color:var(--ww-blue-600);}

.heynds-nav .dropdown-menu.show{display:block;}

/* =========================================================
   3.  Page Header / Nav (Inner pages) — same visual as hero nav
   ========================================================= */
.ww-page-header{
  position:sticky;top:0;z-index:80;height:var(--navh);
  background:
    linear-gradient(180deg,rgba(6,27,74,.96) 0%,rgba(10,42,110,.94) 52%,rgba(10,42,110,.88) 100%);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(90,160,245,.22);
  box-shadow:0 4px 22px -12px rgba(4,10,20,.55);
}
.ww-page-header-inner{
  height:var(--navh);
  display:flex;align-items:center;gap:clamp(12px,1.8vw,32px);
  padding:0 var(--pad);position:relative;
}
.ww-page-header-inner::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,8,15,.38) 0%,rgba(4,8,15,0) 58%);
}
.ww-page-brand{display:block;flex:0 0 auto;}
.ww-page-logo-img{
  display:block;width:clamp(124px,10.6vw,168px);height:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
}

.ww-page-tools{display:none;align-items:center;gap:10px;margin-left:auto;}
.ww-page-burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;padding:0;border:0;background:transparent;cursor:pointer;
  border-radius:6px;
}
.ww-page-burger span{display:block;width:20px;height:2px;background:#fff;margin:0 auto;border-radius:2px;}

.ww-page-nav{
  flex:1;display:flex;align-items:center;gap:clamp(10px,1.4vw,24px);min-height:0;
}
.ww-page-nav-list{
  list-style:none;padding:0;margin:0;
  display:flex;align-items:center;gap:clamp(14px,1.9vw,34px);
  flex:1;
}
.ww-page-nav-list > li{position:relative;}
.ww-page-nav-list > li > a{
  display:block;padding:10px 2px;
  font-size:13.5px;font-weight:500;letter-spacing:.005em;
  color:rgba(232,240,247,.76);
  position:relative;transition:color .3s var(--ease);
}
.ww-page-nav-list > li > a::after{
  content:'';position:absolute;left:2px;right:2px;bottom:2px;height:1px;
  background:linear-gradient(90deg,var(--ww-blue-400),var(--ww-cyan-400));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.ww-page-nav-list > li:hover > a,
.ww-page-nav-list > li.active > a{color:#fff}
.ww-page-nav-list > li:hover > a::after,
.ww-page-nav-list > li.active > a::after{transform:scaleX(1)}

/* subnav dropdown */
.ww-page-subnav{
  position:absolute;top:100%;left:0;display:none;list-style:none;margin:4px 0 0;padding:8px 0;
  min-width:220px;border-radius:8px;border:1px solid rgba(143,192,249,.22);
  background:rgba(6,27,74,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6);z-index:85;
}
.ww-page-nav-list > li:hover > .ww-page-subnav{display:block;}
.ww-page-subnav li a{
  display:block;padding:8px 20px;font-size:13px;color:rgba(244,246,249,.8);
  transition:background .2s ease,color .2s ease;
}
.ww-page-subnav li a:hover{background:rgba(43,124,240,.18);color:#fff}

.ww-page-actions{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);flex:0 0 auto;}

.ww-page-lang{position:relative;}
.ww-page-lang-toggle{
  display:inline-flex;align-items:center;gap:7px;
  font:600 12px/1 var(--font-mono);letter-spacing:.14em;
  color:rgba(232,240,247,.8);background:none;border:0;cursor:pointer;padding:9px 4px;
  transition:color .3s var(--ease);
}
.ww-page-lang-toggle:hover{color:#fff}
.ww-page-lang-menu-ul{
  position:absolute;top:100%;right:0;min-width:160px;margin-top:6px;padding:6px 0;
  border-radius:8px;border:1px solid rgba(143,192,249,.22);
  background:rgba(6,27,74,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6);list-style:none;
}
.ww-page-lang-menu-ul > li > a{
  display:block;padding:8px 16px;font-size:13px;color:rgba(244,246,249,.8);
}
.ww-page-lang-menu-ul > li.active > a,
.ww-page-lang-menu-ul > li > a:hover{color:#fff;background:rgba(43,124,240,.18);}

.ww-page-lang-menu{
  border:1px solid rgba(143,192,249,.22)!important;
  background:rgba(6,27,74,.92)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6)!important;
}
.ww-page-lang-menu .dropdown-item{color:rgba(244,246,249,.85)!important;font-size:13px;}
.ww-page-lang-menu .dropdown-item:hover,
.ww-page-lang-menu .dropdown-item.active{color:#fff!important;background:rgba(43,124,240,.18)!important;}
.ww-page-lang-btn{
  background:rgba(148,180,224,.06)!important;border:1px solid rgba(143,192,249,.28)!important;
  color:rgba(244,246,249,.88)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font:600 12px/1 var(--font-mono)!important;letter-spacing:.14em;
}

/* Heynds 兼容 (老类名仍映射视觉) */
.heynds-header{display:none;}
.heynds-header-inner{height:0;}
.heynds-brand{display:none;}
.heynds-header-tools{display:none;}
.heynds-nav{display:none;}
.heynds-lang{display:none;}
.heynds-user{display:none;}

/* =========================================================
   4.  Sections / Grids / Cards (Heynds structure)
   ========================================================= */
.heynds-section{
  padding:var(--spacing-80) 0;position:relative;
}
.heynds-section-muted{background:var(--ink-050);}
.heynds-section[data-ww-layer="navy"]{
  background:
    radial-gradient(90% 80% at 14% -10%, rgba(24,96,216,.08) 0%, transparent 60%),
    linear-gradient(180deg,rgba(24,96,216,.035) 0%,#fff 68%);
}
.heynds-section[data-ww-layer="iron"]{
  background:linear-gradient(180deg,#fff 0%,rgba(240,192,24,.02) 50%,#fff 100%);
}
.heynds-section[data-ww-layer="product"]{
  background:
    linear-gradient(180deg,#fff 0%,rgba(4,8,15,.01) 100%);
}
.heynds-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:var(--spacing-40);flex-wrap:wrap;
}
.heynds-section-head > div{max-width:720px;}
.heynds-section-title{
  font-family:var(--f-display);font-size:var(--text-heading);font-weight:800;
  line-height:var(--leading-heading);color:var(--ink-900);
  letter-spacing:-.02em;margin:10px 0 0;
}
.heynds-section-desc{
  font-size:var(--text-body-lg);line-height:var(--leading-body-lg);
  color:var(--ink-500);margin-top:10px;
}

.heynds-two-col{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:center;
}
.heynds-feature-list{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.heynds-feature-list .feat{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14.5px;color:var(--ink-700);font-weight:500;
}
.heynds-feature-list .feat i{
  color:var(--ww-blue-600);font-weight:700;margin-top:3px;font-size:13px;
}

/* grids */
.heynds-grid{display:grid;gap:20px;}
.heynds-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.heynds-resource-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* tag */
.heynds-tag{
  display:inline-flex;padding:4px 14px;border-radius:999px;gap:8px;align-items:center;
  font:700 11.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ww-yellow-600);background:linear-gradient(180deg,rgba(240,192,24,.18),rgba(240,192,24,.07));
  border:1px solid rgba(240,192,24,.42);
}

/* link */
.heynds-link{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ww-blue-600);font-weight:700;transition:gap .3s var(--ease),color .3s ease;
}
.heynds-link:hover{gap:16px;color:var(--ww-blue-500);}

/* card */
.heynds-card{
  background:#fff;border:1px solid var(--ink-200);border-radius:12px;
  padding:22px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s ease;
  position:relative;overflow:hidden;
}
.heynds-card::before{
  content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--ww-blue-500),var(--ww-cyan-400));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.heynds-card:hover::before{transform:scaleX(1)}
.heynds-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px -22px rgba(4,8,15,.24);border-color:rgba(90,160,245,.38);}
.heynds-card-soft{
  background:linear-gradient(180deg,rgba(24,96,216,.06),rgba(255,255,255,.95));
  border:1px solid rgba(90,160,245,.22);
}
.heynds-card-tag{
  display:inline-flex;padding:4px 10px;border-radius:999px;
  font:700 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ww-blue-700);background:rgba(24,96,216,.09);
  border:1px solid rgba(24,96,216,.18);
}
.heynds-card-tag-overlay{position:absolute;top:14px;left:14px;z-index:2;}
.heynds-card-title{
  font-family:var(--f-display);font-size:18px;font-weight:700;
  color:var(--ink-900);margin-top:12px;line-height:1.3;
}
.heynds-card-desc{
  color:var(--ink-500);font-size:14px;line-height:1.6;margin-top:10px;
}
.heynds-card-meta{
  color:var(--ink-400);font-size:12.5px;margin-top:14px;font-family:var(--f-mono);
}

/* resource card (has image) */
.heynds-resource-card{
  position:relative;background:#fff;border:1px solid var(--ink-200);border-radius:12px;
  padding:22px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s ease;
  display:flex;flex-direction:column;overflow:hidden;
}
.heynds-resource-card::before{
  content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--ww-blue-500),var(--ww-cyan-400));
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);z-index:3;
}
.heynds-resource-card:hover::before{transform:scaleX(1)}
.heynds-resource-card:hover{transform:translateY(-4px);box-shadow:0 20px 42px -22px rgba(4,8,15,.28);border-color:rgba(90,160,245,.38);}
.heynds-resource-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px;}
.heynds-resource-media{
  position:relative;margin:-22px -22px 16px;
  aspect-ratio:16/10;overflow:hidden;background:var(--ink-050);
}
.heynds-resource-thumb{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .75s var(--ease);
}
.heynds-resource-card:hover .heynds-resource-thumb{transform:scale(1.08);}
.heynds-resource-title{
  font-family:var(--f-display);font-size:17px;font-weight:700;
  color:var(--ink-900);line-height:1.35;
}
.heynds-resource-desc{color:var(--ink-500);font-size:13.5px;line-height:1.6;margin-top:10px;flex:1;}
.heynds-resource-cta{
  margin-top:16px;font:700 13px/1 var(--font-mono);letter-spacing:.03em;
  color:var(--ww-blue-600);
}
.heynds-resource-card:hover .heynds-resource-cta{color:var(--ww-blue-500);}

/* =========================================================
   5.  Page Hero (inner pages) — navy-tech deep blue
   ========================================================= */
.heynds-page-hero{
  position:relative;overflow:hidden;padding:clamp(56px,7.5vh,96px) 0 clamp(36px,5.2vh,64px);
  color:#fff;
  background:
    radial-gradient(88% 80% at 14% 0%, rgba(43,124,240,.26) 0%, transparent 56%),
    radial-gradient(60% 70% at 88% 112%, rgba(47,196,222,.18) 0%, transparent 62%),
    linear-gradient(180deg,#04080F 0%,#061B4A 44%,#0A2A6E 100%);
  border-bottom:1px solid rgba(90,160,245,.28);
  isolation:isolate;
}
.heynds-page-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(90,160,245,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,160,245,.07) 1px, transparent 1px),
    linear-gradient(rgba(90,160,245,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,160,245,.035) 1px, transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 70%,transparent 100%);
}
.heynds-page-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%, rgba(90,160,245,.6) 40%, rgba(47,196,222,.5) 60%, transparent 100%);
}
.heynds-page-hero-top{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  position:relative;z-index:2;
}
.heynds-page-hero .heynds-tag{
  color:#F7D44C;background:linear-gradient(180deg,rgba(240,192,24,.22),rgba(240,192,24,.08));
  border-color:rgba(247,212,76,.42);
}
.heynds-page-title{
  font-family:var(--f-display);
  font-size:clamp(32px,4.6vw,52px);
  font-weight:800;letter-spacing:-.032em;line-height:1.06;
  color:#fff;text-shadow:0 3px 24px rgba(0,0,0,.45);
  margin:14px 0 0;
}
.heynds-page-sub{
  color:rgba(195,221,252,.82);font-size:16px;line-height:1.68;
  margin-top:14px;max-width:620px;
}

/* filters / pills — navy base */
.heynds-filters{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;position:relative;z-index:2;
}
.heynds-filters .pill{
  display:inline-flex;align-items:center;
  padding:7px 16px;border-radius:999px;
  border:1px solid rgba(143,192,249,.26);background:rgba(148,180,224,.06);
  color:rgba(244,246,249,.82);font-size:13.5px;font-weight:500;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:all .3s var(--ease);
}
.heynds-filters .pill:hover{
  border-color:rgba(143,192,249,.6);color:#fff;background:rgba(43,124,240,.14);
}
.heynds-filters .pill.active{
  background:linear-gradient(180deg,var(--ww-yellow-400),var(--ww-yellow-500));
  border-color:var(--ww-yellow-500);color:var(--ink-900);
  box-shadow:0 10px 24px -12px rgba(240,192,24,.62),inset 0 1px 0 rgba(255,255,255,.55);
  font-weight:700;
}

.heynds-sort-descs{margin-top:20px;display:flex;flex-direction:column;gap:6px;position:relative;z-index:2;}
.heynds-sort-desc{
  padding:10px 14px;border-left:3px solid var(--ww-yellow-500);
  background:rgba(6,27,74,.5);
  border-radius:0 6px 6px 0;color:rgba(244,246,249,.82);font-size:13.5px;
  border:1px solid rgba(143,192,249,.16);border-left:3px solid var(--ww-yellow-500);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}

/* search box in page-hero (dark navy) */
.heynds-resource-search{
  display:flex;align-items:center;gap:8px;
  background:rgba(148,180,224,.06);
  border:1px solid rgba(143,192,249,.28);border-radius:999px;
  padding:5px 5px 5px 20px;min-width:min(100%,360px);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 26px -14px rgba(4,8,15,.55);
  position:relative;z-index:2;
}
.heynds-resource-search input{
  flex:1;border:0;outline:0;background:transparent;padding:8px 0;
  font-size:14px;color:#fff;font-family:inherit;min-width:0;
}
.heynds-resource-search input::placeholder{color:rgba(195,221,252,.52);}

/* detail page */
.cms-detail-box{
  background:#fff;border:1px solid var(--ink-200);border-radius:12px;padding:36px;
  box-shadow:0 10px 30px -18px rgba(4,8,15,.16);
  position:relative;overflow:hidden;
}
.cms-detail-box::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--ww-yellow-500),var(--ww-blue-500),var(--ww-cyan-400));
}
.detail-content{font-size:15.5px;line-height:1.8;color:var(--ink-700);}
.detail-content h1,.detail-content h2,.detail-content h3{color:var(--ink-900);font-family:var(--f-display);letter-spacing:-.015em;}
.detail-content h2{font-size:22px;margin:30px 0 14px;}
.detail-content h3{font-size:18px;margin:22px 0 12px;}
.detail-content img{max-width:100%;height:auto;border-radius:8px;margin:10px 0;box-shadow:0 8px 22px -12px rgba(4,8,15,.22);}
.detail-content blockquote{
  margin:18px 0;padding:14px 18px 14px 22px;
  border-left:3px solid var(--ww-yellow-500);background:rgba(240,192,24,.06);
  border-radius:0 6px 6px 0;color:var(--ink-700);
}
.detail-content code{padding:2px 6px;background:var(--ink-050);border:1px solid var(--ink-200);border-radius:4px;font-size:13px;color:var(--ww-blue-700);font-family:var(--f-mono);}
.detail-content table{border-collapse:separate;border-spacing:0;border:1px solid var(--ink-200);border-radius:8px;overflow:hidden;width:100%;margin:14px 0;}
.detail-content th{background:linear-gradient(180deg,rgba(24,96,216,.08),rgba(24,96,216,.03));color:var(--ww-blue-900);font-weight:700;text-align:left;padding:12px 16px;font-family:var(--f-display);}
.detail-content td{padding:10px 16px;border-top:1px solid var(--ink-050);color:var(--ink-700);}
.detail-nav{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--ink-200);
  display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:13.5px;color:var(--ink-500);
}
.detail-nav a{color:var(--ww-blue-600);font-weight:600;}
.detail-nav a:hover{color:var(--ww-blue-500);}

/* pagination */
.text-center{text-align:center;}
.pagination{display:inline-flex;gap:6px;list-style:none;padding:0;margin:0;}
.pagination li{display:inline-flex;}
.pagination li a,.pagination li span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 14px;
  border:1px solid var(--ink-200);background:#fff;border-radius:8px;
  color:var(--ink-700);font-size:13.5px;font-weight:500;
  transition:all .3s var(--ease);
}
.pagination li.active a,.pagination li.active span{
  background:linear-gradient(180deg,var(--ww-blue-500),var(--ww-blue-600));
  color:#fff;border-color:var(--ww-blue-600);
  box-shadow:0 10px 22px -14px rgba(24,96,216,.65);
}
.pagination li a:hover{
  border-color:var(--ww-blue-400);color:var(--ww-blue-600);transform:translateY(-1px);
  box-shadow:0 8px 18px -14px rgba(24,96,216,.4);
}

/* =========================================================
   6.  Footer
   ========================================================= */
.heynds-footer{
  background:var(--ww-blue-900);
  color:#fff;
  padding:64px 0 28px;
  margin-top:0;
  position:relative;
}
.heynds-footer-grid{
  display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:40px;
}
.heynds-footer-brand{
  font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-.01em;
  color:var(--ww-yellow-400);
}
.heynds-footer-desc{color:rgba(255,255,255,.65);font-size:13.5px;line-height:1.7;margin-top:14px;max-width:360px;}
.heynds-footer-meta{margin-top:20px;display:flex;flex-direction:column;gap:8px;color:rgba(255,255,255,.7);font-size:13.5px;}
.heynds-footer-meta a{color:rgba(255,255,255,.78);}
.heynds-footer-meta a:hover{color:var(--ww-yellow-400);}
.heynds-footer-title{
  font-family:var(--f-display);font-size:14.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ww-blue-200);margin-bottom:18px;
}
.heynds-footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.heynds-footer-links li a{color:rgba(255,255,255,.7);font-size:13.5px;transition:color .2s ease,padding-left .2s ease;display:inline-block;}
.heynds-footer-links li a:hover{color:var(--ww-yellow-400);padding-left:4px;}
.heynds-footer-bottom{
  margin-top:48px;padding-top:20px;
  border-top:1px solid rgba(143,192,249,.16);
  color:rgba(255,255,255,.45);font-size:12.5px;text-align:center;
}

/* WhatsApp floating */
.heynds-home-whatsapp{
  position:fixed;right:22px;bottom:22px;z-index:80;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.55),0 0 0 6px rgba(37,211,102,.14);
  font-size:24px;
  transition:transform .3s var(--ease),box-shadow .3s ease;
  animation:ww-wa-pulse 2.8s ease-in-out infinite;
}
.heynds-home-whatsapp:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 32px -8px rgba(37,211,102,.7),0 0 0 8px rgba(37,211,102,.18);color:#fff;}
@keyframes ww-wa-pulse{
  0%,100%{box-shadow:0 8px 24px -6px rgba(37,211,102,.55),0 0 0 6px rgba(37,211,102,.14);}
  50%{box-shadow:0 10px 28px -6px rgba(37,211,102,.65),0 0 0 10px rgba(37,211,102,.08);}
}

/* =========================================================
   7.  HERO — Home Screen (Strict Reference Design)
   Full-viewport first screen, scrollable content below
   ========================================================= */
body.ww-home-body{
  margin:0;background:var(--ink-050);color:var(--ink-900);
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.ww-hero-shell{position:relative;height:100vh;height:100svh;height:calc(var(--vh,1vh) * 100);width:100%;overflow:hidden;isolation:isolate;min-height:640px;background:var(--hero-base);color:#fff;}

/* stage (video background + overlays) */
.ww-stage{position:absolute;inset:0;z-index:0;overflow:hidden;}
.ww-stage-media{position:absolute;inset:-36px;will-change:transform;}
.ww-stage-video{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:44% 50%;
  opacity:0;transform:scale(1.055);
  filter:saturate(1.06) contrast(1.03);
  transition:opacity 1.5s var(--ease),transform 2.4s var(--ease);
  background:var(--hero-deep) url("../video/poster.jpg") center/cover no-repeat;
}
.ww-ready .ww-stage-video{opacity:1;transform:scale(1);}

.ww-stage-tint{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(var(--hero-tint),.55) 0%, rgba(var(--hero-tint),0) 34%),
    linear-gradient(90deg, rgba(43,124,240,.14) 0%, rgba(43,124,240,.05) 38%, rgba(43,124,240,0) 62%);
  mix-blend-mode:screen;}
.ww-stage-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      #04080F 0%,#04080F 14%,rgba(4,10,20,.955) 24%,rgba(5,14,29,.86) 34%,
      rgba(6,19,41,.62) 44%,rgba(6,22,48,.33) 54%,rgba(6,24,52,.13) 64%,
      rgba(6,24,52,.03) 72%,rgba(6,24,52,0) 80%),
    linear-gradient(180deg, rgba(4,8,15,.86) 0%, rgba(4,8,15,.28) 12%, rgba(4,8,15,0) 26%),
    linear-gradient(0deg, rgba(4,8,15,.92) 0%, rgba(4,8,15,.42) 12%, rgba(4,8,15,0) 30%);}

/* blueprint grid */
.ww-stage-grid,.ww-stage-grid-live{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(90,160,245,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,160,245,.10) 1px, transparent 1px),
    linear-gradient(rgba(90,160,245,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,160,245,.055) 1px, transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center;
}
.ww-stage-grid{
  opacity:.5;
  -webkit-mask-image:radial-gradient(130% 105% at 22% 30%, #000 0%, rgba(0,0,0,.55) 42%, transparent 74%);
          mask-image:radial-gradient(130% 105% at 22% 30%, #000 0%, rgba(0,0,0,.55) 42%, transparent 74%);
}
.ww-stage-grid-live{
  opacity:0;transition:opacity 1.4s var(--ease) .9s;
  -webkit-mask-image:radial-gradient(460px circle at var(--mx) var(--my), rgba(0,0,0,.9), rgba(0,0,0,.22) 52%, transparent 76%);
          mask-image:radial-gradient(460px circle at var(--mx) var(--my), rgba(0,0,0,.9), rgba(0,0,0,.22) 52%, transparent 76%);
}
.ww-ready .ww-stage-grid-live{opacity:.85}

/* specular sweep on load */
.ww-stage-sweep{position:absolute;inset:-20% -40%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(102deg,
    rgba(255,255,255,0) 42%,rgba(180,220,255,.10) 49%,rgba(255,255,255,.16) 51%,
    rgba(180,220,255,.08) 54%,rgba(255,255,255,0) 62%);
  transform:translateX(-46%);opacity:0;}
.ww-ready .ww-stage-sweep{animation:ww-sweep 2.5s var(--ease) 1s 1 both;}
@keyframes ww-sweep{
  0%{transform:translateX(-46%);opacity:0}
  18%{opacity:.9}
  100%{transform:translateX(46%);opacity:0}
}

/* cursor light */
.ww-stage-glow{
  position:absolute;top:0;left:0;z-index:2;
  width:1180px;height:1180px;margin:-590px 0 0 -590px;
  border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle,
      rgba(43,124,240,.26) 0%,rgba(43,124,240,.13) 30%,
      rgba(24,96,216,.05) 52%,rgba(24,96,216,0) 70%);
  transition:opacity 1.6s var(--ease);will-change:transform;
}
.ww-stage-glow-cyan{
  width:680px;height:680px;margin:-340px 0 0 -340px;
  background:radial-gradient(circle,
      rgba(47,196,222,.20) 0%,rgba(47,196,222,.08) 34%,rgba(47,196,222,0) 68%);
  transition:opacity 2s var(--ease) .3s;
}
.ww-ready .ww-stage-glow{opacity:1}
.ww-ready .ww-stage-glow-cyan{opacity:.8}

/* film grain */
.ww-stage-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:ww-grain 7s steps(6) infinite;}
@keyframes ww-grain{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-3%,2%,0)}
  40%{transform:translate3d(2%,-3%,0)}
  60%{transform:translate3d(-2%,-2%,0)}
  80%{transform:translate3d(3%,1%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* vignette + hairline frame */
.ww-stage-vig{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(128% 118% at 66% 46%, rgba(0,0,0,0) 42%, rgba(0,0,0,.34) 78%, rgba(0,0,0,.62) 100%),
    linear-gradient(90deg, rgba(90,160,245,.10) 0 1px, transparent 1px) 0 0/1px 100% no-repeat;}

/* HUD corners and seam */
.ww-hud{position:absolute;inset:0;z-index:1;pointer-events:none;will-change:transform;}
.ww-hud-corner{position:absolute;width:30px;height:30px;opacity:0;
  transition:opacity 1s var(--ease) 1.5s,transform 1.4s var(--ease) 1.5s;}
.ww-ready .ww-hud-corner{opacity:1;transform:none!important}
.ww-hud-corner-tr{top:calc(var(--navh) + 16px);right:26px;
  border-top:1px solid rgba(90,160,245,.5);border-right:1px solid rgba(90,160,245,.5);
  transform:translate(-8px,8px)}
.ww-hud-corner-br{bottom:26px;right:26px;
  border-bottom:1px solid rgba(90,160,245,.5);border-right:1px solid rgba(90,160,245,.5);
  transform:translate(-8px,-8px)}

.ww-hud-seam{position:absolute;top:13%;bottom:13%;left:48.6%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(90,160,245,.30) 16%,rgba(90,160,245,.30) 84%,transparent);
  transform-origin:top center;}
.ww-hud-seam::after{content:'';position:absolute;left:-3px;top:0;bottom:0;width:7px;
  background-image:linear-gradient(90deg,transparent 0 6px,rgba(90,160,245,.55) 6px 7px);
  background-size:7px 60px;background-repeat:repeat-y;}
.ww-hud-tag{position:absolute;left:48.6%;top:50%;
  transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font:600 9.5px/1 var(--font-mono);letter-spacing:.34em;text-transform:uppercase;
  color:rgba(143,192,249,.62);white-space:nowrap;
  padding:14px 6px;
  background:linear-gradient(180deg,rgba(4,8,15,0) 0%,rgba(4,8,15,.92) 14%,rgba(4,8,15,.92) 86%,rgba(4,8,15,0) 100%);}

/* =========================================================
   8.  Hero NAV (Home only, overlay)
   ========================================================= */
.ww-hero-nav{
  position:absolute;top:0;left:0;right:0;z-index:5;height:var(--navh);
  display:flex;align-items:center;gap:clamp(16px,2.6vw,44px);
  padding:0 var(--pad);
}
.ww-hero-nav::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,8,15,.82) 0%,rgba(4,8,15,.42) 58%,rgba(4,8,15,0) 100%);}

.ww-hero-brand{display:block;flex:0 0 auto;opacity:0;transform:translateY(-10px);
  animation:ww-navin .9s var(--ease) .12s both;}
.ww-hero-brand img{display:block;width:clamp(124px,10.6vw,168px);height:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
  transition:opacity .35s var(--ease),filter .35s var(--ease);}
.ww-hero-brand:hover img{opacity:.86;filter:drop-shadow(0 2px 14px rgba(43,124,240,.5));}
.ww-hero-brand:focus-visible{outline:2px solid var(--ww-blue-400);outline-offset:6px;border-radius:2px;}

.ww-hero-links{display:flex;align-items:center;gap:clamp(14px,1.9vw,34px);
  margin-left:clamp(8px,2vw,34px);
  opacity:0;transform:translateY(-10px);animation:ww-navin .9s var(--ease) .2s both;}
.ww-hero-links ul{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:clamp(14px,1.9vw,34px);}
.ww-hero-links a{
  position:relative;font-size:13.5px;font-weight:500;letter-spacing:.005em;
  color:rgba(232,240,247,.76);text-decoration:none;padding:8px 2px;transition:color .3s var(--ease);}
.ww-hero-links a::after{content:'';position:absolute;left:2px;right:2px;bottom:2px;height:1px;
  background:linear-gradient(90deg,var(--ww-blue-400),var(--ww-cyan-400));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.ww-hero-links a:hover{color:#fff}
.ww-hero-links a:hover::after{transform:scaleX(1)}
.ww-hero-links a.active{color:#fff;}
.ww-hero-links a.active::after{transform:scaleX(1)}

.ww-hero-right{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  opacity:0;transform:translateY(-10px);animation:ww-navin .9s var(--ease) .3s both;}
@keyframes ww-navin{to{opacity:1;transform:none}}

.ww-hero-lang{display:inline-flex;align-items:center;gap:7px;
  font:600 12px/1 var(--font-mono);letter-spacing:.14em;
  color:rgba(232,240,247,.8);background:none;border:0;cursor:pointer;padding:9px 4px;
  transition:color .3s var(--ease);}
.ww-hero-lang svg{transition:transform .4s var(--ease)}
.ww-hero-lang:hover{color:#fff}
.ww-hero-lang:hover svg{transform:translateY(2px)}

/* hero search (transparent on dark) */
.ww-hero-search{
  position:relative;display:flex;align-items:center;
  height:38px;width:38px;border-radius:999px;
  border:1px solid rgba(143,192,249,.25);
  background:rgba(148,180,224,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:width .4s var(--ease),border-color .3s ease,box-shadow .3s ease;
  overflow:hidden;
}
.ww-hero-search:hover,.ww-hero-search:focus-within{
  width:240px;border-color:rgba(143,192,249,.6);
  box-shadow:0 8px 20px -10px rgba(43,124,240,.5);
}
.ww-hero-search input{
  flex:1;min-width:0;height:100%;padding:0 0 0 16px;
  border:0;outline:0;background:transparent;
  font-size:13px;color:#fff;font-family:inherit;
  opacity:0;width:0;padding-left:0;
  transition:opacity .25s ease .05s,padding .25s ease;
}
.ww-hero-search input::placeholder{color:rgba(195,221,252,.5);}
.ww-hero-search:hover input,.ww-hero-search:focus-within input{opacity:1;width:auto;padding-left:16px;}
.ww-hero-search button{
  position:absolute;right:0;top:0;width:38px;height:38px;
  border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  color:rgba(195,221,252,.78);transition:color .2s ease;
}
.ww-hero-search:hover button,.ww-hero-search:focus-within button{color:var(--ww-yellow-400);}

/* hero dropdown (lang) */
.ww-hero-right .dropdown{position:relative;}
.ww-hero-right .dropdown-menu{
  position:absolute;top:100%;right:0;left:auto;min-width:160px;margin-top:6px;
  padding:6px 0;border-radius:8px;border:1px solid rgba(143,192,249,.22);
  background:rgba(6,27,74,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6);z-index:70;
}
.ww-hero-right .dropdown-menu li{list-style:none;}
.ww-hero-right .dropdown-menu > li > a{
  display:block;padding:8px 16px;font-size:13px;color:rgba(244,246,249,.8);
}
.ww-hero-right .dropdown-menu > li.active > a,
.ww-hero-right .dropdown-menu > li > a:hover{color:#fff;background:rgba(43,124,240,.18);}

/* =========================================================
   9.  Hero Buttons
   ========================================================= */
.ww-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:clamp(46px,3.75vw,56px);padding:0 clamp(18px,1.6vw,30px);
  border-radius:6px;border:1px solid transparent;
  font-family:inherit;font-size:clamp(13px,1.02vw,15px);font-weight:700;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),
             background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.ww-btn span{position:relative;z-index:2}
.ww-btn-arrow{position:relative;z-index:2;transition:transform .5s var(--ease)}
.ww-btn:focus-visible{outline:2px solid var(--ww-yellow-500);outline-offset:3px}

.ww-btn-primary{
  color:var(--ink-900);
  background:linear-gradient(180deg,var(--ww-yellow-400) 0%,var(--ww-yellow-500) 52%,#E0B00C 100%);
  box-shadow:0 12px 30px -14px rgba(240,192,24,.62),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.16);
}
.ww-btn-primary::before{content:'';position:absolute;inset:-2px;z-index:1;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.46) 48%,rgba(255,255,255,.2) 55%,transparent 68%);
  transform:translateX(-135%);transition:transform 1s var(--ease);}
.ww-btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 22px 44px -16px rgba(240,192,24,.78),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.18);}
.ww-btn-primary:hover::before{transform:translateX(135%)}
.ww-btn-primary:active{transform:translateY(0) scale(.985)}
.ww-btn-primary:hover .ww-btn-arrow{transform:translateX(5px)}
.ww-btn-primary:active .ww-btn-arrow{transform:translateX(9px)}

.ww-btn-ghost{
  color:rgba(244,246,249,.94);
  background:rgba(148,180,224,.045);
  border-color:rgba(168,178,191,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.ww-btn-ghost::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(43,124,240,.34),rgba(24,96,216,.20));
  opacity:0;transition:opacity .45s var(--ease);}
.ww-btn-ghost:hover{transform:translateY(-2px);color:#fff;border-color:rgba(143,192,249,.72);
  box-shadow:0 16px 34px -18px rgba(43,124,240,.8),inset 0 1px 0 rgba(255,255,255,.14);}
.ww-btn-ghost:hover::before{opacity:1}
.ww-btn-ghost:active{transform:translateY(0) scale(.985)}

.ww-btn-sm{height:42px;padding:0 clamp(14px,1.25vw,22px);font-size:12.5px;border-radius:5px}

/* =========================================================
   10. Hero Copy Column (left)
   ========================================================= */
.ww-hero-body{
  position:relative;z-index:3;
  height:calc(100% - var(--navh));
  margin-top:var(--navh);
  display:grid;
  grid-template-columns:minmax(0,50.5%) minmax(0,49.5%);
  padding:0 var(--pad);
}
.ww-copy-col{
  container-type:inline-size;
  display:grid;grid-template-rows:minmax(0,1fr) auto;
  min-height:0;padding-bottom:clamp(20px,3.4vh,44px);
  will-change:transform;
}
.ww-copy{align-self:center;min-width:0;padding:clamp(6px,1.4vh,18px) 0;}

.ww-eyebrow{display:flex;align-items:center;gap:14px;
  margin:0 0 clamp(14px,2.1vh,24px);
  font:700 clamp(10.5px,.82vw,12.5px)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ww-yellow-500);}
.ww-eyebrow-rule{display:block;width:0;height:2px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--ww-yellow-500),rgba(240,192,24,.25));
  border-radius:2px;animation:ww-rulein .8s var(--ease) .38s both;}
@keyframes ww-rulein{from{width:0}to{width:clamp(22px,3.4vw,42px)}}
.ww-eyebrow-txt{opacity:0;animation:ww-risein .9s var(--ease) .5s both}
.ww-eyebrow-dot{color:rgba(240,192,24,.78);margin:0 2px}

.ww-hero-h1{margin:0;
  font-size:clamp(30px,min(5.1vw,8.35vh),74px);
  line-height:1.035;font-weight:800;letter-spacing:-.035em;
  color:#fff;text-shadow:0 3px 34px rgba(2,6,14,.72),0 1px 3px rgba(2,6,14,.5);}
@supports (font-size:1cqw){
  .ww-hero-h1{font-size:min(10.9cqw,8.35vh,90px)}
}
.ww-h1-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;}
.ww-h1-line > span{
  display:block;white-space:nowrap;
  transform:translateY(112%);animation:ww-linein 1.15s var(--ease) both;}
.ww-h1-line:nth-child(1) > span{animation-delay:.5s}
.ww-h1-line:nth-child(2) > span{animation-delay:.62s}
.ww-h1-line:nth-child(3) > span{animation-delay:.74s}
@keyframes ww-linein{to{transform:translateY(0)}}
.ww-hero-h1 em{font-style:normal;color:var(--ww-yellow-500);}

.ww-lede{margin:clamp(14px,2.1vh,24px) 0 0;max-width:35em;
  font-size:clamp(13px,1.16vw,17px);line-height:1.62;font-weight:400;
  color:rgba(210,216,224,.82);text-shadow:0 1px 18px rgba(2,6,14,.7);
  animation:ww-risein .95s var(--ease) 1.02s both;}
.ww-lede strong{color:rgba(244,246,249,.98);font-weight:600}
.ww-lede .nb{white-space:nowrap}
@keyframes ww-risein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.ww-actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,.95vw,16px);
  margin-top:clamp(18px,3vh,34px);animation:ww-risein .95s var(--ease) 1.2s both;}

.ww-chips{display:flex;flex-wrap:wrap;gap:clamp(6px,.5vw,9px);
  width:max-content;max-width:calc(100% + 2.5vw);
  margin:clamp(14px,2.4vh,26px) 0 0;padding:0;list-style:none;}
.ww-chip{display:inline-flex;align-items:center;
  padding:0 clamp(8px,.75vw,13px);height:clamp(26px,2.3vw,32px);
  border-radius:999px;border:1px solid rgba(90,160,245,.30);
  background:linear-gradient(180deg,rgba(43,124,240,.14),rgba(24,96,216,.07));
  color:var(--ww-blue-200);
  font:600 clamp(9.5px,.72vw,11.5px)/1 var(--font-mono);letter-spacing:.025em;white-space:nowrap;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:ww-risein .8s var(--ease) both;
  transition:border-color .4s var(--ease),color .4s var(--ease),
             background-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);}
.ww-chip:nth-child(1){animation-delay:1.38s;border-color:rgba(90,160,245,.46);color:#fff;
  background:linear-gradient(180deg,rgba(43,124,240,.24),rgba(24,96,216,.12))}
.ww-chip:nth-child(2){animation-delay:1.46s}
.ww-chip:nth-child(3){animation-delay:1.54s}
.ww-chip:hover{transform:translateY(-2px);border-color:rgba(143,192,249,.78);color:#fff;
  box-shadow:0 12px 26px -16px rgba(43,124,240,.9),inset 0 1px 0 rgba(255,255,255,.12);}

/* =========================================================
   11. Blueprint Plate + Reticle
   ========================================================= */
.ww-blueprint{
  position:relative;align-self:end;
  width:clamp(206px,17.2vw,262px);height:clamp(96px,8.2vw,118px);
  border:1px solid rgba(90,160,245,.24);border-radius:3px;
  background:linear-gradient(180deg,rgba(24,96,216,.10),rgba(6,27,74,.05));
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;animation:ww-fadein 1.1s var(--ease) 1.62s both;will-change:transform;
}
@keyframes ww-fadein{to{opacity:1}}
.ww-blueprint::before,.ww-blueprint::after{content:'';position:absolute;width:9px;height:9px;border:1px solid rgba(143,192,249,.5);}
.ww-blueprint::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.ww-blueprint::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.ww-blueprint-words{
  position:absolute;right:clamp(12px,1vw,18px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;
  font:700 clamp(8.5px,.7vw,10.5px)/1.95 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(195,221,252,.74);animation:ww-fadein 1s var(--ease) 2s both;}
.ww-blueprint-words span{position:relative;padding-left:13px;}
.ww-blueprint-words span::before{
  content:'';position:absolute;left:0;top:50%;width:7px;height:1px;
  background:rgba(143,192,249,.5);}
.ww-blueprint-art{
  position:absolute;left:clamp(11px,.95vw,17px);top:50%;transform:translateY(-50%);
  width:clamp(74px,6.4vw,100px);height:auto;color:rgba(143,192,249,.66);}
.ww-blueprint-art [data-draw]{
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  animation:ww-draw 1.9s var(--ease) var(--d,1.9s) both;}
@keyframes ww-draw{to{stroke-dashoffset:0}}

/* reticle */
.ww-reticle{
  display:none;position:absolute;
  left:clamp(26%,29vw,32%);bottom:clamp(6%,7.5vh,11%);
  z-index:2;width:clamp(112px,10.4vw,164px);aspect-ratio:1;
  pointer-events:none;opacity:0;
  animation:ww-fadein 1.3s var(--ease) 1.85s both;will-change:transform;
}
.ww-reticle svg{width:100%;height:100%;display:block;overflow:visible}
.ww-reticle .r-ring{fill:none;stroke:rgba(90,160,245,.34);stroke-width:1;stroke-dasharray:3 5;
  transform-origin:center;animation:ww-spin 46s linear infinite;}
.ww-reticle .r-ring-in{stroke:rgba(143,192,249,.2);stroke-dasharray:1 9;
  animation-duration:32s;animation-direction:reverse;}
.ww-reticle .r-cross{stroke:rgba(143,192,249,.4);stroke-width:1}
.ww-reticle .r-dot{fill:var(--ww-cyan-400);filter:drop-shadow(0 0 6px rgba(47,196,222,.95))}
.ww-reticle .r-pulse{fill:none;stroke:rgba(47,196,222,.55);stroke-width:1;transform-origin:center;
  animation:ww-pulse 3.4s var(--ease-io) infinite;}
@keyframes ww-spin{to{transform:rotate(360deg)}}
@keyframes ww-pulse{
  0%{transform:scale(.36);opacity:0}
  22%{opacity:.85}
  100%{transform:scale(1.4);opacity:0}
}
.ww-reticle-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:3px 8px;border-radius:2px;background:rgba(4,8,15,.78);
  font:600 clamp(8.5px,.66vw,10px)/1.4 var(--font-mono);letter-spacing:.16em;
  color:rgba(195,221,252,.86);white-space:nowrap;}

/* hero playback toggle */
.ww-playback{
  position:absolute;right:26px;bottom:26px;z-index:4;
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(143,192,249,.28);
  background:rgba(148,180,224,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:rgba(195,221,252,.85);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease);opacity:0;
  animation:ww-fadein 1s var(--ease) 1.9s both;
}
.ww-playback:hover{color:#fff;border-color:rgba(143,192,249,.6);transform:scale(1.06);}
.ww-playback svg{width:14px;height:14px;}

/* =========================================================
   12. Hero Responsive
   ========================================================= */
@media (max-width:1240px){
  .ww-reticle{left:auto;right:calc(49.5% - clamp(112px,12vw,150px) - 12px)}
}
@media (min-width:1300px) and (min-height:840px){
  .ww-reticle{display:block}
}
@media (max-width:1024px){
  :root{--navh:68px}
  .ww-hero-links{display:none}
  .ww-hero-body{grid-template-columns:minmax(0,1fr);padding-right:var(--pad)}
  .ww-copy-col{grid-template-rows:minmax(0,1fr);place-items:start stretch}
  .ww-copy{align-self:start;max-width:660px;padding-top:clamp(10px,3.6vh,46px)}
  .ww-chips{width:auto;max-width:100%}
  .ww-hero-h1{font-size:min(10.9cqw,8.4vh,62px)}
  .ww-hud-seam,.ww-hud-tag{display:none}
  .ww-stage-media{inset:-24px}
  .ww-stage-video{object-position:62% 50%}
  .ww-stage-scrim{background:
      linear-gradient(180deg,
        rgba(4,8,15,.98) 0%, rgba(4,8,15,.96) 32%, rgba(5,12,26,.88) 48%,
        rgba(6,17,36,.62) 64%, rgba(6,20,44,.30) 80%, rgba(6,20,44,.10) 100%),
      linear-gradient(90deg,
        rgba(4,8,15,.86) 0%, rgba(4,8,15,.52) 46%, rgba(4,8,15,.16) 76%, rgba(4,8,15,0) 100%);}
  .ww-blueprint{display:none}
}
@media (max-height:740px){
  .ww-blueprint{display:none}
  .ww-lede{font-size:clamp(12.5px,1.1vw,15px)}
}
@media (max-height:620px){
  :root{--navh:60px}
  .ww-eyebrow{margin-bottom:10px}
  .ww-chips{margin-top:12px}
}
@media (max-width:640px){
  .ww-hero-lang{display:none}
  .ww-hero-h1{letter-spacing:-.028em}
  .ww-lede{max-width:34em}
  .ww-hide-sm{display:none}
  .ww-stage-video{object-position:64% 50%}
}

/* =========================================================
   13. Reduced Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .ww-stage-grain,.ww-stage-sweep,
  .ww-reticle .r-ring,.ww-reticle .r-pulse{animation:none!important}
  .ww-h1-line{overflow:visible;padding-bottom:0;margin-bottom:0}
  .ww-h1-line > span{transform:none!important;animation:none!important}
  .ww-lede,.ww-actions,.ww-chip{transform:none!important}
  .ww-stage-video{opacity:1!important;transform:none!important;transition:opacity .5s ease}
  .ww-hud-corner{transform:none!important}
  .ww-eyebrow-rule{width:clamp(22px,3.4vw,42px);animation:none!important}
  .ww-blueprint-art [data-draw]{animation:none!important;stroke-dashoffset:0!important}
  .ww-hero-brand,.ww-hero-links,.ww-hero-right,
  .ww-eyebrow-txt,.ww-lede,.ww-actions,.ww-chip,
  .ww-blueprint,.ww-blueprint-words,.ww-reticle{
    animation-duration:.5s!important;animation-delay:0s!important;
    animation-timing-function:ease!important;}
  .ww-hud-corner,.ww-stage-glow,.ww-stage-glow-cyan,.ww-stage-grid-live{
    transition-duration:.5s!important;transition-delay:0s!important;}
  .ww-hud-seam,.ww-hud-tag{opacity:.4}
}

/* =========================================================
   14. Mobile Nav — winwin (overlay)
   ========================================================= */
@media (max-width:991px){
  :root{--navh:68px}
  .ww-page-tools{display:flex;}
  .ww-page-nav{
    position:fixed;top:0;right:-100%;width:min(85%,360px);height:100%;
    background:linear-gradient(180deg,#04080F 0%,#061B4A 50%,#0A2A6E 100%);
    border-left:1px solid rgba(90,160,245,.22);
    flex-direction:column;align-items:stretch;gap:0;padding:calc(var(--navh) + 10px) 20px 24px;
    z-index:85;transition:right .4s var(--ease);
    box-shadow:-20px 0 60px -10px rgba(4,8,15,.6);
    overflow-y:auto;
  }
  body.heynds-nav-open .ww-page-nav{right:0;}
  body.heynds-nav-open::before{
    content:'';position:fixed;inset:0;background:rgba(4,8,15,.55);z-index:82;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  }
  .ww-page-nav-list{flex-direction:column;align-items:stretch;gap:0;padding-bottom:16px;
    border-bottom:1px solid rgba(143,192,249,.18);}
  .ww-page-nav-list > li > a{padding:14px 4px;border-bottom:1px solid rgba(143,192,249,.1);
    color:rgba(244,246,249,.86);font-size:14.5px;}
  .ww-page-subnav{position:static;display:block;box-shadow:none;border:0;background:transparent;
    margin:0;padding:0 0 0 16px;backdrop-filter:none;-webkit-backdrop-filter:none;}
  .ww-page-subnav li a{padding:10px 4px;border-bottom:1px dashed rgba(143,192,249,.1);
    color:rgba(195,221,252,.75);}
  .ww-page-actions{flex-direction:column-reverse;align-items:stretch;gap:14px;margin-top:20px;}
  .ww-page-lang{display:none}
  .ww-page-actions .ww-hero-search{width:100%;}
  .ww-page-actions .ww-hero-search input{opacity:1;width:auto;padding-left:16px;}
  .ww-page-actions .ww-btn{width:100%;}
}
@media (max-width:640px){
  :root{--pad:18px}
}

/* 15. Utilities /  WhatsApp global
   ========================================================= */
body:not(.ww-home-body) .heynds-home-whatsapp{
  position:fixed;right:22px;bottom:22px;z-index:80;
  width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.55),0 0 0 6px rgba(37,211,102,.14);
  font-size:24px;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s ease;
  animation:ww-wa-pulse 2.8s ease-in-out infinite;
}
body:not(.ww-home-body) .heynds-home-whatsapp:hover{transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 32px -8px rgba(37,211,102,.7),0 0 0 8px rgba(37,211,102,.18);color:#fff;}

/* post-hero home transition (heynds sections after ww-hero-shell) */
body.ww-home-body + .heynds-section,
body.ww-home-body .heynds-section{margin-top:0;}

/* homepage after hero layout: only index.html has hero, rest uses heynds-body.
   The heynds-home sections are appended after the </section> of hero, but on
   ww-home-body we force overflow visible on children *after* hero once we exit shell scope. */